このページの本文へ

  • twitterでつぶやく
  • はてなブックマークに登録
  • del.icio.usに登録
  • livedoorクリップに登録
  • Buzzurlに登録
  • StumbleUponに登録
  • Google Bookmarksに登録
  • Facebookでシェア
  • Yahoo!ブックマークに登録
  • お気に入りに登録
  • 本文印刷

N-04A Special Site: Googleマップ × Flashの新たな可能性

ケータイ、空を飛ぶ――地図を地図として使わないサイト

2009年02月13日 08時00分更新

文● 小橋川誠己/企画報道編集部


 Googleマップを地図としてではなく、プロモーションサイトのムービーとして使う。そんな興味深いWebサイトがちょっとした注目を集めている。今年1月に発売されたNECの携帯電話「N-04A」のプロモーションサイト「N-04A Special Site」http://www.n-keitai.com/n-04a/sp/)だ。

 デザイン家電ブランドのamadanaとのコラボレーションで生まれた個性的なデザインケータイ、N-04A。N-04A Special Siteはそのプロモーションサイトらしく、デザイン性を重視して作られているフルFlashサイトだ。中でも目を引くのは、何といっても滑らかに動く大きな航空写真。

N-04A 特設サイト
「N-04A Special Site」のトップページ。背景の航空写真が滑らかにスクロールしながら、クロスフェードで切り替わっていく。いきなりインパクトがあるページだ

 画面中央部分に、まるで宙に浮くように表示される「N-04A」の写真画像。その背景で動く航空写真は、左下のロゴで確認できるように、おなじみのGoogleマップが使われている。最近では、テレビ番組などでも時折、イメージカットとして見かけるようになったGoogleマップだが、Webサイト上でここまで大胆に“地図以外”の用途で使う例はなかなか見かけない。

 さらに、ヘッダーに並ぶメニューからN-04Aの特徴を紹介する各コンテンツに移動するときの演出が秀逸だ。ある地点の航空写真が表示されたかと思うと、次の瞬間にはワイヤーフレーム、さらにカラフルなドットパターンへとグラフィックが次々と切り替わっていく。

N-04A 特設サイト
ヘッダーのメニューからコンテンツを選ぶと航空写真の地点が移動。ワイヤーフレーム、ドットパターンと画面が切り替わっていく(切り替わり方はページによって異なる)

 こうしたGoogleマップを使ったFlashアニメーションが実現できるのは、昨年5月、グーグルがFlashで扱えるActionScript用のAPI「Google Maps API for Flash」を公開したからだ。このAPIによって、FlexやFlash ProfessionalでGoogleマップが手軽に扱えるようになっている。Google Codeには、Flash VideoとGoogleマップを同期させたり(関連サイト)、Googleマップ上に独自の地図のイラストを重ねたり(関連サイト)と、Flashならではの興味深いサンプルがある。

 本来の地図としても非常に便利なGoogleマップだが、こうしたちょっと変わった使い方でWebサイトを演出してみるのもおもしろい。Flash開発者は試してみてはどうだろうか。

カテゴリートップへ

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

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