Webサイトで都道府県を選択させる機能、あなたならどう実装しますか？
よくあるのはSVGベースの地図や、シンプルなプルダウンメニューですよね。でも、SVGはデータが重くて表示に時間がかかったり、プルダウンは一覧性が低くてユーザーが目的の都道府県を探しにくかったり…と、ちょっとした悩みを抱えている方も多いのではないでしょうか。
今回はそんな課題を解決する、CSS Gridを使った新しいアプローチをご紹介します。下のサンプルのように、HTMLとCSSだけで驚くほど軽量でアクセシブルな都道府県選択UIが実現できるんです。
「CSS Grid シンプル日本地図」の特徴
CSS Grid シンプル日本地図のサンプルデモ
ソースコードはそのままコピー＆ペーストで使えるように、サンプルデモを用意しました。実際に触って、その軽快さを体験してみてください。
基本バージョン（basic-three-versions.html）
- 単色版：統一されたブルーグラデーション
- 地域別カラー版：8地方による色分け
- リンク版：aタグ化によるアクセシビリティ向上
アクセシビリティ対応バージョン（accessibility-enhanced.html）
- WCAG 2.1準拠の完全対応
- スクリーンリーダー・キーボード操作対応
- 高コントラストモード・アニメーション制御対応
この「CSS Grid日本地図」のすごいところ
このUIは、シンプルながらも強力な特徴を持っています。
- 超軽量＆高速表示: HTMLとCSSのみで実装。JavaScript不要なので、読み込みが非常に速いです。
- レスポンシブ対応: PC、タブレット、スマホなど、どんな画面サイズでもレイアウトが自動で最適化されます。
- 高いアクセシビリティ: スクリーンリーダーやキーボード操作に完全対応。誰もが使いやすいデザインです。
- メンテナンスが楽: シンプルな構造なので、色の変更やレイアウト調整が驚くほど簡単です。
なぜ「CSS Grid」が最適解なのか？
日本地図UIの実装方法はいくつかありますが、CSS Gridには他にはない明確なメリットがあります。
| 手法 | メリット | デメリット |
|---|---|---|
| SVG | 地理的に正確で美しい | パスデータが複雑でファイルサイズが重くなりがち |
| Canvas | 描画の自由度が非常に高い | JavaScriptが必須でコードが複雑化しやすい |
| 画像マップ | 実装はシンプル | レスポンシブ対応や保守性に大きな課題あり |
| CSS Grid | 超軽量で保守性が高い。レスポンシブも得意 | 地理的な厳密な正確性はトレードオフ |
地理的正確性が求められる場面ではSVGに軍配が上がりますが、「エリア選択」や「データの可視化」といった用途では、以下のようなパフォーマンスとメンテナンス性に優れたCSS Gridが最高の選択肢となり得ます。
- 統計データや調査結果の可視化
- 店舗検索やエリア選択などのUI
- 管理画面のダッシュボード
- オンライン学習などの教育コンテンツ
実装の3ステップを解説
Step 1: グリッドの土台を作る
まず、日本列島全体を 12列 × 4行 のグリッドに見立てます。これがすべての都道府県を配置する土台になります。残り1セルは空白となります（「全国」としてもいいかもしれません）。
.css-grid-japan-map {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 40px);
gap: 2px;
width: 100%;
max-width: 600px;
margin: 0 auto;
}Step 2: 都道府県を配置する
各都道府県をCSS Gridの nth-child セレクタで配置します。HTMLでは都道府県コード順（上から、北海道→青森→岩手→宮城→秋田…）に記述し、CSSで地理的位置（右上から左下に向かって、北海道→青森→岩手→秋田→山形…）に配置します。
/* 北海道を右上に配置 */
.css-grid-japan-map .prefecture:nth-child(1) {
grid-column: 12 / 13;
grid-row: 2 / 3;
}
/* 青森を下に配置 */
.css-grid-japan-map .prefecture:nth-child(2) {
grid-column: 12 / 13;
grid-row: 3 / 4;
}この配置は、実際の地理的位置関係を参考にしつつ、グリッドに美しく収まるよう最適化しています。東北地方と北関東は厳しいですが、西日本はしっくりする並べ方かと思うのですがどうでしょう。もちろん、この配置が気に入らなければ自由に変更可能です！
Step 3: 地域ごとに色分けする
特定のクラスを追加するだけで、地方ごとの色分けも簡単です。これにより、視認性がグッと上がります。
/* 北海道・東北・関東で色を分ける例 */
.prefecture.hokkaido {
background: linear-gradient(135deg, #a29bfe, #6c5ce7);
}
.prefecture.tohoku {
background: linear-gradient(135deg, #fd79a8, #e84393);
}
.prefecture.kanto {
background: linear-gradient(135deg, #fdcb6e, #e17055);
}
/* 他の地方も同様に設定 */アクセシビリティへの取り組み
このUIの真価は、そのアクセシビリティへのこだわりにあります。「誰でも使える」を実現するための工夫を見ていきましょう。
スクリーンリーダー対応
aria属性やsr-onlyクラスを活用し、視覚的な情報だけでなく、音声読み上げソフトのユーザーにもしっかりと情報が伝わるように設計しています。
<a href="#hokkaido-info" class="prefecture hokkaido"
role="button" aria-label="北海道">
北海道
<span class="sr-only" id="hokkaido-desc">北海道地方、人口約520万人</span>
</a>キーボード操作の最適化
マウスを使わないユーザーでも快適に操作できるよう、フォーカス時のスタイルを工夫しています。どの要素が選択されているか、一目でわかります。
.prefecture:focus {
outline: 3px solid #4A90E2;
outline-offset: 2px;
transform: scale(1.05); /* 少し拡大して分かりやすく */
z-index: 10;
}Tabキーの移動順を最適化
HTMLが都道府県コード順のため、何もしないとTabキーでフォーカスを移動したときに、カーソルがマップ上をバラバラに飛んでしまいます。
そこでtabindex属性を使い、視覚的な配置（左上から右下）に沿ってフォーカスが移動するように順番を制御しました。これはユーザビリティを劇的に向上させる、非常に重要なポイントです。
課題: デフォルトのTab移動は、視覚的に不自然で使いにくい。
解決策: tabindexで、ユーザーが直感的に操作できる移動順を実現。
<!-- 視覚的な位置順にtabindexを設定 -->
<a href="#nagasaki" class="prefecture kyushu" tabindex="44">長崎</a> <!-- 左上 -->
<a href="#fukuoka" class="prefecture kyushu" tabindex="40">福岡</a>
<!-- ... -->
<a href="#iwate" class="prefecture tohoku" tabindex="3">岩手</a> <!-- 右下 -->その他のアクセシビリティ対応
- 高コントラストモード対応:
prefers-contrastメディアクエリで、OS設定に合わせた表示に。 - アニメーション無効化:
prefers-reduced-motionメディアクエリで、ユーザーの希望に応じてアニメーションをオフにします。
実用例とカスタマイズアイデア
CSSを少し調整するだけで、様々な用途に応用できます。
- 選挙結果マップ: 政党カラーで各都道府県を塗り分ける。
- 気象情報ダッシュボード: 天気（晴れ、曇り、雨）に応じて色やアイコンを変更する。
- 支店の売上マップ: 売上実績に応じて色の濃淡を変え、好調なエリアを可視化する。
まとめ：CSS Grid日本地図は、どんな時に使うべきか？
このCSS Grid日本地図が、あなたのプロジェクトに最適かどうか、最後にまとめてみましょう。
👍 こんなケースにピッタリ！
- ページの表示速度を何よりも重視したい
- レスポンシブとアクセシビリティ対応は必須
- メンテナンスしやすいシンプルなコードが好き
- 統計データの可視化やエリア選択UIとして使いたい
👎 こんなケースは他の方法を検討
- 市区町村レベルの地理的な厳密さが求められる
- 小さな離島まで含めた複雑な海岸線の表現が必要
「正確さよりも、機能性とパフォーマンス！」というシーンであれば、CSS Gridを使った日本地図は非常に強力な選択肢になります。
この記事が、あなたの次のプロジェクトのヒントになれば幸いです。もし活用いただけたら、SNSなどでご紹介いただけると、とても励みになります！
コメント