web用配色に超便利！ウェブチルオリジナルトーンマップによる配色シミュレータの紹介

2023年7月14日

トーンマップを使えば、配色が苦手なあなたでも不思議なことにそれなりの配色ができるようになります。なんせ私がそうでしたから。

トーンって何？、という方は以下の記事で紹介していますので参考にしてください。

本記事では、web用に使いやすいウェブチルオリジナルのトーンマップを紹介します。webサイトの配色を簡単にシミュレーションできるツールとなっています。

本記事では、作成したオリジナルトーンマップがどんなものかを解説し、配色シミュレーション事例を簡単に紹介します。

ウェブチルオリジナルのトーンマップ

次のような特徴があります。

①webセーフティカラーを中心にトーンを採用（これによりwebで使用できる色域に合わせて色を選べます）
②有彩色トーンの数を15トーンに分類

配色シミュレーターの使い方

以下のページがシミュレーターとなっています。

使ってみて頂ければ、使用方法は簡単にわかると思いますが、簡単に紹介させて頂きます。

配色チャート

配色は6色まで選んで並べることができます。配色を始める前は次のように円が６つ並んでいます。これが配色チャートです。

※スマホやタブレート表示では、円が３つずつ2段に分かれて表示されます。

配色をスタート

配色を始めるには、どれでもよいので円をクリックします。

例えば一番左の円をクリックしてみると、円が白抜きに変わり、その下に色相環とオリジナルトーンマップが表示されます。

ここで円の中に”サイト背景色”と記載されているのは、後述するデモ画面に着色される部分を表しています。

色相環から色をクリックして配色する

有彩色を選びたい場合は、色相環のいずれかの色をクリックします。例えば、赤橙をクリックしてみると右側に赤橙のトーンマップが表示されます。

このトーンマップから、好きなトーンをクリックすると配色チャートに反映されます。

試しに、トーンの6-8をクリックすると配色チャートに色が反映され、カラーコード（rgb10進表示と16進表示）が色の下に表示されます。

※無彩色を選びたい場合は、色相環から色を選ばず、直接トーンマップの中の無彩色をクリックします。

以上を繰り返せば、6色の色が配色チャートに並ぶことになります。いったん配色した後でも、配色チャートをクリックすれば変更できます。

デモ画面を確認しよう

デモ画面が、配色チャートのすぐ下に折りたたんで配置されているので開けてみましょう。

色が配色される前はこのように全体にグレートーンとなっていますが、配色されると、配色チャートに合わせてサイト背景色やheaderなどの各部が配色されます。

デモ画面の配色部は、配色チャートの円をクリックした段階で表示されます。

配色チャートとデモ画面の各部との関係は以下の通りです。

試しに、色相に先ほどの赤橙を固定してトーンを変化させた配色をすると次のようになります（color6だけ色相をブルーに変えてあります）。

デモ画面を見て気に入らない場合、変更したいカラーチャートをクリックすれば何度でも配色を入れ替えることができます。webサイトをどのような配色にするかを考えるのに活用できるでしょう。

まとめ

ウェブチルオリジナルのトーンマップと配色シミュレーターについて紹介してきました。

現段階では、まだwebセーフティベースの色しか選べませんが、もう少し色の選択幅が増やせるように、機能を追加していく予定です。

ぜひ、あなたのwebサイト配色のアイデア出しに活用して頂けると嬉しいです。