ホームページを制作する際は、見やすさとアピール力の両立が不可欠です。この2つをうまく両立させるには、最低限必要な情報をカバーしつつ、うまく「伝わる」ことを意識した工夫が求められます。そのために重要な要素となる「ページ構成」と「レイアウト構成」について、具体例も含めて詳しく解説します。

プロが作って、自分で簡単更新!
運用費用ゼロのホームページ作成サービス

初期費用55,000円、月額5,500円で高品質なホームページを作成可能!

お客様に最適な構成やデザインをプロが作成し運用までサポートするので、安心して任せることができます。
ホームページの更新は直感的に操作可能な管理画面からお手軽に更新可能です。

  • お客様に何を伝えたらよいかわからない
  • どんなデザインにしたらよいかわからない
  • 作った後の更新・運用方法がわからない

上記のようなホームページ作成のよくある悩みをsiteflowでカンタンに解決!
まずは無料相談をご利用ください。

ホームページ作成で重要な2つの構成とは?

構成を決める第一歩として、まずはホームページに何を掲載するのかを考えましょう。会社名や商品名、商品やサービスの特長、ユーザーに求める行動(申し込み、問い合わせ、口コミのレビュー)などを決めていく中で、ホームページを作る目的も固まってくるはずです。目的がはっきりしたところで、次に構成を決めていきます。ホームページの構成には2つの種類があるので、それぞれについて以下に詳しく解説します。

ホームページを作成する際に必要な構成とは

ホームページの構成には、複数ページを組み立てて配置するための「ページ構成」と、ひとつのページ内で情報を配置する方法を決める「レイアウト構成」の2つがあります。サイトの設計を行うにあたり、どのようなページ構成にするか、どのようなレイアウトにするか、一から考えるのは手間がかかることです。しかし、既存のサイトを参考にして自分好みの構成にアレンジすれば、スムーズに決められるでしょう。

ページの構成について(サイトマップ )

ホームページは、一般的に複数のページで構成されています。樹形図のように階層状になっていると考えるとわかりやすいでしょう。トップページからほかのすべてのページに行けるパターンや、トップページから各項目のメニューページに遷移して、そこから詳細ページに行けるようにするパターンなど、さまざまな考え方がありますが、各ページの関係性を決めることで自然と構成は決まってきます。

これは、各ページの制作を始める前に決めておかなければならないことです。途中でページの構成を変えると、リンク先を指定しているHTMLのパスを全部修正しなければならず、後々大変な手間がかかってしまいます。ページ構成を決める際には、以下のことに注意して検討してください。

  • 一目見てそのサイトがどんなページで構成されているかがわかるか
  • 自分の伝えたい情報がしっかり含まれているか

レイアウトの構成について(ワイヤーフレーム)

HTMLコードを使えば、基本的には画面内に自由にコンテンツを配置できます。しかし、成果の上がりやすいレイアウトにするには、自分の考えだけに頼らず、既存の成功しているサイトの事例や定石を参考にするとよいでしょう。レイアウトの構成を決める際は、以下のことに注意して検討してください。

  •  ページの見た目がスッキリしていて見やすいか
  •  階層に無駄がないか
  •  デザイン的にも問題ないか

サイトマップ (ページの構成)の考え方

ここでは一般的な企業のホームページを作ると想定して、ページの構成方法を解説し、実際にページを構成する手順を示していきます。

伝えたい情報を要素として書き出していく

最初に、ホームページを通じてユーザーに伝えたい情報をすべて書き出していきます。ここでは、以下の要素を盛り込むことを前提に、手順を説明します。

  • 会社の名前
  • 会社の場所
  • サービスの内容
  • 電話番号
  • メールアドレス
  • お知らせ
  • 採用情報
  • 企業理念
  • 従業員数
  • お取引先

書き出した要素をカテゴライズしていく

次に、先ほど書き出した要素をどのようにページに振り分けるか検討します。同じページに記載できるものは同じカテゴリの中に集約しましょう。今回の企業ページを例にとると、下記のようなページに分けられます。

  • 会社概要(会社の名前、会社の場所、企業理念、従業員数、お取引先)
  • サービス紹介(サービスの内容)
  • お問い合わせ(電話番号、メールアドレス)
  • 新着情報(お知らせ)
  • 採用情報(採用情報)

