写真とデザインカラーの組み合わせとは?写真とデザインを調和させる方法

基本の理解

まずはこの考え方が何を指しているのか、そしてなぜ必要なのかを押さえましょう。

写真とデザインカラーの組み合わせとは何か

写真とデザインカラーの組み合わせとは、サイトやバナーに使う写真の色味と、その周囲に配置する文字・背景・図形などのデザインの色(ベースカラー・メインカラー・アクセントカラー)を調和させることです。

※ベースカラー・メインカラー・アクセントカラーとは、配色を3つの役割に分ける考え方です。ベースカラーは最も広い面積を占める土台の色(白や淡いグレーなど)、メインカラーはデザインの印象を決める主役の色、アクセントカラーはごく狭い面積だけに使って一点を目立たせる色を指します。

写真とデザインの色が調和することで、パーツごとにばらばらな印象にならず、まとまりのあるデザインになります。

写真から色を抽出して活用することで、根拠を持って配色を決められるのも利点です。

なぜ写真とデザインの色を調和させる必要があるのか

写真は多くの色を含んでいるため、周囲のデザインの色と無関係に配色すると、写真だけが浮いて見えてしまうことがあります。

写真とブランドイメージとしての統一感を出すためにも、写真の色とデザインカラーの関係を意識する必要があります。

写真とデザインを調和させる方法

ここからは、写真とデザインの色を調和させる具体的な方法を4つ紹介します。

方法1:写真から色を抽出してアクセントカラーに使う

1つ目は、写真の中の印象的な色(商品のパッケージ色など)を抽出し、それをアクセントカラーとして周囲のデザインに使う方法です。

たとえばイチゴのスイーツの写真なら、イチゴの濃い赤をスポイトで取り、見出しの下線や「購入はこちら」ボタンの色に使います。

写真の中にある色がデザインにも繰り返し登場するので、写真と画面が自然になじみます。

写真(イラストで代用)のイチゴの赤を、見出しの下線とボタンにだけ使った例

抽出した色を使うのは、見出しの下線やボタンなどごく狭い面積だけにとどめるのがポイントです。

背景まで同じ赤で塗ると写真のイチゴが目立たなくなるため、背景は白やクリーム色など写真になじむ控えめな色にします(面積の目安は強調色の使い方とは?で解説しています)。

