前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。

カラースキームを固める

前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。

それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。

配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。

また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。

Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういったツールをフル活用すれば、バランスの良い配色を生み出すことができます。

参考までに、私が実際に使って役立ったり、お世話になってきたツールをご紹介します。海外（英語）サイトが多いですが、ほとんどのインターフェースが色を触るかカラーコードを入力するだけのものなので英語がわからなくてもほぼ使えると思います。

Webツール

[ws]Color Scheme Generator 2 : Creative Commons by-nc-sa

色々なツールがある中でわかりやすく使いやすい。配色パターンに加え、パステルの度合い等も選べます。さらにドロップボックスで色覚異常者の人にどのように見えるか[2]もプレビューできる機能もあり、シンプルながら気が利いています。もちろんカラーコードも出力されるため、そのままWebに活用できます（ダウンロード版もあるが、商用利用不可⁠）⁠。

THE MAN IN BLUE のカラースキームジェネレータ : 無料

カラーパレットを出すだけでは、色の配分が決まっているわけではないので、配置してみたものの思った配色と異なってしまうことがよくありますが、このツールではそのような問題をほぼ解決できます。よくある２カラム型のレイアウトに対し、色を実際に置いたCSSレイアウトサンプルまで生成してくれるので色の分量のバランスをあわせてチェックすることができる点が優れています。CSSごと出力されるので、カラーコードを単独で知りたい場合には少々手間がかかります。上記のColor Scheme Generator 2 で生成した色と併用する使い方も効果的。

インストール型のツール

Color Schemer Studio[Windows/Mac] : $49.99

有料のインストール型。私は現在こちらを利用しています。登録ユーザが作ったカラースキームギャラリーを見ることができ、ギャラリーから気に入ったカラースキームをダウンロードできます。ユーザ登録をおこなうと自分の作ったカラースキームを投稿することもできます。

富士通アクセシビリティ・アシスタンス

WebInspector、ColorSelector、ColorDoctorの３種類のソフトウェアがある。Windows/Macに対応していますが、ColorDoctorはWindows版のみ。一通りサイトのテーマカラーを決めてから、アクセシビリティチェックをするのに欠かせないツールです。いずれも無料のインストール型ですが、より高度な機能を搭載した有料版もあります。

少し試しただけのものを含めてしまうともっと膨大な数になるのでこちらを中心に（ほぼ）説明付きでクリップしてありますのであわせて参考にしてください。

色の方向性が決まっても注意しなければならないこと

216色のWebセーフカラーであれば、コンピュータの環境の違いに関わらず色を再現できるとしていますが、実際はWebセーフカラーだけでデザインしない場合も多くあります。その際、ディスプレイのガンマ値[3]が異なることによって違った色合いに見えてしまうことも意識しておく必要があります。

Windowsの標準ガンマ値は通常2.2～2.5、Macは1.8であり、通常Macで作った画像をWindowsで見ると、暗く見えてしまいます。MacでWeb制作をする場合は、あらかじめガンマ値の調整を行っておくと良いと思います（Macなら標準でガンマ調整ができるようになっています⁠）⁠。いずれにしても仕事でWebページを作る場合は最低限WindowsとMacの両方で確認できるようにしておきたいものです。

以上のようなことを考慮しながら、カラースキームを作っていきます。

カラースキーム作りは、デザイン工程のなかでもとても楽しいものだと思います。キーカラーの選び方ひとつをとっても、「⁠日本の良さを伝えたいからこそ、伝統色から選ぶ」というような選び方や、「⁠好きな車のロゴにちなんだ色にしたい」などというように、制作するページにあわせて決めていきます。

企業サイトなどあらかじめCI計画によって色指定されているときは、それに従って決めるか、最低限のトーンを守りながら独自のエッセンスを加えていく方法もあります。

仮に、私が水産庁のホームページをリニューアルするということになった場合を想定して、カラースキーム例を作ってみました（あくまでも一例です⁠）⁠。

水産庁は漁業に直接関わる機関ですので、やはり

• 海をイメージさせる青系統の色がはずせない
• 背景色は白を基調とし、情報を読みやすくする

というような自分なりの最低限の基本ルールを決めておいた上で、青の中でも多少落ち着いた印象を持つ色調、それに加えてアクセントカラーにキーカラーと反対の色相になる色を置いてみました。アクセントカラーの分量はサイト全体でいえばごく少量になると思います。

次回は見出しのデザインについて取り上げたいと思います。