レシピサイトに合う配色は？料理写真をおいしそうに見せる背景色
レシピサイトには、卵料理の黄色、サラダの緑、チョコレートの濃い茶色など、色の違う料理写真が並びます。背景まで鮮やかにすると写真と競合し、反対に白一色では白い器の輪郭が見えにくいことがあります。料理をおいしそうに見せる決まった背景色があるわけではありません。写真の色を活かしながら、材料や作り方も探しやすくする配色を考えます。
料理写真の色と器の輪郭を見て、控えめな背景を選ぶ
背景色を決める前に、実際のサイトで掲載する料理写真を複数並べて比べます。例えば、白い皿に載ったオムレツ、葉の緑が多いサラダ、茶色のチョコレートケーキです。料理自体の色だけでなく、皿・テーブル・写真の四隅がページ背景になじむかも確認します。
写真が色鮮やかなときは、ページ全体には彩度（色の鮮やかさ）を抑えた明るいグレー系を使う方法があります。緑や赤を背景に大きく足すより、料理本来の色が目に入るようにする考え方です。ただし、背景を暖色にすれば必ずおいしそうに見える、という決まりはありません。撮影時の光や器との組み合わせによって印象は変わります。
白い皿が淡い背景に溶け込む場合は、写真の周囲に余白や枠を足す方法もあります。逆に、暗いケーキの写真をさらに暗い背景に置くと輪郭がつながることがあるため、写真の表示面だけ明るくする案も比較しましょう。料理写真へ無理に色フィルターを重ねるより、周囲の面を調整して色味を保つ方針です。
レシピ一覧と作り方を6色で整理する配色例
朝食からおやつまで紹介する架空の家庭料理レシピサイトを想定します。HEXコードは、WEBの色を「#」と6桁の英数字で指定する表記です。次の6色に役割を分けます。
- サイト全体：淡いグレーグリーン #F5F6F3 ― レシピ一覧や検索結果の背景。
- 料理写真の表示面：薄い青緑がかったグレー #E6ECE8 ― 写真の周囲を落ち着かせる面。
- 材料・手順の背景：白 #FFFFFF ― 分量や作り方を読む領域。
- 見出し・本文：濃いグリーングレー #293A35 ― 料理名、材料名、調理手順。
- 補足文字・必要な枠線：落ち着いた灰緑 #51635B ― 調理時間、人数、写真カードの輪郭。
- リンク・主要ボタン：深い青緑 #235E55 ― 下線付きの詳細リンク、「作り方を見る」の背景。
例えば「オムレツ」「グリーンサラダ」「チョコレートケーキ」を同じ大きさの写真枠に並べ、写真の外側に#E6ECE8を使います。料理名は#293A35で示し、調理時間や何人分かは#51635Bで補います。実際には料理写真の四隅の明るさが違うため、写真の切り取り方と表示面を組み合わせて確認してください。料理名と掲載例は説明用の架空のレシピ構成で、実際の投稿実績ではありません。
レシピの詳細では、材料と作り方の領域を#FFFFFFにして、手順番号も本文と同じ#293A35にします。「作り方を見る」のボタンは#235E55を背景、文字を#FFFFFFにします。補足のリンクには#235E55の文字と下線を使い、塗りつぶしボタンと区別します。料理写真は色の主役、文字とボタンは閲覧・操作のための色として役割を分けます。
コントラスト比は隣り合う色の相対的な明るさの差です。本文#293A35とサイト背景#F5F6F3は約11.06:1、材料の文字#293A35と白い面#FFFFFFは約11.99:1、補足文字#51635Bと白い面は約6.39:1です。ボタンの白文字#FFFFFFと青緑#235E55は約7.49:1です。いずれもWCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAが通常サイズの文字に求める4.5:1以上を満たします。
写真の見え方と材料・手順の操作を最終確認する
淡い面だけで写真カードを区切らない。写真表示面#E6ECE8とページ背景#F5F6F3は約1.10:1、白い材料面#FFFFFFと写真表示面も約1.20:1と差が小さいため、余白や見出しを併用します。写真カード全体が操作できて輪郭が必要なら#51635Bの枠線を加えると、写真表示面との比は約5.33:1です。
調理情報は写真より読めることを優先する。材料名・分量・加熱時間などは、写真の上に小さな文字で重ねず単色の面に置きます。アレルゲンなどの注意事項も色だけで強調せず、具体的な言葉で示します。実際に確認していない調理法や安全性を、配色例のために断定しないことが大切です。
スマートフォンでは写真と手順のつながりを確認する。写真の切り取りで料理の重要な部分が欠けないか、人数・材料・手順番号を順に追えるかを確かめます。リンクには下線を付け、押せるカードやボタンにはキーボード操作中の位置を示す枠（フォーカス表示）を残しましょう。背景色は料理の魅力を支えながら、読む・探す・作る操作を邪魔しないことが基本です。