JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。
そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップしてみました。JavaScriptを使った個性的なナビゲーションメニューが、今回のお手本です。
![]() |
|---|
今回のお手本サイト:『Playground Blues』
米国のインタラクション・デザイナー、ネイサン・ボラー氏の個人サイト。自身の経歴や過去の実績のほか、Flashを使った実験的な自主制作作品などを公開。トップページは、Twitterやブログなどの書き込みをまとめたライフログとして機能している。
目で見て楽しい、ユニークなナビゲーション
Playground Bluesを開いた瞬間に目に飛び込んでくるのが、画面左端で波のように動くカラフルなアイコン画像です(動きは一瞬で終わるので注目してください)。アニメーションの動きがやむと、それらのアイコンの端だけが長方形のブロックとして残り、ほかのアイコン部分は画面の外に引っ込んでしまいました。
![]() | ![]() | |
|---|---|---|
| サイトを開くと、一瞬、左端のアイコンが波を打つようにアニメーション。動きが止まると、アイコンは一部を残して画面の外に消えてしまいました | ||
ちょうど、辞書の「ツメ」(ページの端に「A」や「あ」と書いてあるしるしのことです)のようなこのアイコンの端切れに、マウスカーソルを重ね合わせてみましょう。すると、先ほど隠れてしまったアイコンが“ぴょん”と横から飛び出してきました。Playground Bluesでは、このアイコンがグローバルナビゲーションになっていて、アイコンをクリックすると各コンテンツへ移動できます。
![]() |
|---|
| 「ツメ」のようなアイコンの端にマウスを重ねると残りの部分が出現します |
この仕掛け、いわゆるスライディングメニューの一種ですが、その動きのあまりの心地よさに、思わず意味もなくマウスを重ね合わせてしまうほど。さすがはインタラクション・デザイナーのサイトらしい、ユニークなナビゲーションです。今回は、このスライディングメニューの制作にチャレンジしてみましょう。
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ+jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo!の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド!ページ切換法
- 第16回 jQueryアニメ&エフェクト合わせ技で画像を拡大
- この連載の一覧へ






















![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)


