イラストレーターのサイトに合う配色は？作品の色と競合しない背景色
イラストレーターのサイトでは、赤や青の鮮やかな作品、白地の線画、背景が透明なイラストなどを一緒に見せることがあります。サイト側の背景にも強い色を使うと、作品ごとの色と競合し、一覧で見たときにまとまりにくくなる場合があります。今回は架空のイラストレーターの作品紹介ページを例に、作品を引き立てる背景と、作品名・問い合わせ先を読みやすくする色選びを考えます。
背景は控えめにし、作品ごとの見え方を比べて決める
最初に、実際に並べるイラストを数点選びます。例えば「赤と黄色の花を描いた作品」「鮮やかな青い海の生き物」「白地の黒い線画」の3点です。それぞれを同じ背景に並べ、色が強い作品だけが目立ちすぎないか、淡い線や余白が背景へ溶け込まないかを確認します。
作品にさまざまな色がある場合は、ページの広い面を彩度の低い色（鮮やかさを抑えた色）にすると、新たな強い色を足さずに済みます。ただし、必ず白やグレーが正解というわけではありません。明るい絵も暗い絵も並べてから、色と輪郭が見分けられる背景を選ぶことが大切です。
背景が透明な画像は、置いた場所の色が透けて見えます。元の作品に白い背景が描かれている場合とは見え方が変わるため、透過画像には表示用の白い面を用意するなど、作品の意図に合う見せ方を確認しましょう。作品そのものに色フィルターを重ねてサイトへ無理に合わせる必要はありません。
作品一覧と問い合わせを5色で組み立てる
雑誌の挿絵・絵本の線画・ポスター作品を掲載する架空のポートフォリオを考えます。ポートフォリオとは制作した作品をまとめて紹介するものです。HEXコードは「#」と6桁の英数字で色を指定する書き方です。次の5色に役割を分けます。
- ページ背景：薄いウォームグレー #F4F3EE ― 作品一覧全体の土台。
- 作品を載せる面：白 #FFFFFF ― 透明背景のイラストや白地の線画を置く共通の面。
- 見出し・作品名：濃い青灰 #27373E ― 作品名、制作内容、問い合わせ案内。
- 補足文字・必要な枠線：グレー青 #52646A ― 制作年、媒体、クリックできる作品カードの輪郭。
- リンク・問い合わせボタン：深い青緑 #245E68 ― 作品詳細の下線付きリンクと「制作を相談する」ボタン。
作品一覧の背景は#F4F3EEにして、すべてのサムネイル（一覧に表示する小さな作品画像）を#FFFFFFの面に置きます。赤い花の絵、青い海の絵、白地の線画を同じ大きさの表示枠で比べ、必要なら作品の周囲に余白を残します。作品名は#27373E、制作媒体や制作年は#52646Aで表示します。作品例は説明用の架空の設定で、実在する制作実績ではありません。
本文中の作品詳細リンクは#245E68の文字に下線を付けます。「制作を相談する」のボタンは#245E68を背景、#FFFFFFを文字として使用します。背景に目立つ色を足さず、問い合わせという操作だけに強い色を限定する方法です。
コントラスト比とは、隣り合う色の相対的な明るさの差です。見出し#27373Eとページ背景#F4F3EEは約11.10:1、作品名#27373Eと白い面#FFFFFFは約12.34:1、補足文字#52646Aと白い面は約6.20:1です。ボタンの白文字#FFFFFFと深い青緑#245E68は約7.30:1、下線付きリンクとページ背景は約6.57:1です。これらはWCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAで通常サイズの文字に求める4.5:1以上を満たします。
白い作品・サムネイルの境界・スマホ表示を確認する
白い部分が多い作品の輪郭を確かめます。白い作品表示面#FFFFFFとページ背景#F4F3EEのコントラスト比は約1.11:1と小さく、境目が分かりにくい場合があります。作品カード全体が操作できて輪郭が必要なときは、#52646Aの細い線を表示面の外周に加えると、白との比は約6.20:1です。画像そのものの輪郭を不必要に太く囲わないようにします。
サムネイルの切り取り方をそろえます。絵の端を切ると作品の印象が変わるため、一覧では同じ表示枠を使っても画像全体が見える配置を検討します。透明部分がある画像も、白い面の上で色と余白を確認します。画像の説明には作品名や内容を文字で添え、色だけで作品を区別しないようにします。
小さい画面でも作品と案内を分けます。スマートフォンで一覧が縦並びになったとき、作品名・制作情報・詳細リンクが対応する画像の近くに残るか確認します。クリックできるカードや問い合わせボタンには、キーボード操作で現在の位置を示す枠（フォーカス表示）も用意し、隣の色との違いを点検します。作品の配色を主役にして、サイトの色は閲覧と連絡を支える役割にとどめましょう。