このページの本文へ

DESIGN 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

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

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

Playground Blues


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

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

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

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

お手本サイト
「ツメ」のようなアイコンの端にマウスを重ねると残りの部分が出現します

 この仕掛け、いわゆるスライディングメニューの一種ですが、その動きのあまりの心地よさに、思わず意味もなくマウスを重ね合わせてしまうほど。さすがはインタラクション・デザイナーのサイトらしい、ユニークなナビゲーションです。今回は、このスライディングメニューの制作にチャレンジしてみましょう。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング