フォカッチャフォカッチャ

BLOG

ブログ

見やすいデザインでホームページを作るには?ポイント7つを紹介!

ホームページを「見やすいデザイン」で作ることは、非常に重要です。なぜかというと、見やすいデザインにすることで、以下のようなメリットがあるからです。

  • 伝えたいことが、しっかり伝わる

  • ページを見ている人に安心感を与えることができる

  • 競合と差をつけられる

他にも、たくさんのメリットがあるかと思います。となれば、できるだけ見やすいデザインで作りたいですよね。そこで、本記事では、見やすいデザインでホームページを作るために重要な7つのポイントを紹介したいと思います。

具体的には、以下の7つです。

  1. 見やすい文字の色を選ぼう

  2. 使うデザイン要素をあらかじめ決めよう

  3. 「文字だらけ」に注意

  4. 余白をしっかり取ろう

  5. 関連するものは近くに置こう

  6. 端(はし)を揃えよう

  7. 強弱を意識しよう

それぞれのポイントについて、詳しく説明していきたいと思います。

また、弊社では、初期費用のかからないホームページ制作・運用のサービスを行なっております。見やすいデザインが得意ですので、お気軽にお問い合わせください。

1. 見やすい文字の色を選ぼう

まず一つ目のポイントは、見やすい文字の色にすることです。文字は、情報を伝える上で最も重要な要素であるため、このポイントは絶対に押さえておく必要があります。

見やすい文字の色というのは、背景によって異なります。

例えば、

  • 背景が白色の場合......見やすい文字は、黒色・ダークグレー・ダークブルーなどの濃い色

  • 背景が黒色の場合......見やすい文字は、白色・薄いグレーなどの薄い色

といった具合です。「色」は、デザイン未経験の人が失敗しやすい要素のため、迷ったら、まずは上記のような無難な色を設定することをおすすめします。

2. 使うデザイン要素をあらかじめ決めよう

2つ目のポイントは、使うデザイン要素をあらかじめ決めておくことです。デザイン要素とは、例えば以下のようなものを指します。

  • 文字サイズ

  • 余白

これらの要素をあらかじめ決めておくことで、デザインに統一感を出すことができ、見やすいデザインへとつながっていきます。

具体的には、以下のように決めることができます。

  • 文字サイズは、48px と 24px と 16px のみ

  • 余白は、32px と 16px と 8px のみ

  • 色は、黒・グレー・白・黄色のみ

「決め方が分からない...」という場合は、とりあえず、サイズ系は8の倍数にして、色は黒・グレー・白・キーカラー(好きな色)の4色のみを使ってみましょう。

3. 「文字だらけ」に注意

3つ目のポイントは、「文字だらけ」のデザインにならないように注意することです。文字だらけだと、圧迫感を感じて離脱してしまう人が出てくるからです。

具体的には、以下のような対策が考えられます。

  • 写真やイラストを多めに入れる

  • そもそもの文字数を減らす

これだけでも、第一印象で「見やすい」と感じるはずです。

4. 余白をしっかり取ろう

次のポイントは、余白をしっかり取ることです。余白を取ることで、その余白が額縁(がくぶち)のような効果を生み出し、その中にある情報を際立ててくれます。また、余裕のある雰囲気にもなります。

特にPC版のデザインでは、余白をしっかり取った方が良いと感じています。スマホ版も基本的には同様ですが、スマホ版は横幅が狭いため、スマホ版の横方向の余白は少し詰め気味にすると良いと思っています。

余白をコントロールすることで、見やすいデザインになります。

5. 関連する情報は、近くに置こう

5つ目のポイントは、関連する情報は近くに置くことです。近くに配置することで、その要素が関連しているということを直感的に示すことができます。逆に言えば、関連しない情報は、ある程度離して置くべきです。

6. 端(はし)を揃えよう

6つ目のポイントは、端(はし)を揃えることです。基本的には、揃えられそうな端は全て揃えるという意識を持っておくのが良いかと思います。端が揃っていることで、「きっちり感」が演出され、格段に見やすくなります。

7. 強弱を意識しよう

最後のポイントは、強弱を意識することです。強弱は、さまざまな要素に対して適用できます。

例えば、「見出し」と「本文」の場合、以下のように強弱をつけることができます。

  • 見出し......大きく・太い文字にする

  • 本文......小さく・細い文字にする

強弱をつけることで、より分かりやすいデザインになります。上記の場合、見出しと本文をしっかりと判別できるようになります。

まとめ

いかがでしたか?デザインに慣れていない方には、少し難しい・イメージが湧きづらいと感じた部分もあったかもしれません。

もし、見やすいデザインのホームページ制作を、誰かに依頼したいと思ったら、ぜひ弊社の、初期費用のかからないホームページ制作・運用のサービスをご検討ください!お問い合わせお待ちしております。

この記事をシェアしよう!