目的に合わせないと詰みがち。
まんま日本地図でやる
Japan Map ( jQuery plugin )
Japan Map ( jQuery plugin ) : jQuery plugin to show clickable map of prefectures (or area) of Japan.
takemaru-hirai.github.io
地方や都道府県別に色分けができるし文字も載せられる。
離島まできっちり作り込んでるのは素晴らしいんだけど、押しづらい。
使いやすさ重視のざっくりレイアウト
CSSで作るレスポンシブ＆クリッカブル日本地図
レスポンシブデザインでモバイルでもレイアウトが崩れないCSSだけで実現するクリッカブルな日本地図が欲しい。表題の通りですが、そこそこ数は見つかったんですが、スマホで地図のバランスが悪かったり、見切れたり、リスト表示になったりと、どうも目指し...
web.contempo.jp
スマホ表示でも指がでかい人以外は問題なさそう。
HTML/CSS のみで作った、レスポンシブ＋クリック対応の日本地図（フリー素材） | 発笑探検隊
都道府県別にクリックできる（リンクが張ってある）、日本地図です。この分野は、画像とクリッカブルマップで作ってい
takuri.realwork.jp
レスポンシブなところまでカバーしてくれてるのが嬉しい。
illustratorで自作する
押したらリンクに飛ぶマップを作ったよ（要illustrator） | クラウドのエスエスアイ・ラボ
こんにちは。takeyemaです。地図を押したらリンクに飛ぶサイトを作ったので、その方法のメモを残します。本ブログではmac版illustrator 2022を元に説明します。
ssilab.co.jp
先日作ったリンク付きPDFと似た手順で作れるっぽい。
最適解っぽい作り方に思うやつ
最強の都道府県選択のUIを考えてみた【HTML+CSS+jQuery】 | キノコログ
仕事で、都道府県を選択させてそれに応じた情報を表示させるUIを作る必要がありました。 例えば、店舗情報や求人情報などは都道府県毎に整理して表示させることになるでしょう。 しかし、都...
kinocolog.com
文句の付けようがない。
まとめ
「日本地図 クリッカブル」とかで検索すると色々記事が出てくる。
割とバリエーションに富んでて、状況によりどれがいいかを選べる感じ。
「◯◯がしたい・作りたい」って思っても、いざ取り掛かると思ってたのと違うものになったりそもそも無理臭いってことになる、よくある事案に当てはまる系のやつだと思う。
なので、今は使わないって人もとりあえず知識を入れて頭の片隅においておくのがいいやつです。
コメント