これ、きれいでいいですね。アイコン販売サイトですが、ドラッグ＆ドロップでショッピングカードにぽんぽん放り込んでいくことができます。 ↑ こんな感じ。 左側のショッピングカートは下のほうにスクロールしていってもちゃんとついてきてくれますね。わかりやすい。 実際に動作している様子は以下からどうぞ。 » IconDock – The Art of Stock Icons
ドラッグ＆ドロップできるショッピングカート | SIMPLE*SIMPLE
これ、きれいでいいですね。アイコン販売サイトですが、ドラッグ＆ドロップでショッピングカードにぽんぽん放り込んでいくことができます。 ↑ こんな感じ。 左側のショッピングカートは下のほうにスクロールしていってもちゃんとついてきてくれますね。わかりやすい。 実際に動作している様子は以下からどうぞ。 » IconDock – The Art of Stock Icons
検索結果の説明文からキーワードを追加できるインターフェース | SIMPLE*SIMPLE
検索結果にコメントなんかをつけられるScourですが、ちょっとおもしろいインターフェースを採用していますね。 検索したあとのサイトの説明文に出てくる単語をダブルクリックすると以下のようなメニューが。 ↑ この単語を追加したり、除外したりできますよ。 追加するよりも除外するために使えそうだなぁ、と思ったり。実際に動作している様子は以下からどうぞ。 » Scour – Search Socially
穴埋めさせて入力させやくするフォームのインターフェース | SIMPLE*SIMPLE
えらい細かいことですが、FacebookのTwitter的機能のインターフェースが素敵ですね。入力しようとすると穴埋めちっくな文書が現れるので、何を書くべきか迷うことがありません。 ↑ 今何しているの？と聞かれてクリックすると・・・。 ↑ （自分の名前）は・・・と答えを途中まで書いてくれます。 実に細かいことですが、こうすることで入力の敷居を下げているのかもしれませんね。また自分の名前がフォームに出てくるというのも当事者意識が高まって良いかと。 こういう細かい工夫は大事にしたいところですね。 » Facebook | Home
The New York Timesでわからない単語があったらダブルクリックすればOK、というお話 | SIMPLE*SIMPLE
The New York Timesを見ていたら「Tip」なる注意書きがひっそりと文末に。 ↑ 意味がわからない単語があったらダブルクリックせよ、とのこと。 お、そうなんだ！と思ってやってみるとそのとおりでした。すごいよ、NYT。一見リンクに見えないのにクリッカブルというのがすごい（ユーザビリティ的にどうよ、という話もあるでしょうが）。 ↑ こんな感じで意味を教えてくれるウィンドウがポップアップします。 すべてのニュースサイトはこうあるべきではないか、とちょっと思ったりしましたね。実際に動作している様子は以下からどうぞ。 » Can You Become a Creature of New Habits? – New York Times
著者プロフィールの横に最新記事一覧を | SIMPLE*SIMPLE
複数のライターさんで運営されているニュースサイトでは記事の最後に書いた人のプロフィールがありますよね。そこにあるのは名前だけだったり、写真だけだったりとまちまちですが、最新記事一覧があるのは良いな、とCollegeHumorをみて思いました。 ↑ こんな感じ。 「あ、この人面白いな」と思ったら他の記事も読んでみたくなるものです。そこへの導線として最新記事のタイトルがあると効果的ですよね。ちょっとしたことですが、こうした工夫がPVを伸ばすのではないかな、と。 » “Stereotypical Teen Movie from The Cool Kid” by Sarah Schneider on CollegeHumor
料理の写真にレシピの説明を加えられるインターフェース - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
いわゆるレシピサイトのOpen Source Gourmetでは、料理の写真を貼り付けるとレシピも一緒に見られるようになっているようだ。 ↑ おいしそうな写真。右下に「View Recipe」なるボタンが。 ↑ クリックするとこのようにレシピが現れます。これはいいかも。 こういう説明付きの写真を貼り付けられる、という機能はいいですね。「貼り付け」機能がクチコミのエンジンになっている今、こうした便利なインターフェースも研究していきたいですね。 実際に動作している様子はこちらから。 » Strip Vote! » Yongfook | Web Producer and Usability Consultant based in Tokyo
「単純に並べるだけ」じゃないインターフェース（Badoo） | SIMPLE*SIMPLE
最近SNS系のインターフェースを見ていると、写真を自動でかっこよく並べてくれるインターフェースがちらほらと登場しているようです。 普通、写真をいくつかアップすると、同じサイズでずらずらと並ぶだけです。 しかしBadoo.comでは写真をアップするだけで、自動的にサイズをばらばらにして並べてくれます。 ↑ こんな感じ。雑誌みたいでいいですよね。 ちょっとしたことですが、こうしたセンスある仕掛けは随所に組み込みたいですよね。実際に動作している様子はBadoo.comで会員登録して見てみてくださいね。 » Badoo
サイトツアーをサイト上で行うインターフェース（Yahoo! Finances） | SIMPLE*SIMPLE
ちょっと調べたいことがあって、米国Yahoo!のファイナンスページに行ったら「サイトがバージョンアップしました！新機能を紹介するツアーを行いますか？」とメッセージ。 もちろん！と思って「Yes」をクリックしたら、サイト上でツアーを始めてくれました。新機能が加わったところに吹き出しが現れて説明をしてくれます。 ↑ こんな感じ。 そして「次の機能へ」をクリックすると、画面がずずっとスクロールして、次の新機能を説明する吹き出しが。 ↑ スクロールしていく様子が気持ちいい。 こういう新機能のツアーは別のページや映像で行う場合が多いですが、こうしてサイト上で行ってくれるのも悪くないですね。 ただ、初回しか見る事ができないので「また見たいなぁ」というときに探しにくい、とか、見れないとかのデメリットはありそうですが・・・。 動作している様子は以下からどうぞ。 » Yahoo! Finance
スライダーでブログの過去記事を検索できるインターフェース | SiMPLE*SiMPLE
スライダーでブログの過去記事を検索できるインターフェース August 23, 2007 5:30 AM written by Gen Taguchi Save the assistants.comのブログのインターフェースがちょっと気になります。過去記事へのアクセスをスライダーで行うことができるのです。 ↑ こんな感じ。Ajaxな感じで、スライドさせると動的にページをロードしてくれます。 「次のページ」「1 > 2 > 3 >」といったインターフェースより直感的でよいですね。 » save the assistants Info: ナビゲーション | 固定リンク | コメント (0) | トラックバック (0) | ↑
ページのナビゲーションがちょっと楽になるTreehuggerのインターフェース | S i M P L E * S i M P L E
前から気になっていたTreehuggerのインターフェース。 ページの右側がちょっと変わっています。 ↑ ページの右側に「Click To Jump」というバーがあります。 ページの右側に点線で囲われたエリアがあって、そこをクリックすれば一画面ずつスクロールしてくれる、という仕組み。 狭いスクロールバーまでマウスを持っていかなくても、ざっくり右側でクリックすればOKという工夫ですね。 便利そうなシーンは限られるかもしれないですが、ユニークなインターフェースだったのでご紹介しておきます。 » TreeHugger
イメージマップをAjaxで生成『HTML-Image map Creator』 | SiMPLE*SiMPLE
イメージマップをAjaxで生成『HTML-Image map Creator』 December 23, 2006 12:40 AM written by Gen Taguchi これ、ちょっと便利。画像の特定部分がクリッカブルになっている「イメージマップ」を簡単に作れます。ツールがちょっと手元にないなぁ、なんてときに便利。 ↑ 作業はこんな感じで。画像のURLを指定し、画像上でダブルクリックして線引きを開始。そのあとクリックして領域指定、ダブルクリックで終了。 ↑ 作業結果はリアルタイムでコードに反映されていきます。<img>タグの中身や、リンク先は手作業で変更。 最近「イメージマップ」がはやっているかどうかが微妙ですが（なんかユーザビリティ/アクセシビリティ的に問題ありそう）、知っておいて損はないですな。よろしければどうぞ。 » HTML-Image map Creator WYSIW
Error 404 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
スクロールしても消えないドロップシャドウの作り方 July 30, 2007 4:40 PM written by Gen Taguchi メモ書きもかねてエントリー。ページをスクロールしていってもページの上や下にドロップシャドウを貼り付けておく方法。 ↑ このようなドロップシャドウですが・・・。 ↑ スクロールしても付いてきます。 サイトに立体的な効果をつけたいときに使えそうですね。いろいろ応用も利きそうです。 なお、PNGの透過部分を使っているのでInternet Explorerでは動きません。実際に動いているデモはこちらから。 詳しい作業ステップは以下のサイトからどうぞ。 » Scrolling Drop Shadows | Zooiblog Info: デザイン全般 | 固定リンク | コメント (0) | トラックバック (2) | ↑ この記事のトラックバックURL （
お問い合わせ画面でFAQをリアルタイム表示 | SIMPLE*SIMPLE
家系図をつくれるサービス、Geniのお問い合わせ画面がなかなか便利です。 ↑ 普通の問い合わせ画面ですが、内容を入力しはじめると・・・。 ↑ その言葉をリアルタイムに解析して関連するFAQを表示してくれます。 他のサイトでも採用されているようですが、わかりやすいですよね。サポートコストが大変・・・というサイトで採用してみてはいかがでしょうか。 実際に動作している画面は以下からどうぞ。 » Geni – Help Center なお、元ネタはAjaxianでした。 » Ajaxian – Geni Smart Contact Form
Pownceに見るインターフェースの小技 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
さて日本でもJOJOに登録者が増えつつあるPownce。招待状をもらったのでインターフェース的なところでレビュー。このサービス、基本的にはTwitterと同じものですが、Diggの創業者が手がけていることもあって注目されています。 ちょこっと触っただけですが、Twitterとの違いは以下のとおり。 メッセージだけではなく、ファイルやイベント情報などを送信できます。 標準でローカルのクライアントツールがついてきます。これがちょっとかわいい。AdobeのAIRをつかっているようですね。 有料プランがあります。大きなファイルが送れたり、「PRO!」のバッジがついたり、広告がなくなったりするようです。年間20ドル。うーん、微妙ｗ まだAPIがないので関連ツールとかはこれからの模様・・・。 現在のところ、日本語とおりません・・・orz。 ・・・ま、どうなるかわかりませんが、一応話題になっているので新
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コメントしてくれた人の最新ブログ記事タイトルを表示 | SIMPLE*SIMPLE
Windowsっぽいユーザーログイン画面のインターフェース | SIMPLE*SIMPLE
ポピュラーな選択肢が羅列されていてクリックすればいいだけの検索フォーム『Circos』 | SIMPLE*SIMPLE
難易度を表すアイコン - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
マンガ風でやけにわかりやすいインターフェース（bitstrips.com） | SIMPLE*SIMPLE
moveme.comのエラーメッセージ（というか表現） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
