成功へのWeb戦略：ホームページ制作の流れ完全ガイド[2023]

最近ではWebサイト制作を仕事にするフリーランスの人がすごく増えましたよね。
コロナ禍の後押しもありリモートワークが増えたこともあったり、ママが子育てしながらお家で働くひとつの働き方としても人気に。

ただWeb制作会社への就職のハードルは、実は昔よりもすごく上がっていて。
オンラインスクールで学び、いきなりフリーランスになってしまったという人も多く、実務経験がない人が少ないなという印象があります。

ホームページは結果につなげるためにやることが、実はとっても多い。

だからこそお願いする側のオーナーさんにも、サービスを提供する側のフリーランスのWebデザイナーさんにも。

そういった流れや大事にした方がいいことを知っておいてほしいなと思い、ホームページ制作についての解説をしようという覚悟を決めました。

実際に書き出したら、永遠に終わらないコンテンツになりそうな気がしています。
ですが、本を1冊執筆するくらいの覚悟で進めていこうと思います！笑

この記事を皮切りに、1ページずつ読み進めていただければ自作ホームページでも結果につながるものを書いていく予定です。

また、フリーランスのWebデザイナーの人にとっては単価アップになるきっかけや自分の強みを見つける、またどの工程に特化するかなどの気づきになれば幸いです。

ホームページ制作に携わる人はどんな人？

まず、結果につながるホームページ制作を行なっている制作会社は「ひとりで作ることはありません」
それぞれのプロが集結して、サイトを制作します。

こういった多くの人が関わり、チーム一丸となってサイト制作は行われています。

ただ、すべてを専門家に委託するとその分費用も高額になるため、自分でできる箇所を見極めて頼むプロを選定することも大切になってきます。

わたし自身もホームページ制作をご依頼いただく場合は、お客様のご予算や求める結果に応じて、ご提案時に選出する専門家は異なります。

では、これからこれらの人々がどんな順番でどのような流れで関わり、サイトが完成していくのかを解説していきますね！

ホームページ制作の流れ　
〜お問い合わせ･事前調査編〜

まずは、お客様からお問い合わせやご相談をいただきます。

初回ヒアリングの日程を調整し、お客様のお悩みや求める結果、現状の集客状況などをお伺いします。
その際は、基本的に営業担当やWebディレクター、議事録を残すためのアシスタントなどが同席します。

1. お問い合わせ・相談
2. お打ち合わせの日程調整
3. 現状分析（現行サイトやSNS、Googleビジネスプロフィールなどを確認）
4. 現状分析をもとにご提案書雛形を作成
5. お打ち合わせ・ヒアリング
   • 現在の会社情報
     • 現在の集客導線やその状況
     • 現在のお悩み
   • 求める結果（問い合わせ数、売上、導線など）
   • 現在のエンドユーザー情報
     • 対応エリア
     • 年齢層
     • 性別
     • 契約につながりやすいおターゲット層
     • よくあるお問い合わせなど
   • 事前に作成した提案書雛形や質問表をもとに差分や現状をすり合わせ
6. ヒアリング内容をもとにご提案書清書を作成
   • 他の専門家も交え、結果につなげるためのご提案書を作成
   • 集客が200％うまくいく、SNSやMEO・SEOを含めた提案を行う
7. 提案書とともにお見積もりのお渡し

お問い合わせからご契約までに、このような流れがあります。
お見積もりは基本的に、集客が200％うまくいくであろうご提案を行い、そこからお客様のご予算や優先順位をもとに最終的なお見積りへ調整させていただきます。

私がご提案している内容は対応事例に掲載しています。

クライアントが求める結果につながる最大限のご提案をすることで、納得してご契約をいただきます。

最近ではTikTokやインスタのリールでもよく見るホームページ制作〇〇円！と固定単価で受けている人も多いと思いますよね。

ですが私は、結果に繋がるページ数はクライアントの業種やエリアごとに全く異なると思っています。
そのため、パック売りはしないという信念でホームページ制作をお受けさせていただいております。

ホームページ制作の流れ　
〜ご契約後は本格的なヒアリング〜

ご契約となったら、本格的な取材（ヒアリング）を開始します。

実は、ホームページ制作の中で1番重要となるのがこの「ヒアリング」の時間です。

わたし自身も多くの制作会社様とお取引をさせて頂いていますが、結果につながるものを作る会社様ほど、この時間が1番多い印象です。
クライアント自身もこの期間にWeb集客に関する知識を得ていきます。

ホームページ制作は、制作会社だけで結果が出るものではありません。
運用していくのは制作会社とクライアントです。

