「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」
そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。
たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。
Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。
今回のお手本サイト：
『ハーズ実験デザイン研究所』
Xbox 360などで知られるプロダクトデザイナー・村田智明氏が代表を務めるデザイン事務所のWebサイト。過去に同社が手がけてきた作品をスライドショー感覚で見られるように、フルFlashで制作されている。ほかに、会社概要や事業内容、求人情報といったコーポレートサイトの基本的な要素からなる。
心地いい動きのナビゲーションに学ぶ
「ハーズ実験デザイン研究所」のメインコンテンツは、自社のデザイン作品を紹介する「TOUR」のページです。さまざまな角度からとらえた作品のアップや利用シーンなど、1つの作品につき3～6カットほどの写真が大きく画面に映しだされ、ゆっくりとスクロールしながら切り替わっていきます。
ところがこのTOURのページ、一見すると他の作品に表示を切り換えたり、一覧的に見るためのメニューが見当たりません。そこで、試しに左上にあるサムネイル画像にマウスカーソルを合わせてみましょう。すると、そのサムネイル画像のすぐ下に、小さな作品写真がずらっと縦に並びました。実はサムネイル画像の下に、作品を切り換えるためのナビゲーションが隠されていたのです。
サムネイルが表示されているところにマウスカーソルを重ねると、他の作品の一覧が縦に伸びてきます。これがこのページのナビゲーションになっています
こうした一連の切り替え処理は、Flashサイトらしく、とても滑らかなアニメーションによって心地いい動きを見せてくれます。今回は、この縦に伸びるスライドパネルのナビゲーションをJavaScriptで作ってみましょう。
