2022年11月21日

ホームページの理想はユーザーのニーズに応える情報、デザインと導線の質が高いページである事です。

見た目がスッキリしていたりおしゃれで、且つほしい情報が次々に出てくる構成やデザインはノンストレスで閲覧できるため

アクセス数が伸びやすいです。

頭ではわかっていても実際、どんなデザインにすればよいか分からないという人も多いのではないでしょうか。

そこで今回は、見やすいホームページのデザインについて詳しく記事にしました。一緒に勉強していきましょう！

レイアウトを考える

レイアウトはホームページを作る上で非常に重要です。

レイアウトには大きく分けて4つのポイントがあります。1つ目は近接です。

近接とは、関連性が高い情報は近くに配置し、低い情報は遠くに配置することです。

そうすることで、関連性が高い情報のグループから必要な情報を探すことが出来ます。

2つ目は整列です。整列とは写真や文字の位置を揃えることです。

基準になるところを「見えない線」と呼び、縦と横の両方の位置を揃えます。

整列が出来ていなければ、がたがたで見ずらいホームページになってしまいます。見えない線でしっかりと揃えましょう。

3つ目は強弱です。伝えたい情報は大きく派手に、そうではない情報は小さく地味にしましょう。

派手で印象の強い情報は、目に入りやすいので一番に見ることになります。情報に強弱をつければ、ユーザーの見る順番を操作することが可能になります。

4つ目は反復です。同じようなデザインを用いることで統一感を出すことが出来ます。

関連性の高い情報は同じ色の文字を使ったり、背景は白にするなど統一しましょう。

テキストのデザイン

画像やレイアウトだけがデザインではなくテキスト(文章)もデザインの一つです。

テキストのデザインは、どんなホームページを作りたいかによって異なります。

フォントのサイズや行間、文字間などは自分が作りたいホームページに合わせてしっかり考えましょう。

フォントサイズは、小さくすればおしゃれな印象を与えることが出来ますが、小さすぎると読めなくなるので注意し

読みやすいフォントサイズにすることを心掛けてください。

行間とは、文字の上下の間隔のことを指します。行間を全く取らなければ、読みにくいホームページになりますが、取りすぎると間延びしてしまい読みづらくなります。

読みやすい行間は1.5文字分程度です。自分の理想のデザインと照らし合わせて、最適な行間を見つけてください。

文字間は文字の左右の間隔のことです。狭くすれば緊張感を出すことが出来ますが、広くすればゆったりとした印象を与えることが出来ます。

広げすぎると反対に見にくくなってしまうので、文字サイズの5％から10％程度の文字間を入れるとバランスのいいテキストになります。

配色やコントラスト比に注意する

色はたくさん使うとカラフルで明るいデザインになります。

しかし、多すぎるとごちゃごちゃした印象を与えてしまうことがあるため、3色でまとめると統一感のあるスッキリしたデザインになります。

ベースカラーとメインカラー、アクセントカラーの3つを決めることが一般的とされています。

その他の方法としては基本の色を決めておき、同系色の色でまとめるブランディングの手法もあります。

同系色でまとめることで、ユーザーの記憶に残りやすくなるという効果が期待できます。

コントラスト比とは、近くの色同士の明暗の差のことです。背景色と文字色が似ている色の場合は、コントラスト比が低いので文字が見にくくなります。

なので、コントラスト比が高い配色をすることが大切です。

スマホを屋外で使用したとき、コントラスト比が低いとかなり見にくくなるので、注意が必要ですね。

ホームページのデザインはポイントを抑えることが大切

ホームページのデザインを考えるのは大変そうですが、基本的なポイントを抑えることで理想のデザインに近づけることが出来ます。

今回紹介した3つのことは、見やすいホームページを作る上で重要なポイントです。

レイアウトやテキストのデザイン、配色やコントラスト比をしっかり考えることで、良いホームページデザインが出来上がります。

デザイン、構成でいかにユーザーのことを考えられるかが重要なポイントです！