ホームページデザインを考える②～カラーとタイポグラフィ
前記事ではホームページのデザインについて、そもそもデザインとは何か？その概念やデザインの基本４大原則について解説しました。
ホームページにおいて色や文字の選び方は、ユーザーに与える印象を大きく左右します。
色彩は雰囲気を作り、文字は情報を伝える要です。
今回は「色の三属性」や「トーン」の考え方、さらに文字の読みやすさとデザイン性を高めるタイポグラフィについて解説します。
実践的に活用できるポイントもお伝えしますので、ぜひご自身のホームページにもご活用ください。
１．色の三属性：色相・彩度・明度
色には「色相」「彩度」「明度」の三属性があります。
「色相」は赤青緑などの色味のことです。色の関係性がわかりやすいように、色相を円状に並べた色相環（カラーサークル）を用いることが多いです。
「彩度」は色の鮮やかさのことで、彩度が高ければ派手でインパクトのある色になりますが、彩度が低ければ落ち着いた印象を与える色になります。
「明度」は色の明るさのことで、明度が高ければ白色に近づき、明るくやわらかな印象になりますし、明度が低ければ黒色に近づき暗く硬い印象になります。
色の三属性を使えるようになれば、やりたいこと・目指すイメージに合わせて色を効果的に使えるようになります。
たとえば、さわやかなイメージにしたければ色相を変える、高級で落ち着いた印象にするなら彩度を下げる、明るくやわらかな印象にしたければ明度を上げる、といった具合で調節が可能です。
２．＋α：色の「トーン」って何？
色に関して、「トーン」という言葉を聞いたことはありませんか？
色のトーンとは、明度と彩度が似ている色を集めてグループ化したもので、明度と彩度の二つを合わせた概念になります。
同じトーンでまとめると、一貫したイメージを持たせることができます。
たとえば、華やかにしたい場合は鮮やかなトーン、堅実なイメージにしたい場合は落ち着いたトーンを用いるなど、多色使いでも比較的一貫したイメージを持たせることが可能です。
３．タイポグラフィ
文字は単なる情報伝達の手段ではなく、デザインの大切な要素です。
フォントの種類やサイズ、行間の工夫が、読みやすさと雰囲気を大きく左右します。
ホームページデザインにおけるタイポグラフィは、文字をうまく扱うことでホームページ全体の見栄えをよくし読みやすくすることです。
①適切な文字の体裁で整える
近接・整列・反復・対比の4原則を用いると、キレイに整いやすい
②文字もデザイン要素のひとつと捉える
重要な文字だけ太字にする、色やマーカーで強調するなど
その他、フォントの種類と与えるイメージ、フォントの組み合わせ、文字サイズ、カーニング（文字同士の間隔の調整）、行送り、などの要素も関連してきます。
ホームページデザインを学ぶには、文字を整える技術も習得していきましょう。
たとえば、下記の例はタイポグラフィを考慮して文字を見栄えよく読みやすく作成されたバナー画像と、そうではないバナー画像の比較です。
文字の位置や、「カーニング」と呼ばれる文字同士の間隔の調整、フォントのサイズや色などを工夫することで、より見栄えよく読みやすくなっていることがわかります。
ご自身のホームページも、ホームページの文字が読みやすく、伝えたい情報が優先順位に伴ってきちんと一目でわかるようになっているかどうか、定期的に見返すようにしてみましょう。
今回は色の三属性「色相」「彩度」「明度」で色を効果的に使うこと、文字をうまく扱うことでホームページ全体の見栄えをよくし読みやすくするタイポグラフィについて解説しました。
これらはホームページはもちろん、それ以外にも流用できるようなデザインのポイントでもあります。
ぜひこれらのポイントを押さえて、ご自身のホームページデザインをワンランクアップさせましょう。
次の記事ではさらに「ホームページのレイアウトの基本」と、そのポイントについて解説します。
パーツやレイアウトの型について理解し、よりユーザーにとって見やすく使いやすいホームページを作り上げましょう。
次記事：ホームページデザインを考える③～ホームページレイアウトの基本とポイント