集客できるホームページのデザインとは？デザインのポイントや参考事例を徹底解説

集客を意識したホームページのデザインにするメリット

集客を意識して自社のホームページをデザインするメリットは、以下のとおりです。

メッセージ性の低いデザインのホームページでは、ユーザーが求めている情報を提供できません。多くの人に自社のホームページを見てもらうためには、UI/UXを意識したデザインが重要です。

ホームページの構造がわかりやすくなると、ユーザーは求めている情報にたどり着きやすくなり、商品やサービスの訴求にもつながります。

伝えたい情報が明確で、操作性のよいわかりやすいデザインはSEO対策にも効果的で、新規ユーザーの流入も見込めるでしょう。

集客できるホームページのデザイン10個のポイント

集客できるホームページデザインのポイントは、以下の10個です。

自社のホームページがユーザーにとってどのように見えているのかを考えることが重要です。フォントやカラーを統一し、ユーザーの視線の動きを意識しないと、訪問したユーザーがすぐに離脱するでしょう。

1. 階層構造を意識したサイト設計を行う

ユーザーが読みやすいホームページの構造は、伝えたい内容が階層ごとに整理されています。階層構造が意識されていると、ユーザーが目的の情報に直感的にたどり着きやすくなるでしょう。

大分類が同じ内容で構成されており、中分類・小分類と詳しい内容が記載されているデザインを検討します。1つひとつのページが独立せずに、今読んでいるページがホームページ全体のどこに当たるのかがわかるデザインにしましょう。

2. キービジュアルを意識する

トップページのキービジュアルに、自社の商品やサービスの特徴がわかる印象的な画像や動画を活用することが重要です。より印象的なコンテンツを用いることで、ユーザーを自社サイトに惹きつけられるでしょう。

キービジュアルで使用するカラーは統一されたトーンで調整すると、全体的に統一感のある印象を与えます。写真・ロゴ・画像素材の組み合わせやキャッチーなコピーの追加により、伝えたい情報をアピールできるデザインに仕上げましょう。

3. ユーザーの視線の動きを考える

ユーザーがホームページを参照するとき、視線は左上から右下に向かって動きます。視線の動きにあわせたデザインにすると、ユーザーはホームページの内容が読みやすくなり、離脱する回数を減少できます。

商品やサービスの販売・問い合わせなどコンバージョンを目的としたホームページでは、目的までの導線を意識しましょう。たとえば、視線の動く先に問い合わせボタンを設置すると、ユーザーは迷うことなくボタンを認識できます。

4. 文章やコンテンツのレイアウトを意識する

集客できるホームページのデザインは、文章やコンテンツの配置に注意しましょう。

ホームページは「ページタイトル」「見出し」「本文」などの文字要素で構成されています。文字のレイアウトや構成に気を配ることで、ページの要点がわかりやすくなり、ユーザーにとって読みやすくなります。本文と見出しがわかりやすくデザインされていないと、行間が狭くなりユーザーは読みにくくなるでしょう。

スマートフォンやタブレットの活用が増えているため、どのようなデバイスでも快適に閲覧できるレイアウトを意識しましょう。

5. 適切なカラーを利用する

ホームページに適切なカラーが利用されていると、ページ全体に統一感が生まれて見やすいデザインになります。ベースとなるメインカラーを決め、そのあとにページ内の要素ごとに配色していく方法が一般的です。

メインカラーは、会社のコーポレートカラーや商品・サービスのメインとなるカラーを積極的に利用しましょう。背景色と本文の文字色が類似していると読みづらく、通常の文字とリンクテキストの区別も難しくなるため注意が必要です。

6. 末尾表現や表記を統一する

文末表現の末尾が「です・ます調」や「である調」に統一されていることで、ユーザーがストレスを感じずに文章を読み進められます。

「です・ます調」は柔らかい文章を書くときに利用し「である調」は堅い文章を書くときに利用するなど使い分けの工夫が必要です。

ひらがな・カタカナ・漢字・数字などを統一して使用することも読みやすさを向上させます。たとえば、金額の表記に「10,000円」とカンマを入れる表現を統一すると、ユーザーに違和感を与えにくくなるでしょう。

7. 自社のイメージにあった文字のフォントにする

自社の商品・サービスのイメージにあったフォントを使用することで、ユーザーに企業イメージを伝えやすくなります。

伝えたい内容によって複数のフォントを活用する方法もありますが、過多なフォントの使用は文字の読みにくさを招く可能性があります。ホームページの一貫性を維持するためには、フォントは1〜2種類におさえることが望ましいでしょう。

8. ページ内に余白を与える

