ポートフォリオサイトの配色はどう決める？作品を引き立てる色選び
ポートフォリオサイトの主役は、掲載する作品です。色鮮やかなイラスト、シンプルなロゴ、WEBサイトの画面などを一緒に並べると、サイト側の背景色がそれぞれの見え方に影響します。作品の個性を残しながら、制作内容や問い合わせ先も見つけやすくするには、作品の色とサイトの操作色を分けて考えることが大切です。
作品を数点並べ、明るい背景と暗い背景を比較する
最初に、掲載予定の作品を4〜6点ほど並べてみましょう。白い余白が多いロゴやアプリ画面は、真っ白な背景と境目が分かりにくい場合があります。一方、暗い写真や黒を基調としたデザインは、背景まで暗くすると輪郭が沈むことがあります。明るい作品と暗い作品の両方を見て、作品一覧に共通で使う背景を選びます。
色が多い作品を集める場合は、背景に別の鮮やかな色を足すより、彩度（色の鮮やかさ）を抑えた白やグレーに近い色を基本にすると、作品同士が色で競いにくくなります。作品のサムネイル（一覧で使う小さな画像）には同じ余白やカードの形を使い、必要に応じて枠線で端を示します。
作品の印象をそろえるために、画像そのものへ一律に色フィルターを重ねる必要はありません。ロゴや制作画面の色を確認してもらうサイトでは、元の配色を変えず、周囲の背景で調整する方が作品の情報を保てます。
作品一覧・解説・問い合わせをまとめる配色例
イラスト・ロゴ・WEB制作事例を掲載するポートフォリオを想定した例です。HEX（ヘックス）は、WEBで使う色を16進数で指定するカラーコードです。
- 作品一覧の背景：ごく淡いニュートラルグレー #F7F7F4。色の異なる作品を並べるための静かな土台として広く使います。
- サムネイルのカード：白 #FFFFFF。背景のグレー #F7F7F4 との差は約1.07:1なので、カードの輪郭をこの色差だけで表さないようにします。
- カードの枠線：ブルーグレー #76828A。白 #FFFFFF に対して約3.94:1、背景のグレー #F7F7F4 に対して約3.67:1のコントラスト比を確保します。
- 作品名・制作年・担当範囲：濃いチャコール #283238。白 #FFFFFF の上で約13.10:1、淡いグレー #F7F7F4 の上で約12.20:1です。
- 事例の説明パネル：淡いグレーグリーン #EDF1F0。この上に濃いチャコール #283238 の本文を載せると、約11.50:1になります。
- 見出し・テキストリンク：深い青 #24586B。白 #FFFFFF の上で約7.83:1、説明パネルのグレーグリーン #EDF1F0 の上で約6.87:1です。リンクには下線も付けます。
- 「制作を相談する」ボタン：深い青 #24586B の背景に白 #FFFFFF の文字。コントラスト比は約7.83:1です。作品の色を邪魔しないよう、強い操作色を問い合わせ先などに絞ります。
サイト側は低彩度の背景と濃い文字を中心にし、深い青をナビゲーションや主な操作の共通色として使います。作品ごとの色が違っていても、情報の読み方と操作の場所には統一感を持たせられます。
個別作品の背景とスマホ表示を最後に調整する
黒や暗い色が少ない作品を大きく見せたい場合は、詳細ページの一部分だけ濃いチャコール #232B31 の背景にする方法もあります。その上に淡いグレー #F7F7F4 の説明文を置くと約13.39:1です。ただし暗い作品が背景に埋もれないかは、個別の画像で確認してください。
作品画像の上にタイトルを重ねると、画像内の明暗で文字の見え方が変わります。作品名・担当範囲・制作意図は画像の外の単色面に置き、スマートフォンではサムネイルの切り抜きによって重要な部分が欠けていないか確認します。「詳しく見る」などの操作も、色だけでなく言葉や下線で伝えます。
WCAG（WEBコンテンツを利用しやすくするためのガイドライン）2.2のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字には3:1以上のコントラスト比が求められます。操作や情報の理解に必要な枠線などの非テキスト要素は、隣接色と3:1以上が基準です。上記の値は指定した色の組み合わせでの計算結果です。実際の画像や背景を変更したら、その場所の文字や境界を改めて確認しましょう。