【本当に使える!!】Webデザイナーが業務で使っている配色サイト6選

配色って、
本当に難しい。

はい、デザイナーのOです。

突然ですが、Webサイトの配色って難しいですよね？
配色を紹介するサイトは世の中にたっくさんあります。主に3色や4色の配色だけ集めたサイトが主流ですが、なかなか使うのが難しいなといつも感じています。

グラフィックとして美しい配色と、Webサイトの実用的なUIの配色って結構違う。
この配色きれいだな！って思っても、使えるか？と考えるとうーん。LPとかだったら良さそうですが。
またWebサイトはメインカラーが決まっていることも多いので、そうなるとさらに使うのが難しくなっちゃいます。

ということで、今回はWebデザイナーのぼくが、
個人的に使える！と思う配色サイトを6つに絞り込んでご紹介します。

とりあえずPinterestだ！

さあ配色サイト！と、その前にぼくが見ているのはPinterestです！
いまさら説明も必要ないかと思いますが、色の組み合わせも無限に考えられるし、何より「色の使い方」が参考になります。

カラーパレットを決める

まずは使用する色相を決めたい、使う色数を決めたいという段階で使えるサイトです。

Palette Maker

https://palettemaker.com/app

使える度：★★★

惜しい？ポイント

配色の順番が調整しにくい。順番を交換できないので、数値をコピーして入れ替える必要がある
ベースカラーやサブカラーの割合があまり現実的ではない（均一すぎる）

ぼくが一番使っているサイトです。
色がかなり自由に選べ、かつここまで多くの参考イメージがあるサイトは珍しいのでは？
他にもツールがあるようなので、時間がある時にもっと調べてみたいです。

Color Picker

https://old.colorsupplyyy.com/app

使える度：★★☆

惜しい？ポイント

有彩色のみ
アイコンしか例がない
用意されたトーンしか見られない

いきなり使える度がダウンしてしまいましたが、それもPalette Makerが優秀すぎるせい。
ゼロから組み合わせを考えるならColor Picker、検証するならPalette Maker、という感じでしょうか？

Happy Hues

https://www.happyhues.co

使える度：★☆☆

惜しい？ポイント

配色数が少ない
色が調整できない

Palette Makerを使用する前に使っていました。
サイトのタイトルはHappy Few（シェイクスピアの戯曲の有名な一節）とかけているのかな……？

トーンを決める

使う色合いをだいたい決めたら、カラーパレットを細かく考えていきます。

Colorbase

https://colorbase.app/ja

使える度：★★★

惜しい？ポイント

トーンの数の調整ができない
各情報の詳細が別ページで開く

詳細を調べようとすると、ページを行ったり来たりしなければならないところが玉にキズ。
アコーディオンやアンカーリンクなどで開くと嬉しいのですが……

Scale

https://hihayk.github.io/scale

使える度：★★★

惜しい？ポイント

操作に難。初心者は難しいかも
細かく調整していると途中で固まる

自由にトーンの数やティントやシェードの彩度・明度を決められるので、最後の調整にはかかせません。
ただ色を調整していると途中で固まって、リロードさせられるのでそこだけが辛い。

Tailwind CSS Color Generator

https://uicolors.app/generate

使える度：★★☆

惜しい？ポイント

トーンの数が決まっている
課金すればさらにセカンダリーカラーも指定できる模様

Tailwind CSSというフレームワーク用に設計されているのですが、それ以外でも使えます。
ただトーン数や彩度・明度の変更はできません。
課金すれば色々なツールが使用可能なようです。

最後に

あなたの使える！配色サイトはありましたか？

ぼくの設計フローをまとめると、
Pinterestでイメージを広げて→Palette Makerで検証→実際のデザインに落として調整→Scaleで微調整して設計完了という流れです。
ただWebは常に進化中。
このAI時代のはじまりに、もっともっと便利な配色サイトが出てくるのを楽しみにしています。

それでは、また次の記事でお会いしましょう！！

ホームページ制作のお問い合わせ、お見積り依頼、相談、質問は
お問い合わせフォームよりお願いいたします

ホームページ制作実績東京のホームページ制作会社フライング・ハイ・ワークス TOPへ

こんなお困りごとは
ございませんか？

ホームページで
何をゴールにすればよいかが
わからない

ホームページで
達成したい成果をまず設定

MORE
ホームページをリニューアルしたいけど
どこから手を付ければいいか
わからない

今のサイトをよりよくするため
情報整理から始めましょう！

MORE
デザインだけではなく
Webシステム制作も一緒にやってほしい

ホームページにおける
Webシステム制作の実績は豊富です

MORE
コンバージョンにつながる
ツールはないだろうか？

Webチャットツール - Fチャットで
お客様をサポート

MORE
どれくらいの費用がかかるか
ざっくりでいいから知りたい

3つの規模感で
ざっくりこんな感じです

MORE
ホームページ制作の
進め方のイメージが湧かない

ホームページ制作
の流れを紹介

MORE
公開後も継続的に
メンテナンスや保守をしてほしい

更新毎のお見積りや
月額制の更新などもご用意

MORE
SEO対策は何から
始めればよいの？

基礎的なSEOは
おまかせください

MORE

フライング・ハイ・ワークスの
サービス一覧

【本当に使える!!】Webデザイナーが業務で使っている配色サイト6選

とりあえずPinterestだ！