WEBデザイナーさんやディレクターさんに便利なツールを紹介しておりますが、今回はカラーツール「colorbase」でできることや使い方を解説致します。
WEBサイトの制作時にカラーイメージの共有が大変だった経験はございませんか？
WEBサイトの制作ステップ構成が決まってデザインをスタートさせるときに、必要なのが全体のカラートーンや配色の方向性の決定です。「メイン色はどうしますか？」というやり取りをされていると思います。
ただ色については言語化するのが難しく、「ちょっと明るめのピンク」「薄めのグリーン」といっても人によってイメージは様々です。デザイナーさんからの提案が思っていたのと違ったときなどに、どう伝えたらよいのか課題として抱えている方もいらっしゃると思います。
そういったときに一般的な解決方法は参考WEBサイトをシェアし、イメージを一本化させることだと思いますが、どうしても見本のWEBサイトに引っ張られてしまうというデメリットもあります。
そこで便利なのがカラーツールです。
色の相性や配色決定にとても役立ちます。
配色や色彩デザインの本などを頼ることが多かったですが、無料のカラーツールを使えばWEBサイト上でさまざまな色の情報を集めることができます。その情報を共有すれば、色についての修正がグッと減らせます。
■無料カラーツール「colorbase」
https://colorbase.app
colorbaseは「デザインワークに彩りを」をテーマに開発されている無料ツールです。個人で開発・公開されているツールですが、デザイナーさんの間で話題になり、使っている方が増えています。
ツール内で基本となる1色を選択すると、その色に合う文字色（or背景色）や、色盲チェック、明るさ、補色などを1ページ内でまとめてチェックできます。
●変換
●文字色と背景色
●色名
●ブランドカラー
●色覚シミュレーション
●UI カラー
●シェード
●ティント
●グレー
●明るさ
●同じ明るさ
●類似色
●補色
●トリアディック
●スクエア
●他の色相
●コントラスト
具体的には以上の項目が一覧で情報としてチェックできます。
特にディレクターさんがデザイナーさんやお客様に説明するときに使うにはピッタリです。打ち合わせでのやり取りも「この色が背景色になると、合う文字色はこちらです。この色を採用してよろしいですか？」と具体的に進めることができます。
色彩の本であれば載っている情報に限界がありますが、このツールではどんな色でもありますのでピッタリの色を調べられますし、アプリにもなっているので出先でのチェックも手軽です。
ページ内に情報が多いので、どこを見れば何がわかるのか、項目を1つずつご紹介していきます。ぜひカラーに関する作業にご活用ください。
１．colorbaseの使い方①基本の1色を選ぶ
このツールは、無料でアカウント登録せず使い始めることができます。
トップページにカラーコードを入れるか、好みの色を選択します。
虫眼鏡ボタンを押すと、次ページでその色の情報が一覧になって出てきます。
もしメインカラーが決まってない場合はロゴがあればロゴから1色取ってみたり、参考サイトとして提示されているものから1色選んだりするといいですね。
２．colorbaseの使い方②基本情報
まずページ上部に、選んだ１色の基本情報が出てきます。
この色では「鮮やかな暗い青緑色」と色の説明文が出ています。
これがとても便利です。色は明度や彩度など、いくつかの角度から表現できますが、パッと見てもなかなかわからないですよね。そして色によっては赤といっていいのか、オレンジといっていいのか…迷うことが多いですが、的確な表現が付いているので、そのままクライアント様にお伝えできます。
３．colorbaseの使い方③変換
色はさまざまな規格で数値化されますが、印刷やWEB、照明などにも応用できるほどの種類の変換結果が1画面で見られます。
４．colorbaseの使い方④文字色と背景色
背景色に合わせた文字色を選ぶのも一苦労ですが、このツール上では文字の基本色と背景をセットで考えられるので、そのままデザインに採用できます。
５．colorbaseの使い方⑤色名とブランドカラー
この色に付けられた名前（例えば日本語で言えば「赤」「青」など）と、この色に近い色をブランドカラー（ブランドを象徴する色）に使っているサービスが確認できます。
６．colorbaseの使い方⑥色覚シミュレーション
赤や緑などの色が見えない方がその色を見た場合に、どういう色に見えるのかが確認できます。
↑例えばこの色であれば茶色や青に近い色に見える方もいます。
そのため、いくつかの色を使って色に意味をもたせたデザインをしたいときは、もうひとつの色を「黄色」など、全く違う色を使う必要がある、などがわかります。
７．colorbaseの使い方⑦UIカラー
UIはAmebaが提唱する、WEB空間で使えるカラーパレットです。
▼詳細はこちら
https://developers.cyberagent.co.jp/blog/archives/26754/
８．colorbaseの使い方⑧シェード／ティント
シェードは黒（#000000）、ティントは白（#ffffff）を混ぜて色を変えていくことです。
明度がシミュレーションできます。
「もう少し明るめに」「もう少し白っぽく」など指示が出たときに「どれくらいをイメージされていますか？」とチェックしていただくときに便利です。
９．colorbaseの使い方⑨グレー
その色に近い色合いをグレースケールで表現したときのチェックができます。
特にロゴは広告（チラシ、新聞等）のためにグレースケールに変換しなければならない場面がありますので、このチェックは必須です。
色をいくつか使うときはグレースケールで表現したときに違いが出ているかなども確認が必要なので、デザイナーさんから出てきた色をディレクターさんがチェックするときには非常に大事なポイントになります。ただ作業としては抜けがちなので、このツールで一覧確認するようにすれば抜け漏れなくできますね。
10．colorbaseの使い方⑩明るさ／同じ明るさ
色の明るさが客観的に分かるグラフが表示されます。
この色を「もっと明るく」するには↑上記の「ティント」項目を活用します。
また、同じレベルの明るさで、色を変えたいときは、この類似色のチャートが便利です。「少し青に寄せて」という指示にも対応できますね。
1１．colorbaseの使い方⑪類似色／補色
類似色と補色も確認できます。
類似色は、黄色を起点とした色の関係の中で隣あっている色。
補色は、その色位関係の中で正反対に位置する色です。
類似色は同じように見えますが、右になればなるほど黄色が減っていっているように感じます。組み合わせの相性が非常によいといわれています。補色は、組み合わせるとお互いが最も目立つ色です。
資料内のグラフや表などの色分けで使うと、まとまった雰囲気でありつつ、違いが表現できます。
1２．colorbaseの使い方⑫トリアディック／スクエア／他の色相
配色に使える色パターンをまとめてチェックできます。
配色はさまざまな法則がありますが、トリアディックやスクエアは一般的に使われることが多い配色ルールです。トリアディックが定番の組み合わせ、スクエアはインパクトを出しやすい組み合わせです。
そのほか、近しい色で組み合わせを考えたいときに、「他の色相」チャートが役立ちます。
1３．colorbaseの使い方⑬コントラスト
こちらで最後の項目です。
その色と白のコントラストのレベルと、WCAGの評価がわかります。
これはWEBアクセシビリティのチェックです。
WCAGはW3C勧告の「WCAG（Web Content Accessibility Guidelines）2.0」を指していて、背景色と文字色との間に適切なコントラストがあるかどうかがわかります。
背景色は白以外にも変えることができます。視覚的なアクセシビリティ＝見やすさがわかりますので、背景に色が入ってしまう場合は忘れずチェックしたいですね。
客観的な数値が出てきますので、もし「背景を○○色に」と指示があったけれど文字色との関係で難しい場合に説明材料として使えますね。
まとめ
色はとても奥が深く、さらに言葉からイメージする色は個人差があるため、共通認識を持つことがとても難しいです。
このツールでは色を客観的に見ることができるため、デザインの方向性を決めるとき、ロゴのメインカラーを決めるときに使いながら話し合いを行うことでスムーズに適切な色を選んでいくことができます。
デザイナーさん以外にも多くの方々に便利なツールですので紹介いたしました。
ご参考になれば幸いです。