シンプルなWebデザインに、ちょっとしたアクセントとなる装飾要素を加えたい――。そんなときに参考になるWebサイトを見つけました。英国の映像作家スティーブ・ブックバインダー氏のサイト「Steve Bookbinder」です。
白を基調とし、余白を広くとったこのWebサイトは、映像作家らしく、作品紹介を中心に構成されています。埋め込みの動画プレーヤーとサムネイル画像を除けば、ほぼテキストのみで制作されているきわめてシンプルなデザインに見えます。
ところが、そんなこのサイトにも、1箇所だけ、JavaScriptを使った意外な装飾を加えている場所があります。それがヘッダーに設置されたグローバルナビゲーションです。今回はこのサイトのシンプルな装飾テクニックをお手本としましょう。
![]() |
|---|
今回のお手本サイト: 『Steve Bookbinder』
英国の映像作家/ディレクターであるスティーブ・ブックバインダー氏のオフィシャルサイト。自身のプロフィールのほか、各種コンテストの受賞作品やジャンルごとの代表作などを紹介している。作品の一部は、埋め込み型の動画プレーヤーで実際に視聴して楽しめる。
独特の動きを持つ「ラバランプ」型のナビゲーション
見た目のデザインだけでなく、サイト構造も非常にシンプルなSteve Bookbinder。ページのヘッダー部分にあるグローバルナビゲーションも、一見すると単純にテキストを横に並べただけのように見えます。
![]() |
|---|
| 一見するとテキストの羅列に見えるナビゲーションですが…… |
では、マウスカーソルをメニューに重ねてみましょう。すると、予想外の動きに「おっ」と思われるのではないでしょうか。ナビゲーションポインタの画像が、実際のマウスカーソルの動きから少し遅れて追従し、伸縮する面白い動きをするのです。
マウスを重ねて動かすと、少し遅れて背景部分が追随する(※実際の画面の一部を動画キャプチャし、Flashで再生しています)
![]() |
|---|
| Photo by Tweek http://www.flickr.com/photos/tweek/1744713/ |
この変わった動きのナビゲーションメニューは、「ラバランプ(Lava Lamp)型メニュー」と呼ばれています。ラバランプとは、輸入雑貨店の店頭などで見かけることがある、水性と油性の液体がランプの熱で暖められてウネウネと動く照明器具のことです。「lava(溶岩)」のような独特の動きをメニューに再現したのが「ラバランプ型メニュー」というわけです。
ラバランプ型メニューは意外性がありますが、Steve Bookbinderのようなシンプルなデザインのサイトでもメニューに必要以上の存在感を主張せず、デザイン上のアクセントを加えるのに適しています。さっそく既存のWebサイトに組み込んでみましょう。
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ+jQueryで作るAjaxなデザイン
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第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)




