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

英国の映像作家も使うJS製LavaLampメニュー

2009年05月18日 11時00分更新

文● 古籏一浩、ASCII.jp

　シンプルなWebデザインに、ちょっとしたアクセントとなる装飾要素を加えたい――。そんなときに参考になるWebサイトを見つけました。英国の映像作家スティーブ・ブックバインダー氏のサイト「Steve Bookbinder」です。

　白を基調とし、余白を広くとったこのWebサイトは、映像作家らしく、作品紹介を中心に構成されています。埋め込みの動画プレーヤーとサムネイル画像を除けば、ほぼテキストのみで制作されているきわめてシンプルなデザインに見えます。

　ところが、そんなこのサイトにも、1箇所だけ、JavaScriptを使った意外な装飾を加えている場所があります。それがヘッダーに設置されたグローバルナビゲーションです。今回はこのサイトのシンプルな装飾テクニックをお手本としましょう。

今回のお手本サイト：『Steve Bookbinder』

　英国の映像作家／ディレクターであるスティーブ・ブックバインダー氏のオフィシャルサイト。自身のプロフィールのほか、各種コンテストの受賞作品やジャンルごとの代表作などを紹介している。作品の一部は、埋め込み型の動画プレーヤーで実際に視聴して楽しめる。

http://www.stevebookbinder.co.uk/

独特の動きを持つ「ラバランプ」型のナビゲーション

　見た目のデザインだけでなく、サイト構造も非常にシンプルなSteve Bookbinder。ページのヘッダー部分にあるグローバルナビゲーションも、一見すると単純にテキストを横に並べただけのように見えます。


一見するとテキストの羅列に見えるナビゲーションですが……

　では、マウスカーソルをメニューに重ねてみましょう。すると、予想外の動きに「おっ」と思われるのではないでしょうか。ナビゲーションポインタの画像が、実際のマウスカーソルの動きから少し遅れて追従し、伸縮する面白い動きをするのです。

マウスを重ねて動かすと、少し遅れて背景部分が追随する（※実際の画面の一部を動画キャプチャし、Flashで再生しています）


Photo by Tweek　http://www.flickr.com/photos/tweek/1744713/

　この変わった動きのナビゲーションメニューは、「ラバランプ（Lava Lamp）型メニュー」と呼ばれています。ラバランプとは、輸入雑貨店の店頭などで見かけることがある、水性と油性の液体がランプの熱で暖められてウネウネと動く照明器具のことです。「lava（溶岩）」のような独特の動きをメニューに再現したのが「ラバランプ型メニュー」というわけです。

　ラバランプ型メニューは意外性がありますが、Steve Bookbinderのようなシンプルなデザインのサイトでもメニューに必要以上の存在感を主張せず、デザイン上のアクセントを加えるのに適しています。さっそく既存のWebサイトに組み込んでみましょう。

前へ 1 2 3 4 5 次へ

ツイートする