ワードプレスの無料テーマで検索すると、必ずと言っていいほどオススメされる高性能&カスタマイズ性の高い優良テーマの “Cocoon”。
その Cocoon なら、初心者さんでも簡単に、自分のサイトを自分好みのカラーで、オシャレにサイトカスタマイズ出来ちゃいます!
今回は、スキン配色☆上級編。
サイトデザインのベースとなるスキンを選んだら、それぞれのパーツに好みの色を選んでいきましょう。
初級編・中級編では、ポイントカラーやベースカラーなど、使用する色(有彩色)は基本的には1色だけでしたが、上級編の今回は、スキンに同じトーンの複数の色を取り入れて仕上げていきます。
それでは、初心者さんでも簡単! 選ぶだけで自分好みのオリジナルサイトに仕上げる「スキン配色☆上級編 同一 トーン配色」を紹介していきます。
サイトデザインのベースとなるスキンをまだ選んでいない場合は、こちらの記事を。
(スキン無しでもサイトのカラーカスタマイズは出来ます。)
1.サイトのイメージを決めよう
スキン配色☆上級編の今回は、色を複数使っていきます。
使う色が増えれば増えるほど、全体をまとめる難しさは上がっていきます。
「好きな色を選んだはずのに、仕上げてみたらなんか変。」
なんてことはよくあることで、どんな雰囲気のデザインにしたいか、どんなイメージのデザインにしたいかなどによって、使う色を選んでいくことがポイントです。
色のトーンのイメージをつかもう
色には、色相(色味)・明度(明るさ)・彩度(鮮やかさ)の3属性があります。
このうちの明度(明るさ)と彩度(鮮やかさ)を合わせた、色の調子を表すものがトーン(色調)です。
言葉だけだとイメージがつかみにくいですが、下の表を見ればとても分かりやすいと思います。
【 トーン表 】
このトーン表にもありますが、それぞれのトーンにはそのトーンが持つイメージがあります。
なので、どんな雰囲気のデザインにしたいか、どんなイメージのデザインにしたいかによって、使うトーンを選ぶことがポイントです。
下の図のように、同じ色相の緑でもトーンが変わればイメージも変わります。
色を複数使いたい場合には、トーンを合わせて全体のイメージを統一させるとまとまりやすいのです。
ちなみに「スキン配色☆中級編」では、色は1色で、その色のグラデーションと無彩色で仕上げましたよね。
「スキン配色☆中級編」の1カラーのグラデーションとは、上の図のように1カラーでトーンの違う色でまとめる方法のことなのです。
今回の「スキン配色☆上級編」は、中級編とは逆の方法です。
トーンを合わせて、複数のカラーで仕上げます。
トーンの持つイメージを参考に、サイトのイメージに合うトーンを選んでみましょう。
2.同じトーンの色を選ぼう
まずは、選んだスキンの特性を確認しておきましょう。
確認の手順は、「スキン配色☆初級編」のこちらの記事を ↓
今回のスキンは「Fuwariー御召茶(おめしちゃ)ー」を使用しました。
今回使用の「Fuwari」シリーズは、ほとんどのパーツのカラー変更が、スキンのもともとの設定の影響を受けることなく変更出来ます。
①.サイトのイメージカラーを選ぼう
まずは、サイトの面積を占める割合の多いパーツから色を決めていくと仕上げやすいと思います。
サイトの面積を占める割合が多いということは、そのサイトのイメージを印象付ける割合も大きいということで、その色がサイトのイメージカラーになります。
サイトの面積を占める割合が多いパーツは、下記の3つです。
・背景色
・ヘッダー全体背景色
パソコンでのサイト閲覧をメインに考えるなら、サイトの面積を一番多く占めるパーツは “ 背景色 ” です。
でも、スマホなどでサイトを閲覧した場合には、サイト背景はほぼカットされるので、スマホでのサイト閲覧をメインに考えるなら、サイトの面積を多く占めるパーツは “ヘッダー全体背景色 ” や “ サイトキーカラー ” になります。
ちなみに・・・私の場合は、
“ サイトキーカラー ” から選んでいくことが多いです。
色の探し方・選び方は、「スキン配色☆初級編」と同じですが、こちらのサイトを参考にするとイメージ通りの色が探しやすいと思います。
Color Hunt – Color Palettes for Designers and Artists
そのサイトで見つけた色を、サイト上に反映させる方法は、こちらの記事を ↓
②.同じトーンの色の探し方
サイトのイメージカラーが決まったら、その色と同じトーンの色を他のパーツに取り入れていきます。
下記の手順で、同じトーンの色を選んでいきましょう。
『絶対に同じトーンでなければならない』ということはありません。
同じくらいのトーンで大丈夫です。
薄い色や明るい色の場合には、同じトーンの複数の色を使ってもまとめやすいのですが、暗めのトーンになればなるほど、少ない色でまとめるか、白よりの無彩色を取り入れた方がまとまりやすいです。
サイトのイメージを印象付けるパーツは、以下の4つです。
・背景色
・ヘッダー全体背景色
・グローバルナビ色
サイトのイメージカラーと同じトーンの色、または無彩色を取り入れて仕上げていきましょう。
下記の文字の色については、トーンにこだわらずにはっきりした色で、読みやすさを第一優先に色を選んでいきましょう。
・文字色
・ヘッダー全体文字色
・グローバルナビ文字色
3.変更例 ビフォアー&アフター
参考までに「同一 トーン配色」の変更例がこちらです。
〔ライトトーン〕
【 変更パーツ 】
・サイトキーカラー(#d9f4d2)
・サイトキーテキストカラー(#4d681f)
・文字色(#4d681f)
・背景色(#fddaec)
・ヘッダー全体背景色(#d9f4d2)
・ヘッダー全体文字色(#4d681f)
・グローバルナビ色(#f4f1d2)
・グローバルナビ文字色(#4d681f)
〔ダークトーン〕
【 変更パーツ 】
・サイトキーカラー(#968701)
・サイトキーテキストカラー(指定無し)
・文字色(指定無し)
・背景色(#005163)
・ヘッダー全体背景色(#005163)
・ヘッダー全体文字色(指定無し)
・グローバルナビ色(#968701)
・グローバルナビ文字色(指定無し)
〔ビビッドトーン〕
【 変更パーツ 】
・サイトキーカラー(#f9b208)
・サイトキーテキストカラー(指定無し)
・文字色(指定無し)
・背景色(#f7fd04)
・ヘッダー全体背景色(#f9b208)
・ヘッダー全体文字色(指定無し)
・グローバルナビ色(#04f4e4)
・グローバルナビ文字色(指定無し)
今回のテーマ「スキン配色☆上級編 同一 トーン配色」は、いかがでしたか?
今回のポイントのまとめがこちら。
・トーンの持つイメージを参考に、仕上げたいイメージに合うトーンを選ぼう。
今回の「スキン配色☆上級編 同一 トーン配色」も、ぜひオリジナルサイトを作る際の参考にしてみてください☆
ちなみに、複数の色を使いたい場合には、「すでに色が組み合わされている配色パターンを参考にする方法」もおすすめです。