29分でできる！あのサイトの“技”を盗め ― 第21回

意外性が心地よいJSメニューのWebデザイン

2009年04月13日 10時59分更新

文● 古籏一浩、ASCII.jp

　JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。

　そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップしてみました。JavaScriptを使った個性的なナビゲーションメニューが、今回のお手本です。

今回のお手本サイト：『Playground Blues』

米国のインタラクション・デザイナー、ネイサン・ボラー氏の個人サイト。自身の経歴や過去の実績のほか、Flashを使った実験的な自主制作作品などを公開。トップページは、Twitterやブログなどの書き込みをまとめたライフログとして機能している。

Playground Blues

目で見て楽しい、ユニークなナビゲーション

　Playground Bluesを開いた瞬間に目に飛び込んでくるのが、画面左端で波のように動くカラフルなアイコン画像です（動きは一瞬で終わるので注目してください）。アニメーションの動きがやむと、それらのアイコンの端だけが長方形のブロックとして残り、ほかのアイコン部分は画面の外に引っ込んでしまいました。


サイトを開くと、一瞬、左端のアイコンが波を打つようにアニメーション。動きが止まると、アイコンは一部を残して画面の外に消えてしまいました

　ちょうど、辞書の「ツメ」（ページの端に「A」や「あ」と書いてあるしるしのことです）のようなこのアイコンの端切れに、マウスカーソルを重ね合わせてみましょう。すると、先ほど隠れてしまったアイコンが“ぴょん”と横から飛び出してきました。Playground Bluesでは、このアイコンがグローバルナビゲーションになっていて、アイコンをクリックすると各コンテンツへ移動できます。