BtoB企業のホームページにおいて、レイアウトは非常に重要です。
レイアウトの違いにより、ユーザーにとってのホームページの見やすさ、操作性、ホームページから受ける印象などが大きく左右されるためです。
では、特にホームページを新しく作るときやリニューアルをするときには、どのようにレイアウトをイメージし、設計すれば良いのでしょうか？
この記事では、BtoB企業におけるホームページレイアウトの選び方について解説しています。用途ごとのレイアウトの選び方のポイントにも触れているので、ぜひ参考にしてください。
ホームページリニューアル時のレイアウトの概要と重要性
ホームページレイアウトとは、ホームページを構成する要素をどのように配置するかということです。
とはいえ、日ごろWebデザインになじみのない方にとっては、「構成」といってもイメージしづらいことでしょう。まずは、ホームページレイアウトとは何かということをイメージできるように構成要素を紹介したうえで、レイアウトの重要性について解説します。
ホームページレイアウトの４つの構成
ホームページレイアウトは、基本的に以下の４つの要素で構成されます。
- ヘッダー
ヘッダーとは画面上部に表示されるエリアのことです。
帯上になっていることが多く、企業名や企業ロゴ、重要ページ（会社概要、お問い合わせなど）へのリンクなどが設置されます。
- ナビゲーション
ナビゲーションとは、いわゆる「目次」の役割を果たすエリアです。ユーザーが目的のページに効率よくたどり着けるようにするため、ヘッダーの直下やページのサイド部分などに設置します。ここから3クリック以内に全てのページに到達できる設計が理想とされています。
- コンテンツ
コンテンツとは、ホームページの情報の中身のことです。具体的にはトップページや、ブログ記事、会社概要などのテキストや文章、動画などを指します。
- フッター
フッターは、コンテンツの下部のエリアのことです。ナビゲーションとは異なり、重要ページや会社の情報を表すページへのリンクが設置されることが多いです。具体的には、会社概要、プライバシーポリシー、お問い合わせなどです。
サイトレイアウトの重要性
サイトレイアウトが分かりやすく作られているか否かは、ユーザーにとってサイトの見やすさや使い勝手に直結します。分かりやすく、最短のクリック数で購入ページや問い合わせページまでユーザーがたどり着けるように設計できていれば、コンバージョン率が高まりやすくなります。
また、使い勝手のよいホームページはユーザーが長期滞在しやすく、検索結果画面における上位表示を実現させるためにも効果が期待できるとされています。
４つのホームページレイアウトパターンとそれぞれの特徴
ホームページのレイアウトを一から考えるとなればすごく大変ですが、よく用いられる型が４つあります。
この章では、代表的な４つのパターンをその特徴とともに紹介します。
シングルカラム
シングルカラムとは、コンテンツがすっきりと縦一列に並んでいるホームページレイアウトのことです。ページの上から「ヘッダー」「ナビゲーション」「コンテンツ」「フッター」の順に構成要素が並びます。
レスポンシブルデザインの普及により、スマホからの閲覧を前提として、画面の横幅いっぱいをメインコンテンツとして使うシングルカラムの採用が広まったという経緯があります。
マルチカラム
マルチカラムとは、2列や3列に分かれたレイアウトのことです。典型的な例としては、ページのサイドに商品カテゴリのナビゲーションを設置したインターネットショッピングサイトなどがあります。
情報量の多いホームページの場合、マルチカラムレイアウトにした方が目的ページへスムーズに到達できる場合が多いです。
グリッド型
グリッド型とは、ページを縦横に分断する直線で格子状に分割し、一つひとつの格子にコンテンツを配置するレイアウトのことです。「カード型」「タイル型」などとも呼ばれます。グリッド型は、コンテンツをきれいに整理したうえで、ユーザーに対してたくさんの情報を表示できるというメリットがあります。
フルスクリーン型
フルスクリーン型とは、画面いっぱいにコンテンツを表示するレイアウトのことを指します。画像や動画などを用いて、インパクトを与えやすいというメリットがあります。
BtoB企業の用途別レイアウトの選び方
ホームページレイアウトは用途によって選び方が異なります。
コーポレートサイトのトップページ
BtoB企業のコーポレートサイト（企業サイト）のトップページとして効果的であると考えられるのは、シングルカラムもしくはフルスクリーン型です。
シングルカラムは、PCユーザーにもスマホユーザーにも利便性が高く、サイトの回遊率が上がりやすいため、多くのBtoB企業がこの形式を取っています。フルスクリーン型は、ビジュアル性が高いレイアウトであるため、商品やサービス、企業イメージを映像で伝えたい時には効果的です。ただし、サイトの回遊性は他のレイアウトに比べて落ちてしまうことがある点に注意する必要があります。
ブログコンテンツ
ブログコンテンツでは、多数のコンテンツをアップすることになるため、明確なカテゴライズや一覧での可視性が重要です。
ブログコンテンツのトップページでは、マルチカラムを設定して、サイドバーにブログのカテゴリを表示させることでユーザーは知りたい情報に到着しやすくなります。
また、グリット型のレイアウトにすることで、画面にコンテンツのタイトルやアイキャッチ（イメージ画像）を格子状に表示させるのも効果的です。
【実例】BtoB企業のホームページレイアウト
BtoB企業の場合、一般的に奇をてらい過ぎないホームページレイアウトが好まれます。
しかし、その結果ホームページのレイアウトが似通ってしまいがちであるのも事実であるため、さりげない工夫をして印象に残るホームページを作りたいところです。
この章では、BtoB企業のホームページレイアウトの実例を3つ紹介します。
日本スピンドル製造株式会社MSモリヤマ
日本スピンドル製造株式会社のMSモリヤマ事業部は、産業用に素材を加工して部品を製造し、提供している企業です。多くの利用者にとって親しみを持ちにくい業界でありながら、HPの機能やコーポレートサイトとしての体裁を整えるとともに、トップ画面でユニークな産業機械の動きをデフォルメしてアニメーションとして見せています。
大塚倉庫株式会社
大塚倉庫のホームページは、ビジュアルのインパクトが強いフルスクリーン型で作られています。一般的な物流業のイメージを良い意味で裏切るような洗練された未来的なデザインのホームページです。動線がきちんと設計されているため、分かりやすさも兼ね備えています。
オフィスナビ株式会社
オフィスナビ株式会社は、不動産仲介に関するポータルサイトを運営しています。カテゴライズを分かりやすく設計し、ビルオーナーにとっても物件を探しているユーザーにとっても分かりやすいホームページレイアウトが設計されています。
まとめ
BtoB企業にとって、ホームページレイアウトが重要であることがお分かりいただけたでしょうか？ 優れたコンテンツも、動線が分かりにくければ顧客や取引先に見てもらえる可能性が下がります。トップページやブログ画面など用途に合わせた設計も欠かせません。
ホームページリニューアルの際は、4つのサイト構造を意識しながら、自社に最適なレイアウトを選択することが肝心です。設計の方向性に迷ったら、ホームページ制作のプロであるイノーバにご相談ください。豊富な実績とノウハウを活かし、お客様の目的や要望に応じた最適なサイト設計をご提案いたします。魅力あふれるホームページで、事業の飛躍を実現しましょう。
ぜひこちらの記事もお読みください：ホームページ設計・レイアウト
ホームページの設計図とは？効果の出るホームページを作るためのポイントと流れ
Webサイト制作に欠かせない「ワイヤーフレーム」の基礎知識を徹底解説
FAQ
Q1: ホームページレイアウトにはどのような種類がありますか？ A1: 代表的なレイアウトパターンは、シングルカラム、マルチカラム、グリッド型、フルスクリーン型の4種類です。用途や目的に合わせて選択しましょう。
Q2: BtoB企業のコーポレートサイトのトップページに適したレイアウトは？ A2: シングルカラムやフルスクリーン型がおすすめです。シングルカラムはユーザビリティが高く、フルスクリーン型は企業イメージを映像で伝えるのに効果的です。
Q3: ブログコンテンツのレイアウトで気をつけるべき点は？ A3: 記事のカテゴリを分かりやすく表示し、一覧性を高めることが重要です。マルチカラムやグリッド型を活用し、ユーザーが求める情報に素早くたどり着けるよう工夫しましょう。
Q4: ホームページのレイアウト設計で悩んでいます。どこに相談すればよいですか？ A4: ホームページ制作会社のイノーバでは、お客様のニーズに合わせたサイト設計支援を行っています。経験豊富なプロがアドバイスいたしますので、お気軽にご相談ください。
Q5: ホームページのレイアウトはSEOにも影響しますか？ A5: はい。ユーザビリティの高いレイアウトは滞在時間を増やし、検索順位の向上にもつながります。SEO効果を意識したサイト設計が大切です。