カテゴライズしたものを階層で組み立てていく

ページ分けするカテゴリが決まったら、それぞれのページに対してトップページからどのようにアクセスをつなげていくか、階層構造にしてわかりやすくまとめていきます。トップページを一目見ただけで、そのサイトがどんなページで構成されているのかわかることが重要です。この「ページの構成」のことを「サイトマップ」といいます。

ワイヤーフレーム(レイアウトの構成)の考え方

前の章で説明したレイアウトの構成について、この章では具体的な構成方法を解説していきます。

ワイヤーフレームとは

「ワイヤーフレーム」とは、ホームページのコンテンツやレイアウト(配置)を確認して、整理するための構成図です。各ページを制作する前にレイアウトを決めておくことで、サイト全体の統一感を保てます。ワイヤーフレームの出来次第で、後々の作業のやりやすさも変わってくるので、以下のようなポイントに注意して作成します。

  • スッキリしていて見やすいか
  • 最も伝えたいことが目立っているか
  • ユーザーの知りたい情報がどこにあるのかわかりやすいか
  • ある程度サイト内を回遊できる作りになっているか

パーツの種類

先ほど説明したサイトマップ(ページの構成)から、それぞれのページのレイアウトを作るために必要なパーツについて説明します。

ヘッダー

ヘッダーには、ホームページのタイトルや説明文などを記述します。統一感を保つため、各ページ共通とするのが基本です。読んだだけでどんな内容のホームページなのかわかるようなタイトルを考えましょう。固定ヘッダーと呼ばれる、ページをスクロールしても常にヘッダーが表示されるレイアウトのサイトも増えています。

ナビゲーション、メニューバー

ナビゲーションやメニューバーをつけることで、複数のページをカテゴリ別にわかりやすく整理すると、ユーザーを目的のページへ誘導しやすくなります。ブランディング効果を高めるために、ナビゲーションをあえて表示しないという選択肢もあります。ナビゲーションやメニューバーを使用する場合は、多くのページを載せすぎないようにしましょう。導線が多すぎると、ユーザーは目的の場所が見つけられずに離脱してしまいます。

コンテンツ

メインとなる内容を記述する場所です。テキストに加えて画像や動画などを挿入することで、視覚的にユーザーの目を引きつけながら、リンクボタンを効果的に配置して、目的のページまで誘導する工夫をします。

サイドバー

サイドバーと呼ばれる、メニューをページの上部に置くのではなく、コンテンツの左側や右側に並べてカテゴリ別のメニューにリンクする方法もあります。人気記事のランキングや月別のアーカイブ、各種SNSの連携機能など、さまざまなコンテンツへのリンクを入れることも可能です。サイドバーを配置するためには、後述する「カラムレイアウト」のうち、マルチカラムレイアウトを選択する必要があります。

フッター

ページ最下部にある共通部分のことです。多くの場合、コピーライト(著作権)やサイトマップの表示に使われています。ほかにもプライバシーポリシー、会社情報など、メインコンテンツではない付属的なページへのリンクを記載することも多く、インターネットに慣れた人が会社概要や特定商取引法に基づく表記などを探す場合は、必ずフッターに目を通します。

カラムレイアウトの種類

ホームページに掲載する各パーツを最適な位置に配置するために、ページ内での段組みを行います。この段組みのことを「カラム」といいます。ここではカラムの配置に応じたレイアウトの種類について説明します。

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

シングルカラムレイアウトは、すべてのコンテンツを縦に並べて配置するレイアウトです。コンテンツがひとつの枠にまとめられているため、ユーザーの視線の移動が少なく、訴求ポイントに集中させる効果があります。最近はスマートフォンでの閲覧が多いこともあり、縦長のシングルカラムレイアウトが増加しています。

ただし、ほかのコンテンツへの導線となるサイドバーがないため、情報量が多いサイトでは目的のコンテンツを見つけにくくなるおそれがあり、注意が必要です。また、スマートフォンではスクロール量が多くなるため、目的を果たす前に離脱されてしまうというデメリットもあります。

マルチカラムレイアウト

