マイページの配色はどうする？機能が多くても迷わないWEBデザイン

マイページは、プロフィール、注文履歴、お気に入り、契約情報、各種設定など、利用者ごとの機能が集まりやすい画面です。機能ごとに違う色を付けると一見分かりやすそうですが、色数が増えるほど「どこを見ればよいか」が散らかりやすくなります。基本は背景・カード・文字をニュートラルカラーでそろえ、現在位置と主要操作だけにアクセントカラーを使います。この記事では、機能が多いマイページを整理して見せる配色を紹介します。

機能ごとに色を変えず、役割ごとに色を固定する

マイページでは、「プロフィールは青」「注文は緑」「お気に入りは赤」のように機能単位で色を増やすより、背景・本文・現在位置・主要操作という役割ごとに色を固定した方が、画面を移動してもルールを覚えやすくなります。Primaryカラーとは、主要な操作や選択状態など、画面内で優先して目立たせる基準色です。これを1色に絞ると、機能が増えても強調の意味を保ちやすくなります。

USWDSのサイドナビゲーションでは、現在のページをActive状態で示して、利用者が階層のどこにいるか分かるようにすることが案内されています。Appleのサイドバーガイドでも、情報量が多い場合は階層を整理し、必要以上に深くしない考え方が示されています。色は情報構造そのものの代わりではなく、整理されたナビゲーションを補助するものとして使います。

背景・カード・現在位置・主要操作の4役に色を分ける

ページ全体の背景をオフホワイト ■#F8FAFC、カードや設定パネルを白 ■#FFFFFF にすると、強い色を増やさず面の階層を作れます。見出しと本文をダークグレー ■#27313A にすると、オフホワイト ■#F8FAFC とのコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約12.65:1です。

補足文や日時などはミディアムグレー ■#5B6470 にすると、オフホワイト ■#F8FAFC に対して約5.73:1です。本文より弱く見せながら、通常サイズの文字として読める差を保てます。

現在選んでいるメニューやタブは、背景をペールブルー ■#EAF2F8、文字・アイコン・選択インジケーターをブルー ■#315D94 にすると約5.94:1です。「プロフィールを編集」「支払い方法を追加」など、その画面で最も重要な操作のボタンもブルー ■#315D94、文字を白 ■#FFFFFF にすると約6.72:1です。選択状態と主要操作に同じ基準色を使い、用途ごとに配置や形を変えて区別します。

色だけで現在位置や重要度を伝えない

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、色を情報伝達の唯一の手段にしないことが求められます。現在のメニューは背景色だけでなく、左側の選択インジケーターや文字の太さを併用し、必要に応じて aria-current="page" で現在ページを支援技術にも伝えます。

文字のコントラストは通常サイズで4.5:1以上、大きな文字で3:1以上が基準です。また、現在位置を示すインジケーターや操作に必要なアイコンなどの非テキスト情報は、隣接色との3:1以上が基準になります。機能が増えても色を増やすのではなく、同じ役割には同じ色を使い、見出し・余白・グループ分けで整理します。HueRollでは候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、実際の背景・文字・選択色の組み合わせは別途確認します。