自治体WEBサイトの配色はどうする？情報量が多くても迷いにくくする方法
自治体のWEBサイトには、引っ越しの手続き、子育て、ごみの出し方、防災など、目的の異なる情報が集まります。見出しごとに色を変えると一見探しやすそうでも、何が重要なのか分かりにくくなる場合があります。今回は架空の「みなと野市」のトップページを例に、情報の多さを色で増幅させず、必要な手続きやお知らせを探しやすくする配色を紹介します。
分野ごとに色を増やさず、用件と重要度で入口を分ける
まず訪問者が何をしたいかを整理します。例えば「住民票の手続き」「子育ての相談先」「ごみの収集日」「防災情報」のように、用件が分かる言葉で入口を作ります。それぞれに別の鮮やかな色を付けるより、同じ背景と文字のルールで並べ、名称・アイコンの形・配置を統一した方が比較しやすくなります。
特に重要なのは、通常の行政サービスを探す入口と緊急・重要なお知らせを別の役割として設計することです。手続きへ進むボタンには一貫した操作色を使用し、重要なお知らせには異なる色と「重要」などの明確な文字ラベルを使います。赤みのある色だけで危険や緊急性を伝えてはいけません。
長い一覧の上には検索欄と分野別の入口を置き、同じ手続きに複数の名称がある場合も探せる案内を検討します。検索できる場所は枠や「サイト内を検索」といったラベルで示します。色は探すための補助であり、情報の名前や順番の代わりにはなりません。
架空の市役所トップページを7色で組み立てる
「みなと野市」の案内を例に、用件別の入口、手続きの案内、重要なお知らせを一つの画面で扱います。HEXコードは「#」と6桁の英数字でWEBの色を指定する表記です。次の7色に役割を決めます。
- ページ背景：明るい青白 #F8FAFC ― トップページ全体の土台。
- 見出し・本文：濃い青灰 #263545 ― 用件名、説明、窓口案内の文字。
- 補足文字・枠線：落ち着いた青灰 #526677 ― 更新日や補足説明、入口カードの枠。
- 用件別の入口：淡い水色 #E9F2F5 ― 「手続き」「子育て」「ごみ」「防災」を並べるカードの背景。
- 手続きへの操作：深い青 #185A78 ― 「手続きを探す」ボタンと下線付きリンク。
- 操作・重要表示の文字：白 #FFFFFF ― 濃いボタンと重要表示の文字。
- 重要なお知らせ：深い赤茶 #8A403C ― 緊急性の高い案内を区別する表示面。
ページ全体に#F8FAFCを敷き、用件別カードは#E9F2F5でそろえます。カード名を#263545、補足を#526677で表示し、「ごみの出し方」「転入時の手続き」など具体的な名称を付けます。必要な手続きへ進む主なボタンは#185A78に#FFFFFFの文字を組み合わせます。通常のリンクは#185A78の文字と下線にして、ボタンとの役割を分けます。
重要なお知らせを掲載する場合は、#8A403Cの背景と#FFFFFFの文字で「重要：防災情報の確認先」などと表示し、対象地域・発表日時・確認先を文章で添えます。「みなと野市」もこの案内も配色説明用の架空の例で、現在発表されている災害情報ではありません。実際のサイトでは、最新の公式発表に合わせて内容を更新する必要があります。
コントラスト比は隣り合う色の相対的な明るさの差です。本文#263545とページ背景#F8FAFCは約11.96:1、補足文字#526677と同じ背景は約5.69:1、カードの文字#263545と淡い水色#E9F2F5は約11.02:1です。白文字#FFFFFFと青いボタン#185A78は約7.57:1、白文字と重要表示の赤茶#8A403Cは約7.29:1です。いずれもWCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAが通常サイズの文字に求める4.5:1以上を満たします。
災害時の更新・スマホ画面・カードの境界を確認する
淡いカードは色だけで区切らない。入口の淡い水色#E9F2F5とページ背景#F8FAFCの比は約1.09:1と小さめです。カード自体を識別する輪郭が必要なら#526677の枠線を使い、淡い面との約5.24:1の差を確保します。青いボタン#185A78とページ背景の比は約7.24:1で、操作部品を識別するための3:1の目安も上回ります。
災害情報を色だけで知らせない。重要なお知らせは「避難」「交通」「休止」など対象となる内容を文章で明示し、公開日時や更新日時、対象地域を記載します。確認していない災害情報やサービス停止を作らず、終了した案内の表示も更新します。優先順位は見出しや掲載位置でも示し、重要なお知らせが通常の申請ボタンに紛れないようにしましょう。
スマートフォンでは用件を先に探せるか確認する。カードを縦に並べる場合も検索、よく使う手続き、重要なお知らせへ移動できる構成にします。リンクには下線を付け、キーボード操作で現在選ばれている要素の枠（フォーカス表示）も隣接する背景との違いを確認します。多くの色を使うことより、用件の分類と色の役割を一貫させることが、自治体サイトで迷いにくくする基本です。