なお、写真から取った色をボタンに使うときは、ボタンの文字色との組み合わせで読みやすさを確保できるかも確認しましょう(上の例の濃い赤#b8172fと白文字のコントラスト比は約6.6:1で、本文の目安4.5:1を満たしています)。

方法2:写真の色調に合わせて周りの色の系統を揃える

2つ目は、写真全体の色調(赤・オレンジなど温かみを感じる暖色系か、青・青緑など涼しさを感じる寒色系か)に合わせて、背景や見出しなどの色の系統を揃える方法です。

基本は、広い面積に使うメインカラーやベースカラーは写真と同じ系統でまとめ、反対の系統の色は狭い面積のアクセントにだけ使うと考えると迷いません。

写真の例	メイン・ベースに合う色(同じ系統)	アクセントの例(反対の系統)
青空・海(寒色)	ネイビー ごく淡い水色	オレンジのボタン
カフェのコーヒー(暖色)	ブラウン ベージュ	深い緑の小さなアイコン
森・観葉植物(緑)	深い緑 ごく淡いグリーングレー	赤みのある小さなラベル

同じ系統でまとめると一体感が、反対の系統を少しだけ入れるとメリハリが生まれます。

反対の系統の色(補色に近い色)を広い面積に使うと、写真と張り合って落ち着かない印象になるので注意しましょう(補色については補色とは?で解説しています)。

方法3:写真の上の文字は「帯・暗幕・影」で読みやすくする

写真の上に文字を乗せると、写真の明るい部分と暗い部分、細かい柄が文字に重なって読みにくくなりがちです。

そんなときは、次のような方法で文字の後ろを落ち着かせます。

• 半透明の帯を敷く
  文字の後ろにだけ、半透明の黒(白文字の場合)や白(黒文字の場合)の帯を敷きます。
• 写真全体を暗くする(暗幕をかける)
  写真全体、または文字がある側だけに、黒の半透明やグラデーションを重ねて暗くします。
• 文字に影をつける
  文字に薄いドロップシャドウ(影)をつけて、背景との境目をはっきりさせます。
  ただし影だけでは足りないことも多いので、帯や暗幕と組み合わせると確実です。
• 写真の落ち着いた部分に文字を置く
  空や壁など、柄が少なく明るさが均一な部分を選んで文字を置きます。
  最初からそうした余白のある写真を選ぶのも有効です。

背景は写真の代わりに、明るさの違う色を混ぜたグラデーションで表現しています

写真の上の文字は、場所によって背景の明るさが変わるため、文字の後ろで一番明るい(または一番暗い)部分で読めるかどうかを確認するのがコツです。

上のOK例では、一番明るい白の部分でも、帯を敷いた後の背景と白文字のコントラスト比が本文の目安4.5:1を上回るように、帯の濃さ(不透明度60%)を決めています(コントラスト比の考え方はコントラスト比とは?で解説しています)。

方法4:複数の写真は同じ補正で色調を揃える

別々の場所や時間に撮影した写真を並べると、明るさや色味(青っぽい・黄色っぽいなど)がそろわず、デザイン側の色を整えても統一感が出ません。

写真加工の専門知識がなくても、次のような方法で色調を揃えられます。

• すべての写真に同じフィルターをかける
  スマホの写真アプリやデザインツールのフィルター(プリセット)を、すべての写真に同じ強さでかけます。
• 明るさと色味をそろえる
  明るさ・コントラスト・色温度(青っぽさと黄色っぽさ)の補正を、基準にする1枚に近づけるように調整します。
• すべてモノクロ(白黒)にする
  写真の色をなくして、色はデザイン側のアクセントカラーだけで表現します。
  写真の色味がどうしても揃わないときの最終手段として有効です。
• これから撮るなら撮影条件をそろえる
  同じ時間帯・同じ照明・同じ背景で撮ると、後から補正する手間が大きく減ります。

Webサイトでは、CSSのfilterプロパティを使って、表示するときにだけ写真をモノクロにしたり彩度を下げたりすることもできます。

/* ギャラリーの写真をすべてモノクロで表示する */
.gallery img {
  filter: grayscale(100%);
}

/* 写真の彩度を少し下げて落ち着かせる */
.gallery img {
  filter: saturate(70%);
}

CSSのfilterは表示を変えるだけで、画像ファイル自体は変わりません。

実践のポイント

写真とデザインカラーを組み合わせる際に陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 写真の色味を無視して、デザイン側の色だけで配色を決めてしまい、組み合わせたときに写真だけ浮いて見えることがあります。
  配色を決める際は、実際に使う写真も並べて確認しましょう。
• 複数の写真を使う場合、写真ごとに色味の系統がバラバラだと、いくらデザイン側の色を揃えても統一感が出ません。
  使用する写真全体の色調をあらかじめ揃えておくことが大切です(方法4を参照)。

よくある質問

• Q. 写真から色を抽出する簡単な方法は?
  A. 多くのデザインツールには、画像から主要な色を抽出する「スポイト」や「カラーパレット抽出」機能があります。
  これを使えば、写真の中の印象的な色を簡単にHEXカラーコード(#FF6600のように、Webで色を指定するときに使う6桁の英数字の記号)として取得できます。
• Q. さまざまな色の写真を使わざるを得ない場合はどうすればいい?
  A. 写真自体の色は変えられなくても、周囲の背景や文字などデザイン側の色を無彩色(白・グレー・黒のように色みを持たない色)中心にすることで、写真の色が多少バラバラでも全体の印象を落ち着かせられます。
  背景を白やごく薄いグレー、文字をダークグレーで統一すると、地味になるどころか写真の色が引き立ち、ギャラリーやECサイトのような洗練された仕上がりになります(下の見本を参照)。
  無彩色の使い方は有彩色・無彩色とは?で解説しています。

色味の違う写真(色のブロックで代用)も、背景・カード・文字を無彩色にすると落ち着いてまとまる

まとめ

写真とデザインカラーの組み合わせとは、写真の色味と周囲のデザインの色を調和させることです。

写真から色を抽出してアクセントカラーに使う、写真の色調に合わせて周りの色の系統を揃える、写真の上の文字は帯や暗幕で読みやすくする、複数の写真は同じ補正で色調を揃える、といった方法で調和を作れます。

まずは今作っているデザインに実際の写真を並べ、写真の中の色をスポイトで1色取って、見出しの下線かボタンに使ってみてください。