ホームページを作ろうと参考サイトを見始めると、写真や色、動きに目が向きます。ところが、自分の情報を当てはめようとすると「トップに何を書くのか」「料金は別ページにするのか」で手が止まる。見た目を決める前に、整理しておきたいことがあります。
まず決めるのは、誰が、何を確かめるために来て、読み終わった後に何をするサイトなのか。ここが決まると、必要なページも、写真も、ボタンの言葉も選びやすくなります。
この記事では、制作会社へ依頼するときにも、自分で作るときにも使える準備を説明します。完成させるのは、凝ったデザイン案ではなく「どのページで、何を伝えるか」が分かる構成です。
最初に「来る人」と「してほしいこと」をつなげる
「集客したい」だけでは、サイトの内容を選ぶ基準としては広すぎます。初めて店を知る人と、紹介されて依頼先を確かめに来る人では、欲しい情報が違うからです。
まずは、訪問する場面を一つ具体的に考えます。年齢や職業を細かく設定するより、「何を知っていて、何が分からない人なのか」を書く方が、ページの中身に結びつきます。
| 訪問する場面 | サイトで確かめたいこと | 案内する行動 |
|---|---|---|
| 店名を聞いて、初めて来店を検討している | メニュー、価格、場所、営業時間 | メニューを確認し、アクセスを見る |
| サービスを比較している | 対応範囲、費用の決まり方、実際の仕事 | 条件を確認し、相談する |
| 依頼先として紹介された | 何が得意か、誰が担当するか、連絡方法 | 具体的な依頼内容を問い合わせる |
これは業種ごとの成果事例ではなく、サイトの役割を考えるための整理例です。実際には、自分のところに来る質問や、問い合わせ前に説明していることを材料にします。
「何でも知ってもらう」ではなく、「料金と対応範囲を理解したうえで相談してもらう」まで言葉にできれば、載せる情報の優先順位が見えてきます。
構成には「ページの分け方」と「ページ内の順番」がある
ホームページの構成は、二つに分けて考えると整理しやすくなります。
サイト構成は、どのページを作り、どこから移動できるようにするか。トップ、サービス、料金、会社案内、問い合わせ、といったページ同士の関係です。
ページ内の構成は、一つのページの中で何をどの順番に見せるか。最初の見出し、説明、写真、料金、ボタンなどの並びです。
たとえば「料金が見つけにくい」という問題でも、メニューに料金ページがないのか、サービスページの一番下まで読まないと金額が出てこないのかで、直す場所が違います。先にページの役割を決め、その後でページ内の順番を考えると、情報を置く場所がぶれにくくなります。
ページ名を決める前に、お客さんの疑問を並べる
会社概要、代表挨拶、理念、沿革……とページ名から考えると、運営側が紹介したい情報が中心になりがちです。先に「訪問者が判断するために必要な答え」を書き出してみてください。
| 訪問者の疑問 | 用意する情報 | 置き場所の候補 |
|---|---|---|
| 自分の依頼に対応している？ | サービス内容、対象、対応エリア、対応しない範囲 | サービス紹介 |
| いくらかかる？ | 料金、含まれる内容、追加費用が発生する条件 | サービス紹介、または料金ページ |
| 安心して任せられる？ | 公開できる仕事の実例、担当者、会社情報 | 実績、会社案内 |
| 依頼した後はどう進む？ | 相談から開始までの流れ、準備するもの | 利用の流れ、よくある質問 |
| どう連絡すればよい？ | 連絡手段、受付時間、返信の目安 | 問い合わせ |
ここで大事なのは、一つの疑問につき必ず一ページ作るわけではないことです。料金が一種類で説明も短ければ、サービス紹介に含められます。複数のプランを比較してほしいなら、料金ページを分ける方が読みやすい場合があります。
独立して探される情報か、説明に十分な量があるか、更新する単位が違うか。 この三つを手がかりに分けると、数を埋めるための薄いページを作らずに済みます。
お知らせやブログも、更新する内容と担当が決まってから追加できます。「一般的な会社サイトにあるから」という理由だけで用意する必要はありません。
トップページは、すべてを詳しく説明する場所ではない
トップページには、訪問者が「自分に関係のあるサイトだ」と分かり、必要な説明へ進める役割があります。サービス、採用、会社情報をすべて同じ大きさで並べると、どこへ進めばよいか判断しにくくなります。
サービスへの相談を主な目的にする場合は、次のように考えられます。
- 何を、誰に提供しているか。 最初の見出しと写真で伝える。
- どんな相談に対応できるか。 具体的な内容を示し、サービス紹介へ案内する。
- 判断に使える材料。 実際の仕事、対応範囲、担当者などを見せる。
- 費用や進め方。 相談前に気になる条件への入口を置く。
- 次にすること。 相談や問い合わせの方法を案内する。
この順番がどのサイトにも当てはまるわけではありません。来店前の確認が中心なら、メニュー・営業時間・アクセスを早く見つけられる方が大切です。採用が主な目的なら、仕事内容や働く環境を優先します。
ボタンも「詳しくはこちら」だけにせず、「料金と対応範囲を見る」「相談の流れを見る」のように、進んだ先が分かる言葉にします。W3Cのアクセシビリティに関する文章作成ガイドでも、内容を示す見出しと、リンク先が分かるテキストが勧められています。
参考サイトは「好きな見た目」の理由までメモする
参考サイトを見せて「こんな感じで」と伝えても、どこを取り入れたいのかは共有しきれません。色が好きなのか、写真が大きいのか、料金が探しやすいのかを分けます。
たとえば「おしゃれだから」から、次のように一段具体化します。
- 写真を大きく見せているので、扱っている商品の質感が伝わる。
- サービスの説明と料金が近く、行き来しなくても比較できる。
- 長い説明に入る前に要点があり、読む場所を選べる。
自分のサイトへ取り入れる際は、その表現を支える素材があるかも確かめます。大きな写真を主役にするデザインには、十分な画質と適切な構図の写真が必要です。文字量の少ない参考サイトを選んでも、自分のサービスに説明が必要なら、文章を無理に削ると判断材料まで失われます。
サイト事例集では、見た目に加えて情報の配置や導線の解説も確認できます。参考を探すときは、自分の業種だけでなく「料金の見せ方」「仕事の紹介方法」といった目的でも比べてみてください。
デザインを始める前に、原稿と素材の不足を確かめる
構成ができたら、各ページに載せるものを確認します。「実績を載せたい」と書くだけでなく、公開できる写真と説明が手元にあるかまで見ます。
| 用意するもの | 確認すること |
|---|---|
| サービスの説明 | 提供内容と、含まれない内容を言えるか |
| 料金 | 税込・税別、追加条件、見積もりが必要な範囲が明確か |
| 写真とロゴ | 使用できる素材か、掲載する大きさに画質が足りるか |
| 仕事の紹介 | 公開できる範囲が確認でき、写真と説明がそろうか |
| 問い合わせ先 | 受信先と確認する担当が決まり、実際に連絡を受けられるか |
| 更新する情報 | 誰が、どんなときに、どう直すか決まっているか |
材料がないところを、仮の実績や架空の感想で埋めるのは避けます。紹介できる仕事が少ないなら、対応範囲や進め方、担当者自身の説明を丁寧にする方が、現状に合っています。
AIを使って制作する場合も、同じ準備が役立ちます。決まった情報と未確定の項目を分けて渡し、「未確定の料金や実績は補わない」と指定すると、確認すべき場所を残したまま作業を進められます。
紙の構成を、スマホでたどれるか確認する
最後に、訪問者が一つの用事を済ませられるかを追ってみます。「サービスを知る → 自分が対象か確認する → 費用を確かめる → 相談方法を選ぶ」という具合です。
メニュー名だけで移動先が想像できるでしょうか。料金を読んだ後、問い合わせへ進めるでしょうか。会社名で検索してトップページに来る人だけでなく、サービス紹介へ直接来る人にも必要な案内があるでしょうか。
形になったらスマホの実機でも確認します。文字が小さくないか、表が切れないか、電話や問い合わせの操作ができるか。フォームは送信完了の表示だけでなく、実際に受け取る側へ届くところまで確かめます。
準備が整ったかどうかは、ページ数では判断できません。「誰が何を確かめに来るのか」「どこに答えを置くのか」「その答えを載せる素材があるのか」が説明できる状態を目指してください。そこまで決まれば、参考サイトを選ぶときも、デザインを比べるときも、判断する理由を持って制作を進められます。