集客できるホームページでは、適度な余白を与えて読みやすくする点がポイントです。ホームページ内に情報や要素をつめすぎると、ユーザーにとって重要な部分が見つけにくくなり離脱しやすくなります。

「表示領域」と、文字や画像などの要素が配置される「コンテンツ領域」との間に余白を与えると、ホームページが見やすくなります。文章・画像・動画など入れたい要素は多くありますが、1文ごとに改行する・余白の大きさを変えるなど、ホームページの役割を意識しましょう。

9. わかりやすい写真やイラストなどの素材を活用する

集客できるホームページのデザインでは、ユーザーが一目で理解しやすい写真やイラストなどの素材を積極的に活用します。

文章だけでホームページの構成を埋めてしまうと、コンテンツが読みにくくなり、ユーザーの離脱率が高まります。画像や動画を利用する場合は、人物・背景・アイコンなどが自社のイメージに適しているかを注意深く確認しましょう。

写真や画像を積極的に活用することで、UI/UXが向上して集客向上につながる可能性があります。

10. 避けるべき文言を決める

ホームページに集客するために、避けるべき文言を事前に決めます。企業イメージの低下や商品・サービスのブランドイメージを損なうおそれがあるネガティブな要素のコメントや差別用語などは用いらないように注意しましょう。

商品やサービスのイメージを劣化させる文章がないかをチェックすることが重要です。「主観的な意見を避けたい」「企業イメージを損なうことを排除したい」「不当表示を避けたい」など、ホームページ制作のルールを共有しましょう。

集客につながるホームページデザインのワークフロー

集客につながるホームページデザインのワークフローは、以下のとおりです。

ラフレイアウトを作成してホームページの方向性を確定してから、レイアウトやパーツの作成に入りましょう。

サイトマップの作成

ホームページの階層やリンクなどを決めるために、ホームページ内のページ構成を一覧できるサイトマップを作成します。

ホームページの更新を続けるとファイルの管理が難しくなります。ホームページの制作に入る前に、各ファイルのフォルダ分けをする階層を決めましょう。

文章や画像などの素材収集

掲載する文章や画像・動画などの素材を収集します。画像や動画はあらかじめWebに適した容量やファイル形式にしましょう。

ホームページのコンテンツを引き立てるためには、背景のデザインも重要です。文字や図形が読みやすいような配色やデザインを心がけましょう。

ラフレイアウトの作成

文章や画像などを配置し、各ページに配置する共通の項目やリンクメニューの位置を決め、ラフレイアウトを作成します。ラフレイアウトがあると、複数のメンバーでレビューしやすくなり、ホームページの全体像をイメージしやすくなるでしょう。

「Adobe XD」や「Googleスライド」などを活用すると、プロジェクト内での共有がしやすくなります

レイアウトとパーツの作成

ラフレイアウトをベースにレイアウトを作成します。イメージ画像やナビゲーション・アイキャッチ画像などのパーツも作成します。

ラフレイアウトのイメージが崩れないよう、定期的にチェックしましょう。

ホームページのコーディング

レイアウトを基に、デザインが崩れないように文章を入力します。画像や動画を配置するために、HTML・CSSにてコーディング作業を行いましょう。

コーディングで利用するタグやコードは、大文字・小文字やタブ設定など、コーディングルールを決めておくと、後から編集しやすくなります。

表示確認とアップロード

コーディングしたHTMLファイルは、Webブラウザで表示確認を行い、Webサーバーにアップロードして公開します。

Webブラウザ・デバイスの種類やバージョンの違いによって、レイアウトが大幅に崩れてしまう可能性があります。Google ChromeやSafariなどできるだけ多くのWebブラウザやデバイスで表示を確認しましょう。

集客の参考になるホームページのデザイン5選

集客の参考になるホームページのデザインを5つ紹介します。

自社のホームーページを制作する際の参考にしてください。

1. Nintendo Switch

参照：Nintendo Switch

コーポレートカラーの赤をベースにして使用する色数を限定しているため、アピールしたい商品が際立ち、ページ全体に統一感を出しています。

ナビゲーションのアイコンの色も本文との区別が明確にわかる色を用い、かつ全体のデザインイメージを損なわないように工夫しています。ハードの魅力とソフトの魅力を動画を交えて伝えているデザインは、ユーザーにワクワク感を与えるでしょう。

2. 株式会社ユニクロ

参照：株式会社ユニクロ

季節にあわせて、ユーザーのニーズが高い商品が前面に表示されるデザインがユニクロの特徴です。ホームページがシンプルな構成になっており、ユニクロ商品とのリンク性を感じます。