よく、丸投げOK！という制作会社も見かけますが、丸投げで制作されたサイトほど結果のでないものになっているところが多い。
公開後の記事更新やSNS運用をお客様がしていくことを考えると、ここを大切にしてくれる会社に依頼してほしいものです。

近年のGoogleは、その会社の誠実性や権威性まで見抜きます。
だからこそ、誠実な情報や第一次情報がとても大切な時代になっています。

ヒアリングで決めていく内容

以下は、基本的にはすべてを対応する必要がありますが、その時々で取捨選択し対応している内容です。

それぞれの内容については改めて詳細を記事にしたいと思いますが、項目として参考にしてもらえたらと思います！

• 理想の働き方や稼働スタイルを伺う
  どのくらいWeb担当者として時間を使えるのかを判断します。
• 理想の売上や時給ベースでの単価目標やサイトの目標数値などを決めます。
  KPIやKGIなどを決定すると、おのずと必要なボリュームを算出できます。
• 営業時間や定休日など会社情報の確認
• 各種資格や保証などの確認
  建築系やサロンなどの場合は、エンドユーザーの安心感や信頼性につながるため
• サービス内容をヒアリング
  オーナーの言葉を、エンドユーザーにわかりやすい形に整理します
• ターゲット想定
• SNS、MEO、SEOを考慮したカスタマージャーニーの策定
  • ユーザーとの出会いからサイト上のゴール、その後の流れを決めます。
  • 各タッチポイントごとのユーザーの感情やデバイス
  • どこの時点で何が必要なのかを洗い出し
  • どの媒体でどのコンセプトで発信をするのかを検討
  • サービス契約時や提供時などの必要情報やその流れの確認
• エンドユーザーの感情設計
• リピーター、ロイヤルカスタマー育成マップの作成
• サイトマップ作成
  • リニューアルの場合は、既存ページの洗い出しと整理
  • 作成ページの洗い出し
  • ページごとのキーワード選定
  • ページごとの訴求の考察
  • ページごとの骨子作成
• ドメイン決定
• サーバーを検討し、各種契約手続きのサポート

このような内容をお伺いし、情報を整理します。
成果を求める場合、必ずやるべき内容ですがすでに決まっている企業やクライアントの場合は、その部分は資料などをいただきこちらで対応する箇所もあります。

ヒアリング内容をもとにワイヤーフレーム（構成案）を作成

ヒアリング内容をもとに、各ページごとのワイヤーフレームを作成していきます。
この際、ワイヤーフレームの前にライターが入るページとそうでないページを分けて分担することが多いです。

ライターさんはワードなどのドキュメントファイルで納品してくれるため、それをこのようにどう見せるかという制作を行う場合と、執筆データをそのままデザイナーにお渡ししてワイヤーフレーム作成もデザイナーが対応する場合があります。

わたしの場合は、各種下層ページからそれぞれゴールやキーワードなどを決めて、ひとつずつ作成していきます。

中には、トップデザインを先行して進めるためにトップページから作成する制作会社も多いですが、下層ページから作成していくことでサイト全体のコンセプトも見えてきます。

各サービスごとの強みや訴求が明確になるため最終的にトップページを作成する方が、より新規ユーザー向けにわかりやすくかつ探しやすいコンテンツを作成することができます。

また、この時に記事をデータベースから取得するループの仕様やスライダーなどの動き的な指示、お問い合わせフォームの仕様などの要件策定も進め、実装（コーディング）担当者がワイヤーフレームを見れば、何をどのようにすればいいかが伝わるようにしています。

また、SEO的にもサイト全体のキーワードが確実なものになるためトップページをどんなキーワードで上げていきたいのかなどを決めやすくもなります。

サイトマップと照らし合わせながら、つくりやすい順やクライアントが話しやすい順に進めていくと全体像がさらに見える化されていきます。

素材のご提供

ホームページ制作時には、ヒアリング時やサイト制作時に必要となる素材が多数存在します。

サイトとの連携に必要な各種SNSやGoogleアカウントなどのログイン情報が必要になります。
またGoogleビジネスプロフィールの連携をご希望の場合は、クレジットカード設定などもサポート。

ロゴデータがある場合はそのデータや、名刺、チラシ、各種資格証明書のスキャンデータ、商品カタログや会社案内、メニュー表などのすでにお持ちのサービス情報や、エンドユーザーの安心感や信頼に繋がる情報をできるだけすべてご提供いただきます。

それとは別にデータをアップするサーバー情報などをいただき、ご指定のサーバー内に納品することも。

