「会社のホームページのデザイン、今のままででいいのかな…？」
とお悩みの方はいらっしゃいませんか。
ユーザーに伝わりやすいホームページにするには、必ず抑えておきたいポイントがあります。
この記事では、誰でもすぐに実践できる「ホームページデザインのコツ」を解説！
記事の後半では、デザインに便利なオススメのツールもご紹介します。
誰でもできる！ホームページのデザインのコツ9選！
ホームページのデザインを良くするコツ9選をご紹介します！
すぐに取り入れられるようなものばかりなので、ぜひ試してみてください。
基本ルールを意識する
ユニークなデザインにしようとするばかりに、Webサイトデザインの基本ルールを無視していませんか？
基本のルールを抑えたデザインは、「ユーザーにわかりやすく伝わりやすい」のがメリット。
以下のWebサイトの基本ルール3つを満たしているか確認して見ましょう。
- メインメニューがページ上部にある
- リンク文字は目立つようにしてある
- フッターに情報をまとめてある
この3つの基本ルールは、ほとんどのWebサイトで用いられています。
まず、サイトのメインメニューは上部（もしくは左右どちらか）に固定しましょう。
ユーザーが迷わず閲覧したいページに行けます。
また、リンク文字は色を変えるなど目立つようにするのがベスト。
とくに文章の中にリンク文字を入れる場合、色を変えておくことでリンクに気づいてもらえます。
つい忘れがちなのがフッターのデザイン。
フッターには、運営者や会社情報・主要ページへのリンクをわかりやすくまとめましょう。
一目で理解できる画像をトップページに配置
トップページに配置する画像は非常に重要です。
何の業種かよく分からない画像や、違う内容を連想させてしまう画像があると、ユーザーはトップページを見た瞬間に離脱してしまいます。
パッと見てどんなホームページか分かるような画像を配置しましょう。
キャッチコピーも有効
トップページに配置する画像と組み合わせて、キャッチコピーを入れるのもオススメ。
キャッチコピーでは、ホームページのコンセプトをユーザーに伝えられます。
また、競合サイトとの違いをユーザーにアピールできることも、キャッチコピーの強み。
例として3つの野菜の通販サイトを見てみましょう。
- 食べチョク：こだわり生産者が集うオンラインマルシェ
- ゴヒイキ：お好きな金額を決めるだけで、旬な野菜がすぐ届く
- らでぃっしゅぼーや：有機野菜・低農薬野菜、無添加食品の宅配サービス
「野菜のオンライン通販」という同じジャンルでも、キャッチコピーを見ることで、どんなコンセプトが売りなのか想像できますね。
キャッチコピーは画像と同様に、トップページの見えやすい場所に配置しましょう！
視線の流れを有効に用いる
視線の流れを意識したデザインは、ホームページの見やすさに繋がります。
視線の流れを誘導するレイアウトにはいくつかの型があり、よく用いられるのは「Z型」と「F型」。
Z型は汎用性が高く、画像や文章などのコンテンツが少ないページ向き。
一方でF型は、長文をユーザーに読ませたい場合に適しています。
どちらの型も、「視線の流れに沿ったレイアウトで、ユーザーが求める情報を見つけやすくする」のが狙いです。
自然に視線移動できるレイアウトを用いることで、情報を探すユーザーの負担を減らし、離脱率を下げましょう。
余白を意識する
ホームページデザインで、最も重要なポイントのひとつが「余白」。
余白を変えるだけで、ページ全体がグッと見やすくなることも多いです。
デザイン初心者の方は、「余白があると手抜き感が出てしまう…」と考え、コンテンツを詰め込んでしまいがち。
しかし、コンテンツが多すぎるページはユーザーに伝わりにくくなってしまいます。
余白はコンテンツを引き立たせるので、このページで伝えたいことは何かを考え、適切に余白を活用しましょう。
余白の調節はすぐにできるので、試してみるのがオススメです。
レスポンシブデザインにする
レスポンシブデザインとは、さまざまなデバイス画面表示に対応したWebサイトのデザインのこと。
Webサイトを閲覧するとき、パソコンを使うユーザーもいれば、スマホやタブレット端末を使うユーザーもいます。
つまり、Webサイトを作る上では、「どのデバイスからも見やすいデザイン」にすることが重要になってきます。
例えば、パソコンからの閲覧しか想定していないホームページだと、スマホから閲覧した時に以下のような不具合が起きる可能性も。
- 画像サイズが大きすぎて表示できない
- 表が崩れている
- 字が小さすぎて読みにくい
- リンクが押しにくい
レスポンシブデザインを導入すれば、使用する端末に合わせてデザインが自動で適切に切り替わります。
どの端末からでもホームページのデザインが崩れることなく表示され、ユーザーの満足度に繋がります。
また、レスポンシブデザインを用いているホームページは、「スマホにも最適化されたサイト」と評価されるのでSEOにも有利。
現在では、スマホは使うけどパソコンは持っていない、という若者も増えてきています。
スマホやタブレット端末など、さまざまなデバイスに対応したデザインは必須と言えるでしょう。
抑えた色使いで統一感を出す
ホームページにたくさんの色を使いすぎていませんか。
色は基本的に3色までに抑えるようにしましょう。
また、ホームページ全体に統一感を出すには、色の割合も重要。
黄金バランスは、「70（基調色）：25（テーマ色）：5（アクセント色）」だと言われています。
色数を抑え、色調バランスを整えることで、統一感のある見やすいホームページに仕上がりますよ。
フォントの効果を知って有効に使う
フォントの使い分けで、見やすく美しいデザインになります。
フォントの書体は、基本的に2つまでに絞るのがオススメ。
- 本文で使う読みやすさ重視のフォント
- 見出しで使う大きく目立つフォント
このように本文と見出しで書体を変えることで、メリハリのある読みやすいデザインになります。
書体を2つに抑えることで、簡単にページ全体の統一感も出せるのでオススメ。
グローバルナビのメニュー数
主要ページへのリンクを表示するグローバルナビメニュー。
このグローバルナビメニューの数は、5つ多くても7つ程度にしましょう。
多すぎるメニューだと、ユーザーが迷ってしまいます。
デザインをより美しくするためのオススメツール
ホームページをより美しく見やすくするために使えるツールをご紹介します。
canva
「canva」は無料で使えるオンラインの画像編集サービス。
手持ちの画像の編集はもちろん、用意されている素材を組み合わせて使用することも可能です。
ドラッグ&ドロップで簡単に操作できます。
アイキャッチ画像やバナーの作成など幅広く使えます。
フリー素材サイト
ホームページで利用する画像を探すとき、まずはフリー素材サイトで検索するのがオススメ。
有料素材サイト
フリー素材でお目当ての素材が見つからなければ、有料サイトを利用するのも一つの方法です。
フリー素材に比べクオリティが高いので、とくにトップページ画像に使うのがオススメ。
- Pixta：国内最大級の画像素材サイト
- Adobe Stock：写真だけでなくテンプレートやイラストも有り
- Shutterstock：2億点以上の素材があるサイト
Optimizilla
「Optimizilla」は無料で、PNG・JPGの画像のファイルサイズを小さくできるサービス。
ドラッグ&ドロップで簡単に操作できます。
複数の画像のファイルサイズを、まとめて調整したい場合にオススメ。
【まとめ】ホームページデザインを綺麗に作るコツ
ホームページデザインのコツ9選をご紹介しました。
- 基本ルールを意識する
- 一目で理解できる画像をトップページに配置
- キャッチコピーも有効
- 視線の流れを有効に用いる
- 余白を意識する
- レスポンシブデザインにする
- 抑えた色使いで統一感を出す
- フォントの効果を知って有効に使う
- グローバルナビのメニュー数
とくに「余白を意識する」は効果が実感しやすいので、ぜひ試してみてください。
また、トップページに配置する画像やキャッチコピーも重要です。
無料・有料の素材サイトから、あなたのホームページのコンセプトに最適な一枚を探しましょう。
9つのコツは、一度にすべてやろうとすると大変なので、試しやすいものから一つずつ改善してみてください。