MooToosでびゅんびゅん動くサイトが登場

Flash不要！JavaScriptで派手なWebデザイン

2008年10月03日 04時00分更新

文● 小橋川誠己／ASCII.jp

　ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。

　パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。


Flashサイトと見間違う「Sebcreation.com」のトップページ。背景画像はランダムに表示

　おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理をFlashではなくJavaScriptで実現している。使われているのは「MooTools」という人気のJavaScriptライブラリだ。


業務内容を紹介するページ。半透明のテキストボックスが飛び出てくるアニメーションが見られる


事例紹介のページ。左上に並ぶ顧客サイトのロゴをクリックすると中央のテキストと画像が切り替わる

　JavaScriptをFlash代わりに使えば、Flashのスキルやツールが不要になる。だが、メリットはそれだけではない。 Sebcreationは「フルFlashのサイトに比べてSEO対策の面で有利だ」とアピールしている。Sebcreationのサイトをよく見てみると、見た目の派手さとは裏腹に、ロゴ部分などを除くとほぼテキスト要素のみ。Flashだけでなく画像もほとんど使われていないのだ。


フッターに配置されたナビゲーションバー。画像ではなくテキストを並べているが、マウスオーバー時の動きに一工夫があり楽しい

　先日、新しいソニーグループのサイトがAjax／JavaScriptを使っていると紹介したが（関連記事）、ソニーの場合はどちらからといえば「シンプルに情報を整理するため」といった意味合いが強く、JavaScriptを使ったWebサイトの例としてSebcreationはソニーの対極にある。インパクトのあるカッコいいサイトを作りたいが、Flashは使えない――そんなとき、Sebcreationのデザインアイデアが参考になる。

■関連サイト