ホームページの構成の決め方、必要なページと並べ方を5つの手順で

ホームページの構成は「目的」と「見る人の順番」で決まる

ホームページの構成とは、どんなページを作り、どの順に並べ、ページ同士をどうつなぐかを決めた設計図です。家で言えば間取りに当たります。見た目のデザインより先に決めるもので、ここが固まっていないと、作っている途中で何度もページを足したり消したりすることになります。

構成を決める材料は2つです。1つは目的、つまり「ホームページを見た人に、最後に何をしてほしいか」です。予約、電話、問い合わせ、来店など、してほしいことによって、いちばん目立つ場所に置くものが変わります。

もう1つは、見る人が知りたい順番です。初めてのお客さんは、まず「何のお店か」「自分に合うか」を確かめ、次に料金や場所を見て、最後に連絡の方法を探します。この順番どおりに情報が並んでいれば、見る人は迷わずに進めます。

このあと、必要なページ、構成を決める手順、メニューの並べ方、トップページの作り方の順に説明します。ツール選びから公開までの全体の流れはホームページの作り方にまとめています。

小さな事業者のホームページに必要なページ

お店、教室、サロン、士業、工務店と、仕事の中身が違っても、最初にそろえたいページはほとんど同じです。見る人が連絡する前に確かめたいことが、どの仕事でも共通しているからです。

最初からそろえたい6つのページ

1ページだけで作る場合も、この6つを上から順に並べれば形になります。ページを分けるか1ページにまとめるかは、載せる量で決めれば十分です。紹介のページの中身は会社概要の書き方、問い合わせの受け方は問い合わせフォームの作り方で詳しく説明しています。

仕事に合わせてあとから足すページ

• よくある質問: 電話やメールで同じ質問を何度も受けている場合
• 実績・事例: 施工例や作品など、仕事の仕上がりを見てもらいたい場合
• お客様の声: 利用した人の感想を、許可をもらって載せられる場合
• お知らせ・ブログ: 営業日の変更や新しいサービスを伝えたい場合
• 採用: スタッフを募集している場合
• 予約: 来店や体験の予約を、電話以外でも受けたい場合

お客様の声の集め方と載せ方はお客様の声をホームページに載せる方法で、仕事の種類ごとに足したいページは業種別のホームページに必要なページ早見表でまとめています。最初から全部をそろえる必要はなく、6つのページで公開してから、問い合わせの内容を見て足していけば足ります。

ホームページの構成を決める5つの手順

構成は、作成ツールを開く前に、紙かメモで決めておくと早く進みます。次の5つの順で進めてください。

1. 目的を1文で書く。例: 初めての人に体験レッスンを申し込んでもらう
2. 見る人を1人思い浮かべる。年代、困っていること、どこで知ってたどり着くか
3. その人が知りたいことを、付せんかメモに1つずつ書き出す
4. 書き出した項目をまとまりごとに分け、ページの名前を付けて並べる
5. 各ページの見出しを、上から読む順に3〜6個決める

3番目は、お客さんから実際に聞かれる質問を思い出すと書きやすくなります。「駐車場はありますか」「初めてでも大丈夫ですか」「支払い方法は何が使えますか」といった質問が、そのままページの項目になります。

4番目で迷ったら、1つのページに1つの役割、と考えてください。料金とサービスの説明が1つのページに混ざっていると、料金だけを確かめたい人が探しにくくなります。反対に、数行しか書くことがないページは、ほかのページにまとめます。

5番目まで決まれば、あとは見出しごとに文章を書いて写真を入れるだけです。文章の書き方はホームページの文章の書き方、写真のそろえ方はホームページに使う写真の撮り方と注意点で説明しています。

ホームページ構成の基本形、メニューと階層の並べ方

ページがそろったら、メニューの順番と、ページの親子関係(階層)を決めます。階層とは、トップの下にどのページがあり、その下にさらにどのページがあるか、という段の重なりのことです。小さな事業者なら、トップの下にすべてのページを1段で並べる形で足ります。

メニューの順番は、見る人が知りたい順に合わせます。多くの場合は「サービス、料金、紹介、アクセス、問い合わせ」の順で、問い合わせはメニューの右端に置くか、色を変えたボタンにして目立たせます。メニューの名前は「コンセプト」「ご案内」のような言葉より、「料金」「アクセス」のように中身がそのまま分かる言葉にします。

ページ同士のつなぎ方

メニューだけに頼らず、各ページの最後に、次に見てほしいページへのリンクを置きます。サービスのページの最後に料金へ、料金のページの最後に問い合わせへ、という流れです。Google は、検索エンジンは主にほかのページからのリンクをたどって新しいページを見つけると説明しています(出典: Google 検索セントラル「SEO スターター ガイド」)。どのページからもリンクされていないページは、見る人にも検索エンジンにも見つけにくくなります。

ホームページのトップページの作り方、上から置く順番

トップページは、見る人が最初に開くことの多いページです。全部を説明する場所ではなく、「自分に関係がある」と思ってもらい、次のページへ案内する場所と考えてください。詳しい説明は下のページに任せると、トップページは短く、読みやすくなります。

