【選ぶだけ!】Cocoonスキンでオシャレにサイトカスタマイズ スキン配色☆上級編

Cocoonスキン配色
この記事は約7分で読めます。

ワードプレスの無料テーマで検索すると、必ずと言っていいほどオススメされる高性能&カスタマイズ性の高い優良テーマの “Cocoon”。

その Cocoon なら、初心者さんでも簡単に、自分のサイトを自分好みのカラーで、オシャレにサイトカスタマイズ出来ちゃいます!

今回は、スキン配色☆上級編。

サイトデザインのベースとなるスキンを選んだら、それぞれのパーツに好みの色を選んでいきましょう。

初級編・中級編では、ポイントカラーやベースカラーなど、使用する色(有彩色)は基本的には1色だけでしたが、上級編の今回は、スキンに同じトーンの複数の色を取り入れて仕上げていきます。

それでは、初心者さんでも簡単! 選ぶだけで自分好みのオリジナルサイトに仕上げる「スキン配色☆上級編 同一 トーン配色」を紹介していきます。

 

 

1.サイトのイメージを決めよう

スキン配色☆上級編の今回は、色を複数使っていきます。

使う色が増えれば増えるほど、全体をまとめる難しさは上がっていきます。

「好きな色を選んだはずのに、仕上げてみたらなんか変。」

なんてことはよくあることで、どんな雰囲気のデザインにしたいか、どんなイメージのデザインにしたいかなどによって、使う色を選んでいくことがポイントです。

 

 

色のトーンのイメージをつかもう

色には、色相(色味)・明度(明るさ)・彩度(鮮やかさ)の3属性があります。

このうちの明度(明るさ)と彩度(鮮やかさ)を合わせた、色の調子を表すものがトーン(色調)です。

言葉だけだとイメージがつかみにくいですが、下の表を見ればとても分かりやすいと思います。

【 トーン表 】

このトーン表にもありますが、それぞれのトーンにはそのトーンが持つイメージがあります。

なので、どんな雰囲気のデザインにしたいか、どんなイメージのデザインにしたいかによって、使うトーンを選ぶことがポイントです。

 

下の図のように、同じ色相の緑でもトーンが変わればイメージも変わります。

色を複数使いたい場合には、トーンを合わせて全体のイメージを統一させるとまとまりやすいのです。

 

ちなみに「スキン配色☆中級編」では、色は1色で、その色のグラデーションと無彩色で仕上げましたよね。

「スキン配色☆中級編」の1カラーのグラデーションとは、上の図のように1カラーでトーンの違う色でまとめる方法のことなのです。

今回の「スキン配色☆上級編」は、中級編とは逆の方法です。

トーンを合わせて、複数のカラーで仕上げます。

トーンの持つイメージを参考に、サイトのイメージに合うトーンを選んでみましょう。

 

 

2.同じトーンの色を選ぼう

まずは、選んだスキンの特性を確認しておきましょう。

 

今回のスキンは「Fuwariー御召茶(おめしちゃ)ー」を使用しました。

今回使用の「Fuwari」シリーズは、ほとんどのパーツのカラー変更が、スキンのもともとの設定の影響を受けることなく変更出来ます。

 

 

➊.サイトのイメージカラーを選ぼう

まずは、サイトの面積を占める割合の多いパーツから色を決めていくと仕上げやすいと思います。

サイトの面積を占める割合が多いということは、そのサイトのイメージを印象付ける割合も大きいということで、その色がサイトのイメージカラーになります。

サイトの面積を占める割合が多いパーツは、下記の3つです。

・サイトキーカラー
・背景色
・ヘッダー全体背景色

パソコンでのサイト閲覧をメインに考えるなら、サイトの面積を一番多く占めるパーツは “ 背景色 ” です。

でも、スマホなどでサイトを閲覧した場合には、サイト背景はほぼカットされるので、スマホでのサイト閲覧をメインに考えるなら、サイトの面積を多く占めるパーツは “ヘッダー全体背景色  ” や “ サイトキーカラー ” になります。

ちなみに・・・私の場合は、

“ サイトキーカラー ” から選んでいくことが多いです。

 

色の探し方・選び方は、「スキン配色☆初級編」と同じですが、こちらのサイトを参考にするとイメージ通りの色が探しやすいと思います。

Color Hunt – Color Palettes for Designers and Artists

 

 

➋.同じトーンの色の探し方

サイトのイメージカラーが決まったら、その色と同じトーンの色を他のパーツに取り入れていきます。

下記の手順で、同じトーンの色を選んでいきましょう。

薄い色や明るい色の場合には、同じトーンの複数の色を使ってもまとめやすいのですが、暗めのトーンになればなるほど、少ない色でまとめるか、白よりの無彩色を取り入れた方がまとまりやすいです。

サイトのイメージを印象付けるパーツは、以下の4つです。

・サイトキーカラー
・背景色
・ヘッダー全体背景色
・グローバルナビ色

サイトのイメージカラーと同じトーンの色、または無彩色を取り入れて仕上げていきましょう。

下記の文字の色については、トーンにこだわらずにはっきりした色で、読みやすさを第一優先に色を選んでいきましょう。

・サイトキーテキストカラー
・文字色
・ヘッダー全体文字色
・グローバルナビ文字色

 

 

3.変更例 ビフォアー&アフター

参考までに「同一 トーン配色」の変更例がこちらです。

Before

スキン Fuwari-御召茶(おめしちゃ)-

変更なし

After その1

〔ライトトーン〕

【 変更パーツ 】
・サイトキーカラー(#d9f4d2)
・サイトキーテキストカラー(#4d681f)
・文字色(#4d681f)
・背景色(#fddaec)
・ヘッダー全体背景色(#d9f4d2)
・ヘッダー全体文字色(#4d681f)
・グローバルナビ色(#f4f1d2)
・グローバルナビ文字色(#4d681f)

 

After その2

〔ダークトーン〕

【 変更パーツ 】
・サイトキーカラー(#635d0d)
・サイトキーテキストカラー(指定無し)
・文字色(指定無し)
・背景色(#005163)
・ヘッダー全体背景色(#005163)
・ヘッダー全体文字色(指定無し)
・グローバルナビ色(#635d0d)
・グローバルナビ文字色(指定無し)

After その3

〔ビビッドトーン〕

【 変更パーツ 】
・サイトキーカラー(#ef5f00)
・サイトキーテキストカラー(指定無し)
・文字色(指定無し)
・背景色(#eded00)
・ヘッダー全体背景色(#ef5f00)
・ヘッダー全体文字色(指定無し)
・グローバルナビ色(#00dded)
・グローバルナビ文字色(指定無し)

今回のテーマ「スキン配色☆上級編 同一 トーン配色」は、いかがでしたか?

今回のポイントのまとめがこちら。

・複数の色を使う場合には、同一 トーンの色を選ぼう。
・トーンの持つイメージを参考に、仕上げたいイメージに合うトーンを選ぼう。

今回の「スキン配色☆上級編 同一 トーン配色」も、ぜひオリジナルサイトを作る際の参考にしてみてください☆

 

ちなみに、複数の色を使いたい場合には、「すでに色が組み合わされている配色パターンを参考にする方法」もおすすめです。

こちらも、ぜひ参考にしてみてください。

 

 

タイトルとURLをコピーしました