WEBデザインの色の比率はどう決める？面積から考える配色方法

WEBサイトで使う色を決めても、それぞれをどのくらいの広さで使うか迷うことがあります。配色の比率は色を混ぜる割合ではなく、背景やボタンなどが占める面積の目安です。60–30–10という考え方もありますが、すべてのページを同じ数字に合わせる必要はありません。ここでは架空の美術館の企画展案内ページを例に、色の役割を決め、面積を仮置きして調整する手順を紹介します。

配色の比率は、色の役割と情報量から決める

最初にベースカラー（画面の広い背景に使う色）、補助色（日時や場所などの情報をまとめる面に使う色）、アクセントカラー（予約ボタンなど目立たせたい場所に使う色）を決めます。展示の内容をじっくり読んでもらうなら、本文の背景を広くし、次に補助面、最後に操作の色という順で面積を考えます。

出発点としてベース80％・補助面15％・アクセント5％を仮置きできます。ただし、この数値はデザインの規格ではなく、最初に比較するための設計例です。写真の多いページや、会場案内が中心のページでは適切な配分が違います。60–30–10も色の役割を考える別の目安であって、必ず守る法則ではありません。

比率を見積もる際は、背景・パネル・ボタンなどの「塗り面」に対象をそろえます。細い文字の面積や写真内の色まで無理に合算すると、比べたいものが分からなくなるため、別に扱います。まず読んでほしい内容と押してほしい操作を決めることが先です。

美術館の企画展案内で80：15：5を組んでみる

以下はHEX（「#」の後ろに0〜9とA〜Fを6桁並べて指定する色コード）による例です。コントラスト比は文字と背景などの相対的な明るさの差を示します。

背景80％、補助面15％を先に確保する

• ベース：約80％の面に温かみのあるアイボリー■#F7F4EDを使います。展覧会の見出しや作品説明を載せ、本文を濃い青灰色■#263845にするとコントラスト比は約11.03:1です。
• 補助面：約15％を淡いセージグリーン■#DDECE6にします。開館時間・会場・アクセスなどをまとめ、本文には同じ濃い青灰色■#263845を使います。文字と背景は約9.93:1です。
• 見出し：深い緑■#185E50を使うと、アイボリー■#F7F4EDの上では約6.94:1、淡いセージグリーン■#DDECE6の上では約6.25:1です。文字の色はこの塗り面の配分とは別に考えます。

アイボリー■#F7F4EDと淡いセージグリーン■#DDECE6の背景同士は約1.11:1と色の差が小さめです。補助面には「開館時間・アクセス」という見出しと周囲の余白を用意し、背景色だけで区画を見分けさせないようにします。

残りの5％を予約操作のアクセントにする

「来場予約」ボタンは深い緑■#185E50の背景に白■#FFFFFFの文字を組み合わせます。文字とボタン背景は約7.62:1です。ボタンの面と周囲のアイボリー■#F7F4EDは約6.94:1、淡いセージグリーン■#DDECE6の上に置く場合も約6.25:1の差があります。

5％という数字はボタンを画面の5％ぴったりにする指示ではありません。押しやすい大きさを先に確保し、同じ強い色を飾りやすべての見出しの背景へ広げすぎないための目安として考えます。

一画面の面積を見積もり、PCとスマホで配分を調整する

まず、ページ冒頭など比較する範囲を決めます。背景・補助面・ボタンをおおまかな四角形に分けて面積を見積もるか、画面の画像で大きさを見比べてください。写真の占める場所は別に記録し、80：15：5を実測値のように扱わないことが大切です。

例えば、開館時間以外にバリアフリー情報や交通案内も必要で補助面が窮屈なら、ベース70％・補助面25％・アクセント5％の案と比較できます。逆に、予約ボタン以外にも強い緑の塗り面が増えていたら、アクセントを減らします。見た目の比率を守るために文章や操作を押し込めず、「説明を読める」「日時を探せる」「予約へ進める」を優先しましょう。

スマートフォンでは区画が縦に並び、一画面の配分がPCと変わります。同じ比率を厳密に再現する必要はありません。WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。操作に必要な部品の形なども隣接色と3:1以上が関係する場合があります。ここで示した値は不透明な単色同士の計算結果です。写真上の文字やボタンの操作状態は別途確認してください。