技術メモ

CSSで使用する配色・グラデーション・背景関連のツールまとめました

今回はクライアントワークで頻繁に使用していたり、自分の事業サイトをリニューアルした時に見つけた配色関連のツールをご紹介します。
色の組み合わせというのは無限にあるので、僕はサイトの配色を選定する時には必ずツールを使用します。なぜなら、個人の趣向を排除する必要があるからです。

何も考えずに配色を選定していくよりもツールを使用したほうが機械的かつ網羅的に、いろんなパターンを提案してくれます。
提案された配色をサイトに使用することで、根拠・理由づけのあるサイトデザインに近づくのではないでしょうか。

これを機に皆さんも一度使ってみてください!

定番中の定番ツール

配色の基本は、最も大きな面積を占める基本となる色のベースカラー(70%)、印象を決定づけるメインカラー(25%)、局所的に使用するアクセントカラー(5%)の3色で構成すると良いと言われています。下記のツールでこういった配色の選定をすることが多いです。

AdobeColor

AdobeColor

Adobe社が開発している定番中の定番の配色ツールです。1色指定するだけで「類似色」「モノクロマティック」「トライアド」、「分割補色」、「二重分割補色」、「コンパウンド」、「シェード」を選択することができさまざまな色を提案してくれます。

以前までは、5パターンしか選ぶことができず、提案数が少なかったのですが、ここ最近パターンが増えてきております。特に補色関係はいろんなパターンを提案してくれるので、クライアントワークでもいつもお世話になっているツールです。

ColorPickerTool0to255

ColorPickerTool0to255

