ヘッダーデザインの配色がチグハグになってしまうなら色彩を統一しよう。Photoshop編

webデザイン

魅せる伝えるヘッダーデザインを作成する5つの工程の3番目、ここでは③ 色彩の統一について解説します。配色が苦手でどうもチグハグしてしまう、、そんな悩みは無用!配色バランス概念を知ってカラースキームに当てはめちゃえばいいじゃない。

  • ① 基調と概念
  • ② 構成要素の配置
  • ③ 色彩の統一
  • ④ 文章の表現
  • ⑤ 細部の作り込み

チグハグな配色

↑ 感覚だけで色を決めようとすると浮いてしまうよね・・

配色の基本

配色バランスのベースカラー、メインカラー、アクセントカラーという基本概念を知ろう。

配色バランス

だいたい60:30:10ですが、70:25:5とかでもいけます。

ベース画像

今回ヘッダーで使用する画像ではベースカラーがダークブルー、メインカラーがワインレッドになりますが、アクセントカラーに迷ったらメインカラーの補色をもってこよう

アクセントカラー?

補色

画像レイヤーを複製してイメージ 》色調補正 》諧調の反転をしてテキストにメインの補色にあたるカラーを適用させる。

諧調を反転

諧調を反転させたレイヤーを削除し、【mischievousDressy】のロゴをメインカラーのワインレッドに変更すれば若干スモーキーなグリーンがアクセントとして効いたヘッダーデザインが完成しました!

アクセントに効いたヘッダー

しかし・・、完成したと思ったヘッダーをテンプレートにはめた途端グリーンがハンパない違和感を訴えてきます

テンプレ

この理由についてはもうお分かりのとおりですが、ヘッダーはウェブサイトにおける構成要素のひとつなのでサイト全体でブランドイメージを構築する場合には、その全体で配色バランスをとる必要があるわけですね。(ってことで、ここでは補色無しの方向で進みます。)

テンプレ配色

左の場合、サイト全体のベースカラーをダークブルーにすればメインカラーがワインレッドとなり背景に映る街灯の白色がアクセントカラー右のように白色をベースカラーにすればダークブルーがメインカラー、ワインレッドが必然的にアクセントカラーになります

現状、左はメインカラーの割合が少ないので背景にワインレッドのラメを散りばめたり、右はベースカラーの白色でボディの面積を広げバランスをとりながら調整するともっとしっくりくるのがイメージできるかと思います。

それではここから、サイト全体の構成要素を踏まえたうえで配色バランスを整えていこう!

③ 色彩の統一

テキストを入れる前のヘッダーのベース画像を保存。

ベース画像

Adobe Kulerにアクセスし、右上のカメラマークのところから画像をアップロード。

画像をアップロード

ColorfulBrightDeepなどに適したカラーを抽出してくれます(今回はColorful)。

Bright

Adobeのアカウントでログインすると抽出したカラーをSAVEすることができダウンロードも可能になります。(ログインしなくてもキャプチャーを取れば色を使用できますね)

カラーをSAVE

ダウンロードファイルをフォトショップで開けばスウォッチに追加されます。

スウォッチ

ここに追加されたカラーを使用すればまずハズレることはないでしょう

今回はベースカラーを街灯の白色、メインカラーをダークブルー(スウォッチの右から2番目)、アクセントカラーをワインレッド(スウォッチの右から5番目)で適用して ↓ このような感じで構成していこうと思います。

サイト全体の配色バランス

配色バランス概念を知って色彩を統一すればもう配色に迷うことはなくなりますね、Adobe Kulerの機能が素晴らしいので有効的に使えるようにしよう!

続いて、④ 文章の表現の工程ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。】に進んでいきます。

基調と概念構成要素の配置色彩の統一文章の表現⑤ 細部の作り込み

スリームデザイン

3,133,855 views

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとマーケティングと玄米ご飯。 フリーランス時代に独学で身に...

プロフィール

ピックアップ記事

関連記事一覧

小笠原広記

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインと玄米ご飯。

 

フリーランス時代に独学で身に付けた技術を活かし、世界規模のデザインコンテストで日本人初の大賞を受賞&Photoshopの専門書を出版。

 

ブログ集客のエキスパートとして企業や個人のコンサルティングをしながら、コンテンツマーケティングやコピーライティングを手掛けるブログマーケターである。