スクロールをしてもトップの「WOMEN」「MEN」「KIDS」「BABY」が固定されているため、個人利用も家族利用もしやすい設計です。ユーザーが知りたい価格が赤文字で目立つようにインパクトを持たせている点も、ユーザーに優しいデザインといえるでしょう。

3. Mr.CHEESECAKE

参照：Mr.CHEESECAKE

トップページにキービジュアルとなるチーズケーキがとろけるように美味しく見えるデザインです。文字を極限まで減らした縦スクロースホームページであり、画像イメージでユーザーの購買意欲を引き出しています。

ページ最下部に新しい商品や最新情報を掲載し、お店のファンを飽きさせない工夫も参考になるでしょう。

4. BALMUDA

参照：BALMUDA

高いデザイン性の家電を展開している企業イメージを反映させたバルミューダのホームページです。おすすめしたい商品の画像を前面に使い、ユーザーの興味を惹くデザインになっています。

商品紹介ページでは、家電を使用しているシーンをスタイリッシュな動画で発信しているため、購入後のイメージが伝わりやすいでしょう。

5. BULK HOMME

参照：BULK HOMME

男性用ケア商品として人気のあるBULKHOMEのホームページは、白と黒を基調としたスマートなデザインです。白黒調にデザインされた商品のパッケージとホームページのデザインに統一性があり、商品イメージをユーザーに与えやすいでしょう。

パラメーターを用いて商品の特徴を表現しているため、初めて購入するユーザーも自分にあった商品を見つけやすい工夫がされています。

ホームページのレイアウト3つの種類

ホームページのレイアウトを構成する3つの種類を紹介します。

それぞれのレイアウトにメリット・デメリットがあるため、自社のホームーページにあったレイアウトを検討しましょう。

1. シングルカラムレイアウト

シングルカラムレイアウトとは、ホームページ内の縦の1列に情報を並べるレイアウトのことです。ページをスクロールして、上から順番に情報を読み込むデザインで、サイドバーが配置されていない特徴があります。

情報を一貫して発信できるため、ユーザーにシンプルで直感的なイメージを与えるでしょう。スマートフォンやモバイル端末でも参照しやすい点もメリットです。

2. マルチカラムレイアウト

マルチカラムレイアウトとは、ホームページ内にて複数の列を利用して情報を配置するレイアウトのことです。

ページが横に広がるため、大量の情報を整理して展開しやすく、複数のコンテンツを同時に発信できる特徴があります。ホームページに訪問したユーザーは複数の情報から選択でき、目的の情報に早くたどり着きやすいでしょう。

3. カード・タイル型レイアウト

カード・タイル型レイアウトとは、カードやタイル形式の枠の中に異なる情報やコンテンツを配置するデザインのことです。ホームページで伝えたい情報をコンパクトにまとめて表示でき、スタイリッシュなデザインを実現します。

1ページで異なる情報を発信する際に有益ですが、文字が多いと混乱を招きやすくなるでしょう。直感的に判断できる画像や動画を活用して、ユーザーが使いやすいデザインを構築することが重要です。

まとめ

集客を意識したホームページのデザインにすると、ユーザーが求める情報にたどり着きやすくなり、自社のイメージを伝えやすくなります。ホームページのカラーやコンテンツのレイアウトを検討し、ユーザーにわかりやすいホームページを制作しましょう。

「比較ビズ」では、集客できるホームページのデザインを制作できる業者を簡単に探せるため、比較して相談できます。ホームページの集客やデザインに課題を感じている担当者は、ぜひ検討してください。

監修者のコメント

株式会社Weathercock

代表取締役　大野淳

愛媛県でホームページ制作・SEO対策を行なっている会社。コーポレートサイトやECサイトの構築はもちろん、オウンドメディアの構築を行う。クライアントに寄り添ったWEB制作を心がけており、WEBマーケティングを通して見込み客の欲求に合わせたコンテンツ作成を行うことをモットーに行う。

詳しく見る

ホームページで集客するためにはデザインやページ内の構成はもちろん、トップページや下層ページのSEO対策も重要なポイントになります。また、サイトにアクセスした際に何のホームページなのかもきちんと分かるようなホームページでなくてはいけません。

WEBページにアクセスした際に2〜3クリックで目的のページに辿り着くことができるようなホームページが理想です。探しているページに辿り着けないとユーザーも離脱してしまう原因となりますので、分かりやすいホームページ作りが結果的にユーザーにもGoogleにも好まれることになります。

このサイトはどんなサイトなのか、サービスを利用する場合はどれくらいの価格なのか、どこから問い合わせをすれば良いのかをまずは明確にするようにしましょう。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。