「思ってたのと違う…」を防ぐには？プロが教えるWeb制作の裏側と成功のロードマップ
「ホームページを作りたい！」と依頼して、いきなりデザイン画が出てくると思っていませんか？ 実は、失敗しないWeb制作には「準備」が8割。 今回は、完成後に「思ってたのと違う…」という悲劇を防ぐための、プロの制作ロードマップ（全8ステップ）を公開します。
ねえねえ、ホームページ制作って、依頼したらいきなりカッコいいデザインを作ってくれるの？
ううん、実は違うんだ。家を建てるのと同じで、いきなり工事は始めないよ。まずは「どんな家（サイト）にしたいか」をしっかり話し合うところからスタートするんだ。
えっ、そうなの？
そう！ここを飛ばすと、後で「部屋（ページ）が足りない！」とか「ドア（機能）が開かない！」なんてことになりかねないからね。solabの「Web制作」のページの「Webサイト制作の流れ」という項目を見てみながら実際の制作フローを見てみようか。
失敗しないWeb制作の全8ステップ
01. お問い合わせ・ご相談
「まだ何も決まってないけど…」という状態でも大丈夫です。 まずは「今のサイト、ここが使いにくいんだよね」「新しくお店を出すから何か作りたい」など、現状の悩みや希望をお聞かせください。 企業様・店舗様を中心に、お客様の「伝えたい想い」をカタチにする第一歩です。
【実例ロープレ】制作会社にはこう伝えるとスムーズ！
そろそろホームページを作りたいんですけど、何から決めたらいいか分からなくて…
大丈夫ですよ！まずは『なぜ作りたいと思ったか（きっかけ）』を教えてもらえますか？
実は、採用を強化したくて。今のままだと学生さんに会社の雰囲気が伝わらない気がして…
なるほど！それなら『会社の楽しさ』が伝わるサイトがいいですね。詳しくお話しましょう！
💡 ここがポイント！「どんなサイトにしたいか（仕様）」が決まっていなくても大丈夫です。 まずは「なぜ作りたいと思ったか（きっかけ）」や「今困っていること（悩み）」をそのまま伝えてみてください。プロがそこから「目的」を汲み取り、あなたにぴったりのプランを提案してくれます。
02. ヒアリング・要件確認
★ここが一番重要！ 「思ってたのと違う」を防ぐための最重要ステップです。
- 目的: 集客？採用？それとも名刺代わり？
- ターゲット: 誰に見てもらいたい？
- 機能: お知らせは自分で更新したい？自分で記事を発信したい？
これらを徹底的にすり合わせ、デザインの方向性（参考サイトなど）も共有します。
【実例ロープレ】制作会社にはこう伝えるとスムーズ！
とにかく、カッコいいサイトにしたいです！
いいですね！でも、その『カッコいい』を誰に感じてもらいたいですか？
うーん…今回は新卒採用を増やしたいから、就活中の大学生かな？
それなら、高級感のあるカッコよさより、『親しみやすくて働くイメージが湧く』カッコよさが正解かもしれませんね
あ、確かに！学生目線で考えないとダメですね
そうです！そのために『ペルソナ』を設定して、ターゲットの気持ちを深掘りしましょう
ペルソナ…？
詳しくは後で紹介する記事で解説するけど、簡単に言うと『たった一人の架空のお客様』のこと。年齢や趣味、休日の過ごし方まで細かく設定して、その人の気持ちになりきるんだよ
💡 ここがポイント！ 「カッコいい」の正解は、見る人（ターゲット）によって変わります。 ただ漠然と作るのではなく、「たった一人の架空のユーザー（ペルソナ）」を作り込み、その人が「どう動くか（カスタマージャーニーマップ）」を考えることで、本当に響くサイトが見えてきます。
※ペルソナやカスタマージャーニーマップの詳しい作り方は、次回になります。
03. お見積り・ご提案
ヒアリング内容に基づき、明確な費用とプランをご提示します。 「予算内でここまでは必須」「ここはオプションで追加」といった柔軟なご提案も可能です。後から「追加料金がかかります」とならないよう、最初にクリアにします。
【実例ロープレ】制作会社にはこう伝えるとスムーズ！
うっ…正直、予算オーバーかも…
その場合は、機能を少し絞りましょう。例えば『自社サイトブログ更新システム』は今回は入れずに、Xやインスタへのリンクにするのはどうですか？
あ、それなら安くなりますか？
はい！システム開発費が浮くので、ご予算内に収まりますよ
💡 ここがポイント！ 予算オーバーでも諦める必要はありません。プロは「機能を削ってコストを下げる方法」を知っています。正直に予算感を伝えることが、満足度の高い着地への近道です。
04. ご契約・スケジュール確定
プランにご納得いただけたらご契約です。 「いつまでに素材（写真や原稿）をもらって、いつ公開するか」という全体の進行スケジュールを共有し、お互いのゴールを設定します。
【実例ロープレ】制作会社にはこう伝えるとスムーズ！
来月1日には公開したいです！急いでください
そうなると、来週の金曜日までに希望されていた『社長の挨拶文』と『社員の集合写真』が必要になりますが、ご準備できそうですか？
えっ、そんなに急ぎ！？ たのみずらい社長だしな・・・みんな忙しいしな・・一度お伺いたてないと・・・
無理のない範囲で大丈夫です。もし遅れそうなら、公開日をずらす相談もしましょう
💡 ここがポイント！ Web制作は二人三脚です。制作会社が作業するだけでなく、**お客様側での「原稿作成」や「写真用意」**もスケジュールに含まれます。無理のない計画を最初に握っておくことが大切です。
05. 企画構成・ワイヤーフレーム（設計図）
ここから本格的な制作スタート！でも、いきなりオシャレなデザインは作りません。 まずは「サイトの設計図（ワイヤーフレーム）」を作ります。 家づくりで言えば、色やおしゃれ家具をを選ぶ前に「2階建てにするか？」「ここに子供部屋が必要か？」といった間取りを決める作業です。この骨組みがしっかりしていないと、2階がでっかいぐらぐらの家（サイト）になってしまうかもしれません。
【実例ロープレ】制作会社にはこう伝えるとスムーズ！
あれ？なんか地味な白黒の図面が送られてきたけど…これでおしまい？
いえいえ！これは家で言う『間取り図』です。壁紙（デザイン）を貼る前に、部屋の配置を決めましょう
間取りかあ。えーっと…あ、ここの玄関（トップページ）、もっと広くしたい！
いいですね！あと、キッチン（お問い合わせボタン）はここに置かないと不便じゃないですか？
確かに！デザインの前に、『使い勝手』を相談するんですね
💡 ここがポイント！ 色がついた後に構成を変えるのは、家を建てた後に「柱を動かして！」と言うくらい大変な作業です。 「デザイン（壁紙）」に惑わされず、「機能と配置（間取り）」だけに集中できるこの段階で、しっかり要望をすり合わせておきましょう。
06. デザイン・コーディング（構築）
設計図（骨組み）に、色や写真で「肉付け」をしてデザインを完成させます。 デザインが決まったら、それをWebブラウザで見られるように「コーディング（構築）」します。 スマホで見ても綺麗に表示されるように調整したり、動き（アニメーション）をつけたりするのもこの段階です。
【実例ロープレ】制作会社にはこう伝えるとスムーズ！
デザイン見ました！すごく良いけど、ここの青色、もうちょっと明るくできますか？
もちろんです！御社のロゴに合わせて、もう少し水色に近いトーンに調整してみますね
あと、スマホで見るとどうなりますか？
スマホだと縦並びになります。後ほどスマホ用のイメージもお見せしますね！
💡 ここがポイント！ PC画面だけでなく、「スマホで見た時のイメージ」も確認しておくと安心です。色の微妙な調整なども、遠慮なく相談してください。
07. テスト確認・修正
出来上がったサイトを、テスト環境（一般には公開されていない場所）で確認していただきます。 実際の画面をスマホやPCで操作してみて、表示崩れがないか、使い心地はどうかなど、公開前の「最後の仕上げ」を一緒に行います。
【実例ロープレ】制作会社にはこう伝えるとスムーズ！
わあ、スマホで動いてる！自分のサイトができると感動しますね…！
形になると嬉しいですよね！ぜひ、実際のボタンを押して使い心地を試してみてください
PCだとバッチリですね。あ、スマホだとこの写真、もう少し大きい方が見やすいかな？
なるほど、いい視点です！スマホで見ている人の方が多いはずなので、そこは微調整して『見やすさ』をアップさせましょう！
💡 ここがポイント！ 制作会社もプロですが、「お客様の感覚」も大事なことです。 ミス探しというよりも、「もっと良くするためのブラッシュアップ」期間だと捉えて、気になったことは遠慮なく（でも前向きに！）伝えてくださいね。
08. 公開・運用サポート
いよいよ本番環境へアップロードし、世界中へ公開！ でも、これで終わりではありません。公開後の更新サポートや、アクセス解析（Googleアナリティクス）の導入など、サイトを育てていくための運用もご相談ください。
【実例ロープレ】制作会社にはこう伝えるとスムーズ！
わーい！公開された！これで終わりですか？
いえいえ、ここからが本番ですよ！まずは1ヶ月後に、どれくらい人が見に来ているか分析してみましょう
分析？難しそう…
大丈夫です。『どのページが人気か』など、レポートをお出ししますね
💡 ここがポイント！ Webサイトは「作って終わり」ではなく「育てていくもの」です。公開して初めてスタートラインに立ったと考え、データを見ながら改善していくのが成功への鍵です。
まとめ：急がば回れ！「段取り」こそが成功への近道
Webサイト制作は、単に「デザインを作る」だけではありません。 ヒアリングで目的を固め、ワイヤーフレームで骨組みを作り、最後にデザインで命を吹き込む。この工程を飛ばさないことが、結果的に「最高のサイト」を「最短」で作る方法です。
なるほど！「05. 設計図（ワイヤーフレーム）」があるから、失敗しないサイトが作れるんだね。
その通り！いきなり作るんじゃなくて、ひとつひとつ階段を上るように進めていくのが、成功への一番の近道なんだよ。