素材写真の撮影

ワイヤーフレームが完成したら、次はデザイン！と思われがちですが、その前に必要なのが撮影です。

それぞれのページのそれぞれのセクションごとに、訴求したい内容やエンドユーザーに持ってほしい感情をもとに写真撮影を行います。

デザイナーとすり合わせをしながら、デザインと同時進行で進める場合もありますが、基本的には訴求したい内容とお写真からの訴求がズレないことを最優先にしたいと考えています。

ワイヤーフレームを見るとわかると思いますが、建築業者様であれば「集合写真」「スタッフ写真」「事業所の外観やショールーム」「お問い合わせ風景」「現場調査」「ご提案写真」「資格証明書など」「施工時の写真」「お客様との商談」などさまざまな構図の写真素材が必要になります。

各ページの中にどんなコンテンツがあるかわかると、カメラマンの方にもどのような写真が必要なのかを伝えやすいため、その流れにさせていただいています。
カメラマンを入れるご予算が無い場合などは、私が撮影したりお客様にサンプルをお渡ししてご自身で対応頂く場合もあります。

起業家さんの場合は、すでにお持ちの写真をご共有いただき撮影なしで進むことも多いですが、基本的には構成に合わせて撮影もされることをオススメさせていただいています。

ただ、これは最大限やった方がいいことなので、撮影ができない場合などは元々お持ちの撮影素材がある場合はそれらのデータをいただき、アートディレクターに選定を含めてにお任せすることもあります。

構成が決まったら、デザイン制作

ワイヤーフレームをもとに、デザインを制作します。
ご要望や現行サイトの分析内容をもとに、スマホサイト優位なのかPCでの閲覧が優先なのかを判断し、デザイン制作を進めていきます。

わたしの場合はデザインはしないので、サイトのコンセプトやターゲットとなるエンドユーザーの雰囲気に合わせて、その領域が得意なデザイナーを選定、手配します。

ホームページ制作の「デザイナー」にも、実はいろいろな強みを持った人がいます。

キレイ目デザインが得意な人、訴求の強目な広告的なデザインがつくれる人、コーポレートサイトなどの信頼性や権威性の高いシンプルなものが得意な人。
他にもイラストも描けるデザイナーさんや、自分で撮影までを行なってくれる方など様々な人がいます。

そんなたくさんいるデザイナーさんの中から、その時々のクライアントやエンドユーザー層、つくりたい世界観に合わせて信頼できるデザイナーさんをアサインしています。

デザイナーさんへの発注時は、作成した構成案と撮影写真をセットにして依頼をします。
基本的にはトップページのファーストビューを初稿として確認させていただき、方向性が決まったら全体デザインを進めます。

この際にロゴデザインやブランドアイデンティティーなども必要な場合は、同時進行で行うことが多いです。

※ブランドアイデンティティー制作は行っているというか、できるデザイナーさんが限られているため本当に信頼を寄せているアートディレクターさんにお願いしています。

ドメイン・サーバーエンドの設定、常時SSL化

構成案やデザイン制作と同時進行で、ドメインを決めます。
ドメイン1つとっても、大切なブランディングです。

ユーザーが入力しやすいかどうかや、競合に変な業者がいないかなどを考慮しながら決めていきます。
※サイト名を決める際も同様に、指名検索の際のことなどを検討しながら進めます。

ドメインが決まったら、お客様の予算やセキュリティー対策・保守などのご要望に合わせたサーバーをご案内し、契約していただきます。
ご契約いただいた後は、こちらでサーバーの初期設定やWordPressのインストールなどを行います。

この際に、常時SSL化も同時に対応いたします。
SSL化といっても、実は常時SSL化がされていないサイトもよく見かけます。
解析時やSEO的にバグとなることもあるため、リニューアル案件の場合でも必ず確認、対応させていただきます。

※リニューアル案件の場合
・ドメインの移管やサーバーのお引越しが発生する場合はそのサポートも行います。
・実装、確認環境としてテスト環境をご用意します。

実装（フロントエンドコーディング）

デザインが出来上がったページから、サイトを構築していきます。
実装することにより、画像だったデザインがWeb上でサイトとして見れるようになり、それぞれリンクボタンとして機能したり、ページ推移ができたり、テキストがSEOに読み込まれ始めたりします。

やっと完成が見えてきますね！

全ての実装が完了したら、お客様にご確認いただきます。
その上で、気になる箇所や変更したい箇所を修正いたします。

