Webデザイントレンド定点観測 「Contact（コンタクト）」ページの地図あれこれ
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
「Webデザイントレンド定点観測」第2回目にとりあげるのは、日頃あまり脚光の当たらない「Contact（コンタクト）」ページです。
海外のWebサイトを巡回する際に「Contact」をクリックしますと、以下の情報が掲載されているパターンが多いですね。
– お問い合わせフォーム
– 住所、電話番号、メールアドレス
– 地図
– SNSアカウント
今日は、その中でも「地図」に着目してみます。
日本のWebサイトで地図が掲載されているのは「アクセス」「会社情報」などのページという印象が強いのですが、「Contact」に地図を載せる欧米圏の習慣に、今回はじめて気がつきました。
さて、その地図。最近は、手で書き起こした地図よりも、色やマーカーをカスタマイズしたGoogleマップを掲載しているページを、よく見かけます。レスポンシブなレイアウトの中に配置されていることも多く、外出先にてモバイル端末で閲覧する用途にも有用と言えるでしょう。
では、ピックアップした11個のサイトを、ご紹介していきます。
Intercore – Contact
埋め込まれたふたつのGoogleマップを、サイト全体のカラーである濃いブルーグレーにカスタマイズしたパターン。マーカーもサイトのアクセントカラーに揃え、抑制されたカラーリングを実現しています。Googleマップなので、もちろん周囲にスクロールしていくことも可能となっています。
Intercore – Contact
New York and Seattle Ecommerce Web Design Agency | LiveAreaLabs
これも薄いグレーにカスタマイズされたGoogleマップですが、とにかく画面いっぱいを埋め尽くすようなレイアウトが特徴的です。1ページに2地図が掲載されていますが、PCのブラウザでスクロールするときの、ヘッダの色の変化もチェックしてみてください。
New York and Seattle Ecommerce Web Design Agency | LiveAreaLabs
Activate Media – Contact
グローバルナビゲーション直下に、まるでメインイメージのような扱いで、横幅いっぱいに埋め込まれたGoogleマップです。ロゴマークが一部重なっているところが、ちょっと特徴的ですね。色とマーカーは、ほぼデフォルト状態です。
Kontakt, Anfahrt, Öffnungszeiten | Q2 Werbeagentur Wels
住所、電話番号などの情報に加え、地図の下部にスタッフ紹介も掲載されている「Contact」ページです。モノクロームなサイトのカラースキームに合わせて、薄いグレーにカスタマイズされたGoogleマップは、マーカーがロゴマークになっています。
Kontakt, Anfahrt, Öffnungszeiten | Q2 Werbeagentur Wels
Fair State Brewing Cooperative
住所、メールアドレス、SNSアカウントなどの基本情報を、暗い背景の中に余白を取ってコンパクトにまとめ、それと対比するように、鮮やかなデフォルトのカラーリングのGoogleマップを横幅いっぱいに利用したパターン。余談ですが、このように道路が碁盤の目状になった都市は、広く配置した地図が様になりますね。
Fair State Brewing Cooperative
Contact | Skadi
コンタクトフォームの上部に、薄いグレーにカスタマイズされたGoogleマップが、横幅いっぱいに埋め込まれているパターンです。シンプルな1カラムのレイアウトは、画面の小さいモバイル端末で見ても、使いやすい印象です。
ViewFlux – Contact
こちらは、同じくコンタクトフォームとの組み合わせですが、フォームの横にさりげなく小さめにGoogleマップが使われているパターン。
aBenção – malhas e tricots criativos
ここまでのパターンとはちょっと違い、磁石や舵の写真を使って、宝の地図のような印象にデコレーションされた、Googleマップです。長い1ページの一部に設置されており、スクロールしていくと、舵の写真がくるくる回る遊び心があります。マーカーには、ロゴマークを利用。
aBenção – malhas e tricots criativos
Numbrs Office and Contact Details – Numbrs
Googleマップを利用しているのに、実用性はほとんどなく、ヘッダ部分の装飾にしてしまっているパターン。ヨーロッパを一望できます。
Numbrs Office and Contact Details – Numbrs
Why Interactive | Wi Designs Websites and Apps.
Googleマップではありませんが、背景に地図を大胆にあしらったページをみつけました。レントゲン写真のように、道路だけが抜き出されてグラフィカルな要素として利用されています。
Why Interactive | Wi Designs Websites and Apps.
Tool of North America
おまけです。「VIEW MAP」をクリックすると、Mac OS X Mavericksの「マップ」が起動する「Contact」ページがありました。iOSで閲覧した場合も「マップ」アプリにジャンプします。実用性重視なパターンですね。
外出先のモバイル端末で利用することも多い地図のページは、美しさと機能性両方が求められています。今後もアプリやAPIの発達により、新しい地図表現が出てくるのではないかという期待が高まる、今月の観察でした。
（了）