無料で使えるWebデザインの配色ツール4選【知識ゼロでもOK】

シェアする

  • このエントリーをはてなブックマークに追加

「Webサイトを作成してみたいけど、配色の知識がなくて困ってる」
「配色のアイデアが浮かばない」

この記事では、そんな時に使えるWebツールをご紹介します。

配色には知識が必要ですが、一から学んでいる時間も気力もないという方も多いはず。

今回紹介するツールは全て無料で使えます。配色に困ったら、ぜひ活用していきましょう。

スペースキーを押すだけで使える「Coolors」

Coolors.co

スペースキーを押すと、ランダムでカラーパレットを提示してくれるツールです。

色のバーにマウスを合わせると、鍵マークが表示されます。

その鍵マークをクリックすることで、特定の色を固定することもできます。

なので「使いたい色があるけど、それに合った配色が分からない」という場合にも利用できます。

自動で提示してくれるので、知識ゼロの場合でも気軽に使えます。

Web上のカラーコードを調べて、配色アイデアに活かす方法

Chromeの拡張機能である「ColorPick Eyedropper」を使えば、Web上のカラーコードをピンポイントで調べることができます。

ColorPick Eyedropper

「この色、使ってみたいな」って思えるものがあれば、この拡張機能を使ってカラーコードを調べましょう。

あとは、「Coolors」で合った配色を探せばカンタンに配色アイデアを考えることができます。

色の組み合わせからイメージを膨らます「Color Hunt」

Color Hunt

ユーザーが投稿した配色パターンを閲覧できます。

配色アイデアが思い浮かばない時に、眺めているだけでもイメージが湧いてくるかもしれません。

左上のメニューから「new」や「popular」「Random」など、ソートすることも可能です。

「Color Drop」

ColorDrop

上述した「Color Hunt」と似たような使い方ができるWebサービスです。

カラーパレットをクリックすると、右側に利用されているカラーコードが一覧で確認できます。

こちらも配色アイデアが思い浮かばない場合に、便利です。

「Hello Color」

Hello Color

こちらは、クリックするだけで2色の組み合わせを提示してくれるWebサービスです。

気に入った配色が見つかったら、ブックマークしておくと良いです。

「HELLO COLOR」という文字が表示されているので、単純にカラー候補を並べられるよりも、色の使い方がイメージしやすいツールです。

オマケ:初心者にも分かりやすく「配色の基礎知識」を解説してくれるスライド

今回紹介した配色ツールを使えば、知識がなくてもそれなりの配色ができるようになります。

しかし、本格的にやるなら、知識を身につけることも必須ですよね。

そこで勉強してみたい方向けに、参考になるスライドを紹介しておきます。

色彩センスのいらない配色講座

ノンデザイナーのための配色理論

SlideShareには、他にも有益なスライドが多数アップされているので、気になる方はぜひチェックしてみてください。

まとめ

今回は、知識がなくても配色アイデアを得られるツールを紹介しました。

「とりあえず、良い感じに配色したい」と考えている人は、ぜひ使ってみましょう。

これからWebデザインをちゃんと勉強してみたいという場合は、

以下の記事でおすすめ本を紹介しているので、合わせて読んでみてください。

関連記事:Webデザイン初心者におすすめな本まとめ【ノンデザイナー向け】

シェアする

  • このエントリーをはてなブックマークに追加

フォローする