今回はクライアントワークで頻繁に使用していたり、自分の事業サイトをリニューアルした時に見つけた配色関連のツールをご紹介します。
色の組み合わせというのは無限にあるので、僕はサイトの配色を選定する時には必ずツールを使用します。なぜなら、個人の趣向を排除する必要があるからです。
何も考えずに配色を選定していくよりもツールを使用したほうが機械的かつ網羅的に、いろんなパターンを提案してくれます。
提案された配色をサイトに使用することで、根拠・理由づけのあるサイトデザインに近づくのではないでしょうか。
これを機に皆さんも一度使ってみてください！
Table of Contents
定番中の定番ツール
配色の基本は、最も大きな面積を占める基本となる色のベースカラー（70%）、印象を決定づけるメインカラー（25％）、局所的に使用するアクセントカラー（5％）の3色で構成すると良いと言われています。下記のツールでこういった配色の選定をすることが多いです。
AdobeColor
Adobe社が開発している定番中の定番の配色ツールです。1色指定するだけで「類似色」「モノクロマティック」「トライアド」、「分割補色」、「二重分割補色」、「コンパウンド」、「シェード」を選択することができさまざまな色を提案してくれます。
以前までは、5パターンしか選ぶことができず、提案数が少なかったのですが、ここ最近パターンが増えてきております。特に補色関係はいろんなパターンを提案してくれるので、クライアントワークでもいつもお世話になっているツールです。
ColorPickerTool0to255
こちらのツールは指定した色を、白（#ffffff）・黒（#000000）の両方向に、30分割程度した配色を出力してくれます。指定の色を濃淡つけて配色を考えるときに便利で、メインカラーの薄い色や濃い色を調べるときに使います。サイト制作するときは必ずといって良いほどお世話になっています。
マテリアルデザイン-Material.io
こちらも言わずと知れたGoogle様が作ったマテリアルデザイページの一部となります。僕なんかが足元にも及ばないめちゃくちゃ強いデザイナーさんたちが考え抜いたカラーパレットなので、間違いないはずです！
色の濃淡が数字化されてるので、すごく使いやすいです（背景の文字色も白か黒で別れており視認性の参考になります）。
Colorbase
Colorbaseは最近公開されたツールになります。上で紹介したAdobeColorや0to225の2つの機能が搭載されたようなカラーパレットツールです。アップデートも頻繁にされていて、どんどん多機能になっています。
指定した色のシェード、ティント、グレー、補色、代替、色相を瞬時に提案してくれます。また、トリアディック、スクエア、分離補色、UI、文字色/背景色、同じ明るさの色も同時に出力してくれます。「色覚シミュレーション」してくれたり、「コントラスト比」を数値で出してくれるのは、他のツールにはない良い点です。
グラデーション作成ツール
CSSの進歩とともにグラデーションはより使いやすくなっています。ただ、グラデーションを採用することで、使用する色が増えてデザインにまとまりが出なくなる恐れがあります。
ですので、グラデーションを取り入れる際は、たくさんのグラデーションパターンを取り入れるのではなく、限定的にできるだけ絞った方がいいでしょう。
また、グラデーションパターンも配色同様に無限にあるので、ツールを使用してCSSでグラデーションを作ってみましょう。
ColorSpace
事業サイトのリニューアルでは、部分的にグラデーションを採用しました。
メインカラーやアクセントカラーなどのあらかじめ決めた色でグラデーションを作る必要があったのでこのツールを使用しました。
ColorSpaceも指定した色に合う色を提案してくれるパレットタイプの機能もありますが、グラデーション作成する機能もあります。
2色もしくは3色入力し、グラデーション方向性を指定することで、簡単にCSSコードを出力してくれます。CSSでグラデーション色を作ると、中間色が濁ってしまいきれいにグラデーションしないケースがあります。ただこのツールは、中間色を自動で出力して間に重ねて入れてくれるので、きれいなグラデーションを作成してくれて非常に便利です。
CSS Gradient Generator
このCSS Gradient Generatorは、ColorSpace同様CSSグラデーションのコードを出力してくれるツールではありますが、かなり複雑なグラデーションを作成することができます。
まず、グラデーションを作る色は5色まで指定できます。またカラーモードとして、「LRGB」「HSL」「HSV」「HCL」「LAB」と5パターン指定できます。その他、Precision、Angleは360度変更でき、Easing Curveも指定できます。直感的な操作で、かなり複雑なCSSグラデーションを作ることができるツールです。
Chromatic Gradient Generator
一方変わって、Chromatic Gradient Generatorはグラデーション作成ツールではなく、グラデーションパターンを集めたショーケースサイトになります。グラデーションパターンの数がかなり豊富で、無限スクロールで際限なくグラデーションを見ることができます。
また、ショーケースにあるグラデーションの配色を一括で変更できる「Pigment」と「Lighting」で調整し、インスピレーションを与えてくれます。
グラデーションの方向も簡単に変更できるのが良いですね。ワンタッチでCSSコードをコピーできます。
Fresh Background Gradients
こちらのサイトも、グラデーションパターンを集めたショーケースサイトです。
180パターン用意されていて、良いグラデーションパターンに巡り合えるかもしれません。こちらもワンタッチでCSSコードをコピーできます。
他にはない、psdデータも配布されており重宝するサイトになっています。
CSS&SVGの背景作成ツール
CSSの進歩はグラデーションに限らず、CSSだけで画像を使わず複雑な背景を実現できるようになってきました。またSVGツールも増えてきており、複雑な背景も軽い容量でデザインすることができます。
画像で背景を作るとどうしても画像の容量に応じてサイトの通信速度が落ちてしまいますが、CSSとSVGで背景を作ることでより高速なサイトが実現できます。
ここでは、CSS&SVGでおしゃれな背景を提案してくれるツールをご紹介します。
Gradient Magic
このサイトを見た時は衝撃を受けました。まずそのパターンの豊富さです。一部有料ではありますが、1800パターンほど用意されています。さらに、そのパターンの豊富さに加えて、配色を自由に変更できます。ワンクリックでCSSコードをコピーして使えます。
実際、トップページのリニューアルでも数カ所こちらのツールを使った背景を採用しています。
SVG Backgrounds
SVGBackgroundsは、無料の背景が15パターン用意されています。有料のパターンも用意されてますが、無料の範囲で十分すぎるほど有用です。どのパターンも配色の変更・カスタマイズはできますし、パターン内部の図形の大きさやアングル・ストロークまで変更できます。
こちらのツールもワンクリックでCSSコードをコピーして使えます。
その他、InlineSVG、Illustrator用にコピペできるコードが用意されています。また、SVGデータとしてもダウンロードできるので、Webだけではなく印刷物などにも使用可能です。
配色アイデア・カラーパレット・見本リスト
あらかじめサイトで使用するカラーコーディネート全般を提案してくれているサイトを紹介します。サイト作成の配色で迷ったときには最適のサイトとなっています。
カテゴリー別配色アイデア100-Webクリエイターボックス
Webクリエイターボックスさんの配色の記事です。
もう10年以上前の記事ではありますが、テーマごとに配色パターンを確認することができ、今でもとても参考にさせていただいています。配色に困ったときに、定期的に確認させていただいてる記事となります。
COOLCOLORS-サルワカ
サルワカさんのサイトのCOOLCOLORSというツールになります。配色パターンがテーマごとに40本用意されています。
配色パターンをクリックすることで、右側のサイドバーの配色プレビューで確認することができ、イメージを掴みやすいツールになっています。
配色アイデア見本101選-PHOTOSHOPVIP
こちらのサイトではWebサイトに使用されている画像をもとに配色パターンを抽出しています。単色系、寒色系、鮮やかなカラー、暖色系、補色系とテーマごとに分類されているので、自分が気になる配色だけ見ることができ便利です。
WEB色見本原色大辞典-HTMLカラーコード
こちらのサイトはディレクションするときに、よく使われているサイトになります。「青」や「赤」といった抽象的な選び方ではなく、WEB色見本原色大辞典を見ていただき、どのイメージに近いかを見てもらって、配色のイメージのズレがないようにディレクションしています。
実際に、Web上で見ていただくことも配色イメージのズレをなくすことができ、いつも重宝させていただいているサイトになります。
まとめ
今回のブログ記事では、事業サイトのリニューアルの際に使用した配色ツールをまとめてみました。クライアントワークでもよく使うツールでして、難しい配色選定をお手伝いする強力な武器になるのではないでしょうか。
皆さんが使用している配色ツールで、もっと便利なものがあるよというのがあればTwitterなどで教えてくれると嬉しいです。
