FAQには最終更新日を

すでに多くのサイトで採用されているインターフェースではありますが、気をつけていないと忘れてしまうかもしれないので念のためにエントリー。 WUFOOではFAQページの下に最終更新日が記載されていますね。ここのページには問題を抱えている人が来るだけに、あまりに古い更新だとうっかり信用を落としかねないです。 ↑ これ、重要かと。 地味な項目ですが、「FAQには最終更新日を!」は大事ですよね。 » Wufoo Docs » Unplugged

ネコ用商品を販売しているページにネコを抱えた販売員の映像が

サイト上に人が出てきてしゃべりだす、というエフェクトはよく見ますが、ターゲットをうまいこと理解している映像だったのでご紹介。 ネコ用のドアを売っているサイトで、左下に次のような映像が。 ↑ ネコを抱えた販売員。 抱かれているネコがいい感じにフリーダムで微笑ましいです。ネコを飼っている人ならちょっと見入ってしまうのでは。なかなかうまいですな。 実際に動作している様子は以下からどうぞ。 » Pet Porte® Microchip Cat Flap – Stops Cats Bullying!™

ブログにBGMをつける

「A VC」のブログでは固定位置に現れるフッターにミュージックプレイヤーがついている。 ↑ こんな感じ。 長文系の記事をじっくり読みたいときは確かにこうしてハンディなBGMがあると便利かもしれない。ブログにBGM、というインターフェースも悪くないですな。 実際に動作している様子は以下からどうぞ。 » A VC

「次の画像へ」にマウスオーバーするとプレビューが見れるインターフェース

写真を数枚表示するコンテンツは多々ありますが、「次の画像へ」のときにプレビューを見せてくれると助かりますね。 ↑ こんな感じ。 マウスオーバーすると表示されるようになっているようです。ちょっとしたことですが気が利いていますね。 実際に動作している様子は以下からどうぞ。 » Breakfast in America and Around the World | Family Breakfast | Reader’s Digest

読み込み中に「うさぎをなでる」アニメーション

やられた。FriendOrFollowで、待ち時間中のアニメーションが素敵です。 ↑ かわいい! これなら待ち時間も苦じゃないですねw。 ↑ せっかくなので貼ってみた。 実際に動作している様子は以下からどうぞ。「小動物をなでる」というブームが来そうだな、と思ったりw。 » FriendOrFollow.com – Who’s not following you back? Who aren’t you following?

本文を選択すると検索ボックスに自動入力されるインターフェース

「頭の中」さんのブログ、ちょっとおもしろいインターフェースを搭載していますね。 本文中の気になる単語をドラッグするとそのまま検索ボックスに自動入力されます。 ↑ こんな感じ。 個別ページでしか動作しないようですが、ユニークな仕組みですね。個人的にはFirefoxで「Easy DragToGo」を使っているので大丈夫ですが、人によっては便利そうですね。 実際に動作している様子は以下からどうぞ。 » 携帯への迷惑メールがフィルタを通り抜けてきた – 頭ん中

商品画像の一部をズームできるショッピングサイト

JavaScriptでこういう効果を実現するライブラリがありましたが、ショッピングサイトで実装されているのは初めて見たかも。なかなか良いですね。 ↑ 商品画像の上でマウスオーバーすると右に拡大画像が。 LightBoxと同じぐらい普及してくればいいのになぁ、と個人的には思ったり。 実際に動作している様子は以下からどうぞ。 » Pretty Bitter – Stationery that pushes the envelope ■ 関連記事 あらゆるページに拡大鏡を追加できる『Loupe.js』 | SiMPLE*SiMPLE 画像がズームしながら浮かび上がってくる特殊効果 | SiMPLE*SiMPLE 拡大鏡インターフェース | SiMPLE*SiMPLE

現行機種との比較がわかりやすい「ニンテンドーDSi」サイトのインターフェース

新しいDSは画面が大きくなったようですが、公式サイトではそれをうまいこと表現していますね。 ↑ 右が現行、左が新型。 マウスでインタラクティブに動かせるのでどれだけ大きさが違うか二つ手にとって比べてみてるような感覚になりますね。わかりやすい。 実際に動作している様子は以下からどうぞ(メニューの一番右です)。 » ニンテンドーDSi

買い物するとハッピーになるショッピングカート

これはうまい。ショッピングカートの表情がその中身によって変わりますw。 ↑ 何も入っていない状態。 ↑ 何か入った状態w。 なんだか微笑ましいですよね。いつかどこかで使ってみたいですね。実際に動作している様子は以下からどうぞ。 » Threadless T-Shirts – Designer Clothing Submissions – Tees, Tshirts and T shirts! なお、37 Signalsからの情報でした。 » [Screens Around Town] Anthropologie, Threadless, and Gawker – (37signals)

ユーザー登録不要ですよ、が一発でわかるインターフェース

画像アップローダーのPicamaticがシンプルすぎですねw。ユーザー登録不要なのですが、実にわかりやすく表現しています。 ↑ 打ち消し線は直感的でわかりやすいですね。 ちなみにここをクリックするとFAQの「会員登録は?」部分が浮き上がってくるというギミックになっています。こちらもおもしろいので是非クリックしてみてください。 ↑ ここで該当する部分がぐぐーっとあがってきます。 あとおまけ。右上部分のちょっとしたメッセージがランダムに変わるのですが、なかなか小粋な感じです。 ↑ 「ここはあなたの広告スペースではない」・・・わかりやすいっすね。 シンプルなウェブサービス作りたい方にはお手本になるのではないでしょうかね。是非いじってみてください。 » Picamatic – Upload images in one click!