配色ツール(旧バージョン)

新たなツールとして「ウェブ配色ツール Ver2.0」をご用意しております。そちらをぜひご利用ください。

---

色の組み合わせるツールは多数ありますが、当サイトでも読みにくかったりまぶしかったりしないWebサイトの配色を決めるツールを提供しています。

読みやすくて使いやすい配色を行います

このツールは自分の思い通りのイメージの配色を作るものではありません。思い通りの配色を行うには、それなりの色彩に対する知識なども必要ですが、思い通りにならない方のために、最低限、読みやすい配色を提供するツールです。

このページをご覧になるにはFlash Playerが必要です。

「Web配色ツール」の使い方

右下の色相・明度・彩度をスライドバーで調整し、右上の一色を決めると、それに応じて自動計算で各部の色を決定してくれます。

ツールの都合上というよりもイメージに差を出しにくいので、明度・彩度とも40以下は設定できないようになっております。

予告なしに機能や仕様が変更する可能性がありますので、ご注意ください。

「Web配色ツール」で決められる色

配色できる各部分はこのようになっております。

メインカラー

ヘッダー部分の2本の横線がこれに当たります。ベタ塗りにすると重ねた文字が読みにくく、印象を損ねる可能性がありますので、控えめにしております。

ロゴ

ロゴマークの色です。マークや文字の色が決まっていない場合のために同系色を入れておりますが、実際に使う場合にはご自由に入れ替えてください。

ボタン

メニュー部分のボタンの色です。コントラストをつけて読みやすくするために黒文字を入れてあります。

ボタン背景

メニューの背景色です。メインカラーの印象を損ねないために同系色で配色されるようにしてあります。チェックボックスにより表示・非表示の切り替えが出来ます。

見出し1

そのページで一番上にある大きな見出しのことです。HTMLの<h1>要素にあたります。文字の読みやすさを優先するため、ワンポイントで視線の誘導に使っております。

見出し背景

見出し1の背景のことです。チェックボックスにより表示・非表示の切り替えが出来ます。見出し1に合わせて同系色で配色されます。

見出し2

いわゆる中見出しで、HTMLでは<h2>要素にあたります。見出し1からのスムーズな視線の移動を促すため、見出し1よりも控えめな同系色を配色しています。

背景色

コンテンツ(中身)部分の背景色を表します。本文の文字色は黒であることを前提として、十分に読むことが可能なコントラストを維持するために、明るく控えめな色を配色いたします。こちらもチェックボックスにより表示・非表示の切り替えが出来ます。