マルチカラムレイアウトは、ページを複数の列に分割して配置するレイアウトのことを指します。回遊性が重要視されるポータルサイトやニュースメディアに用いられることが多いレイアウトです。2列で「2カラムレイアウト」、3列で「3カラムレイアウト」となります。カラム間の間隔や幅は、自由にデザインすることが可能です。

2カラムレイアウト

2カラムレイアウトは、2列に分けた段組みのレイアウトです。ECサイトやコーポレートサイトでよく見られます。左側にサイドバーでメニューを表示し、右側にメインのコンテンツを置くパターンが一般的です。メインコンテンツとサイドバーを並べて表示させることで、ユーザーはどこのページを見ているのか把握しやすくなります。また、コンテンツを見ながら、ほかのページへの導線も同時に視界に入ってくるので、サイト内の回遊を促しやすい作りだといえます。

3カラムレイアウト

3カラムレイアウトは、3列に分けた段組みのレイアウトです。情報量が多く、一度にさまざまな情報を載せたい場合に用いられます。メインコンテンツの両側にサイドバーを設置することが可能になり、ユーザーに対して多くの選択肢を提示できます。階層が深いサイトやカテゴリごとにボリュームのあるような大規模サイトでは、ユーザーに対してひとつの画面で多くのコンテンツを認知してもらうのに有効です。

上記のような「レイアウト構成」をイラストに書き起こしたものを「ワイヤーフレーム」といいます。見やすく使いやすいサイトの「UI(ユーザーインターフェース)」によって得たユーザーの満足度を「UX(ユーザーエクスペリエンス)」といいます。「UI」や「UX」を重視し、ユーザーの目線に立ってスムーズに目的が果たせるように情報やデザイン、導線を作り込んでいくことが重要です。

一般的な企業のホームページの構成を見てみる

ここでは実際に企業のホームページを見ながら、それぞれの要素に使われているパーツの種類や位置を紹介していきます。

シングルカラムレイアウトの例

BALMUDA The Toaster

引用元:BALMUDAホームページ(https://www.balmuda.com/jp/toaster/

ひとつのカラムで情報を縦一列にまとめたページです。
上から以下の順で各パーツが配置されています。

  • ヘッダー(ブランドロゴ)
  • ナビゲーション
  • コンテンツ(製品紹介、開発ストーリー、ギャラリー等)
  • フッター(企業/IR情報、プライバシーポリシー、利用規約等へのリンク)
    フッターの「企業/IR情報」から以下の項目へアクセスが可能になっています。
  • 企業概要
  • お問い合わせ(お問い合わせフォーム、FAQ)
  • 採用情報(採用情報) etc.

3カラムレイアウトの例

ベンジャミンムーアペイント

引用元:ベンジャミンムーアペイントホームページ(http://benjaminmoore.co.jp/

上からヘッダー、ナビゲーション、スライダーなどが並び、その下に左右のサイドバーに挟まれた中央のカラムにコンテンツが配置されています。
コンテンツには以下の要素が含まれます。

  • 製品、サービスの紹介
  • 使用方法
  • SNS連携による新着情報の告知

また、フッターのリンクから会社概要や連絡先(電話番号、メールアドレス)などへアクセスが可能になっています。

まとめ

これまでホームページの作成において重要な2種類の構成について解説してきました。ホームページ作成における2種類の「構成」、すなわち「ページの構成」と「レイアウトの構成」の違いや重要性については理解していただけたと思います。

実際にホームページを制作する際は、ご紹介した手順を参考にしながらサイトマップを作り、ページ内のレイアウトの構成を決めてから、UI・UXを意識したワイヤーフレームを作成してみましょう。

プロが作って、自分で簡単更新!
運用費用ゼロのホームページ作成サービス

初期費用55,000円、月額5,500円で高品質なホームページを作成可能!

お客様に最適な構成やデザインをプロが作成し運用までサポートするので、安心して任せることができます。
ホームページの更新は直感的に操作可能な管理画面からお手軽に更新可能です。

  • お客様に何を伝えたらよいかわからない
  • どんなデザインにしたらよいかわからない
  • 作った後の更新・運用方法がわからない

上記のようなホームページ作成のよくある悩みをsiteflowでカンタンに解決!
まずは無料相談をご利用ください。