ホームページ構成の基本的な考え方【初心者向けにサクっと解説!】

ホームページ構成基本的な考え方

ホームページ構成の基本的な考え方【初心者向けにサクっと解説!】

この記事は、

  • ホームページの構成の基本を知りたい
  • ホームページ構成の考え方を知りたい
  • ホームページの構成をどうすれば良いか分からない

といったような、お悩みや質問に答えていきます。

この記事を読むことによって、

  • ホームページ構成の基本的な考え方が分かります。
  • ホームページの構成が決められるようになります。

初心者向けに、簡潔に分かりやすく、図解付きで説明していきます。

注)
当記事は、コト売り・自分が商品・教え業…といったビジネス向けとなっています。ネットショップのようなモノ売りサイトの場合、当てはまらない部分がありますので、ご了承ください。

ホームページ構成の基本的な考え方

ホームページ構成の基本的な考え方を、以下のパートに分けて説明していきます。

  • ホームページ全体構成
  • ページ内構成
  • ホームページ階層構成

ホームページ全体構成

「ホームページには、どんなページを何ページ用意すれば良いのだろうか?」といったような点で悩む場合が、皆さん多いと思います。

目的やホームページのコンセプトによって、構成は大きく変わってきますが、ホームページの全体構成について、基本的な考え方を説明していきます。

ページ内構成

ホームページ1ページ内の構成もかなり重要です。検索順位で上位表示させられるかどうか?コンバージョン(お問い合わせやお申し込みなど)につながるかどうか?に関わってきます。

ホームページ1ページ内の構成について、基本的な考え方を説明していきます。

ホームページ階層構成

ホームページは階層化できます。このページの下にこのページ、そのページの下にはこのページ…といった具合です。

この階層についても、基本的な考え方を説明していきます。

ホームページ全体構成の基本的な考え方

ホームページの目的コンセプトによって、ホームページの全体構成は大きく変わります。なので、まずは、ホームページの目的を明確にしてください

主なホームページの目的は、以下のどれかになると思います。

  • 集客目的のホームページ
  • 信用目的のホームページ
  • 採用目的のホームページ

ホームページ構成の考え方(集客用の場合)

ホームページから集客していきたい!」という方は、とにかく、動線を徹底的に考えてください

どこから(たとえばGoogle検索)、どのページにアクセスが来て、どのページに誘導し、何をしてもらいたいのか?

これを徹底的に考えてください。そうすれば、ホームページの構成は、無駄の無い形で決まっていきます。

たとえば、最もよくある構成は下記の通りです。

ホームページ構成の考え方(集客用の場合)

上記の構成は、集客用ホームページとして効果的な構成であることが証明されています。なので、最もよく見かける構成となっています。真似しもらってOKです。

ホームページ構成の考え方(信用目的の場合)

集客はできなくていいんだけど、対取引先向けに、ホームページが無いとマズいんだよね…」というケースも多いです。下請けがメインだったり、リアル集客や紹介がメインのビジネスの場合ですね。

こういう場合は、ある意味、構成は、どうでも良いです。極端な話し、必要事項さえ書ければ、1ページのホームページという構成でも良いです。

必要事項とは、いわゆる、会社案内に書くような事柄です。その全てを縦長に書けば1ページのホームページで十分です。もちろん、項目ごとに分割して、数ページのよく見る普通のホームページにしても構いません。

ホームページ構成の考え方(採用目的の場合)

前述のパターン(信用目的)に加えて、採用目的は含んでおきたい…というケースもわりと多くあります。

ですが、その場合は、採用専門の別サイト(別のホームページ)を用意した方が良いです。

なぜならば、閲覧する人が、元請け会社と採用したい人材とでは、全く別だからです。たとえば、社長のメッセージも、対元請け会社向けと、対人材向けでは、言う内容が全く違ってきますよね。

1サイトで2つ以上の目的を存在させてしまうと、どちらにも、曖昧な伝え方になってしまいます。ホームページの場合は、一石二鳥は困難です。二兎追うものは一兎も得ずです。

