おすすめのカラーパレット生成ツール
微力ながら、現在の研究室ではWebアプリケーションの開発に携わっている。
内容の具体的な説明は除くが、私が担当しているのは、データの集計および可視化で、 フロント部分を重点的に担当している。
使っているのはPythonのフレームワーク言語Dashで、グラフが綺麗に描写できるモジュールPlotlyをベースにしている。詳しくはこちら
最初はDashの文法を学んでデータを集計・可視化するのに必死だったが、ある日先輩に
そろそろベースカラー決めない？？？
と言われて、「ハッ！！！」っとなった。
確かに、デフォルトのカラーを使っててWebアプリの見た目(カラー)になんとなく統一感がない……
そもそもWebデザインも初心者でデザインの設計もわかっていなかった…
Webサイトの配色は、そのサイトの特徴を決める大事な要素で、本来なら一番最初に決めるべきもの。
- メインカラー
- ベースカラー
- アクセントカラー
この3つがある。この中で、最初に決めるのが
「メインカラー」と「アクセントカラー」の2色。
このサイトをめちゃくちゃ参考にさせていただきました。ぜひ。
これだけ守れば見やすくなるデザインの基礎 - Speaker Deck
メインカラーは、Webサイトのテーマカラーともいうべき色で、企業のロゴのカラーと同じすることも多い。
サイト全体の25％を占める。
落ち着いた色＝明度が低い色 が良いっぽい。
アクセントカラーは、出し惜しみする。強調したい所に使う。
アクセントカラーは、メインカラーに対して目立つように、色相において反対に位置する色 = 補色を選ぶのが良さそう。
上でシェアしたスライドにあるように、なるべく色は増やしたくない。
それでも増やしたいときは、明るさと鮮やかさ(明度と彩度)は固定して、色相だけ変化させると、トーンが一緒で統一感のある色が得られる。
ちなみにここで、色の表現についてちょっと補足しておく。ここまでで「明るさ」「鮮やかさ」「色相」というワードで色を説明してきた。
これは、HSB空間の考え方に基づく。
HSBは、「色相(Hue)」「彩度(Saturation)」「明度(Brightness)」の3つで表現するもの。
他の表現としてメジャーなものとしてRGB空間があるが、これは「原色の組み合わせ」で色を表現する。
各要素を変動させた時に色がどう表現するのか素人には予想しづらい。
HSBだと、色自体を「Hue(色相)」の部分で決め、あとは明るさと鮮やかさを調整するだけだと考えれば直感的にもわかりやすい。
さて、ここまででメインカラーとアクセントカラーの決め方を簡単にさらっと言ったけど、
色の組み合わせって考えるの結構難しい…
私の場合、グラフを２種類使い、それぞれ目立たせたい項目があったので、アクセントカラーを2色選びたかった。
そうなると、
「ベースカラーとアクセントカラーは補色の関係がいいのか〜」
「今のアクセントカラーの明度彩度に合わせてもう一つのアクセントカラーを考えると、暗すぎるんだよな〜」
「あと共同研究先のHPカラーっぽいのをベースカラーにしたいけどもうちょっと暗い方がいいかな〜」
などなど色々考えることが多くて悩んでしまった。
こんな時の、カラーパレットジェネレーター。
カラーパレット生成ツールは、Webデザインだけじゃなくて、パワポの配色考えるときにも役立つはず！
さぁ、どれを使おう！！！！
【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール72個まとめ - PhotoshopVIP
いや、多すぎやろ…どれを使えばええんじゃ
しょうがなく、色々試してみた。
最終的に私は2つのツールを使ってWebアプリの配色を決めたので、ここに共有。
基準は、
- HSBを自分で簡単に調整できるか
- 画像から色を抽出できるか
- 直感的に操作が簡単か
だった。
全て兼ね揃えているのが意外と少ない。
色の調整がマウスホバーで微修正しないといけなかったり、
１つの色を選ぶと、他に選択できる色が限定されたり、
一方的に色がレコメンドされるだけでこちらで明るさ調整できなかったり。
色々試してみた結果、良かったのが
https://color.adobe.com/ja/create/color-wheel/color.adobe.com
こちらの２つ。
１つ目「Coolors」は、会員登録が必要だけど、登録する手間を差し置いてもお勧めできる。
複数のカラーを固定して、それに合ったカラーパレットを自動で生成してくれるツール。
- スペースキーでリコメンドされる色を切り替え
- いいなと思った色を保存できる
色の調整も簡単。使いやすい。
２つ目は、Adobeが提供する無料ツールで、会員登録も不要。
いいなと思ったのが、
- 補色や類似色など、タイプを選択できる
- 画像から抽出した色も反映される(coolorsでは数値をコピペして貼り付けする必要がある)
ただ、ある特定の色を固定するのがちょっとめんどくさいというか、
ベースカラーは設定できるはずなのだが他の色を変化させるとベースカラーも変わってしまうのが欠点。
私は、両者を駆使して、共同研究先のWebサイトから色を抽出したり、補色どれかなー、どれくらいの鮮やかさがいいかなー
と、試行錯誤して
最終的にFigma*1というUIデザインツールを使って簡単にWebページのパターンに落とし込んで、
研究室の皆さんにアンケートをとってテーマカラーを決定した。
というわけで、ようやくWebアプリのデザインカラーが決まったので、これからどんどん反映させてくぞ〜〜
Webデザインももっと色々勉強していかなければ…
ここまで読んでくれてありがとうございました！
