このページの本文へ

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

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

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

小橋川誠己/ASCII.jp

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

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

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


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

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


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

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

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

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

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

■関連サイト

カテゴリートップへ

ソーシャルランキング
  1. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 164
  2. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 62
  3. コンテンツマーケティングのセミナーに行く前に読んでおきたい記事8選 11
  4. いまから本気で取り組む!SVGの入門から活用に役立つ記事9連発まとめ 8
  5. 【週末まとめ読み】Google Fontsのぶっちぎりな進化に驚いた! 5
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1021
  10. 「シングルページ」流行の7つの理由と最新事例まとめ 705
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング