+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< April 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< 笑い?感動!?結婚式の余興ムービーまとめ | main | 優れたWebサイトのパーツデザインをあつめた「ブブンデザインアーカイブ」 >>
ネタに困らないための、タイプ別・フロアマップ・案内図まとめ 28サイト【国内施設】
floamap.jpg

Web制作をしているとさまざまなインフォグラフィックの制作に関わることもおおいです。
毎回斬新なものや、情報の見せ方に優れているものを心がけますが、なかなかそうも行きません。インプットは大事です。

身近なインフォグラフィックの例として施設のフロアマップを特集してみました。
今回はグラフィックデザイン的な見せ方よりも、Webの演出も含めた独自の視点になってます。
見せ方別にカテゴライズしてみました。



階層スケルトンタイプ

フロアボタンにマウスオーバーすることで、施設が透けてフロアの位置が明確になる仕組みです。
詳細な各フロアごとのマップは詳細ページに遷移する流れのものが多いです。
施設の階層が多い場合に使用される表現です。


■東京ミッドタウン
http://www.tokyo-midtown.com/jp/shop-restaurants/floor/index.html

オーソドックスなタイプです。
floa_01_01.jpg



■阪急西宮ガーデンズ
http://nishinomiya-gardens.com/floor/

こちらも同様のつくりです。詳細マップはFlashでインタラクティブに見ることができます。
floa_01_02.jpg



■東京国際フォーラム
http://www.t-i-forum.co.jp/general/guide/

選択したフロアが手前にスライドしてきます。
floa_01_03.jpg



■アクロス福岡
http://www.acros.or.jp/r_facilities/

グラフィックがパースの効いた3Dになっています。
仕組みは東京国際フォーラムと似ています。
floa_01_04.jpg



■錦糸町駅ビル テルミナ
http://www.termina.info/floor.html

やや動きのある見せ方です。
floa_01_05.jpg



■LUMINE
http://www.lumine.ne.jp/shinjuku/map/index.php

見せ方のバリエーションとして。シンプルに見せています。
floa_01_06.jpg



■spiral
http://www.spiral.co.jp/f_guide/index.html

かなり簡略化されていますが綺麗です。
マウスオーバーで各フロアと選択フロアのマージンが広がることでわかりやすくなっています。
floa_01_07.jpg



GoogleMapタイプ

GoogleMapのようにドラックすることでフロア全体を把握できるようになっているタイプです。シームレスに拡大縮小できるものや、店舗などの細かい情報まで表示できるものなどバリエーションも多いです。あまり、階層の多くないショッピングモールなどの施設に適しています。


■御殿場プレミアムアウトレット
http://www.premiumoutlets.co.jp/gotemba/brands/floor_map.html

二つのゾーンに分かれており、それぞれをGoogleMap風に閲覧できます。
floa_02_01.jpg



■mori AEON LakeTown
http://www.aeon-laketown.jp/mori/shop/floor.html

こちらはドラッグでの移動に加え、マウスホイールでの拡大縮小、ダブルクリックでの店舗情報の表示が行えます。
floa_02_02.jpg



■アーバンドックららぽーと豊洲
http://toyosu.lalaport.jp/floor/index.html

こちらはやや前項のタイプにちかい全体マップから詳細マップへ遷移するタイプです。
詳細へ移動するとドラッグアンドドロップで移動できます。また、サイドに店舗一覧が表示されており、マップ上の店舗を選択すると、連動してサイドの一覧もアクティブになる仕掛けがあります。
floa_02_03.jpg



■マリアシティ福岡
http://www.marinoacity.com/floor/

上部のボタンでエリア移動ができます。
floa_02_04.jpg



■天神地下街
http://www.tenchika.com/flash/index.html

ショップをカテゴリで絞り込むことができます。
floa_02_05.jpg



フロア全体タイプ

GoogleMapタイプと似ていますが、拡大縮小や、移動は行わず、全体を簡潔に見せているタイプです。サイドにフロアの階層図もあり、そこから各フロアの図面へと切り替えます。
階層もそれなりにあり、フロア情報もおおいデパートに見られます。


