弁護士事務所のWEBサイトに合う配色は？落ち着いて見せる色選び

弁護士事務所のWEBサイトは、濃紺や金色を多く使えば落ち着いて見えるとは限りません。相談する人が知りたい「対応している相談内容」「費用の案内」「相談までの手順」が見つからなければ、色の印象だけを整えても使いにくいページになります。ここでは架空の法律事務所の相続相談ページを例に、落ち着いた色合いと情報の読みやすさを両立する方法を考えます。

濃い色は事務所の目印に、相談情報は明るい面に置く

最初に、事務所のロゴや既存サイトで使う色を確認します。濃い青灰色をヘッダーや見出しの一部に使い、本文は明るい背景に載せると、画面全体を暗くせずに統一感を作る選択ができます。色が与える印象は見る人や周囲の色によって変わるため、「紺なら必ず信頼される」と決めつけないことが大切です。

相続相談のページなら、「相談できる内容」「費用について」「相談の流れ」「予約方法」を分けて配置します。初めて相談する人が順番を追いやすいように、見出しの位置や余白もそろえます。費用や予約条件などの重要な情報は、飾り文字のような薄い色にせず、本文として読める色を使います。

とくに相談予約のボタンは、事務所の装飾色と同じである必要はありません。重要なのは、その場所を見つけられ、ボタンの文字が読めることです。実際に表示する料金、受付日時、対応分野は各事務所の情報に基づいて記載し、配色例のために事実を補わないようにします。

相続相談ページの配色例：相談内容・費用・予約を整理する

架空のサイトでは、ヘッダーを深い青灰色 ■#263A48、メニュー文字を白 ■#FFFFFF にします。両者のコントラスト比は約11.79:1です。コントラスト比とは、2色の相対的な明るさの差を示す数値です。HEXは「#」と6桁の英数字で色を表す書き方です。

• ページと相談内容：ページ背景を温かみのあるオフホワイト ■#F7F5F1、相談内容のカードを白 ■#FFFFFF にします。見出しと本文には濃い青灰色 ■#27343E を使い、白い面との比は約12.75:1、オフホワイトとの比は約11.71:1です。相談分野は色分けだけでなく、名称を見出しで表示します。
• 費用の案内：案内欄を淡いベージュ ■#EEE8DF、補足文字を灰色 ■#53636D にすると約5.11:1です。「費用の目安」「別途確認する条件」などの項目名を付け、必要な説明を小さく薄い文字に押し込まないようにします。
• 相談予約ボタン：落ち着いた茶色 ■#724A37 に白文字 ■#FFFFFF で「相談予約へ進む」と表示します。文字との比は約7.64:1、周囲のオフホワイト ■#F7F5F1 との比は約7.01:1です。通常の案内リンクは深い青灰色 ■#263A48 で下線を付け、ボタンとは形でも区別します。

修正前の例として、装飾に使う薄い金茶色 ■#B39A7C を、そのままオフホワイト ■#F7F5F1 上の小さな案内文字に使うと約2.46:1しかありません。文章として読ませるなら、濃い茶色 ■#715435 に変えると約6.38:1になります。淡い金茶色は装飾に残しても、文字まで同じ色にそろえる必要はありません。

なお、白いカード ■#FFFFFF とオフホワイト ■#F7F5F1 の差は約1.09:1です。区切りが必要な入力欄には、白 ■#FFFFFF に対して約3.99:1となる灰色 ■#75818A の輪郭線を付けるなど、面の色だけに頼らない方法を考えます。

静かな印象だけでなく、相談までの操作を点検する

落ち着いた配色でも、予約ボタンが見つからない、フォームの選択状態が分からないといった問題は起こり得ます。入力エラーには内容と修正方法を文章で示し、必須項目や予約済みの状態を色だけで伝えないようにします。キーボードで操作中の場所が分かるフォーカス表示を用意し、線と隣接する背景のコントラストも確認します。

WCAG 2.2（WEBコンテンツの利用しやすさに関するガイドライン）のレベルAAでは、通常サイズの文字は背景と原則4.5:1以上、識別に必要な操作部品の輪郭などは隣接色と原則3:1以上が基準です。ページをスマートフォンで開いたときも、費用の説明や予約方法が省略されないか確認しましょう。

HueRollでは配色候補や、選んだ色と白・黒のコントラストを確認できます。ただし任意の2色の比較やWCAGのAA・AAAの自動判定はできないため、本文で示した実際の組み合わせは別途計算しています。完成した画面でも、文字と背景、入力欄の輪郭などを確かめてください。