士業サイトの配色はどう決める？堅くなりすぎないWEBデザイン

士業サイトでは、専門性を伝えようとして濃紺やグレーを増やすと、初めて相談する人には、どこから問い合わせればよいか分かりにくくなる場合があります。色を明るくすれば相談しやすさが必ず高まるわけではありません。大切なのは、専門的な説明を読みやすくし、「自分の相談に関係があるか」「どんな流れで相談するか」を確認できることです。ここでは、架空の社会保険労務士事務所の初回相談ページを例に、堅くなりすぎない配色を考えます。

専門性は見出しと情報の正確さで伝え、相談の入口をやわらかくする

士業には、法律・会計・労務などの専門分野を扱う職業があります。今回の例では、労務（従業員の働き方や関連する手続き）について相談したい事業者を想定します。ページの冒頭を濃い色で統一しても、本文やボタンまで同じ濃色で囲む必要はありません。見出し、余白、言葉の選び方を整理し、広い背景には明るく落ち着いた色を使う方法があります。

最初の画面には「相談できる内容を見る」「担当者と相談の流れを知る」「問い合わせ方法を確認する」の3つの入口を用意します。例えば、架空の案内項目を「就業規則について」「労務手続きについて」「職場の制度について」とします。各項目には相談内容の例を短く添えますが、実際に対応できる業務や必要な書類は事務所が確認してから掲載します。

明るい色を多用して親しみやすさを演出するより、見出しの順序を整え、難しい言葉には説明を添え、問い合わせ前に確認できることを明示したほうが、専門家への相談ページとして使いやすくなります。安心感や信頼性を色だけで保証することはできません。

濃いヘッダーと温かい背景を組み合わせた配色例

架空の事務所では、ヘッダーを落ち着いた青緑 ■#27444E、メニュー文字を白 ■#FFFFFF にすると、コントラスト比は約10.38:1です。コントラスト比とは、文字と背景など2色の相対的な明るさの差です。HEXは「#」と6桁の英数字でWEBの色を指定する形式です。ヘッダーだけを濃色の面とし、本文の背景は温かみのあるオフホワイト ■#F8F5EF、内容を載せるカードは白 ■#FFFFFF にします。

白いカード ■#FFFFFF とオフホワイト ■#F8F5EF の差は約1.09:1しかありません。相談内容のカードに明確な輪郭が必要なら、灰青色 ■#73838C の枠線を使います。線は白いカード ■#FFFFFF と約3.92:1、外側のオフホワイト ■#F8F5EF と約3.60:1です。薄い面の色差に頼らず、余白や見出しでも区切ります。

• 本文と補足：説明文は濃い青灰色 ■#303F45 で白いカード ■#FFFFFF に対し約10.92:1、補足文は灰青色 ■#596B70 で白 ■#FFFFFF に対し約5.58:1とします。資格名や対応条件は短い文章で確認できるようにし、小さい文字だけへ押し込めません。
• 初回相談の案内：「最初に相談内容を整理できます」のような案内には淡い緑灰色 ■#EAF3ED と濃い緑 ■#234E49 を使うと約8.21:1です。「就業規則」「手続き」「社内制度」などの項目名には淡い青灰色 ■#E6F1F3 と濃い青 ■#34576C を合わせ、約6.69:1です。項目は文字でも区別します。
• 薄い注意書きの修正：白いカード ■#FFFFFF に薄いグレー ■#C6BFC1 を使うと、約1.81:1で読みにくい例になります。相談前に必要な確認事項は灰青色 ■#596B70 へ変更し、白 ■#FFFFFF 上で約5.58:1にします。
• 問い合わせボタンの修正：淡いアプリコット ■#F0BD95 に白文字 ■#FFFFFF を重ねると約1.69:1しかありません。アプリコットを案内面として使うなら濃い茶色 ■#64402C の文字で約5.37:1です。一方、主要な「相談方法を確認する」ボタンには濃い赤茶色 ■#8C4B36 と白文字 ■#FFFFFF を使い、約6.61:1を確保します。ボタンと隣接する白いカード ■#FFFFFF の差も約6.61:1、外側の背景 ■#F8F5EF とは約6.08:1です。

「相談できる内容を詳しく見る」などの通常リンクは濃い青緑 ■#24615D と下線で示します。白いカード ■#FFFFFF との比は約7.14:1です。塗りつぶしの問い合わせボタンとは形と文言を分けることで、どの操作が次の手順なのかを把握しやすくします。

親しみやすさと、相談前に必要な正確さを両方確認する

担当者紹介では、実際に確認した氏名・資格・対応範囲を掲載し、写真や肩書だけで信頼性を断定しないことが大切です。相談フォームも最初から詳しい個人情報を書かせるのではなく、必要な項目の目的と扱いを明示します。料金、受付時間、回答までの流れを載せるときは、実際の事務所の運用に合わせてください。本文の色がやわらかくても、案内の条件が曖昧なら読者は判断できません。

スマートフォンでは長い説明の途中で相談ボタンを見失わないか、項目名が改行されても読めるかを確認します。キーボード操作時には、現在の操作位置を示すフォーカス表示を付けます。例えば白いカード ■#FFFFFF 上で、ボタンから少し離した青 ■#2454AB の輪郭を用いると、白 ■#FFFFFF との比は約7.16:1、オフホワイト ■#F8F5EF とは約6.58:1です。ほかの面では実際に接する色との比を確認します。相談項目の選択状態も色だけでなく文字や形で伝えます。

WCAG 2.2（WEBコンテンツの利用しやすさに関するガイドライン）のAA水準では、通常サイズの文字は背景と原則4.5:1以上、操作部品を見分けるために必要な線などの非テキスト表示は隣接色と原則3:1以上が基準です。HueRollでは配色候補と選択色の白・黒に対するコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。この記事の任意の2色の比率は不透明な単色同士を別途計算したもので、完成画面全体の適合を保証するものではありません。