CONTENTS / ARTICLE MAP目次16項目
ホームページ制作は、参考サイトを集めてすぐ作り始めるのではなく、目的と現状を確認し、参考サイトを調査し、情報構成とデザインの方向を確かめてから実装へ進むと、完成後の行き違いを減らせます。
TAKUMI Web Worksでは、最初に「誰に何を伝え、どの行動につなげたいか」を整理します。そのうえで参考サイトを見た目だけでなく、情報の順番、写真の役割、問い合わせまでの導線、スマートフォンでの見え方に分けて調査します。
次にページ構成とデザイン方向をご提案し、選択、組み合わせ、修正、まったく別の方向も含めて確認します。構成・デザイン・制作範囲・費用・日程に納得いただいたところで、WordPressへの実装や機能開発を開始します。この記事では、初めて依頼する方にも分かるように、相談から公開までの確認ポイントを順番に説明します。
ホームページ制作は「調査→構成→デザイン→合意→実装」の順で進めます
Studio Blogの制作工程では、目的・スケジュール・予算を決め、企画・全体設計、ワイヤーフレーム、デザイン、実装・テスト、公開へ進む流れが示されています。株式会社デパートの解説も、コンセプトを見た目だけでなく「誰へ何を伝え、どの行動へつなげるか」という判断軸として扱い、情報理解と行動の順を設計しています。
TAKUMI Web Worksでは、この一般的な流れを、依頼者が「今どこを確認しているか」を分かりやすくするため、次の8段階に分けます。
| 段階 | 主に行うこと | 確認すること |
|---|---|---|
| 1. 目的整理 | 対象者、課題、優先したい行動を整理 | 誰に何を伝えるか |
| 2. 調査 | 既存サイト、参考サイト、公開情報を確認 | 使える情報と未確認情報 |
| 3. 構成 | 必要ページ、情報の順番、導線を設計 | 訪問者が迷わず判断できるか |
| 4. デザイン | 意味の異なる方向を作り、全体像を比較 | 選択・組み合わせ・修正・別案 |
| 5. 合意 | 範囲、金額、日程、素材、承認点を確定 | 含むもの・含まないもの |
| 6. 実装 | WordPressや必要な機能へ組み込む | 更新方法と将来の拡張 |
| 7. 検証 | 表示、操作、フォーム、内容を確認 | PC・スマホ・主要な利用環境 |
| 8. 公開・運用 | 承認後に公開し、更新と改善へつなぐ | 公開判断、保守、引き継ぎ |
小さな修正や原因が明確な作業では、すべての段階が必要とは限りません。一方、新規サイトや大きなリニューアルでは、途中の確認を省くほど後から文章量、ページ数、機能、デザインを戻して直す可能性が高くなります。案件の大きさに合わせて段階を短くしても、何を確認し、どこから実装するかは文章で残します。
1. 最初に目的・対象者・現在の課題を整理します
相談時に、完成した仕様書を用意する必要はありません。「サービスを初めて知る人に内容を伝えたい」「現在のサイトでは問い合わせ先が分かりにくい」「更新を自分たちで続けたい」のように、目的や困っていることが一つ分かれば、確認を始められます。
最初に整理したいのは、次の5点です。
- 主に見てほしい人は誰か
- その人が最初に知りたいことは何か
- 相談、予約、購入、応募など、優先する行動は何か
- 現在のサイトや運用で困っていることは何か
- 公開後、誰がどの情報を更新するか
目的が複数ある場合は、すべてを同じ強さで並べず、訪問者を分けて導線を設計します。たとえば一般のお客様の相談と、法人からの業務依頼があるなら、トップページで入口を分け、それぞれに必要な説明と問い合わせ方法へ案内します。
既存サイトがある場合は、文章や写真だけでなく、ドメイン、サーバー、メール、更新方法、フォーム、アクセス解析、現在の検索URLも確認します。見た目だけを作り替えても、メールや検索流入が切れると事業へ影響するためです。現在提供しているか不明なサービスは、確認できるまで予約や申込みの導線へ使いません。
2. 参考サイトは「好きな見た目」だけでなく役割を分解して調査します
参考サイトは、完成形をそのまま写すためのものではありません。依頼者が「良い」と感じた理由を見つけ、今回の目的に使える仕組みへ置き換えるために調べます。
| 見る部分 | 確認する質問 | 構成・デザインへの反映 |
|---|---|---|
| 最初の画面 | 誰向けで、何ができ、次に何をすればよいか分かるか | 見出し、説明、最初の行動 |
| 情報の順番 | 不安や疑問に、どの順で答えているか | ページ構成、見出し、内部リンク |
| 写真・図 | 雰囲気、具体例、信頼、使い方のどれを伝えているか | 必要な素材と撮影・生成方針 |
| 文字 | 専門用語、文章量、強調、余白は読みやすいか | 見出し階層、本文幅、文字サイズ |
| 行動導線 | 相談・購入・応募まで迷わず進めるか | ボタンの位置、文言、フォーム |
| スマホ表示 | 情報の順番や操作が小さい画面でも保たれるか | 並び替え、余白、ボタン、表 |
参考にするサイトは、同業だけとは限りません。同じ利用者や目的を持つ別業種のサイトから情報の順番を学び、写真の扱いは別のサイト、フォームの分かりやすさは公式ガイドから確認することもあります。依頼者からいただいたURLには、「この写真の余白が好き」「料金へ迷わず進める」「動きは少ない方がよい」のように理由を添えていただくと、好みと目的を分けて考えやすくなります。
公開されているからといって、写真、ロゴ、画面、文章を提案や制作へ自由に使えるわけではありません。利用許可が確認できない素材は、コピー、切り抜き、トレース、生成AIの参照画像への投入を行わず、オリジナルの生成素材、別途利用できる素材、または仮置きの画像を使います。参考にするのは、役立つ仕組みと判断理由です。
3. 訪問者の判断順からページ構成と導線を設計します
調査結果を集めたら、サイトマップとページ構成を作ります。ここでいうサイトマップは、サイト全体にどのページを置き、どうつなぐかを示す一覧図です。検索エンジンへ送るXMLサイトマップとは別のものです。
ページ内では、訪問者が「自分向けか」「何を頼めるか」「信頼できるか」「費用や進め方はどうか」「相談してよいか」を判断する順番を設計します。最初からすべての情報を同じ強さで並べず、概要から詳細へ進み、必要なときに料金、実績、FAQ、問い合わせへ移れるようにします。
必要に応じてワイヤーフレームを作ります。ワイヤーフレームとは、色や写真を決める前に、見出し、文章、画像、ボタンをどこへ置くかを示すページの設計図です。この段階で「大切なサービスが下に埋もれている」「問い合わせ前に必要な説明が足りない」といった構成上の問題を見つけます。
記事やお知らせを増やすサイトでは、1ページの見た目だけでなく、一覧、詳細、カテゴリー、関連記事、検索から訪れた人の次の行動まで設計します。今回の「相談できること」一覧も、トップページへ記事カードを増やし続けるのではなく、専用一覧へ集約し、各記事から相談へ進める構成にしています。
4. 構成を確認したあと、意味の違うデザイン方向をご提案します
構成が見えたら、デザインの方向を考えます。違いは色だけではありません。何を主役にするか、写真と文字の比率、余白、情報量、信頼の見せ方、動き、問い合わせまでの速度を変えると、同じ内容でも受ける印象と使いやすさが変わります。
デザイン選定を含む案件では、原則として少なくとも3つの意味の異なる方向をご用意します。たとえば、写真で人柄を伝える方向、情報を整理して専門性を伝える方向、利用の流れや機能を体験として見せる方向です。PC版とスマホ版、色違い、写真違いを別案として数えるのではなく、訪問者の判断と感情の流れが異なる案にします。
- 表示した案から1つを選ぶ
- 複数案の良い部分を組み合わせる
- 色、写真、言葉、順番、細部を修正する
- 提示案とはまったく異なる方向を相談する
提案画像は最終デザインを強制するものではありません。方向を選ぶための参考です。ただし、雰囲気だけのボードや最初の画面だけでは、完成後の使い方を判断できません。トップから下部の案内、信頼情報、機能、問い合わせ、フッターまで、初めて見る方が完成サイトを想像できる全体像で確認します。
デザイン確認では、好みだけでなく読みやすさも見ます。W3CのWebアクセシビリティ設計の基本が示すように、文字と背景の十分な差、色だけに頼らない区別、見つけやすいリンクやボタン、一貫したナビゲーション、フォームのラベル、見出しと余白、異なる画面幅への対応を初期から確認します。
5. 納得した方向を詰め、制作範囲・費用・日程を確定します
デザイン方向が決まったら、その案を基に文章、写真、部品、スマートフォン表示、各ページの共通部分を詰めます。同時に、実装するページと機能、素材の担当、修正の段階、公開方法、保守の有無を確定します。
| 合意する項目 | 確認例 |
|---|---|
| ページ | トップ、サービス、プロフィール、実績、記事、FAQ、問い合わせ |
| 機能 | 更新、フォーム、予約、会員、検索、決済、外部連携 |
| 素材 | 支給写真、ロゴ、原稿、撮影、生成画像、利用許可 |
| 修正 | 構成、デザイン、実装後の各段階で何を変更できるか |
| 環境 | ドメイン、サーバー、WordPress、外部サービス、管理権限 |
| 費用 | 含む作業、別料金になる条件、外部サービスの継続費 |
| 日程 | 素材提出、確認日、実装、検証、公開予定日 |
| 公開後 | 更新担当、保守、バックアップ、不具合と追加依頼の境界 |
修正のご希望は歓迎します。ただし、構成を承認した後に対象者やサービス全体を変える、実装後に新しいページや機能を追加するなど、合意範囲を超える変更は作業量と検証範囲が変わります。その場合は、追加内容、税込金額、日程への影響をご説明し、同意をいただいてから進めます。合意なく追加作業や請求を行うことはありません。
希望予算や上限がある場合は、遠慮なくお知らせください。必要なページと情報の道筋、最優先の目的、品質を守りながら、まず標準機能や適合する既存プラグインを使えるか、個別開発や外部連携を簡素化できるか、素材をどこまでご用意いただけるか、段階公開や日程調整に実質的な効果があるかを見直します。すべての予算に同じ範囲で対応できるとは限らないため、含むもの、含まないもの、金額、日程を比べてから決めます。
6. 合意後にWordPress実装・機能開発を開始します
ここでいう制作開始は、調査やデザイン案を作る段階ではなく、承認した構成とデザインを実際のWebサイトへ組み込む「実装・構築」の開始です。WordPressでは、更新する内容と担当者に合わせて、テーマ、投稿画面、一覧・詳細ページ、フォームなどを組み立てます。
機能は、最初から独自開発を前提にしません。まずWordPressの標準機能で足りるか、次に安全性・互換性・ライセンス・保守状況を確認した既存プラグインが合うかを検討し、それでも不足する部分だけを追加コードや独自プラグインで補います。予約、会員、決済、外部APIなどを使う場合は、月額費用、個人情報、失敗時の動作、人の確認方法も設計します。
実装中は、公開サイトへ直接上書きせず、可能な範囲で確認用の環境を用意します。確認用の環境とは、一般公開する前に、依頼者と制作者だけで表示や操作を確かめる場所です。既存サイトを変更する場合は、バックアップと戻し方を用意し、メールやドメインへの影響も確認します。
要件整理、原稿の初案、画像案、コード作成、テスト項目の洗い出しにAI支援を使うことがあります。ただし、生成結果をそのまま公開しません。事実、権利、コード、設定、表示、動作を人が確認し、送信・公開・契約の判断は人が行います。AIや有料APIが目的に合わない場合は、使わない方法をご提案します。
7. PC・スマホ・フォーム・更新性を確認して公開判断へ進みます
実装が終わったら、見た目だけでなく、実際に使えるかを確かめます。レスポンシブ対応とは、PC、タブレット、スマートフォンなど画面幅が変わっても、読みやすく操作できるよう表示を調整することです。
- 主要なPC・スマートフォン幅で文章、画像、表がはみ出さない
- メニュー、リンク、ボタンをキーボードとタッチで操作できる
- お問い合わせフォームの入力、エラー、送信、通知を確認する
- タイトル、説明文、見出し、内部リンク、noindex等の検索設定を確認する
- 画像の代替テキスト、文字の読みやすさ、色以外の識別方法を確認する
- 管理画面で記事や情報を更新し、公開側へ正しく反映される
- バックアップ、公開手順、問題時の戻し方がある
フォームの実送信、決済、会員登録、外部サービス連携などは、画面が表示されただけでは確認できません。テスト用の条件、通知先、記録、エラー時の案内まで確認します。本番公開は、検証結果と残っている課題を共有し、依頼者の承認を得てから行います。
公開後は、記事や実績を追加する運用、WordPressやプラグインの更新、バックアップ、フォーム監視、アクセス状況に基づく改善が続きます。制作時から更新担当と入力ルールを決めておくと、公開後に情報が止まりにくくなります。
依頼前に用意できると進みやすいもの
次の項目が分かる範囲でそろっていると、調査とご提案が進みやすくなります。すべて決まっていなくても相談できます。
- 作る目的
問い合わせ、予約、採用、情報整理など、最も優先すること。 - 主な対象者
一般のお客様、法人、求職者、会員など。 - 参考サイトと理由
URLだけでなく、好きな点、避けたい点、必要な仕組み。 - 必要そうなページ・機能
必須と、将来追加したいものを分ける。 - 使える素材
ロゴ、写真、文章、パンフレットと、それぞれの利用許可。 - 予算の目安・上限
無理に広げず、優先順位と実装方法を考えるための条件。 - 希望時期
公開日だけでなく、素材準備と社内確認に必要な時間。 - 現在の契約
ドメイン、サーバー、WordPress、メール、外部サービス。
依頼先を比較するときは、完成画像の好みだけでなく、調査、構成、デザイン、実装、検証、公開後運用のどこまで含むかを同じ条件で確認してください。詳しくはホームページ制作会社の選び方と、WordPress制作代行の費用と範囲でも整理しています。
ホームページ制作の流れに関するよくある質問
参考サイトが1つしかなくても相談できますか？
はい。1つのサイトから好きな理由と避けたい部分を確認し、同じ目的や対象者を持つ別のサイトもこちらで調査します。参考サイトがなくても、目的、対象者、必要な情報から方向を整理できます。
デザイン案を見てから方向を決められますか？
デザイン選定を含む案件では、意味の異なる方向を比較し、選択、組み合わせ、修正、別方向をご相談いただけます。提示した案は参考方向であり、そこからしか選べないものではありません。
構成を決めた後でも変更できますか？
合意した範囲内の調整は、決めた確認段階で対応します。新しいページ、機能、対象者、サービスを追加する大きな変更は、影響する費用と日程を確認し、改めて合意してから進めます。
完成までどのくらいかかりますか？
ページ数だけでなく、原稿・写真の準備、確認者の人数、個別デザイン、フォームや会員機能、既存サイトの移行によって変わります。調査後に、素材提出、構成確認、デザイン確認、実装、検証を含む予定をご案内します。
WordPress以外でも相談できますか？
目的と現在の契約を確認し、ノーコード、静的HTML、既存サービス、独自システムも含めて対応可否をご案内します。すべての環境へ対応できるとは限らないため、編集権限、契約プラン、移行可否を確認してから判断します。
参考サイトの調査から、一緒に整理できます
「この雰囲気が好き」「必要なページがまだ分からない」という段階でも大丈夫です。目的、参考サイト、現在の課題を文章でお送りいただければ、調査、構成、デザイン確認、実装までの必要な範囲をご案内します。
希望予算や上限がある場合も、必要なページと情報の道筋、品質を守りながら、実装方法、連携、素材分担、日程を見直します。対応できる範囲、含まないもの、税込金額、予定を確認してからご判断いただけます。
