29分でできる！あのサイトの“技”を盗め ― 第25回

Googleマップ＋jQueryで作るAjaxなデザイン

2009年05月26日 11時55分更新

文● 古籏一浩、ASCII.jp

　今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。

　一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。

　今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。

今回のお手本サイト：
『hitotoki―町の文学地図』

　「場所」にまつわる読者の思い出を募り、地図と写真とともに紹介する投稿型のWebマガジン。東京とシアトルに拠点を置く出版社、チン・ミュージックプレスと東京のWebデザイン集団AQが共同で制作・運営している。日本語の東京版のほか、英語のニューヨーク版やロンドン版など各国の都市に対応したサイトがある。

http://hitotoki.org/tokyo/jp/

写真とテキストに合わせて動くGoogleマップ

　hitotokiのトップページを開くとまず目に飛び込んでくるのが、右側に表示されている縦長のGoogleマップです。この地図は通常のGoogleマップと同様、マウスでドラッグ＆ドロップしたり、＋―ボタンで拡大／縮小したりと、ユーザーが自由に操作できます。一方、左側には、大きめの写真画像と見出しなどのテキスト要素、そしてその下に小さめのサムネイル画像が並んでいます。


サムネイル画像の上にマウスカーソルを重ねると、上部のコンテンツが書き換わり、右側の地図もスクロールします

　意外なのは、マウスカーソルをサムネイル画像に重ねたときの動きです。左上のコンテンツ部分がページを遷移せずに部分的に書き換わるとともに、右側の地図も同時に自動的にスクロールするのです。いわゆるAjaxを活用したおもしろい見せ方ですが、地図部分はユーザー側でも自由に操作できるので、チェーン店のWebサイトで、店舗案内などにも使えそうですね。

　この、マウスオーバーによってページ内のコンテンツと地図を連動させて切り替える機能を再現してみましょう。

前へ 1 2 3 4 5 次へ

ツイートする