基礎からわかるホームページの配色

センスではない配色の基本を学ぶ

当サイト「基礎からわかるホームページの配色」は、フォルトゥナの坂本邦夫によって、2004年7月にウェブサイトの配色を学ぶための情報サイトとして開設されました。

当時はウェブサイトの配色に関する情報は色見本帳のようなものしかなく、ユーザビリティ(配色による使い勝手)やアクセシビリティ(JIS X8341-3:2004は2004年6月に公示)を考えた、情報を伝えやすくするための配色の情報はほとんど見られませんでした。

10年以上経過し、ウェブ制作業者の間では一般的になった(あるいはそのように信じたい)ユーザビリティやアクセシビリティの情報ですが、誰もが更新しやすいCMSの登場やパソコン以外のインターネット端末も普及したことで、制作業者以外の人によるウェブサイトも多く見られるようになっています。

このような状況の中、配色はより多くの場面で必要とされていると考えており、このサイトの情報が少しでも皆様のお役に立てるようであればうれしく思います。

このサイトで学べること

サイトの目的と配色

ホームページのよい配色とは統一感を持ち、色が美しいことはもちろんですが、せっかくホームページを見に来てくださった人に対し、わかりやすく、読みやすい配色をすることです。ここでは色を決める前の心がけなどについて説明いたします。

色彩の基礎知識

最初に知識を詰め込むと初めて色彩を学ぶという方には敷居も高く、色彩について理解することをあきらめてしまうかも知れません。ここでは絶対に知っておきたい最低限の色彩の知識だけを学びます。その他の必要な知識はその都度学んでいきましょう。

色彩設計の準備

ソフトを使って適当に色を決めるだけではカラーコーディネートとは言えません。配色を行う前にイメージを固めたり、競合サイトの調査を行ったり、様々な方法で本当に必要な色の絞り込みを行っていきます。

色彩設計で使う色を決める

今までの調査や準備によって絞り込まれた色を元に実際に使う色を決定していきます。しかしいきなりデザインに色をつけてしまうと収拾がつかなくなり困ってしまうことが多いため、まず基本となる1色を決めて、それを元に使う色を増やしていくと失敗の確率は下がります。

配色のコツやポイント

ここまでの過程でせっかくきちんとした色彩設計をしても、その使い方を誤れば印象も変わってしまいます。実際の配色にあたってのコツや気を付けるべきポイントをご紹介します。

よりよい配色にするために

ウェブ配色の基本から一歩進んだ配色の考え方をまとめたコラムなどをまとめています。