初心者必見!ホームページデザインの基本の「き」

基本的なレイアウトとは

ホームページで多く取り入れられているのがF型のレイアウトです。F型のレイアウトは、左上のサイトロゴからナビゲーション、見出し、記事へと視線が移動するように配置したものになります。左上が一番重要な要素を配置する場所で、ユーザーの視線がそこから下へと進んでいき、気になったコンテンツがあった場合には左から右へと視線が移動するのが特徴です。

配色は3つの色で決める

まず配色ではメインカラーを決めます。コーポレートサイトであれば、ロゴマークの色をメインカラーとして用いているホームページも多くあります。次に決めるべきはベースカラーです。ベースカラーとは主に背景色で使われる色で、白や灰色、黒などメインカラーの妨げにならない色を選ぶことが重要です。最後がアクセントカラーで、これは注意を向けたいような場所に使います。アクセントカラーはメインカラーの補色を使うと視認性が増します。というのも、お互いの色を引き立て合う効果が補色にはあるからです。たとえば青がメインカラーならば、黄色をアクセントカラーとして使うと注意を引きつけやすくなります。

文字をデザインするタイポグラフィ

タイポグラフィとは、適切なフォントを選び、読みやすいように文字を配置することです。フォント選びは、ホームページのデザインにおいて重要です。オシャレだからといってデザイン性が高いフォントを本文で使用してしまうと、視認性が損なわれてしまいます。本文に関しては奇をてらったようなことはせず、視認性を第一に考えてフォントを選ぶべきでしょう。逆に、見出しなどでは強調性が大事になります。本文としっかり区別できるようにするためには、フォント選びのほか、文字の大きさや文字の太さを調節する必要があります。

レスポンシブデザインとは、パソコンで見た時と、スマートフォンで見た時とで、それぞれ異なるデザインが表示されるwebデザインのことです。