もうサイトの配色に迷わない!素人でも色選びが上手くなる方法

サイトを作る時、
どんな配色にするか悩みませんか?

「配色なんてセンスないからムリ!」
とあきらめるのはまだ早いですよ!

色合わせの基礎を抑えて、
あとは便利なツールに頼っちゃいましょう(笑)

今回は素人でもプロっぽく仕上がる
色合わせの方法ついてお伝えします^^

サイトの配色を考えるとき、
皆さんはどうやって色を選んでいますか?

「色ってセンスでしょ?」と思われがちですが、
コツや原則がわかれば、素人でもマスターできるものです^^

アフィリエイトサイトや販売LPなどは、
オシャレさよりも、ユーザーを行動させることが大事。

全体がまとまっていて、印象よい配色になれば
目的は達成できますもんね^^

そんな、ユーザーを行動させるためのサイト作りは
次のようなポイントを意識してみてください。

キーカーラーの設定

先日も「Amazonを色選びの参考にする」
というお話をさせていただきましたが、
まずは、サイトのキーカラーを決めましょう。

例えば、、
女性向けのダイエットならピンク、
資格取得ならスッキリした青など、
そのサイトのメインとなる色を決めます。

それをベースに、サイト内で使う色は
最大4~5色くらいに抑えるのが良いです。

3色など色を抑えるほうが、
全体のまとまりは良くなります。

ただ、1色、2色だと単調になりがちなので、
3~4色くらいが良いでしょう。

なぜ色が少ないほうが良いのか?というと、
ファーストビューや挿絵に写真を使うからです。

「画像はイラストがメイン」という方は
イラストに使う色も意識して合わせるといいです。

ですが、写真を使うことが多いなら、
色は抑えるほうがよいでしょう。

写真の中には、いろんな色がありますよね?

さらにサイトの装飾で色をたくさん使ってしまうと
ゴチャゴチャしてしまうのです。

色合わせに迷ったら、「Adobe ColorCC」
というサイトで色選びをしてみてください。

https://color.adobe.com/

Adobe ColorCCの使い方は
こちらの動画でもご紹介していますので、
参考にしてみてくださいね^^
(9分45秒~から使い方が始まります)

Adobe ColorCCの「テーマの抽出」に
見本にしたいサイトのキャプチャ画面を
読み込ませてみてください。

そのサイトで使われている色を抽出して
カラーパレットを作ってくれたり、
「グラデーションを抽出」で
使いたい色のグラデーションを作ることができます。

見本にしたいサイトに似た配色にしたいとき、
とっても便利ですよ^^

また、Adobe ColorCCの他に、
自動で配色を選んでくれるサイトがあります。

それはPALETTLISTというサイトです。

PALETTLISTは、使いたい色を2色選ぶと、
それに合う色合わせを自動的に選んでくれます。

「青と黄色」「オレンジと緑」のように、
ざっくりメインの色使いを決めて選ぶと、
テイストに合わせた配色が表示されて便利ですよ^^

これが無料で使えるなんてありがたいですね~

配色選びの参考にしてみてください^^

編集後記

色合わせってなかなか難しいですよね~

特に補色(対照的になる色合わせ)とか、
類似色の加減が難しいなと感じます。

今日、ご紹介したツールを使えば、
案件のLPから色を抽出して雰囲気を合わせられます。

違和感なく案件LPを見てもらうためにも
使えるツールですよ^^!

私も便利ツールに助けられてます(笑)