ホームページ制作の流れ～お問い合わせから納品までの流れを徹底解説～
はじめてホームページ制作を依頼する場合、どのような流れで制作が進むのか、いまいちイメージがつきにくいですよね。
ということで今回は、ホームページ制作業者が依頼を受けた場合の基本的な流れをご紹介したいと思います。
なおクライアント（依頼者）の要望や制作内容などによって、手順が前後したり省略・追加される場合もあります。
また業者によって独自の工程もあると思いますので、その点だけご了承お願いします。
ホームページ制作の流れ
お問い合わせ
気になるWeb制作会社やWebデザイナーが見つかったら、そこのホームページに記載されている連絡先、またはお問い合わせフォームから連絡してみましょう。
SNSを運用しているところもあるので、その場合はダイレクトメッセージでお問い合わせを受け付けている場合もあります。
お問い合わせの際には、以下のようなことを伝えると業者の方も依頼の概要が把握しやすいでしょう。
- ホームページの目的（集客したい・人材募集など）
- 予算と希望納期
- 事業内容
- 会社や商品の特徴
なおページ数や希望のカラーなどは、必要ありません（伝えても大丈夫ですが）。
というのも、ページ数はサイトの目的や、その達成のために必要になるコンテンツによって変わるからです。
またホームページに使うカラーも同様で、あなたの好きな色を使うというのではなく、訪問者に与えたい印象などに合わせて選定する方が効果的です。
ヒアリング
お問い合わせの際に伝えた内容をもとに、業者の方からより詳しいヒアリングが行われます。
ここでのヒアリング内容は業者によって千差万別だと思います。
「格安ホームページ」みたいな業者の場合は上で言ったようなページ数やカラーなどについて、あとは「WordPressは使いたいですか？」というようなことも聞かれるかもしれません。
なぜかというと、ヒアリングの段階でこれらを決め打ちしてしまえば工数を省略してラクに制作できるからです。
逆にしっかりした制作会社とかであれば、ターゲット顧客像やUSP（あなたの強み）、現在の課題などについて詳しく尋ねられます。
提案・見積もり
ヒアリング内容をもとに、制作業者にて提案と費用や納期のお見積もりが提出されます。
この段階で、ホームページのページ構成や課題の解決策などについて提案がされます。
提案内容の良し悪しを判断するには、以下のようなことをチェックします。
- ホームページの目的をどのように達成するか
- 現在の課題をどのように解消するのか
- 公開後にどのように運用するのか
たとえばホームページの目的が人材採用だったとして、ホームページでセールの告知ばかりしていても目的は果たせませんよね？
それよりも、職場の雰囲気とかどんな人が働いているのかとか、先輩社員の生の声などを掲載した方が効果的です。
こんな感じで、目的を達成したり課題を解消するためにどんな対策をするのか、あなたが納得できる提案かどうか見極めましょう。
また、見積もり金額が予算をオーバーしてしまうこともあるかと思います。
その場合でも安い業者を探す前に、予算内でできることなどを確認してみるといいです。
もちろんベストな提案からは効果が下がってしまうかもしれませんが、コンテンツを削ったり、作業の一部をあなた側で対応するなどで折り合いをつけることができるかもしれません。
もっとも避けたいのは、費用を抑えるために何の成果も出るはずのない格安ホームページを作ってしまうことです。
「とりあえずあればいい」的なホームページであれば構わないかもしれませんが、何の施策もなしに成果が出ることはあり得ません。
お金をドブに捨てないためにも、納得いくまで交渉しましょう。
業者の提案内容や見積もりに納得できたら、正式発注となります。
おそらくここまでは無料で対応し、この先から料金が発生する業者が多いはずです。
そのためこれ以降にキャンセルしたいという場合には、キャンセル料が発生するので発注前にしっかり検討してください。
サイト設計
正式発注となったら、提案内容をベースに業者の方でサイト設計という作業が進められます。
多くの場合、業者からの提案時に施策などの方針が大まかに決まっています。
この工程ではそれをさらに煮詰め、以下のようなことを細かく決めていきます。
- どんなコンテンツ（ページ）が必要か
- どんな機能が必要で、どのように実装するか
- 公開後はどのように運用するか
なおサイト設計が済んだ後に「やっぱりこういう機能も…」という話になってしまうと、余計に費用が発生してしまうことがあります。
そのため、要望はここまでにできるだけ出し切っておきましょう。
コンテンツ作成
サイト設計をもとに、必要なコンテンツを作成していきます。
ヒアリング内容や会社案内のパンフレット、商品カタログなどを元に情報を整理して、原稿を作成します。
必要な場合は写真や動画の撮影、加工・編集なども行います。
コンテンツ作成はホームページの成果にもっとも影響し、もっとも時間の掛かる工程です。
しかしながらホームページの見た目にあまり影響しない部分であるため、格安業者などではもっとも手を抜かれやすい工程であるとも言えます。
なお自分の言葉で会社や商品の魅力を伝えたいという場合には、積極的にコンテンツ作成に参加しましょう。
制作業者も大歓迎なはずです。
あなたの会社・商品についてもっとも詳しく、情熱を持っているのはあなたのはずです。
「文章は苦手」という場合でも、草稿のような形で業者に提供しておくと、ホームページの完成度はグンと上がります。
ワイヤーフレーム
コンテンツができたら、ワイヤーフレームを作成します。
ワイヤーフレームとはホームページの構成や骨組みを確認するための設計図のようなもので、これによりデザイナーやエンジニアなどの業者側のクリエイターとあなた（クライアント）との間で、どんなホームページを作るのか視覚的に共有することができます。
特に決まりはないですが、余計な印象などを排するためにモノクロで作成されることが多く、味気ない印象を受けるかもしれません。
しかしワイヤーフレームの目的はコンテンツの配置や大まかなレイアウトを検証すること、そして必要なコンテンツや仕掛けが不足なく組み込まれているかを確認することなので心配いりません。
モックアップ作成
ワイヤーフレームを元に、モックアップを制作します。
モックアップとはホームページのデザインを実際の見た目と同じように制作するもので、「Webデザイン」と聞いたときに多くの人がイメージする作業のことです。
この工程でホームページのカラーや装飾、レイアウトなどを固めていきます。
なおホームページではボタンをクリックしたときの動作など、モーション（アニメーション）も重要なポイントです。
そのため最近のホームページ制作では、モックアップ作成と次に紹介するプロトタイプ作成が同時にすすめられるケースもあります。
プロトタイプ作成
モックアップではモーションが表現できないため、どうしてもホームページの操作性（使いやすさ）など機能面の確認には不十分です。
そのため、それらの検証をするために実際の動きを追加したプロトタイプを作成します。
プロトタイプではモーションだけでなく、リンクをクリックした際にどのページに移動するのかなど、リンク構成も確認できます。
実際のホームページにかなり近い感覚で使い勝手を検証できますので、完成イメージが一気に具体的になります。
ホームページ構築
モックアップやプロトタイプでデザインやユーザビリティ（使いやすさ）の確認ができたら、ホームページを構築していきます。
HTMLとかCSSという言葉を聞いたことがあるかもしれませんが、それらの言語（マークアップ言語）を使ってWebブラウザでホームページを表示できるように組み立てていきます。
実際の現場では、ワイヤーフレーム～ホームページ構築までの流れは業者や制作する内容によってさまざまです。
ワイヤーフレームから直接プロトタイプの作成に入った方が効率的な場合もありますし、逆にプロトタイプで機能の要・不要を検証してワイヤーフレームを練り直すという工程を踏む場合もあります。
テスト・調整
ホームページの構築ができたら、テスト環境でデザインの崩れや動作の不具合がないかなどをチェックします。
SEOに必要なメタタグ設定、SNS連携に必要なOGP設定などはこの工程で行われることが多いです。
公開・運用
テストで問題なければ、本番用サーバーにデータ一式をアップロードしてホームページ公開となります。
ただ、ホームページを公開しただけでは成果が出ることはありません。
新しい情報を追加したりしてホームページのコンテンツを増やしていくことで、Google検索エンジンやSNSからのアクセス流入を生むことができます。
実のところ、ホームページを継続的に運用（更新）できる会社は多くありません。
そのためインターネット上にあるほとんどのホームページは、たとえ設計がしっかりしていても成果をさせていないのが実情です。
しかしこれは逆に言えば、コツコツ運用さえできれば大部分の競合から抜きん出ることができるということでもあるので、放置せず育てていってほしいと思います。
まとめ
以上、お問い合わせから納品までのホームページ制作の流れを解説しました。
成果の出せるホームページを作るためには、デザイン制作（モックアップ作成）より前の工程がとても大切です。
しかし格安ホームページ制作業者では、それらの工程を省略して、いきなりデザイン制作から取り掛かるというケースもあります。
お問い合わせの際に制作の流れを大まかに聞かせてもらい、納得してから具体的な話を進めるようにしましょう。
