非デザイナー必見!配色が苦手でもプレビューで分かる配色ツール3選

非デザイナー必見!配色が苦手でもプレビューで分かる配色ツール

更新日:

配色って難しいですよね。色を決めて実際にウェブサイトを作っても「なんか色、キツすぎね?」とか「なんか統一感ないな~」とかあると思います。特にデザイナーではない方は投げ出したくなるかもしれません(私がそうw)。そこで今回は配色をプレビューと共に確認できるツール(ウェブサイト)を紹介していきます!

ウェブ配色ツール by フォルトゥナ

こちらは大阪にあるウェブ制作会社が公開しているツールになります。

色を1色選ぶことでその色に合った配色を自動的に行ってくれる優れものです。

サイトはこちら

ページのパターンはコーポレートサイトのような構成1つしかないので、コーポレートサイトやLPなどのデザインに力を発揮しそうですね!

また、「配色の方向性」や「色相差」を選ぶことが出来きます。

例えば、「配色の方向性」を暗いにするとページ全体の背景色が暗くなります。

「色相差」を変更すればページ全体の配色が変更した値によって変化します。値は「-180~180」まであり、0は選択した色と似た色、180, -180は色相が別の色になります。

他にも変更できる点がいくつかあるので、実際に試してみるのも面白いと思います!

配色パターン見本40選:ベストな色の組み合わせを探せるツール

こちらのツールは既に用意されているカラーパターンを選択することでプレビュー上の配色を変えることが出来るツールになります。

サイトはこちら

カラーパターンは40種類になります。

プレビューはスマホの構成になりますね!

自由度は少ないですが、簡単に扱えるのが嬉しいですね!!

ColorKitty

最後はColorKittyになります!

このサイトはたまにお世話になってる。

これは単純に自分で選んだ色を6色まで並べることが出来ます。

サイトはこちら

サイト全体に配色を考える際にも使えますが、色の濃淡を確認する際にもつかえます。

赤色1つ作るだけでも「濃い赤」なのか「薄い赤」なのか「ベーシックで使う赤」なのか様々あると思います。

その時に各赤色を並べることで色の濃淡を調整して違和感ない色を作ることが出来ます。

他にも画像をアップロードすることでその画像で使われている色、もしくは配色を知ることが出来ます。

難しいことはじゃんじゃんツールを使っていきましょう!!

最後までありがとうございました!!

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.