採用人材向けの会社概要は、信用目的のコーポレートサイト(会社のホームページ)にリンクすれば済む話しです。

ページ内構成の基本的な考え方

1ページの構成は、基本的に以下のようになっています。

ホームページ各構成パーツの名称

ページ内構成の基本的な考え方(ホームページ各構成パーツの名称)
  • ヘッダー
  • ヘッダーメニュー
  • ヘッダー画像(トップ)
  • ページタイトル
  • ヘッダー画像(ページ)
  • メインコンテンツ(本文)
  • サイドバー
  • フッター

上記のホームページの各構成パーツの名称と役割については、以下の記事で詳しく説明しています。

➡︎ホームページを構成する各パーツの名称と役割【図解:保存版】

ホームページ構成要素

ホームページ構成要素(ファーストビュー、メインコンテンツ、クロージング、サイドバー)

また、ホームページの構成の考え方としては、細かな各構成パーツではなく、以下の4つの単位で考えていくことが重要です。ホームページ制作上の構成パーツではなく、閲覧者・読み手に対しての構成要素といったところです。

  • ファーストビュー
  • メインコンテンツ
  • クロージング
  • サイドバー

それでは、ひとつ一つ説明していきます。

ファーストビュー

ファーストビューの考え方

ファーストビューとは、ページを開いて、スクロールせずに、閲覧者の目に入ってくる部分のことです。

ファーストビューでは、続きを見たい!読みたい!と思わせてください。このファーストビューでほぼほぼ決まる!という考え方を持っておきましょう。

そのためには、ページタイトル、ヘッダー画像、序文、全てが重要です。ファーストビューで、つかみはOK!という状態にしてください。

スマホ表示時の留意事項

尚、スマホの場合は、メニューが隠れて展開式になります。パソコン表示イメージのまま、ギューーっと縮まってメニューが表示されるようなホームページは、非常に古い仕様です。スマホユーザーに嫌われます。気をつけてください。

メインコンテンツ(本文)

メインコンテンツ(本文)の考え方

ファーストビューでのつかみがOKでも、いざ読み進めたら、つまんない、難しい、分かり難い、それ知りたい情報じゃない…となってしまったら、ココで終わりです。ブチっと閉じられてしまいます。

漠然とした言い方になってしまいますが、検索者の知りたかったことが、簡潔に、易しく、分かりやすく、面白い、そんな本文内容にしてください。

とにかく、読み手のために!という考え方を、常に持っておくようにしましょう。読み手=あなたの見込み客です!見込み客のために!です。

クロージング

クロージング部分の考え方

メインコンテンツを読んでもらって、喜んでもらっても、読んでそこで終わり、ありがとうハイさよなら…では、せっかくのアクセスも意味がありません。

閲覧者・読者(=見込み客)に起こしてもらいたい行動を最後に提示しましょう。営業・セールスで言うところのクロージングってやつです。

クロージング→行動→コンバージョン(お問い合わせやお申し込みなど)

クロージングは漏れていないか!?常に意識するようにしてください。

サイドバー

サイドバーの考え方

検索して、情報を知るために、そのページに訪れただけなのに、しつこくクロージングされると、閲覧者・読者(=見込み客)は、気分を害するかもしれません。

そんな時でも、やはり、読んで終わりハイさよなら…にはしたくありませんよね。

なので、本文ではクロージングせず、余白(サイドバー)に、さりげなく、クロージングの代わりに、行動喚起のバナーやボタンを貼っておきましょう。

スマホ表示時の留意事項

尚、スマホの場合は、サイドバーはメインコンテンツの横ではなく下に来ます。パソコン表示イメージのまま、ギューーっと縮まって横にサイドバーが表示されるようなホームページは、非常に古い仕様です。スマホユーザーに嫌われます。気をつけてください。

ホームページのカラム構成の考え方

ホームページは、サイドバーの有無、サイドバーの設置位置(右か左か両サイド)などを選択できます。それにより、1カラム〜3カラムという呼び方をします。

  • 1カラム
  • 2カラム(右サイドバー)
  • 2カラム(左サイドバー)
  • 3カラム