こちらのツールは指定した色を、白(#ffffff)・黒(#000000)の両方向に、30分割程度した配色を出力してくれます。指定の色を濃淡つけて配色を考えるときに便利で、メインカラーの薄い色や濃い色を調べるときに使います。サイト制作するときは必ずといって良いほどお世話になっています。

マテリアルデザイン-Material.io

マテリアルデザイン-Material.io

こちらも言わずと知れたGoogle様が作ったマテリアルデザイページの一部となります。僕なんかが足元にも及ばないめちゃくちゃ強いデザイナーさんたちが考え抜いたカラーパレットなので、間違いないはずです!
色の濃淡が数字化されてるので、すごく使いやすいです(背景の文字色も白か黒で別れており視認性の参考になります)。

Colorbase

Colorbase

Colorbaseは最近公開されたツールになります。上で紹介したAdobeColorや0to225の2つの機能が搭載されたようなカラーパレットツールです。アップデートも頻繁にされていて、どんどん多機能になっています。

指定した色のシェード、ティント、グレー、補色、代替、色相を瞬時に提案してくれます。また、トリアディック、スクエア、分離補色、UI、文字色/背景色、同じ明るさの色も同時に出力してくれます。「色覚シミュレーション」してくれたり、「コントラスト比」を数値で出してくれるのは、他のツールにはない良い点です。

グラデーション作成ツール

CSSの進歩とともにグラデーションはより使いやすくなっています。ただ、グラデーションを採用することで、使用する色が増えてデザインにまとまりが出なくなる恐れがあります。
ですので、グラデーションを取り入れる際は、たくさんのグラデーションパターンを取り入れるのではなく、限定的にできるだけ絞った方がいいでしょう。
また、グラデーションパターンも配色同様に無限にあるので、ツールを使用してCSSでグラデーションを作ってみましょう。

ColorSpace

ColorSpace

事業サイトのリニューアルでは、部分的にグラデーションを採用しました。
メインカラーやアクセントカラーなどのあらかじめ決めた色でグラデーションを作る必要があったのでこのツールを使用しました。
ColorSpaceも指定した色に合う色を提案してくれるパレットタイプの機能もありますが、グラデーション作成する機能もあります。

2色もしくは3色入力し、グラデーション方向性を指定することで、簡単にCSSコードを出力してくれます。CSSでグラデーション色を作ると、中間色が濁ってしまいきれいにグラデーションしないケースがあります。ただこのツールは、中間色を自動で出力して間に重ねて入れてくれるので、きれいなグラデーションを作成してくれて非常に便利です。

CSS Gradient Generator

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

一方変わって、Chromatic Gradient Generatorはグラデーション作成ツールではなく、グラデーションパターンを集めたショーケースサイトになります。グラデーションパターンの数がかなり豊富で、無限スクロールで際限なくグラデーションを見ることができます。

また、ショーケースにあるグラデーションの配色を一括で変更できる「Pigment」と「Lighting」で調整し、インスピレーションを与えてくれます。
グラデーションの方向も簡単に変更できるのが良いですね。ワンタッチでCSSコードをコピーできます。

Fresh Background Gradients

Fresh Background Gradients

こちらのサイトも、グラデーションパターンを集めたショーケースサイトです。
180パターン用意されていて、良いグラデーションパターンに巡り合えるかもしれません。こちらもワンタッチでCSSコードをコピーできます。
他にはない、psdデータも配布されており重宝するサイトになっています。

CSS&SVGの背景作成ツール

CSSの進歩はグラデーションに限らず、CSSだけで画像を使わず複雑な背景を実現できるようになってきました。またSVGツールも増えてきており、複雑な背景も軽い容量でデザインすることができます。

画像で背景を作るとどうしても画像の容量に応じてサイトの通信速度が落ちてしまいますが、CSSとSVGで背景を作ることでより高速なサイトが実現できます。
ここでは、CSS&SVGでおしゃれな背景を提案してくれるツールをご紹介します。

Gradient Magic

Gradient Magic

このサイトを見た時は衝撃を受けました。まずそのパターンの豊富さです。一部有料ではありますが、1800パターンほど用意されています。さらに、そのパターンの豊富さに加えて、配色を自由に変更できます。ワンクリックでCSSコードをコピーして使えます。
実際、トップページのリニューアルでも数カ所こちらのツールを使った背景を採用しています。

SVG Backgrounds

SVG Backgrounds

SVGBackgroundsは、無料の背景が15パターン用意されています。有料のパターンも用意されてますが、無料の範囲で十分すぎるほど有用です。どのパターンも配色の変更・カスタマイズはできますし、パターン内部の図形の大きさやアングル・ストロークまで変更できます。

こちらのツールもワンクリックでCSSコードをコピーして使えます。
その他、InlineSVG、Illustrator用にコピペできるコードが用意されています。また、SVGデータとしてもダウンロードできるので、Webだけではなく印刷物などにも使用可能です。

配色アイデア・カラーパレット・見本リスト

あらかじめサイトで使用するカラーコーディネート全般を提案してくれているサイトを紹介します。サイト作成の配色で迷ったときには最適のサイトとなっています。

カテゴリー別配色アイデア100-Webクリエイターボックス

カテゴリー別配色アイデア100-Webクリエイターボックス

Webクリエイターボックスさんの配色の記事です。
もう10年以上前の記事ではありますが、テーマごとに配色パターンを確認することができ、今でもとても参考にさせていただいています。配色に困ったときに、定期的に確認させていただいてる記事となります。

COOLCOLORS-サルワカ

COOLCOLORS-サルワカ

サルワカさんのサイトのCOOLCOLORSというツールになります。配色パターンがテーマごとに40本用意されています。
配色パターンをクリックすることで、右側のサイドバーの配色プレビューで確認することができ、イメージを掴みやすいツールになっています。

配色アイデア見本101選-PHOTOSHOPVIP

配色アイデア見本101選-PHOTOSHOPVIP

こちらのサイトではWebサイトに使用されている画像をもとに配色パターンを抽出しています。単色系、寒色系、鮮やかなカラー、暖色系、補色系とテーマごとに分類されているので、自分が気になる配色だけ見ることができ便利です。

WEB色見本原色大辞典-HTMLカラーコード

WEB色見本原色大辞典-HTMLカラーコード

こちらのサイトはディレクションするときに、よく使われているサイトになります。「青」や「赤」といった抽象的な選び方ではなく、WEB色見本原色大辞典を見ていただき、どのイメージに近いかを見てもらって、配色のイメージのズレがないようにディレクションしています。

実際に、Web上で見ていただくことも配色イメージのズレをなくすことができ、いつも重宝させていただいているサイトになります。

まとめ

今回のブログ記事では、事業サイトのリニューアルの際に使用した配色ツールをまとめてみました。クライアントワークでもよく使うツールでして、難しい配色選定をお手伝いする強力な武器になるのではないでしょうか。
皆さんが使用している配色ツールで、もっと便利なものがあるよというのがあればTwitterなどで教えてくれると嬉しいです。

同じ技術メモカテゴリーのログ

tech

ホームページ制作ご対応エリア

LIVALESTは、個人のフリーランスとして活動しています。全国対応ではなく、大阪を中心とした関西圏の直接お会いできる距離を重要視しています。

直接、お話をお伺いすることで、広く深くクライアント様のビジネスを理解し、ホームページを通じて、要望を実現いたします。

  • 大阪府:
  • 池田
  • 泉大津
  • 泉佐野
  • 和泉
  • 茨木
  • 大阪狭山
  • 旭区
  • 阿倍野区
  • 生野区
  • 北区
  • 此花区
  • 城東区
  • 住之江区
  • 住吉区
  • 大正区
  • 中央区
  • 鶴見区
  • 天王寺区
  • 浪速区
  • 西区
  • 西成区
  • 西淀川区
  • 東住吉区
  • 東成区
  • 東淀川区
  • 平野区
  • 福島区
  • 港区
  • 都島区
  • 淀川区
  • 貝塚
  • 柏原
  • 交野
  • 門真
  • 河内長野
  • 岸和田
  • 四條畷
  • 吹田
  • 摂津
  • 泉南
  • 高石
  • 高槻
  • 大東
  • 豊中
  • 富田林
  • 寝屋川
  • 羽曳野
  • 阪南
  • 東大阪
  • 枚方
  • 藤井寺
  • 松原
  • 箕面
  • 守口
  • 八尾
  • 兵庫県:
  • 神戸
  • 姫路
  • 尼崎
  • 明石
  • 西宮
  • 洲本
  • 芦屋
  • 伊丹
  • 相生
  • 豊岡
  • 加古川
  • 赤穂
  • 西脇
  • 宝塚
  • 三木
  • 高砂
  • 川西
  • 小野
  • 三田
  • 加西
  • 丹波篠山
  • 養父
  • 丹波
  • 南あわじ
  • 朝来
  • 淡路
  • 宍粟
  • 加東
  • たつの
  • 京都府:
  • 京都
  • 福知山
  • 舞鶴
  • 綾部
  • 宇治
  • 宮津
  • 亀岡
  • 城陽
  • 向日
  • 長岡京
  • 八幡
  • 京田辺
  • 京丹後
  • 南丹
  • 木津川
  • 和歌山県:
  • 和歌山
  • 海南
  • 橋本
  • 有田
  • 御坊
  • 田辺
  • 新宮
  • 紀の川
  • 岩出
  • 奈良県:
  • 奈良
  • 大和高田
  • 大和郡山
  • 天理
  • 橿原
  • 桜井
  • 五條
  • 御所
  • 生駒
  • 香芝
  • 葛城
  • 宇陀
  • 滋賀県:
  • 大津
  • 彦根
  • 長浜
  • 近江八幡
  • 草津
  • 守山
  • 栗東
  • 甲賀
  • 野洲
  • 湖南
  • 高島
  • 東近江
  • 米原

ホームページ制作やWeb集客、
リニューアルやサイトの管理・運用・更新まで、
あなたのご相談・ご依頼をお待ちしております。

お電話でのお問い合わせ

050-5604-7128 平日12:00 ~ 18:00

24時間以内に必ず、ご連絡させていただきます。

ホームページ制作実績一覧