ホームページの配色を考えるのって、結構手間ですよね。膨大な数の色の中から適切なものを選んでいくのも一苦労…
色相環なんて言葉を、むかーし美術の時間で習ったような…
そんなぼんやりした記憶を頼りにしたり、カラーコーディネーターみたいな資格を取ろうと気張ったり、雰囲気で適当に決めたりするよりも、便利なネットサービスを使ってぱぱっと決めてしまいましょう！
私が当ブログ作成時に実際に行った手順を参考に、オススメの無料ウェブサービスを紹介したいと思います。
「Subtle Patterns」で、背景画像を決める！
最初に、サイト全体の印象を決定付ける背景画像を選択します。オススメなのは「Subtle Patterns」というサイト。コンクリートの壁や幾何学模様など、シンプルなデザインが多いのが特徴。
https://www.toptal.com/designers/subtlepatterns/
私は「Seamless Paper Texture」というテーマを選びました。
左下にあるDOWNLOADボタンを押すと、ZIPファイルを入手できます。
中身はPNGファイルです。
「iromiru」で、カラーコードを取得する！
背景画像が決まったら、カラーコードを取得します。このコードをベースに、オススメの配色パターンを探すことになります。
カラーコード取得にオススメなサービスは、「iromiru」。画像をドラッグ＆ドロップするだけで、その画像に含まれる色のコードを教えてくれます。
http://higashi-dance-network.appspot.com/iromiru/
先程選択した「Seamless Paper Texture」を読み込ませたらこうなります。
細かく縦に刻まれている下のバーは、元画像に含有される色が、割合の高い順に並べられたものです。クリックすると右側にカラーコードが表示されます。
このサイトはWeb上のどんな画像でも読み込ませられるようなので、気に入った色があればどんどん放り込んでコードを控えておくのもいいかもしれませんね。
「Seamless Paper Texture」は、#e2e0d7という色が一番多く含まれているようです。このコードを控えて次のステップに移ります。
「配色の見本表」で、配色パターンを検索する！
ほぼ最後の工程です。配色パターンを提案してくれるサイトを利用して、良い色味を探しましょう。所謂カラーピッカーってやつです。
オススメなのは、「配色の見本表」というページの検索機能。沢山の色の中から、ロジカルに相性がいいと判断されたものを何パターンも提示してくれます。
なお、このページにも上記のiromiruと同じく含有色の配合率を検索できる機能がありますが、より細かくコードを表示してくれるiromiruの方を私はおすすめします。
さて、先程iromiruで確認した#e2eod7を検索してみましょう。
検索画面にコードを入力すると、すぐ色合いが反映されます。「色の情報と配色パターンを調べる」をクリック。
クリックすると、色の詳細情報が表示されます。
#e2e0d7は、淡い黄みの橙なんですね。明るい灰色くらいに思っていました…
スクロールしていくと、効果的な色の組み合わせについて教えてくれます。
控えめな色合いなせいか、全体的に落ち着いた印象を与えてくれる配色になっている感じがします。
また、下図のように、色相や明度の違いで効果的にメリハリが出る色合い等、かなり実践的な色の活用法を教えてもくれます。
このホームページのヘッダーや見出しで使用している色についても、このアクセントカラーを参考にして設定しています。
まとめ
デザインのノウハウが全くない私が使用して、最も使いやすい・分かりやすいと感じたサービスを厳選してご紹介しました。
最近良く見る「○○50選！」のような選んでないんじゃないか感は出さないよう、今後作成する記事でもしっかり吟味したものを紹介したいと思います。
皆様の苦労が少しでも減って、より納得のいくデザインを実現できますように！！
