ホームページを構成する色彩とデザインホームページというのは、当然誰かに「見られる」ことを強く意識して作ります。どんなに高度なSEO対策を施し、リスティング広告などを使ってたくさんの人をホームページに集めたとしても、肝心のホームページが見づらいと人はすぐに帰ってしまいますよね。
合理的なサイトの構成、ページごとのソースコードの整理や工夫、満足度の高い良質なコンテンツの更新と同じくらい、ホームページ制作では色彩とデザインが重要です。
初めて人に会う時と同じように、ホームページでも第一印象は大切です。場合によっては集客や成果に直接つながってくるものでもありますので、ホームページを構成する色彩のデザインについて基本的なことだけでも知っておきましょう。
目次
色とは
そもそもの話、色ってなんだと思いますか？ デザインも同じですが、センスによるところが大きいような気がするものですので、なんとなくセンスがない人には良く分からないもの、というイメージがある方もいるのではないでしょうか。
色やデザインを評価するのが人の目と感覚である以上、そういった面があることは否めません。ですが、それこそセンスで成り立っているような音楽にも、大衆受けしやすい音、コード進行などを含めた複雑な音楽理論があるように、色彩やデザインにもきちんとした理論があるのです。
説明したいのは、色とは何か、ということです。色のことをなんとなくセンス頼りのものだと考えている内は、良いデザインを手に入れることはできません。
色を構成するものは、色相、彩度、明度という3つの要素です。逆に言えば、この3つの要素について理解さえしていれば、この世の中にあるありとあらゆる色をきちんと言葉で説明することができるようになります。
色相環を知っておこう
色相環、というものがあります。皆さんは、ぐるりと円を描くように色が配置された輪っかを見たことはないでしょうか。赤青黄色と色んな色を輪にして表現しているあのリングのことを、色相環といいます。
この色相環を使うことで、ホームページ制作における色彩のデザインはより明確に理解できるようになります。
色相とは
色相というのは、簡単に言うと色味のことです。赤色、青色、緑色。たくさんの色がありますよね。同じ明るさの色でも、色味が違うと全く別の色になります。
明度とは
明度は、色の明るさのことです。赤色一つ取っても、明るい赤色と暗い赤色では受ける印象が違いますよね。
彩度とは
これは色の鮮やかさを指しています。彩度が高ければ鮮やかに、彩度が低いと地味になる、という理解だと分かりやすいでしょう。
これら3つの要素を組み合わせると、「明度と彩度が高い赤色」というように、きちんと色を言葉にすることができます。また、中でも明度と彩度の組み合わせのことをトーンと呼ぶ場合もあります。赤と薄紅色は、同じ色ですがトーンが違うのです。
色とは、ということを知っていれば、例えば皆さんがホームページのデザインをプロに頼む時でも発注がしやすくなります。納品されたものがイメージとちょっと違う、なんて時も、「ここの色、もう少しトーンの明るいものに差し替えてください」といった具合に具体的にお願いできるようになります。
ホームページ制作における色彩のデザイン
ホームページ制作において、色彩もデザインも、そのホームページそのもののイメージやわかりやすさ、オリジナリティを表現するための一つの手段です。
例えば、環境に配慮したエコ製品を扱っている企業のホームページであれば、自然をイメージさせる緑色が印象に残るデザインが欲しい、なんてこともありますよね。
こんなふうに、企業や個人が抱いているイメージ、ビジョンといったものをわかりやすく伝えることができるのが、色彩とデザインの力なのです。
ホームページはとにかく分かりやすいことが第一に考えられますので、実はデザインそのものには大きな幅はありません。人の目が見やすいデザインというのが、ある程度決まっているからです。ということは、色彩に配慮することで他の似たようなホームページと差別化していく訳ですね。
ホームページ制作における色彩のデザイン比率
実は、見やすいホームページにはある程度の決まり事があります。絶対にそうしなければならないというようなものではなく、こうするとより見やすい、よりコンセプトを伝えやすい、というテンプレートが存在するのです。
皆さんは、ぱっとページを開いた時極彩色が飛び交っているような目に痛いホームページをじっくり読み進めようと思いますか？ 思いませんよね。パソコンやスマートホン、タブレットの画面を見るのは目が疲れやすいので、やはり目にやさしい配色、色の比率を考えることが大切なのです。
ベースとなる決まり事は、最低でも色は3つ使う、ということです。ページ全体の背景となるベースカラー、特に目立たせたい、主張したい部分に使うイメージカラー、そしてちょっと目を引くアクセントカラーの3つです。
実際にはもっとたくさんの色を使うこともできますが、基本は3色だと思ってください。2色では重要なところ、例えば会員登録のボタンやネットショップの購入ボタンなどが目立たないので、できれば3色が望ましいです。
ベース、イメージ、アクセントの比率は、大体70％、25％、5％ほどにすると見やすいデザインになります。ベースが多すぎるとイメージカラーが目立たず、アクセントが多すぎるとアクセントにならない。イメージカラーが多すぎると目立ちすぎて目に痛い。
バランスの良い比率です。
ベース、イメージ、アクセントに使う色彩
細かく言い出すとキリのないことですし、基本だけを知っていれば後は弊社のようなホームページ制作業者にスムーズにお任せしていただけるので、ごくごくおおざっぱに説明します。
ベースカラーに使う色は、薄い色、もしくは白やグレーなどの無彩色にしましょう。黒色はスタイリッシュで大人のイメージを出すのに効果的ですが、上手に使わないと意外と見づらいホームページになってしまうので要注意です。
イメージカラーは好きな色で構いません。緑や赤、青などです。あまりにも明度や彩度の高い真っ黄色、薄い空色などでは文字が見づらいので、できれば明度が低い色を選びましょう。
ベースカラーに迷った時、イメージカラーの明度を思い切りあげるのも効果的です。例えば、イメージカラーがビビッドな青の場合、ベースカラーをほんのり薄い水色にすると、ホームページのデザイン全体に統一感が出ます。
アクセントカラーを選ぶ時に役立つのが、最初の方で紹介した色相環です。色同士にはそれぞれ関係があり、隣り合うとお互いが目立つ色、逆に目立たなくなってしまう色などがあります。
アクセントカラーを選ぶ際には、色相環を見てイメージカラーからできるだけ遠い色をチョイスすると良いです。ホームページ全体の色は、ベースカラーが薄い色なのでイメージカラーによって決まってきます。
そこに色相環で離れた場所にある色を少し入れてあげることによって、その部分を思い切り目立たせることができるのです。
ホームページ制作における色彩のデザインには無限のバリエーションがあります。皆さんの好きな、もしくはホームページの理念に最適な色彩とデザインを選べるように、基礎的な知識だけ知っておきましょう。
