このページの本文へ

DESIGN 29分でできる! あのサイトの“技”を盗め ― 第18回

あのFlashサイトのUIをjQueryで作る

2009年03月18日 06時00分更新

古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

 「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」

 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。

 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。

 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。

「ハーズ実験デザイン研究所」

今回のお手本サイト:
『ハーズ実験デザイン研究所』

Xbox 360などで知られるプロダクトデザイナー・村田智明氏が代表を務めるデザイン事務所のWebサイト。過去に同社が手がけてきた作品をスライドショー感覚で見られるように、フルFlashで制作されている。ほかに、会社概要や事業内容、求人情報といったコーポレートサイトの基本的な要素からなる。

http://www.hers.co.jp/


心地いい動きのナビゲーションに学ぶ

 「ハーズ実験デザイン研究所」のメインコンテンツは、自社のデザイン作品を紹介する「TOUR」のページです。さまざまな角度からとらえた作品のアップや利用シーンなど、1つの作品につき3~6カットほどの写真が大きく画面に映しだされ、ゆっくりとスクロールしながら切り替わっていきます。

 ところがこのTOURのページ、一見すると他の作品に表示を切り換えたり、一覧的に見るためのメニューが見当たりません。そこで、試しに左上にあるサムネイル画像にマウスカーソルを合わせてみましょう。すると、そのサムネイル画像のすぐ下に、小さな作品写真がずらっと縦に並びました。実はサムネイル画像の下に、作品を切り換えるためのナビゲーションが隠されていたのです。

「ハーズ実験デザイン研究所」
サムネイルが表示されているところにマウスカーソルを重ねると、他の作品の一覧が縦に伸びてきます。これがこのページのナビゲーションになっています

 こうした一連の切り替え処理は、Flashサイトらしく、とても滑らかなアニメーションによって心地いい動きを見せてくれます。今回は、この縦に伸びるスライドパネルのナビゲーションをJavaScriptで作ってみましょう。

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

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

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

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

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

ランキング