写真家のポートフォリオに合う配色は？作品を主役にするWEBデザイン
写真家のポートフォリオでは、夕景のあたたかい色、雪景色の明るさ、夜景の暗さなど、写真ごとの特徴をそのまま見せたいものです。WEBサイトの背景や飾りが強すぎると、写真の色と競合したり、明るい作品の輪郭が埋もれたりします。今回は架空の風景写真家の作品一覧を例に、写真を主役にしながら作品名や問い合わせ先も見つけやすくする配色を考えます。
ページ背景を控えめにし、写真の明るさに応じて表示面を調整する
まず、雪原・夜の港・夕暮れの街を撮った写真を並べて比べます。これらは写真の明るさや色味が大きく異なるため、周囲を一律の濃色や鮮やかな色で埋めるより、彩度（色の鮮やかさ）を抑えた背景から試す方法があります。写真の雰囲気に合わせて背景を頻繁に切り替える前に、同じ余白と表示サイズで見え方を確かめます。
明るい雪景色では白い余白と写真の輪郭がつながって見えることがあります。この場合、写真の周りだけ暗めの面を用意すると境目を示せます。反対に、暗い夜景は明るい面に載せると外形を見つけやすくなります。どちらも写真自体の色を変えるのではなく、表示する周囲の色を調整する考え方です。
作品一覧のキャプション（写真に添える作品名や撮影情報）は、画像に重ねず外側の単色の面に置くと、背景との文字コントラストを確認しやすくなります。画像内には明部と暗部が混在するため、写真の上に白文字を置くだけでは、すべての場所で読めるとは限りません。
架空の風景写真家のポートフォリオを6色で組み立てる
「雪原」「夜の港」「夕景」の3シリーズを掲載する架空の写真家サイトを想定します。HEXコードは「#」と6桁の英数字でWEBの色を指定する書き方です。次の6色に役割を決めます。
- ページ全体：薄いウォームグレー #F5F3EE ― 作品一覧とキャプションを置く背景。
- 明るい表示面・ボタン文字：白 #FFFFFF ― 夜景を囲む表示面とボタン内の文字。
- 暗い表示面：チャコール #222C33 ― 明るい雪景色を囲む面や、短い見出しの背景。
- 見出し・本文：濃い青灰 #283940 ― 作品名、シリーズ紹介、問い合わせ案内。
- 補足文字・必要な枠線：グレー青 #53656C ― 撮影地・制作年の説明や、操作できるカードの輪郭。
- リンク・問い合わせボタン：深い青緑 #245F70 ― 下線付きのシリーズリンクと「撮影を相談する」ボタン。
ページの土台を#F5F3EEに統一し、明るい雪景色は#222C33、夜景は#FFFFFFの面に余白を取って配置します。夕景も両方の面で試し、写真の色味を不必要に変えずに収まりのよい方を選びます。作品名は表示面の下に#283940で、撮影地などの補足は#53656Cで示します。この写真家・作品シリーズ・撮影情報は配色説明用の架空の例です。
問い合わせボタンは明るいページ背景#F5F3EEの上に置き、塗り色を#245F70、文字を#FFFFFFにします。シリーズを開く文章リンクは#245F70の文字に下線を付けます。暗い表示面#222C33の中へ同じ青緑ボタンをそのまま置くのではなく、操作を明るい案内面へ分けると、ボタンと周囲の色の関係を整理できます。
コントラスト比は、隣り合う色の相対的な明るさの差です。作品名#283940とページ背景#F5F3EEは約10.82:1、補足文字#53656Cとページ背景は約5.50:1、暗い面#222C33に載せる白文字#FFFFFFは約14.23:1、ボタンの白文字と青緑の背景#245F70は約7.13:1です。いずれもWCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAで通常サイズの文字に求められる4.5:1以上を満たします。下線付きリンク#245F70とページ背景の比も約6.43:1です。
写真の輪郭・表示サイズ・問い合わせ導線を最終確認する
明るい写真の余白を背景だけで区切らない。白い面#FFFFFFとページ背景#F5F3EEは約1.11:1で、境界が目立ちにくい組み合わせです。作品カード全体をクリックできるようにする場合は、グレー青#53656Cの枠線を白い面に加えると、約6.09:1の差になります。枠は作品そのものではなく、その外側に配置します。
トリミングと写真の並び方も確認します。サムネイル（一覧用の小さな写真）を同じ枠へ入れる際は、被写体を不自然に切らずに全体を見せる方法も検討します。色温度の違う写真を一律のフィルターでそろえるのではなく、作品の色や明暗を残し、余白と並び順でまとまりを作ります。
スマートフォンでも作品名と操作の対応を保ちます。写真の直後に作品名・撮影情報・詳細リンクが続く配置にし、リンクには下線を付けます。問い合わせボタンや作品カードには、キーボード操作中の位置を示す枠（フォーカス表示）も用意し、周囲の色との違いを確認してください。ここで示したコントラスト比は文字や操作の組み合わせの値であり、写真の色が正確に再現されることを保証するものではありません。