建設会社のWEBサイトに合う配色は？写真を活かす色の選び方
建設会社のWEBサイトでは、建物の完成写真や工事中の写真が、仕事内容を伝える大切な材料になります。写真ごとに空・コンクリート・木材などの色が違うため、周囲の背景まで強い色にすると、施工実績を比べにくくなることがあります。写真そのものを一律に加工するのではなく、写真を載せる面、説明文、問い合わせボタンの色を整理する方法を、架空の建設会社の実績ページで考えます。
施工写真の色を変える前に、周囲の背景と情報の並びを整える
まず施工実績の写真を主役にする場所を決めます。例えば「木造店舗の改修」と「倉庫の外装工事」を並べる場合、写真の周囲には同じ背景色と余白を使い、工事の種類・写真の撮影段階を同じ位置に記載します。この二つは説明用の架空の事例です。写真の明るさや材料の色は異なっていても、案内の形式をそろえることで比較しやすくなります。
ヘッダーには会社を示す色を使い、施工実績の一覧は白に近い控えめな背景にするなど、役割を分けると整理しやすくなります。施工写真に強いカラーフィルターを重ねると、外壁や木材の色が実際と異なって見える場合があります。仕上げの色や素材が判断材料になる写真では、写真の内容を確認できることを優先します。
写真の上へ直接見出しを載せる場合、空などの明るい部分と建物の影では文字との明るさの差が変わります。写真を一枚のHEXコードで表すことはできません。重要な文字は写真と分けた不透明な面に置く方法を先に検討します。
施工実績の一覧・写真説明・問い合わせを色で整理する例
架空の会社がヘッダーに濃い青緑 #204959 を使用し、案内文字を白 #FFFFFF にすると、コントラスト比は約9.73:1です。コントラスト比とは、隣接する2色の相対的な明るさの差です。HEXは「#」と6桁の英数字でWEB上の色を指定する書き方です。
- 写真の周囲：ページ全体を薄い青灰色 #F5F7F7、施工実績カードを白 #FFFFFF にします。写真はカードの上側に置き、下側に施工名と説明を並べます。白いカードとページ背景の比率は約1.08:1で差が小さいため、カードの区切りが必要なら白 #FFFFFF に対して約4.76:1となる灰色 #64748B の枠線なども使います。
- 施工名と説明：見出しには濃い青灰色 #20323B、説明文には灰青色 #435762 を使います。白いカード #FFFFFF に対して、それぞれ約13.28:1、約7.56:1です。写真には「完成写真」「工事中の写真」など撮影段階を文章でも付けます。
- 問い合わせボタン：「施工について相談する」は落ち着いた赤茶色 #A44F28 のボタンと白文字 #FFFFFF にし、約5.63:1を確保します。ページ背景の薄い青灰色 #F5F7F7 との比は約5.24:1です。施工事例への通常リンクは濃い青緑 #204959 に下線を付け、問い合わせとは別の操作だと示します。
修正前の例として、写真の説明を薄い灰色 #B4BEC2 で白いカード #FFFFFF に載せると、比率は約1.89:1です。説明を灰青色 #435762 に変えると同じ白の上で約7.56:1となり、背景や施工写真を変更せずに読める情報を整えられます。
写真を差し替えた後も、表示位置と意味の伝わり方を確かめる
実績写真はスマートフォンで縦長や正方形に切り取られることがあります。写真の端に写る施工箇所が隠れていないか、必要なら切り抜き位置や写真の比率を調整します。工事種別、所在地などを掲載するときは事実を確認し、写真だけで施工内容を誤解させないようにします。画像の代替テキストにも、写真が伝える工事内容を簡潔に記載します。
WCAG 2.2（WEBコンテンツの利用しやすさに関するガイドライン）のAA水準では、通常サイズの文字と背景は原則4.5:1以上、識別に必要な操作部品の輪郭などの非テキスト情報は隣接色と原則3:1以上のコントラストが基準です。写真上の文字は実際の明暗を確認し、キーボードでのフォーカス表示も操作する場所の背景に対して点検します。
HueRollでは配色候補や、選択した色と白・黒のコントラストを確認できます。ただし任意の2色の比較や、写真と重なった文字の自動評価、WCAGのAA・AAA自動判定には対応していません。完成ページでは写真と説明文の配置、文字の背景、ボタンの周囲を別々に確認しましょう。