今回は、メインカラー、ベースカラー、アクセントカラーなど配色を選ぶ際に助けになるサイトをご紹介したいと思います。
より良いページ作成に役立てていただけるなら幸いです。
メインカラーを選ぶ際に役立つサイト
メインカラーを選ぶ方法はいくつもありますが、色の一覧からイメージに合う色を選ぶということもできます。
以下のサイトはそのような時に役立ちます。
すべて無料で利用できますので、試してみてください。
これはブラウザで定義されている色の一覧です。他にもパステルカラーやビビットカラーなども載っています。
このサイトは日本で昔から使用されてきた色を紹介しています。 旅館や和菓子のサイトなどに使用してみると面白いかもしれません。
これも同様に色を実際に見て選ぶことができるサイトです。色相に従って分類されていますので、イメージにあう色を見て選ぶことができます。
上記以外にもカラーサンプルを提供しているサイトはいくつもありますので、使いやすいものを検索してみることもできます。
配色を自動で提案してくれるサイト
少し先回の記事の復習にもなりますが、サイト全体の調和と適切な配色を行なうためには、１．カラートーンを合わせる。２．規則性のある色の組み合わせを行なう。ことが重要です。
これを手動で行おうとしても、なかなか難しいものです。
でも、これらの配色を自動的に提案してくれる無料のサイトがたくさんあります。
メインカラーは自分で選び、それに合わせて他の色を選ぶこともできますし、最初からこれらのサイトを活用して全体的なイメージを作っていくこともできます。
いろいろな配色を提案してくれ、右側に配色プレビューも表示されます。ここから配色のヒントをもらうこともできます。
5色のカラーを提案してくれるサイトです。 これらのカラーを組み合わせてサイトを作ることもできます。
好きなメインカラーをクリックすると、その他の色を自動的に提案してくれます。 右側にはレビューも表示されますので、実際にホームページでその配色を用いた際の印象をイメージしやすいと思います。
これも5色の組み合わせをいろいろ提案してくれるサイトです。 左下の「Generate」を押すたびに異なるものを提案してくれます。全体的に落ち着いた色の組み合わせを提案してくれますので、いろいろなホームページで使用できると思います。
これはベースカラー、メインカラー、アクセントカラーの3色の組み合わせを提案してくれるサイトです。一色を選ぶとほかの色を提案してくれます。 ページの上の部分でその配色を使用したときのイメージを確認できまます。
これは12色の色相環に基づき、バランスの取れた配色を提案してくれるサイトです。 白や黒、灰色などとの組み合わせはありませんので、全体的にパステルカラーっぽくなります。 フラットデザインのサイトを作成する際などに活用できるかもしれません。
明度、彩度、色相を選ぶと、それと調和する色の選択肢を提案してくれます。 右下にある「Hue Step」（色相のバリエーション）を変更すると提案してくれる色の数を調整できます。
このサイトは、写真から自動的に色を抽出し、5色を提案してくれます。ホームページのイメージに合った写真を読み込み、その配色に合わせてページ全体を作成することもできます。いろいろ機能がついていて使いやすいサイトですので活用してみてください。
2色を選ぶと良い感じにほかの色を提案してくれます。 全体的にパステルカラーっぽいのが多いと思います。
いかがでしたでしょうか？
活用できるサイトはたくさんありますので、ぜひ参考にしてみてください。
ページトップの写真や画像とページ全体の配色のトーンを合わせる
補足になりますが、ホームページのトップに写真を配置するようなデザインの場合には、サイトの配色と写真のトーンを合わせるようにすることもおすすめします。
イメージに合った写真を先に選び、その配色を抽出し、その色やトーンをサイト全体に配置するのも一つの方法です。
その際にはAdobe Color CC を活用できると思います。
もう一つの方法は、メインとなるカラーを先に選び、そのトーンに合わせて写真のトーンを調整することです。
画像のトーンはAdobe illustratorなどの有料ソフトはもちろんのこと、無料のソフトでも変更できますので挑戦してみてください。
もっとも写真を調整する際には、トーンを大きく変えてしまうと写真自体に違和感が生じる可能性がありますので、調整したとしても若干の調整を行う程度になると思います。
センスや感覚も大切にする
最後になりますが、Webデザインを行なう際には、「個性やセンス」といった人それぞれの感覚を大切にすることも重要です。
あれ！？
これまでさんざん、「配色を行なう際には理論に基づいて行うこと」を論じておきながら、最後の最後に何を言い出すんだ！？
とお感じになるかもしれませんが…。
確かに、色の組み合わせやトーンを合わせると全体的な調和が出るという理論はかなりの程度正しいようなのですが、それがすべてではないというのが奥の深いところなのです。
やはり最後は人間の感性がものをいうようです。
例えば、世界的に傑作と言われる絵画の配色は、上記の理論が適用できるものもあればそうではないものもあります。
不思議なものですね。
それで、Webデザインを行なう最初の段階では、これまで取り上げたような配色の理論について理解し、それに基づき作成してみるのが良いと思います。
そして、自動的に配色を提案してくれるソフト（機械）に頼って色を決めていくこともできると思います。
しかしそれと同時に、優れたデザインのWebサイトについて見分を広げ、常に自分の感性を磨いていくことも大切かもしれません。
Webサイトを作成するのも人間、そしてそのサイトを見るのも人間なのですから…。
最後までご覧いただきありがとうございました。