ホームページのデザイン制作で、とても大きな役割を持つのが「配色」です。
配色によってホームページ全体の印象が変わってしまうため、訴求したいイメージに合った配色を選ばなくてはいけません。
しかし、悩み始めると決まらずに、時間だけが過ぎていくなんていう経験をした人も多いでしょう。
そこで、配色のデザインパターンを参考にできる便利なサイトを紹介していきます。
１．配色の基本とは？
ホームページデザインの配色には、ベースとなるカラーだけでなく、メインカラー、アクセントカラーの3つが基本になっています。
それぞれの配色の割合が、ベースカラーが70%、メインカラーが25%、アクセントカラーが5%の割合になると綺麗な仕上がりになると言われています。
それぞれのカラーの決め方の基本を知っておきましょう。
①：ベースカラー
ベースカラーは70%の面積を占めるホームページの背景ともなるカラーです。
背景になるカラーだからこそ、あまり派手で目立つような色を選ぶことは少なくなっています。
白やグレー、ベージュ、黒といったメインやアクセントカラーの妨げにならないようなカラーを基本的には使用します。
コンテンツや文字の余白などにも使われる色なので、淡い色を使うと収まりが良くなります。
②：メインカラー
ホームページのイメージや象徴となるカラーとなるので、一番最初に決める色になります。
ホームページのロゴの色をメインカラーにすることも多く、文字の読みやすいものを選ぶことが多くなっています。
イメージに合うような色でありながらも、少し明るさを落とした色の方がハッキリと見やすくなるでしょう。
③：アクセントカラー
アクセントカラーは、メリハリに使う時の色となるので、ホームページ全体の中での割合は低くなっています。
しかし、アクセントカラーがあることによって大事な部分や見せたい部分が強調されるので、とても大事な部分でもあります。
もちろんアクセントカラーなので1色のみにしなくてはいけないというルールはありませんが、色を多く使うほどまとまりが出にくくなるので注意が必要です。
２．おすすめの配色パターン参考サイト
基本の配色について理解したら、自分の作りたいホームページを思い浮かべながら色の配色を決めていきます。
その際に、参考にすると便利な配色パターンを集めたサイトを紹介していきます。
①：原色大辞典
色の名前とカラーコードが一目でわかるホームページ配色の色見本を見ることができるサイトです。
ブラウザで名前が定義されている140色の色名と16進数が記載されており、このサイトを参考にするデザイナーも多いそうです。
アクセス情報から人気色ランキングも知ることができ、オリジナルコンテンツなど豊富な情報から配色を参考にすることができます。
②：ウェブ配色ツール by フォルトゥナ
1色選択するだけで、そのカラーに合いそうな配色を自動で選定してくれるツールサイトです。
ロゴや文字の色を自動で選んでくれるので、自分で色を選ぶことが難しいという時にもとても便利です。
設定パネルの下部に、カラーコードの一覧が表示されているのでコピペして使えるのも嬉しいポイントです。
③：HUE/360
色の彩度や明度を操作しながら組み合わせを試すことができるツールサービスです。
1色選ぶと、相性の良い色を提案してくれるので、配色選びが苦手な人にもおすすめです。
選択した色が下に表示されるので、色を比較しながら配色を考えることに役立ちます。
操作も簡単なので、シンプルに使いやすいでしょう。
④：WebColorsDate
参考にしたホームページの配色がある場合、そのホームページのURLを入力すると配色が表示されるという便利なツールです。
色の一覧だけでなく、似たような配色のサイトを表示してくれたり、有名サイトの配色がトップページには参考として掲載されているので、配色で困った時に参考ホームページの配色を調べて考えることができます。
⑤：Flat UI Colors2
海外サイトですが、使い方はシンプルで簡単です。
フラットデザインに使える色を選び、その色をクリックすればカラーコードがコピーすることができます。
そのままペーストできるので、ホームページ制作の作業も簡単になるサポートツールです。
色のバリエーションも豊富で、カテゴリーによって分類されているので色が見つけやすくなっています。
３．まとめ
ホームページデザインの配色は、ホームページのイメージを決める重要なものです。
頭を悩ませることも多い作業ですが、紹介したサイトを参考にして希望のホームページが制作できるように配色パターンをいくつか試してみてください。
ホームページデザインに役立つツールまとめ【これがあれば間違いない！】 | 大阪ホームページ制作.com
大阪ホームページ制作.comのブログ。今回はホームページデザインに役立つツールをまとめてみました。みなさんがホームページを制作する際、どのようなツールを使ってデザインをしていますか？今回はデザインに役立つツールを紹介します。ぜひホームページをデザインする際に利用してみてください。
おしゃれなホームページのデザインギャラリーサイトリンク集 | 大阪ホームページ制作.com
おしゃれなホームページ制作をしたいと思いませんか？今回はおしゃれなホームページを作るために必要なサンプルデザインをまとめたギャラリーサイトのご紹介です。こちらのサイトはおしゃれなホームページがたくさん集まっています。これからおしゃれなホームページを作りたいかたオススメのサイトです。ぜひご覧ください。