上から置く順番の基本は次のとおりです。見る人が知りたい順番と同じ並びになっています。

いちばん上の見出しは、トップページの作り方の中でいちばん時間をかけてよいところです。お店の名前やきれいな言葉だけでは、初めての人には何のお店か伝わりません。「駅の近くの、子ども向けの英会話教室」のように、場所と中身と相手が分かる1文にしてください。

スマホで見たときの順番も確かめる

スマホでは、パソコンで横に並んでいた要素が縦に積み重なります。パソコンでは右上にあった問い合わせのボタンが、スマホではずっと下になることもあります。作ったら自分のスマホで上から順に見て、連絡の入口がすぐ見つかるかを確かめてください。表示が崩れたときの直し方はホームページのスマホ対応にまとめています。

下層ページの構成、サービスと料金のページに書くこと

トップ以外のページ(下層ページ)も、見出しの順番を先に決めておくと文章が書きやすくなります。どのページも「結論、詳しい説明、次にしてほしいこと」の順にすると、見る人が迷いません。

サービスのページ

• 誰の、どんな悩みや希望に応えるサービスか
• サービスの内容と、利用の流れ
• 料金の目安と、料金のページへの入口
• そのサービスについてよく聞かれる質問
• 問い合わせや予約の入口

料金のページ

料金は表にして、含まれるものと別にかかるものを分けて書きます。「〜円から」とだけ書くと、自分の場合にいくらかかるのかが分からず、問い合わせをためらう人がいます。金額が決めにくいサービスは、よくある頼まれ方の例を2〜3通り示すと伝わりやすくなります。

お店や事務所の紹介のページ

名前、所在地、連絡先、代表者などの基本情報に加えて、なぜこの仕事をしているのか、どんな人が対応するのかを書きます。顔や人柄が見えると、初めての人も連絡しやすくなります。

よくある質問のページ

電話やメールで聞かれた質問を、そのまま質問と答えの形にします。サービスのページに書ききれない細かい条件の置き場所にもなり、同じ質問に何度も答える手間も減らせます。

目的で変わるホームページの構成例

同じ6つのページでも、目的によって並べ方と、いちばん目立たせるものが変わります。よくある3つの目的で比べると次のとおりです。

どの例も、メニューの最後が目的の行動になっていることを確かめてください。目的がいくつもある場合は、いちばん大事なものを1つ決め、それ以外はメニューの後ろかページの下の方に置きます。予約も求人も通販も、と全部を同じ大きさで並べると、見る人はどれを押せばよいか迷います。

1人で仕事をしている人の場合は、紹介のページに重みを置くと、誰が対応するのかが伝わりやすくなります。具体的な形は個人事業主のホームページの例で紹介しています。

ホームページの構成でよくある失敗と直し方

自分で作ったホームページの手直しを頼まれると、構成の段階でのつまずきをよく見かけます。どれも作る前に気づけば防げるものです。

構成の失敗は、デザインを変えても直りません。公開しても問い合わせが来ないときは、見た目より先に、ページの並びと連絡の入口を見直してください。原因の見分け方はホームページで集客できない原因と直し方で説明しています。

公開した後に構成を変えるときは、ページの住所(URL)が変わらないかにも気をつけます。名刺やチラシ、ほかのサイトに載せたURLが開けなくなるためです。URLを変える場合は、古いURLから新しいURLへ自動で移る設定(転送)を入れておきます。

構成づくりを自分でする場合と頼む場合

構成は、自分で考えることも、制作者と相談しながら決めることもできます。どちらにも良いところと手間があるので、自分の状況に合う方を選んでください。

自分で考える場合は、ここまでの手順で紙に構成案を書けば十分です。作るところまで自分で進めるかどうかは、ホームページを自分で作るのが難しいと感じる場面で判断の基準をまとめています。

頼む場合は、構成案でページ数が決まると、費用の目安も決まります。費用の決まり方と内訳、依頼先ごとの違いはホームページ制作の費用相場で説明しています。ここでは例として、uparia の料金表をページ数の目安と並べます(税込)。

月額プランは制作費0円で、最低契約期間は12か月です。24か月続けると、サイトのデータとドメインの管理を無料でお渡しするので、10ページの構成なら月4,980円の月払いだけで自分のものになります(24か月・総額119,520円)。最初から自分のものにしたい方には、買い切りのプランもあります。

頼む前に用意しておくものはホームページ制作に必要なものに、相談から公開までの段取りはホームページ制作の流れと期間にまとめています。

構成案を紙1枚に書くところから始める

ホームページの構成は、目的と見る人の順番さえ決まれば、紙1枚で書けます。自分で作るにしても頼むにしても、最初にやることは同じです。

この紙があれば、自分で作る場合はそのまま作業の設計図になり、頼む場合は打ち合わせが短く済みます。書いている途中で目的が絞れないと気づいたら、それも構成を考えたからこそ分かったことです。その迷いごと、相談の材料にしてください。

uparia のホームページ制作では、こうした構成案づくりから相談できます。料金と含まれるものは小さな事業者向けのホームページ制作に、これまでに作ったサイトは制作実績にまとめています。