■福岡大丸
http://global4.coara.or.jp/cg25000/floorguide/index.php?type=map

ひと目で建物の階層構造とフロアの状況がわかります。
floa_03_01.jpg



■大丸東京店
http://www.daimaru.co.jp/tokyo/nd070824/floor_1f.html

こちらも同様です。
floa_03_02.jpg



テーブルタイプ

テレビ欄のようにテーブルに階層と詳細を分割して見せている方法です。
各階のテナントや設備が表に一覧として表されているのでわかりやすい反面、
フロアごとの位置関係が把握できないデメリットもあります。
デパート系に多く見られます。


■日本橋三越本店(各店舗も同様)
http://www.mitsukoshi.co.jp/store/1010/floorguide.html

まさにテレビ欄のようなつくりです。
floa_04_01.jpg



■アトレ(各店舗も同様)
http://www.atre.co.jp/floor_guide/index.php?scd=2

詳細ボタンによりフロアマップを見ることもできます。
floa_04_02.jpg



■パルコ(各店舗も同様)
http://www.parco-shibuya.com/page/shop/search/

おしゃれで見やすいです。
floa_04_03.jpg




アンカータイプ

ページ上部のインデックスメニューがあり、クリックするとページ内のアンカーにスクロールして詳細を見せるタイプです。
階層やフロアがそこまで複雑でない場合に用いられています。


■コレットマーレ
http://www.colette-mare.com/floor/

javascriptを使ったスムーズなスクロールで見やすくなっています。
floa_05_01.jpg



■名古屋ボストン美術館
http://www.nagoya-boston.or.jp/information/floor.html

こちらも同様の手法です。
floa_05_02.jpg



■大塚国際美術館
http://www.o-museum.or.jp/floor/

こちらは普通にアンカー移動だけでjavascriptを使用していません。
floa_05_03.jpg



■丸ビル
http://www.marunouchi.com/marubiru/search/floor/all_view.html

同様にリッチな見せ方はしていません。
floa_05_04.jpg



■新宿ミロード
http://www.shinjuku-mylord.com/shop/

タブで切り替えているものです。
アンカーではありませんが、ページ遷移しないということで、このカテゴリーにいれました。




複合(大規模施設)タイプ

規模の大きなテーマパークや動物園などの施設は、これまでのタイプの複合的な構成のものが多いです。
また、アトラクションや店舗の情報とは別に、トイレやロッカー、インフォメーションなどさまざまなサービス別やバリアフリー施設中心のガイドなど細かくカテゴライズされています。
さらに、実際の施設が広大であるため、印刷して持ち運びができるダウンロード用のPDFデータを準備しているところもあります。


■東京ディズニーリゾート
http://www.tokyodisneyresort.co.jp/tdr/map/index.html

floa_06_01.jpg



■USJ
http://www.usj.co.jp/parkguide/

floa_06_02.jpg



■東京ドームシティ
http://www.tokyo-dome.co.jp/areamap/

floa_06_03.jpg



■ハウステンボス
http://www.huistenbosch.co.jp/guide/map/map.html

floa_06_04.jpg



■グリーンランド
http://www.greenland.co.jp/park/info/

floa_06_05.jpg



そのほか

すこし変わったポイントのあるものをご紹介。

■京都駅前地下街ポルタ
http://www.porta.co.jp/?page_id=5

構内の様子を3DCGで見ることができます。
floa_07_01.jpg



■西鉄ステーションサービス
http://www.nnr-nss.co.jp/3d/index.html

こちらは、詳細部分を3DCGで見れます。
floa_07_02.jpg


いかがでしたでしょうか。
ネタに困ったときはぜひご活用ください。


| アイデア | 01:44 | comments(1) | trackbacks(0) | - | - |はてなブックマーク - ネタに困らないための、タイプ別・フロアマップ・案内図まとめ 28サイト【国内施設】 | このエントリーをはてなブックマークに追加
フロアガイドの参考資料を捜しておりました。感激です。有り難うございます。今後もいろいろとお世話になります。
| 中川勝惠 | 2011/12/26 8:18 PM |









http://blog.tug.lomo.jp/trackback/990248