サイドバーは右と左どちらに置くのが良いのかは、ホームページのコンセプトによって異なります。

1カラム構成の考え方

1カラム構成の考え方

1カラムという構成にすれば、完全な1ページ1テーマとなります。なので、読者に対して1つのことに集中して欲しい時には、1カラムが最適となります。

たとえば、ランディングページなどが1カラムの良い例です。(ランディングページの場合は、ヘッダーメニューなども表示しないようにします。他ページへのリンクを完全に表示しない構成にしてください。)

2カラム構成の考え方

2カラム構成の考え方

※上記はサイドバーが右側の2カラムです。

既に説明済みですが、2カラム(サイドバー有り)とする場合は、目的のページに誘導する場合などに有効です(バナーやボタンなどの表示)。

サイドバーは、左か右、どちらにするか?

左サイドバーの例

たとえば、辞典のようにきちんと整理された、専門情報サイトのようなホームページであれば、左側をサイドバーにして、サイドバーにメニューを常時表示させておけば閲覧者は使いやすいです。

右サイドバーの例

たとえば、検索からアクセスされる場合が多いサイトであれば、検索したページのコンテンツを読むことが検索者の目的ですから、他の情報(サイドバー)は右側に設置した方が、閲覧者を邪魔しません。

3カラム構成の考え方

3カラム構成の考え方

尚、3カラムはおすすめしません。なぜなら、情報量が多すぎて、閲覧者が混乱する可能性が高まるからです。メインコンテンツの幅も狭くなります。やめておきましょう。

スマホの場合

スマホの場合のカラム分割

スマホの場合は、サイドバーは、メインコンテンツの下に配列されます。

既に説明済みですが、パソコン表示時と同じように、サイドバーが横にギューーっと縮まって表示される場合は、時代遅れですし、読者にも嫌がります。アクセス数や成約率にも大きく影響します。注意してください。

ホームページ階層構成の考え方

ホームページは階層構造にすることができます。たとえば、このページの下にこのページ、そのページの下にはこのページ…といった感じにできます。

ですが、深い階層にしてしまうとマイナスです。リンクを辿って、辿って、辿って、やっと目的のページに到着…。これでは、読者は途中で迷子になってしないます。

ホームページのページ階層の考え方

基本的には、上記図のように、シンプルに2階層の構成、深くても3階層の構成までにしておきましょう。

まとめ

この記事では、

  • ホームページ全体構成
  • ページ内構成
  • ホームページ階層構成

について、基本的な考え方と、いくつかのポイントをお伝えしてきました。

ホームページの全体構成については、

  • 集客目的のホームページ
  • 信用目的のホームページ
  • 採用目的のホームページ

といった目的別に説明しました。

また、1ページ内の構成、

  • ファーストビュー
  • メインコンテンツ
  • クロージング
  • サイドバー

についても説明してきました。

その他、

  • カラム構成
  • 階層構成

などについても説明しました。

これで、ホームページの構成に関する基本事項は、ほぼ網羅されているはずです。

初心者の方は、まだピンと来ていない部分もあるかもしれませんが、実際にホームページの作成や運用を進めた後に再度読んでみると、分かってくると思います。

ワードプレスなどでホームページを自作するのであれば、構成はいつでも簡単に変えられます。なので、まずは、良い意味で適当にで大丈夫です。構成をパッと決めて、サッと作ってしまいましょう。

その後、マイペースで改善していけば済む話しです。

それでは、ホームページの作成、集客、がんばってください!

尚、ホームページ集客については、以下から無料で学ぶことができます。

➡︎【無料】ホームページ集客講座(7つの特典付き)

ネタバレ↑この最後の部分がクロージング部分です(^^;

関連記事

➡︎ホームページを構成する各パーツの名称と役割【図解:保存版】

➡︎ホームページ構成図テンプレート【7パターン全てダウンロード可!】

➡︎コーポレートサイトの構成【4パターンを解説】