サイトを作る時、
どんな配色にするか悩みませんか？
「配色なんてセンスないからムリ！」
とあきらめるのはまだ早いですよ！
色合わせの基礎を抑えて、
あとは便利なツールに頼っちゃいましょう（笑）
今回は素人でもプロっぽく仕上がる
色合わせの方法ついてお伝えします＾＾
サイトの配色を考えるとき、
皆さんはどうやって色を選んでいますか？
「色ってセンスでしょ？」と思われがちですが、
コツや原則がわかれば、素人でもマスターできるものです＾＾
アフィリエイトサイトや販売LPなどは、
オシャレさよりも、ユーザーを行動させることが大事。
全体がまとまっていて、印象よい配色になれば
目的は達成できますもんね＾＾
そんな、ユーザーを行動させるためのサイト作りは
次のようなポイントを意識してみてください。
キーカーラーの設定
先日も「Amazonを色選びの参考にする」
というお話をさせていただきましたが、
まずは、サイトのキーカラーを決めましょう。
例えば、、
女性向けのダイエットならピンク、
資格取得ならスッキリした青など、
そのサイトのメインとなる色を決めます。
それをベースに、サイト内で使う色は
最大4～5色くらいに抑えるのが良いです。
3色など色を抑えるほうが、
全体のまとまりは良くなります。
ただ、1色、2色だと単調になりがちなので、
3～4色くらいが良いでしょう。
なぜ色が少ないほうが良いのか？というと、
ファーストビューや挿絵に写真を使うからです。
「画像はイラストがメイン」という方は
イラストに使う色も意識して合わせるといいです。
ですが、写真を使うことが多いなら、
色は抑えるほうがよいでしょう。
写真の中には、いろんな色がありますよね？
さらにサイトの装飾で色をたくさん使ってしまうと
ゴチャゴチャしてしまうのです。
色合わせに迷ったら、「Adobe ColorCC」
というサイトで色選びをしてみてください。
Adobe ColorCCの使い方は
こちらの動画でもご紹介していますので、
参考にしてみてくださいね＾＾
（9分45秒～から使い方が始まります）
Adobe ColorCCの「テーマの抽出」に
見本にしたいサイトのキャプチャ画面を
読み込ませてみてください。
そのサイトで使われている色を抽出して
カラーパレットを作ってくれたり、
「グラデーションを抽出」で
使いたい色のグラデーションを作ることができます。
見本にしたいサイトに似た配色にしたいとき、
とっても便利ですよ＾＾
また、Adobe ColorCCの他に、
自動で配色を選んでくれるサイトがあります。
それはPALETTLISTというサイトです。
PALETTLISTは、使いたい色を2色選ぶと、
それに合う色合わせを自動的に選んでくれます。
「青と黄色」「オレンジと緑」のように、
ざっくりメインの色使いを決めて選ぶと、
テイストに合わせた配色が表示されて便利ですよ＾＾
これが無料で使えるなんてありがたいですね～
配色選びの参考にしてみてください＾＾
編集後記
色合わせってなかなか難しいですよね～
特に補色（対照的になる色合わせ）とか、
類似色の加減が難しいなと感じます。
今日、ご紹介したツールを使えば、
案件のLPから色を抽出して雰囲気を合わせられます。
違和感なく案件LPを見てもらうためにも
使えるツールですよ＾＾！
私も便利ツールに助けられてます（笑）
