無料Web配色シミュレーションツールdopely colorsを使ってみました！

Writer： koga　更新日：2021/05/11

こんにちは、福岡オフィスの古賀です。

デザインを作成する上で必要不可欠な配色選び。

コーポレートカラーや見る人に適切に伝えるイメージカラー、ユーザビリティを重視した配色など何か制作物を作成する際には、色選びだけでもたくさんの情報の中から最も適切な選択をする必要がありますね。

隙間時間にWebサイト上でそういった配色選びの際に、自分の作業内容に合った様々なツールをぐるぐる探し回ることもあります。。

そんな中、外国語のサイトですが最近「dopely colors」というWebツールを見つけたので使ってみた感じを紹介したいと思います！

 

 

1. 無料Web配色シミュレーションツールdopely colors

「dopely colors」は2019年設立した会社が運営されているようで比較的新しいサイトです。

オールインワン配色ツールとも言われることもあるほど、機能がたくさんあります。

サイト自体のデザインはシンプルであり非常に直感的に操作できるUIで、英語表記でもさほど使用感的には不便は感じませんでした。

普段配色パターンやパーツデザインなどのアイデアを気軽に収集する際にpintarestを利用して集めることもありますが、こちらの「dopely colors」は大きく分けて、配色シミュレーションツールと配色アイデアのネタ帳に分けられるようです。

特にWebデザインを制作する上で役立ちそうだと感じたツールに注目してみたいと思います。

 

 

2. カラーパレットのシミュレーター

カラーアイデア帳には単色だけでも12万以上あり＋パレット各種を検索することができますが、配色の組み合わせパレットは選んだパレットでシミュレーションツールを利用することができます。

たくさんの配色パターンがありシミュレーションで自由に色数の増減・入れ替えができるのも魅力ですが、特にこちらの機能が便利だと思いました。

①パレットの形状変化によるシミュレーションパターン

②色覚異常シミュレーション

①については、パレットの形状が複数変化でき、形状によって使用カラーのグラデーション作成や、トーン別の配色をシミュレーションすることができます。

そして、これらは全て画像だけでなくscssで出力してくれます！

②はその配色は色覚異常の状態でどのように見えるか、細かいタイプごとに切り替えて表示することができます。

そこでデザインを制作する前に予めカラーを調整することでシェイプなど形に左右されることなくユニバーサルデザインの向上にも繋げられるのではないでしょうか。

 

 

3. コントラストチェッカー

こちらのツールでは、WCAG 2に従ってベタの背景色とテキストカラーとのコントラストをチェックしてくれます。

ツールについての解説にWebアクセシビリティにおける色のコントラスト比についても説明されています。

実際のツール自体もその解説通り適切なコントラスト比率をクリアしているかどうかが赤と緑のアイコンと目標比率の表示で瞬時に判断できるUIになっています。

あらかたの配色が決まった後に、テキストが読みにくくないか細かく調整できるのはデザインガイドラインを作成する上でも役立つのではないでしょうか。

個人的には任意のテキストの入力やフォントの選択ができるとなお嬉しいと思いました。。

今後のアップデートに期待です。。！

 

 

4. グラデーションツールとパターン集

こちらはかなり直感的にグラデーションが作成できるツールです。

なんと最大15色を使用して作成でき、角度も自由自在に調整できます。

惜しい点は何故かこのツールではscssでの出力がうまくいかない点でしょうか。。

一方グラデーションパターン集では、12万以上のパターンがあり、ランダムですが色数の増減ができ角度の調整まではそのままできるようでした。

そしてこちらはscssでの出力も可能です。

パターン集でありながらシミュレーションの要素もあるので短時間で見つけ使用したい際に便利かと思います。

今回のブログのサムネイル画像のグラデーション背景でも使用してみました。

いくつかのパターンの中から選び色を追加変更が直感的にできるので、イメージに近い配色をスムーズに見つけ出すことができました。

 

 

5. まとめ

紹介しました機能以外にも便利な機能は他にもたくさんありました！

Googleアカウントでのサインアップフォームがあり何故かサインインがエラーになってしまい使用できませんでしたが、パレットを保存したりいいねをしたりもできるようなので、エラーが改善されればますます便利なツールになるかと思います！

作成したグラデーションをPhotoshopなどでパターンとして追加していくのも良いですね。

なんと言ってもかなり直感的に使用できる点と画面の見やすさで楽しみながら、デザインのアイデアやインスピレーションになる知識として配色選びができるのではと感じました！

日々のアイデア収集としてもしばらく使用してみようと思います。