このページの本文へ

ソニーグループ、FlashやめてAjaxでリニューアル

2008年09月12日 04時00分更新

小橋川誠己/ASCII.jp

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

 画像がダイナミックに切り替わり、マウスオーバーに合わせてナビゲーションバーが変化する――そんな“動きのあるサイト”を作るのに、あなたなら今、何を使うだろうか? 4~5年前ならほぼ間違いなく「Flashで決まり!」だったかもしれないが、2005年以降、Ajax/JavaScriptを使うサイトが増えている。最近では手軽に実装できるライブラリの充実とともに、ますますその傾向にあるようだ。

 9月9日にリニューアルされたソニーグループのコーポレートサイトwww.sony.co.jp)もその一つ。旧サイトに比べてトップページのレイアウト領域が広くなり、文字も大きく、スッキリとしたナビゲーションバー……と、注目したいところはいろいろあるが、最初に目を奪われるのは中央にある大きなメインビジュアル部分のはずだ。実はここにJavaScriptが使われている。

SONY
9月にリニューアルされたソニーグループのコーポレートサイトのトップ(http://www.sony.co.jp/)

SONY
新しいサイトではJavaScriptで画像を切り替えるようになった
SONY
リニューアル前のsony.co.jp。メインビジュアル部分はFlashアニメーションだった

 数秒おきに内容が横スクロールで切り替わるメインビジュアル部分には、ソニーがスポンサー契約しているスポーツ選手の紹介、環境への取り組み、新製品のイメージなどが表示されている。リニューアル以前のサイトにも同様のビジュアルがあったが、Flashアニメーションだった。リニューアルによってFlashからJavaScriptへ置き換えられたのだ。

 JavaScriptが使われている部分はほかにもある。メインビジュアルに少し重なるように配置されたナビゲーションバーには、ちょっとした工夫がされている。よく見かけるのは、マウスオーバーさせると文字や背景色が変わるパターンだが、sony.co.jpではリンク先のページのサムネイルが表示されるのがおもしろい。

SONY
マウスオーバーでリンク先のサムネイルを表示するナビゲーションバー

SONY
新サイトではタブレイアウトを採用。ソニーのサイトのように情報量が多いサイトでは便利だ

 情報量の多いサイトを運営している人なら、Ajaxを使ったタブレイアウトも参考になるだろう。AV機器から金融商品までさまざまなビジネスを手がけるソニーグループの玄関口となるトップページは、掲載する情報も必然的に多くなる。たとえばページ下部にある「サイト内更新情報」の部分には、「新着」「技術情報」「CSR・環境・社会貢献」「採用情報」「投資家情報」と項目ごとにタブが用意されており、それぞれのページに飛ばなくてもどこが更新されたか、すぐに分かる仕掛けだ。

 sony.co.jpのデザインはコーポレートサイトらしく安定感があり、派手さはないが、JavaScript/Ajaxをうまく使って情報を整理し、やり過ぎない程度に動きをつけて楽しく見せている点がいい。特に情報量の多いサイトを作るときの1つのよいお手本として、参考になりそうだ。

■関連サイト

Web Professionalトップへ

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

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

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

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

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

ランキング