色使いについて

　Webサイトにとって安定かつ効果的なビジュアルスタイルを生み出すキーとなるのが、限られたカラーパレットを使うことです。このシンプルで効果的なテクニックは、意思決定を容易にし、洗練され、結束したアイデンティティーを作り出すのに役立ちます。最小限まで減らしたカラーパレットは4色です。たいてい、メインとなる色があり、それに続く色、ベースになる色、補足的に使う色です。

　例えば、flickr.comのようなサイトであればブルーをメインとなる色とし、それがサイトへの関連付けとなる色になります。二次的な色としては黒です。それはヘディングや、テキストに使われ、ベースになる色は白で、補足的に使う色はピンクです。このピンクはセカンダリーヘッドラインにも使われています。

　iKnow!に関して言えば、私たちは、ビジュアルスタイルにもう少し意欲的に取り組み、カラーパレットの色を若干多くしました。メインとなる色にはブルーを使い、ベースカラーに白とグレーを使っています。テキストの色はダークグレーを使い、補足的に使う色はオレンジとライトブルーを使っています。

　カラーセオリーの細かい議論をこの記事では割愛しますが、補色と対比色を両方使うカラースキームにたどり着くオンラインツールがあります。私のお薦めは、Color scheme generator 2（http://www.wellstyled.com/tools/colorscheme2/index-en.html）という無料で使えるオンラインツールで、Webサイトのカラーに基づいて素早くカラーパレットを作るに便利です。

　ここで大切なのが、読みやすいWebサイトのカラースキームを選ぶことです。テキストと背景の色のコンビネーションによっては読みにくくなります。反転されたテキスト（明るい色のテキストに濃い背景）を使う場合、背景色が明るい色のテキストを十分見せることができるかに、気をつけなければいけません。同じことが、濃い色のテキストを明るい色の背景の場合にもあてはまり、白い背景にテキストを黄色にするのは、問題ある色使いになります。多くのシチュエーションにおいて融通の利くカラースキームを見つけるには、ある程度の試行錯誤が必要になるかもしれませんが、選択の幅を狭めることにより、デザインの決定に費やす労力と時間の節約にもなります。

Webタイポグラフィ

　カラースキームを選んだら、次は、テキストの書体を選びます。色使いと同じように、限られた書体を使うことにより、より結合的なデザインになり、アイデンティティーがクリアになります。プラットフォームをまたいで、互換性を持ってWebサイトで使えるシステムフォントには数に限りがあります。英語は非常に少なく、日本語ではさらに少なくなります。Mac、Windows、Linuxなど、複数のOSをまたいで使えるシステムフォントはほんの一握りしかありません。

　一般的に、Serif（明朝）とSans-Serif（ゴシック）の2つが主な書体です。Serifは、受ける印象として、若干フォーマルで時代遅れの感があり、Sans-Serifは、フォーマル感が少なく、よりモダンな印象を与えます。この2つの書体のいずれかを選んで使い続ければ確実です。また、両方を混在させる使い方をするというのは、使い方においてルールを決めない限りは、うまくいきにくいものです。かなり多く使われている例として、Serifをタイトルや、補助タイトルのみに使い、ボディーテキストにはSans-Serifを使うケースがあげられます。

　使用する書体、もしくは、書体のコンビネーションが決まったら、XHTMLドキュメントでの、共用して使える方法を考えるといいでしょう。色とフォントのコンビネーションを使って、ヘディング、サブヘディング、リンクとボディーテキストにおけるいくつかのバリエーションを作ります。

から

、

やなどすべて異なるドキュメントフォントタグで、ドキュメントを作成し、デザイン決定のガイドになる参照として保存しておきます。

　この方法でWebサイトのビジュアルアイデンティティーをデザインすることは、デザインを実装する時にも役立ちます。また、Photoshopを使ったり、アンチエイリアス処理されたテキストを使ってデザインをするような失敗はしてはいけません。たいていの場合、デバイスフォントを使ったデザインを実装すると、完成の段階でがっかりすることになります。