ホームページレイアウトの重要性と選び方|レイアウトの実例あり

ホームページ制作

BtoB企業のホームページにおいて、レイアウトは非常に重要です。

レイアウトの違いにより、ユーザーにとってのホームページの見やすさ、操作性、ホームページから受ける印象などが大きく左右されるためです。

では、特にホームページを新しく作るときやリニューアルをするときには、どのようにレイアウトをイメージし、設計すれば良いのでしょうか?

この記事では、BtoB企業におけるホームページレイアウトの選び方について解説しています。用途ごとのレイアウトの選び方のポイントにも触れているので、ぜひ参考にしてください。

 

ホームページリニューアル時のレイアウトの概要と重要性

ホームページレイアウトとは、ホームページを構成する要素をどのように配置するかということです。

とはいえ、日ごろWebデザインになじみのない方にとっては、「構成」といってもイメージしづらいことでしょう。まずは、ホームページレイアウトとは何かということをイメージできるように構成要素を紹介したうえで、レイアウトの重要性について解説します。

 

ホームページレイアウトの4つの構成

ホームページレイアウトは、基本的に以下の4つの要素で構成されます。

  • ヘッダー

24図1.png

ヘッダーとは画面上部に表示されるエリアのことです。

帯上になっていることが多く、企業名や企業ロゴ、重要ページ(会社概要、お問い合わせなど)へのリンクなどが設置されます。

  • ナビゲーション

24図2.png

ナビゲーションとは、いわゆる「目次」の役割を果たすエリアです。ユーザーが目的のページに効率よくたどり着けるようにするため、ヘッダーの直下やページのサイド部分などに設置します。ここから3クリック以内に全てのページに到達できる設計が理想とされています。

  • コンテンツ

24図3.png

コンテンツとは、ホームページの情報の中身のことです。具体的にはトップページや、ブログ記事、会社概要などのテキストや文章、動画などを指します。

  • フッター

24図4.png

フッターは、コンテンツの下部のエリアのことです。ナビゲーションとは異なり、重要ページや会社の情報を表すページへのリンクが設置されることが多いです。具体的には、会社概要、プライバシーポリシー、お問い合わせなどです。

 

サイトレイアウトの重要性

サイトレイアウトが分かりやすく作られているか否かは、ユーザーにとってサイトの見やすさや使い勝手に直結します。分かりやすく、最短のクリック数で購入ページや問い合わせページまでユーザーがたどり着けるように設計できていれば、コンバージョン率が高まりやすくなります。

また、使い勝手のよいホームページはユーザーが長期滞在しやすく、検索結果画面における上位表示を実現させるためにも効果が期待できるとされています。

 

4つのホームページレイアウトパターンとそれぞれの特徴

ホームページのレイアウトを一から考えるとなればすごく大変ですが、よく用いられる型が4つあります。

この章では、代表的な4つのパターンをその特徴とともに紹介します。

 

シングルカラム

24図5.png

シングルカラムとは、コンテンツがすっきりと縦一列に並んでいるホームページレイアウトのことです。ページの上から「ヘッダー」「ナビゲーション」「コンテンツ」「フッター」の順に構成要素が並びます。

レスポンシブルデザインの普及により、スマホからの閲覧を前提として、画面の横幅いっぱいをメインコンテンツとして使うシングルカラムの採用が広まったという経緯があります。

 

マルチカラム

24図6.png

マルチカラムとは、2列や3列に分かれたレイアウトのことです。典型的な例としては、ページのサイドに商品カテゴリのナビゲーションを設置したインターネットショッピングサイトなどがあります。

情報量の多いホームページの場合、マルチカラムレイアウトにした方が目的ページへスムーズに到達できる場合が多いです。

 

グリッド型

24図7.png

グリッド型とは、ページを縦横に分断する直線で格子状に分割し、一つひとつの格子にコンテンツを配置するレイアウトのことです。「カード型」「タイル型」などとも呼ばれます。グリッド型は、コンテンツをきれいに整理したうえで、ユーザーに対してたくさんの情報を表示できるというメリットがあります。

 

フルスクリーン型

24図8.png

フルスクリーン型とは、画面いっぱいにコンテンツを表示するレイアウトのことを指します。画像や動画などを用いて、インパクトを与えやすいというメリットがあります。

 

BtoB企業の用途別レイアウトの選び方

ホームページレイアウトは用途によって選び方が異なります。

 

コーポレートサイトのトップページ

BtoB企業のコーポレートサイト(企業サイト)のトップページとして効果的であると考えられるのは、シングルカラムもしくはフルスクリーン型です。

シングルカラムは、PCユーザーにもスマホユーザーにも利便性が高く、サイトの回遊率が上がりやすいため、多くのBtoB企業がこの形式を取っています。フルスクリーン型は、ビジュアル性が高いレイアウトであるため、商品やサービス、企業イメージを映像で伝えたい時には効果的です。ただし、サイトの回遊性は他のレイアウトに比べて落ちてしまうことがある点に注意する必要があります。

 

ブログコンテンツ

ブログコンテンツでは、多数のコンテンツをアップすることになるため、明確なカテゴライズや一覧での可視性が重要です。

ブログコンテンツのトップページでは、マルチカラムを設定して、サイドバーにブログのカテゴリを表示させることでユーザーは知りたい情報に到着しやすくなります。

また、グリット型のレイアウトにすることで、画面にコンテンツのタイトルやアイキャッチ(イメージ画像)を格子状に表示させるのも効果的です。

【実例】BtoB企業のホームページレイアウト

BtoB企業の場合、一般的に奇をてらい過ぎないホームページレイアウトが好まれます。

しかし、その結果ホームページのレイアウトが似通ってしまいがちであるのも事実であるため、さりげない工夫をして印象に残るホームページを作りたいところです。

この章では、BtoB企業のホームページレイアウトの実例を3つ紹介します。

 

日本スピンドル製造株式会社MSモリヤマ

日本スピンドル製造株式会社のMSモリヤマ事業部は、産業用に素材を加工して部品を製造し、提供している企業です。多くの利用者にとって親しみを持ちにくい業界でありながら、HPの機能やコーポレートサイトとしての体裁を整えるとともに、トップ画面でユニークな産業機械の動きをデフォルメしてアニメーションとして見せています。

 

大塚倉庫株式会社

大塚倉庫のホームページは、ビジュアルのインパクトが強いフルスクリーン型で作られています。一般的な物流業のイメージを良い意味で裏切るような洗練された未来的なデザインのホームページです。動線がきちんと設計されているため、分かりやすさも兼ね備えています。

 

オフィスナビ株式会社

オフィスナビ株式会社は、不動産仲介に関するポータルサイトを運営しています。カテゴライズを分かりやすく設計し、ビルオーナーにとっても物件を探しているユーザーにとっても分かりやすいホームページレイアウトが設計されています。

 

 

まとめ

BtoB企業にとって、ホームページレイアウトが重要であることがお分かりいただけたでしょうか?

コンテンツがいかに優れていたとしても、動線が分かりにくければ顧客や取引先に見てもらえる可能性が下がってしまいます。また、トップページやブログ画面など用途に合わせた設計をすることも重要です。

ホームページをリニューアルする際には、このページで紹介した4つのサイト構造について意識することで、より魅力的なページを作ることができます。自社に必要なレイアウトの設計について、何から手をつけていいのかわからないといった方は、弊社イノーバでもサイト設計支援を行っておりますので、ぜひ一度お気軽にお問い合わせください。