上記参考にしているサイトは、実際にサイトを開くと星が灯る仕様です。
これはデザイン確認の段階では中々イメージし辛いものですが、実際にWeb上で見れるようになるとサイトの動きなどがクライアント様に伝わりやすくなります。

ぜひ一度ご覧いただきたいです。

品質チェック・検証作業

品質チェック・データ整理

最近では、レスポンシブデザインと言ってスマホサイトは専用で別に作ることはなく、一つのソースコードでスマホやタブレット、パソコンサイズの閲覧を切り替える形の実装をしています。
そのため、iOSやAndroidのスマホやタブレットの実機や、各種ブラウザ（Safari・Google Chrome・Firefox・edge）などでの表示確認を行います。

表示確認と合わせて、誤字脱字チェック、制作時に利用した不要なプラグインやテーマなどを削除整理します。
残ったままになっているとサイトの高速化に問題が起きるだけでなく、バージョンの互換性が悪くなったり、脆弱性が発生しサイトが感染するリスクが高まります。

セキュリティー対策・リキャプチャ設定

WordPressサイト制作が多いため、私たちはセキュリティープラグインの設置や、アクセス制御などを納品前に設定させていただいております。

検証作業

お問い合わせフォームやメルマガ登録などの各種フォームや、カレンダー連携、SNS連携などの各種システム的な箇所が問題なく機能するかどうかを確認します。

この時に、クライアント様側でも問題なく送受信ができるかなども確認させていただきます。

SEOチェック・構造化マークアップ

各ページのtitleタグやmetaディスクリプションなどの検索結果ページに表示されるテキストをキーワード選定を考慮しながら設定していきます。

更新方法レクチャー

最近では、クライアント様ご自身でサイトを更新できる仕様が当たり前のため、更新コンテンツの種類ごとに更新方法をレクチャーします。

この際に気になったことや、今後の運用についてもご相談に応じています。

こんたホームページ製作所では、フルリニューアルや新規ご制作のすべてをお任せいただいた際は、納品後3回のホームページ保健室ご利用権をお渡しさせていただいております。

サイト公開・運用開始

基本的には新規サイト制作の場合は、SEO上インデックスを急ぎたいため公開状態で実装作業をさせていただいております。
全て出揃ってから公開したいという気持ちはとてもわかるのですが、その場合さらにインデックスされるまでに時間を要するため、結果に繋がるまでの時間が先延ばしになってしまうことになります。

リニューアルなどでテスト環境で構築を進めていた場合は、本番環境にリリースしその後で各種検証作業を進めます。
また公開時にはご希望に合わせて、バックアップツールなどのご案内もいたします。

各種解析ツールの設置

サイト公開時には、以下のような解析ツールの設置もサポートしております。

サイト公開後の運用相談

サイト公開後は、3回程度の運用相談をお受けしております。
また当社制作箇所についても3ヶ月間は無償で修正が可能にしています。
※追加変更などは除く

• 使い方を忘れてしまった、こういう時はどうしたらいいの？
• アイキャッチの作り方や写真の撮り方を教えて欲しい。
• SNSでもシェアする際は、本来はどこまでやった方がいいの？

など、運用を開始してからの方が疑問に思うことは多いんですよね。
なので当社で制作させていただいたお客様にはホームページ保健室のご利用チケットをお渡しさせていただいております。

また、3ヶ月間という期間を設けることでその間にクライアント様自信もサイトを見たり更新したりするようになってくださってるなと感じます。

ホームページ制作まとめ

Webサイト制作は、ただ美しいデザインを施すだけではありません。
それぞれのステップにおいて、多くの専門知識が必要とされる技術的な作業です。

そして、その全ては目に見えない「結果」という目標に向かって進められます。

この記事では、ホームページ制作の各ステップを、初めての方でも理解しやすいようにできる限り丁寧に解説してきました。制作に関わる人々の役割から、デザインの選定、コーディングの技術、さらにはSEO対策に至るまで、一連のプロセスを明らかにしたかっだんですね。

制作フローの最後には、品質のチェックと公開後の運用サポートがあります。
これにより、サイトが長期にわたって安定したパフォーマンスを発揮し、クライアントのビジネスを確実に支えることができるんです。

当社では、納品後のフォローアップも重視しており、お客様が安心してサイトを運用できるよう全面的にバックアップいたします。
今回の記事を通じて、ホームページ制作の奥深さとそれを成功に導くためのポイントをご理解いただけたら幸いです。

私たちはこれからも、クライアントの目標達成を全力でサポートし続けます。
ホームページ制作に関するお問い合わせやご相談はいつでもお待ちしております。