【中小企業向け】ホームページの構成方法とは？ ウェブ初心者でもわかる！集客できる構成を詳細解説
専門知識のないウェブ初心者でもホームページを作成できるCMSが普及したことで、自社で制作する中小企業が増えてきました。
確かにCMSを利用すれば、専門知識のない人でも簡単にホームページを作成できるようになりましたが、ホームページを作っただけでは成果をあげることはできません。
効果的な構成をしてこそ、集客や売り上げを伸ばすことができるのです。
では、「ホームページの構成」とはどのようなものなのでしょうか？
本記事ではウェブ初心者でも実践できるようにわかりやすくホームページの構成について解説していきます。これからホームページを作成する方、また成果が上がらず悩まれている方は、ぜひ最後までお読み頂いて参考にしてください。
ホームページの構成とは？
ホームページの構成を決めていく作業は、設計図を引く作業に似ています。なぜならホームページを訪れたユーザーに対して、どこにどのような情報を配置するかを設計していく作業だからです。購入や問い合わせにつなげるために、効果的な構成は欠かせません。
作成者はこの設計図（構成案）をもとに、ホームページを作成していくことになります。
構成が上手くできていないと、ユーザーは探している情報を見つけられないまま離脱してしまいます。これでは、せっかくサイトにアクセスしてもらっても意味がありません。
この構成には、２つの要素があります。
- ホームページ全体の構成（サイトマップ）
- ページ単位の構成（ワイヤーフレーム）
の２種類です。
順番としては、最初に作成したい「ホームページ全体の構成」を練ります。そして、ページごとにどのような情報を掲載するべきか「ページごとの構成」を検討していきます。
次章では、ホームページの「全体の構成」と「ページ単位の構成」について詳しく解説していきます。
ホームページ全体の構成（サイトマップ）の作り方
ホームページ全体の構成を視覚的に表した図を「サイトマップ」と呼びます。
ツリー状の図を使ってカテゴリやコンテンツをおおまかに分類して作成します。
サイトマップを作れば、頭の中にぼんやりと浮かんだホームページ全体のイメージを視覚化することが可能です。
サイトマップを作成するメリット
サイトマップ（ホームページ全体の構成図）を作るメリットを整理すると以下のものが挙げられます。
必要なページの内容と数を明確にできる
ウェブサイトを構築する際、どのページが必要で、それらのページにどのような内容が含まれるべきかを決定することは重要です。サイトマップを作成することで、必要なページの内容や数を明確に定義できます。
これは、ウェブサイトを自分で制作する場合だけでなく、ウェブ制作会社に依頼する場合にも役立ちます。ページの内容と数が明確になると、見積もりや納期をスムーズに決定できるでしょう。
情報が探しやすいウェブサイトを作成できる
サイトマップを作成することによって、ウェブサイト訪問者が情報を簡単に見つけられるようなサイトを設計できます。
トップページに全ての情報を詰め込むと、ページが非常に長くなり、情報を見つけるのが難しくなります。そのため、ウェブサイトは階層構造を使用するのが一般的です。トップページが第一階層で、他のページは第二階層、第三階層として設計されます。
作業の巻き戻しを防ぐことができる
通常、ウェブサイトの制作はいくつかの段階を経て行われます。サイトマップ作成、ワイヤーフレームの設計、デザイン、コーディングなどが含まれます。
サイトマップがない状態で制作を進めると、後で大幅な変更が必要になる可能性があります。
これは、建築プロジェクトに例えれば、家を建てる際に、大工が建物を構築中に、急に１階にゲストルームや２階に追加のトイレが必要だと気付いた場合に、大幅な工程の巻き戻しが必要となる状況と似ています。
サイトマップを使用することで、もし後からの変更や修正があっても簡単に行えるようになります。
サイトマップを作成する４つの手順
サイトマップは、以下の４つの手順で作成していきます。
ステップ１: ホームページの目的を明確化する
ホームページを制作する目的を明確にすることは、非常に重要です。
なぜならサイトマップやページごとの構成の作成は、すべて目的を達成するための作業だからです。目的には、以下のような目的を持ってホームページ制作を行います。
- 【コーポレートサイト】…会社について知ってもらう
- 【ブランディングサイト】…ブランドを知ってもらう、ブランドの価値や信頼性を伝える
- 【サービスサイト】…サービスを知ってもらう、申し込んでもらう
- 【リクルートサイト】…必要とする人材を獲得する
ホームページをリニューアルする場合も、改めて目的を確認しましょう。
ステップ２: 必要なページを洗い出す
ステップ２では、その目的を達成するために必要なページをリストアップしましょう。
ホームページの目的やターゲットを考慮しながら、どんなページが必要かを洗い出します。
例えば、コーポレートサイトでは、会社概要、代表者メッセージ、製品情報、お問い合わせフォームなどが必要です。
こうした作業では、競合する同業他社のホームページが大変参考になります。迷ったら、他社サイトを覗いて研究してみましょう。
ステップ３: ページを分類する
ステップ３では、リストアップした必要なページを関連するグループに分類します。
たとえば、コーポレートサイトなら、会社概要や代表者メッセージを「企業情報」というグループに分類します。
中にはカテゴライズできないページも出てくるかもしれません。こうした場合は、無理にカテゴリに入れず単独ページとして構成に組み込みます。
最初に設定した目的を達成するために「なくてもいい」と判断したものは、企業として伝えたい事柄であっても構成から外す判断も必要となってきます。
ステップ４: ページの階層を決めてサイトマップに書き起こす
最後に、各ページの階層を設定し、サイトマップを作成していきます。
これは、ウェブサイト内のページがどのように組織されるかを示すものです。通常、第１階層は「トップページ」で、その下に第２階層、第３階層が続きます。
第２階層は各グループの概要ページ（目次）で、第３階層は各グループの詳細ページです。このように、ウェブサイト全体の構造を明確にすることが重要です。
ホームぺージ階層構造の基本ルール
- 第一階層・・・トップぺージ
- 第二階層・・・グループの概要（目次）
- 第三階層・・・各グループに属する詳細ページ
カテゴリがきちんと分けられ、分かりやすいシンプルな階層で作成されたホームページは、ユーザーを迷子にさせません。ホームページを作成・リニューアルする際には、訪れたユーザーが簡単に目的のページにたどり着くための階層を意識することが重要です。
これらのステップを追うことで、ホームページのサイトマップを作成できます。サイトマップはウェブサイトを設計し、整理するのに役立ち、初心者でも理解しやすい方法です。
サイトマップ作成のポイント
サイトマップを作成する際に、覚えておくべきポイントを紹介します。以下の3つのポイントを理解していれば、効果的なサイトマップを作成するのが簡単になります。
３）階層を深くしすぎない
必要なページを洗い出すときは、他社のホームページを参考にしましょう。何から始めれば良いのかわからない場合、他社のウェブサイトがヒントになります。
ウェブサイトの種類によって必要なページが異なりますが、業界やビジネスタイプによっても違います。似たような業界のウェブサイトを調べて、アイデアを得ましょう。
３）階層を深くしすぎない
1つのページに複数の異なるテーマを詰め込むと、ユーザーが情報を見つけにくくなります。例えば、中古車販売のサイトを検討しているユーザーを考えてみましょう。
次の２つの例を比較して、どちらが良いページでしょうか。
例：駐車販売Ａ社のページ
ページ名: 中古車情報
内容: 中古車の在庫情報、車検について、燃費情報、中古車のメンテナンス
例：駐車販売Ｂ社のページ
ページ名: 中古車在庫情報
内容: 利用可能な中古車の一覧
正解は例Bのウェブサイトです。その理由は、A社のサイトでは、ユーザーが中古車の在庫情報を見つけるのにページ内を探し回らなければならず、情報が分散していて見つけにくいからです。
１ページに１つのテーマを持たせ、情報を整理しやすくしましょう。これは検索エンジン最適化（SEO）にも役立ちます。
３）階層を深くしすぎない
ウェブサイトの階層構造を深くしすぎるのは避けるべきです。なぜなら階層が深くなると、ユーザーが目的のページにアクセスするのに時間がかかるからです。
通常、ウェブサイトは「３階層」で構築することができます。できるだけ「４階層」や「５階層」は避け、情報を整理しやすくしましょう。ただし、情報が多すぎる場合など、特定の用途に合わせて階層を設計することもあります。
サイトマップ作成ツールにはExcelがおすすめ！
サイトマップ作成では、デザイン性の高いサイトマップを作る必要はありません。
サイトマップ作成ツールの中には、有料かつ高機能なものもありますが、自社のホームページを作るWeb担当者の方なら、頭の中のイメージを視覚化できれば十分です。
利用できるものには、
- Microsoft Excel（エクセル）
- Microsoft PowerPoint（パワーポイント）
- Xmind（エックスマインド）
などが挙げられますが、中でもMicrosoft Excel（エクセル）は普段からビジネスで使い慣れている方も多いことでしょう。
ここでは、Excelを使ったサイトマップの作成方法をご紹介します。
Microsoft Excel（エクセル）
ビジネスで使用しているパソコンには、Microsoft社の「Excel」がインストールされている方も多いでしょう。「Excel」にはSmartArt機能があり、これを利用すればわずか２ステップで簡単にサイトマップが完成します。
１）メニューから、挿入 ＞ 図 ＞ SmartArt ＞ 階層構造 を選択する
エクセルの「SmartArt機能」から適切な階層構造を選択します。
２）画面左側のリスト部分に文字を入力していく
階層構造を選択すると、あとは画面左側のリスト部分に文字を入力していけば、自動的にサイトマップが完成します。ページ数によっては、「横方向階層」のほうが見やすいので、状況に応じて使い分けましょう。
ページ単位の構成（ワイヤーフレーム）の作り方
ページ単位の構成図を「ワイヤーフレーム」と呼びます。これは、ワイヤー（線）とフレーム（枠）で構成される、ホームページの骨組みやレイアウトを示す簡単な設計図のようなものです。
ワイヤーフレームを作成すると、どこに何を配置するかを考えやすくなります。デザインの初期段階においては、基本のレイアウトに集中するのに役立ちます。
ワイヤーフレームを作成するメリット
ワイヤーフレーム（ページ単位の構成図）を作る目的は、以下のとおりです。
ページに掲載する内容を整理できる
ワイヤーフレームを作れば、ページに掲載するコンテンツ（情報）を整理できます。
- 「どんなコンテンツが必要か？ 不足はないか？」
- 「優先度が高いコンテンツはどれか？」
- 「各コンテンツをページのどこに配置するのか？」
- 「重要度の高いものがわかりやすい場所にあるか？」
ワイヤーフレームでは、これらのポイントを整理して、ページに掲載するコンテンツを目で確認することができます。
完成後のホームぺージをイメージできる
ホームぺージのデザインでは、まず「レイアウト」と呼ばれる骨組みを決めます。レイアウトによって、ホームぺージの印象や使い勝手は大きく変わります。
ワイヤーフレームを作るときにレイアウトを決めておけば、完成後のホームぺージがイメージしやすくなります。
ワイヤーフレームがあれば、作ろうとしているホームぺージの使いやすさや、適切に導線されているか、ある程度判断できます。
デザイン作業を効率化できる
作業の巻き戻しが発生してしまうと、無駄な時間やコストがかかってしまいます。
ワイヤーフレームは、「デザインの下書き」のようなものです。
下書きがあれば「肉付け」に集中できるため、デザイン作業をスムーズに進めることが可能です。
ホームページを構成する３つの基本要素
ホームページを作るとき、各ページの構成を考えます。ここでは、ホームページのページ構成に必要な３つの基本要素を説明します。
ファーストビュー
ファーストビューとは、ページを開いたときに最初に見える部分のことです。これにはヘッダー、画像、タイトル、キャッチコピーなどが含まれます。
ファーストビューがとても重要で、ユーザーに「ここに必要な情報があるかもしれない」と感じさせることが大切です。これが成功すると、ユーザーは他のページも見る可能性が高まります。
例えば、中古車販売のウェブサイトを考えてみましょう。ファーストビューに中古車の画像と「最新の中古車情報」などが表示されていると、ユーザーはすぐに必要な情報を見つけやすくなります。
メインコンテンツ
メインコンテンツには、そのページが伝えるべき情報が含まれます。例えば、会社情報、商品情報、ブログ記事などです。
競合他社が似たような情報を提供している場合、独自性を考えることが大切です。段落や見出しを使って情報を整理し、必要な情報を分かりやすく伝えることも大切です。
クロージング・CTA
クロージング・CTAは、ユーザーに具体的な行動を促す部分です。これには問い合わせフォーム、資料請求ボタン、商品購入ボタンなどが含まれます。アクションを誘導するボタンだけでなく、誘いの文言を使うことも効果的です。
たとえば、「簡単に資料を請求しましょう！」といった文言です。また、キャンペーン情報を表示することも忘れずに。
これらの基本要素を使って、ユーザーにわかりやすいページを作り、効果的な行動を促しましょう。確認とテストを通じて、ホームページが効果的に機能しているか確認しましょう。
ワイヤーフレーム作成の４つの手順
ステップ１: 必要な情報を洗い出す
ホームページを作成する際、まず最初にするべきことは、そのページに何を掲載するかを明らかにすることです。このステップでは、ページに必要な情報や要素をリストアップしていきます。たとえば、コーポレートサイトのトップページには以下のような要素が考えられます。
- ロゴ…会社のブランドを識別するためのロゴ
- キャッチコピー…訴求力のあるメッセージやスローガン
- イメージ画像…視覚的な魅力を提供する写真やグラフィック
- お問い合わせボタン…ユーザーが簡単に問い合わせできる手段
- ニュース…最新情報やアップデートの表示
- 会社の取り組み…会社の使命、価値観、ビジョンなどを伝える情報
これらは一般的な要素であり、具体的なページの目的や内容によって変化することがあります。何が必要か分からない場合は、他社のウェブサイトを調査し、参考にすることができます。
ステップ２: 情報の優先度を決める
情報のリストアップが完了したら、次にそれらの情報の優先度を決める重要なステップに移ります。優先度を設定することは、ユーザーにとって重要な情報に簡単にアクセスできるようにするための鍵です。
例えば、ホームページの目的がユーザーからのお問い合わせを促進することであるとしましょう。この場合、電話よりもメールでの問い合わせを促進したいかもしれません。
その場合、メールアドレスやお問い合わせフォームの情報の優先度を高くし、ページの上部に配置しましょう。
優先度の高い情報は、通常、ページの上部や中心に配置されます。
なぜなら、ページが下にスクロールされるにつれて、ユーザーの注意がそれらの情報から離れてしまうからです。優先度が高い情報をすぐに目にすることができるようにすることで、ユーザーの行動を誘導しやすくなります。
優先度の決定にはウェブサイトの目標やユーザーのニーズを考慮し、情報を適切に整理することが必要です。
ステップ３: レイアウトを決める
ワイヤーフレームの作成において、ホームページのレイアウトを決定する段階がステップ３です。ホームページのレイアウトは、コンテンツの配置や視覚的なデザインに関わる非常に重要な要素です。
一般的に、いくつかの一般的なレイアウトが利用されています。
これには、主に４つの種類があります。
シングルカラム（１列のコンテンツ）
「シングルカラム」は、ウェブページのデザインの一つで、全てのコンテンツが一列に縦配置されるレイアウトです。このデザインは、特定の情報やメッセージにユーザーの注意を引きたい場合に非常に有用です。
ただ、情報量の多いサイトでは、ユーザーが目的のコンテンツを見つけにくくなるかもしれませんので、注意が必要です。
マルチカラム（複数の列を持つコンテンツ）
「マルチカラムレイアウト」は、通常はページを２〜３つの列に分割してコンテンツを配置します。
このデザインは、情報量が多く、ユーザーがページ内を効率的に移動する必要がある場合に役立ちます。ポータルサイト、検索エンジン、ニュースメディアなど、多くの情報を提供するサイトで一般的に使用されています。
ユーザーは情報をスキャンしやすく、必要な情報を素早く見つけることができるため、操作性が向上します。
フルスクリーン型（画面いっぱいに広がるコンテンツ）
「フルスクリーン型レイアウト」は、コンテンツを画面全体に広げる特徴的なデザインです。このレイアウトは、ビジュアル要素や印象的なイメージを強調したい場合に適しています。
一般的に、フルスクリーン型のレイアウトはストーリーテリングや製品のショーケース、クリエイティブなプロジェクトに適しています。
ただし、テキストコンテンツが主要な場合、読みやすさや情報の整理が課題となり、ユーザーにとって情報の検索や比較が難しくなる可能性があります。
グリッド型（コンテンツを格子状に配置）
「グリッド型」レイアウトは、通常はコンテンツをカードやタイルのような小さなブロックに配置します。このデザインは、ビジュアル要素（写真やイラスト）を強調したい場合に適しています。
カードごとに異なる情報やコンテンツが表示され、ユーザーは視覚的に情報を整理しやすく、選択肢を比較しやすいでしょう。
しかし、テキストコンテンツが主要なサイトでは、レイアウトのメリットを活かすのは難しいかもしれません。テキストコンテンツが豊富な場合は、読みやすさを確保するために検討する必要があります。
選択するべき正しいレイアウトは存在せず、コンテンツの性格やデザイン目的に応じて選択します。
たとえば、情報密度が高い場合はマルチカラムのレイアウトが適しているかもしれません。逆に、視覚的にインパクトのあるデザインを重視する場合はフルスクリーン型を選ぶかもしれません。
このステップでは、コンテンツの性質や目的に合った適切なレイアウトを決定し、ワイヤーフレームに反映させます。
ホームページの魅力的な外観と使いやすさを実現するために、レイアウトの決定は重要な要素です。コンテンツの配置や視線誘導に考慮しながら、最適なレイアウトを選びましょう。
ステップ４: コンテンツを配置する
ステップ４では、選んだレイアウトに基づいてコンテンツを配置します。ホームページのコンテンツ配置は、ユーザーの視線誘導に密接に関連しており、多くのウェブデザインでは「Z型」という視線のパターンが活用されています。
「Z型」の視線パターン
この「Z型」の視線パターンは、ユーザーがホームページ上での情報を読む際に、左上から始まり左側へと移動し、その後右上へと向かう傾向があることに基づいています。
したがって、ウェブページ上で優先度の高いコンテンツや重要な情報は通常、ユーザーの視線の初動に合わせて配置されます。これにより、ユーザーが重要な情報に効果的にアクセスできるようになります。
左上から右上へと向かうユーザーの視線に合わせて、コンテンツの配置を検討しましょう。優先度の高いコンテンツや目立たせたい情報は、通常、ページの上部左側に配置し、ユーザーの注目を引くのに役立ちます。コンテンツの配置は、ユーザーの使いやすさや情報へのアクセスに大きな影響を与える要素の一つです。
これらのステップを順番に進めることで、ワイヤーフレームを効果的に作成できます。
ワイヤーフレーム作成のポイント
１）作るページを絞る
全てのページについてワイヤーフレームを作成する必要はありません。
ワイヤーフレーム作成には一定の時間がかかります。ホームページ内で共通のデザイン要素を持つページも多いため、最低限必要なページのパターンを選んでワイヤーフレームを作成しましょう。
以下は、共通で使えるワイヤーフレームのパターンの例です。
- パターンA ＞＞ トップページ
- パターンB ＞＞ 二階層目のページ
- パターンC ＞＞ 三階層目のページ
- パターンD ＞＞ キャンペーンなど、固有のレイアウトが必要なページ
どのページをどのパターンのレイアウトで作成するかを決めておくことで、デザインが進行した後に「思っていたのと違う」という問題を回避できます。
２）見た目は過度にこだわらない
ワイヤーフレームはデザインの下書きであり、デザインそのものではありません。
ワイヤーフレームでデザインの詳細にこだわりすぎると、時間が無駄にかかる可能性があります。
また、ウェブ制作をプロに依頼する場合、過度にデザイン要素を盛り込むと、デザイナーがそのワイヤーフレームに縛られることがあるかもしれません。これはデザインの幅を制限することにつながります。
つまり、ワイヤーフレームの主な目的はコンテンツを整理することです。デザインはその後のステップで考えるべきです。
３）クロージングを考える
クロージングとは、ユーザーに最終的なアクションを起こさせるための手法です。
ページを最後まで読んだユーザーは、商品やサービスに対する理解や興味が高まっている可能性があります。
ページの終わりには「CTA（Call To Action）ボタン」を配置しましょう。
CTAは、ユーザーに特定の行動を促すためのボタンやテキストです。これを使用することで、ユーザーを行動に導く役割を果たします。
ワイヤーフレームの作成で使用するツール
ワイヤーフレームの作成に高いデザイン性は必要ありません。
サイトマップ同様に『Microsoft Excel』や『Microsoft PowerPoint』、あるいはGoogleスプレッドシートなどでも十分に作ることができます。
『Microsoft Excel』の場合、「罫線」や「セル結合」などを使えば、簡単にワイヤーフレームを作れます。
【あきばれホームページ】なら初心者の方でもプロのデザインで制作できる
まとめ
本記事では、ホームページ全体の構成（サイトマップ）とページ単位の構成（ワイヤーフレーム）の解説について詳細にお話してきました。
サイトマップの作成は、ホームページ全体の情報を効果的に整理し、ユーザーが必要とする情報を迅速に見つけられるようにします。またページ単位の構成（ワイヤーフレーム）の作成は、ホームページのデザインと機能を計画し、サイトの使いやすさを向上させる手助けとなります。
この記事を通じて学んだ知識を実践に生かし、自社のホームページを改善し、売り上げを伸ばす一歩を踏み出しましょう。
ホームページの集客ノウハウを詰め込んだガイドブックを無料プレゼント中！
j
