ホームページ制作5ステップを知り全体像を把握しよう！
それでは、今回は「ホームページ制作の流れ」を学んでいきましょう！
これから紹介する5ステップは、「ヒアリングから始まり、デザイン選定、制作、確認・納品、そして運用サポート」まで。
クライアント案件はもちろん、自分のサイト制作にも役立つ、ホームページ制作の“基本フロー”です。
この流れを理解すれば、「案件を受けてもちゃんと進められるかな…」という不安がなくなり、ホームページ制作の全体像を掴めます！
ホームページ制作の全体の流れを知ろう
ホームページ制作は「むずかしそう…」と感じる人も多いですが、実際は大きく分けるとシンプルな流れで進んでいきます。
基本的な5ステップは以下の通りです。
この流れを押さえておくだけで、全体像を理解でき、制作途中で迷子にならないですよ！
それでは１つずつ見ていきましょう！
ステップ1 ヒアリング
制作の目的を明確にする
ホームページ制作の最初のステップは、お客様が「なぜホームページを作りたいのか」をはっきりさせることです。
ここが曖昧だと、デザインやページ構成、また集客の施策が必要かわからず、お客様のニーズに応えられないからです。
主な目的の例は以下の通りです。
ピラティススタジオの新規顧客を増やしたいな
お店のホームページがないから、看板代わりに作成したいわ
古いホームページをリニューアルしたい
私がOLTANAでホームページ制作をする際に、お客様から実際にヒアリングした内容ですよ。
集客をしたい、看板代わりにホームページが欲しいなど、お客様ごとにホームページの制作意図が変わってきます。
そこをヒアリングで明らかにしていきますよ！
必要ページ・機能の確認
| よくあるページ構成 | |
|---|---|
| ページ名 | 役割 |
| トップページ | サイト全体の入口、魅力を一目で伝える |
| 会社概要・プロフィール | 信頼感を与える情報 |
| サービス内容 | 提供する商品・サービスの詳細 |
| お問い合わせ | 質問や申込みを受け付ける |
| ブログ／お知らせ | 最新情報や活動報告を掲載 |
目的が決まったら、次に必要なページや機能を整理します。
制作範囲や納期、見積もりがスムーズになるんですよね。
ここでページ構成の話はしましたが、オルタナはトップページ１枚でも十分お客様のニーズに応えられる仕様になっています！
トップページ１枚とお問い合わせページの、合計２ページ構成がよくあるパターンでしたね。
ただ、そこはお客様にヒアリングをしてページの構成は決めていきましょう。
確認しておきたい機能
特に確認しておきたい機能ってあるかな？
特に、予約機能については必要か確認しておきたいですね！
なぜなら、1番工数がかかる部分だからです。
ステップ2 デザイン選定＆素材準備
このステップでは「どんなデザインで作るか」を決め、そのデザインに必要な写真や文章を集めます。
デザインを決めてから素材を集めることで、完成形をイメージしながら準備できるんですよね。
DEMOカタログからデザインを選んでもらう
OLTANAでは、あらかじめ業種や目的に合わせたデザイン（DEMO）が用意されています。
ワイヤーフレームを一から作らなくても、このDEMOをベースに画像と文章を差し替えるだけで完成できます。
デザイン選びの流れ
- OLTANAのDEMOカタログをクライアントに見せる
- 気になるデザインを3つほど選んでもらう（自分が提案してもOK）
- 最終的に1つに絞って制作を進める
DEMOカタログ活用のメリット
- 提案資料としてそのまま使える
- 業種別・目的別に分類されていて選びやすい
- 完成形がイメージできるため、方向性がズレにくい
DEMOカタログ活用の具体例
例えば、ペットサロンの店舗から案件を受けたとします。
そのときは、以下のステップでクライアントさんに提案してみましょう。
ステップ① OLTANAのDEMOカタログをクリック
OLTANAのDEMOカタログをクリックします。
ステップ② ペットサロンがあるかを確認する
業種から探してみましょう。
ステップ③ クライアントに確認&提案する
このカタログを活用して、どのテーマを購入するべきかを判断していきます。
どうやってクライアントに提案していけばいいんでしょうか？
私はカタログを3つほど用意して、クライアントさんに選んでもらっていました。
例えば、このペットサロンのサイトと、このサイトではどちらがいいですか？
ヒアリングした内容では、私はこちらのサイトの方がいいと思います。
理由としては・・・・
というご提案のイメージですね。
素材準備の種類と期限を決める
デザインが決まったら、必要な写真や文章を集めます。
OLTANAは画像と文章を差し替えるだけで完成するため、素材が揃えば制作はとてもスムーズです。
- 写真：店舗外観5〜6枚、内観5〜6枚、商品やサービス写真3〜5枚、スタッフ写真2〜3枚
- 文章：会社概要（300〜500文字）、サービス説明（1サービスあたり200〜300文字）、キャッチコピー1〜2行
- その他：Googleマップの埋め込み用リンク、SNSリンク、問い合わせ先情報
画像は、できるかぎり多くもらっておいた方がいいですね。
私は、クライアントさんから画像を100枚以上はもらっていました。
理由としては、選択肢多い方がホームページに合う最適な画像を選べるんですよね。
素材が揃わないと制作が止まってしまうため、早めに依頼しておきましょう。
ステップ3 OLTANAで制作
このステップでは、選んだDEMOデザインを使ってホームページの土台を作り、写真や文章を差し替えて仕上げます。
DEMOインポートで土台を作る
まずは選んだDEMOデザインをWordPressにインポートします。
この作業を行うと、デモサイトと同じ構成・デザインが自分のサイトに反映され、完成形がそのまま土台になります。
- WordPress管理画面にログイン
- OLTANAの「DEMOインポート」機能を開く
- 選んだデザインを選択し、1クリックで読み込み
- サイトにデモデザインが反映されたら確認
DEMOインポートの流れですが、現時点で接骨院のホームページですよね。
ペットサロンのホームページに変更しましょう。
「このデザインに変更」をクリックすると・・・
このように簡単にペットサロンのホームページにできました！
この時点で、ページ構成やデザインはすでに完成しているので、あとは内容を差し替えるだけです。
画像・テキストの差し替えとスマホ表示確認
DEMOインポートが終わったら、クライアントから受け取った素材に差し替えていきます。
文章をどうやって作っていくべきかもわからなくて、不安なんですけど・・・
その気持ちはわかります！
ただ、順番に学んでいけば必ずわかるので、安心してくださいね。
ステップ4 確認・納品
このステップでは、完成したサイトが正しく動くかを確認し、クライアントが使えるように引き渡しますよ。
動作チェック（リンク・フォーム）
公開前に必ず全ページを確認し、リンクやフォームが正しく動作するかをチェックします。
特にフォームの送信テストは必須です。
ログイン情報と操作説明の引き渡し
最後に、クライアントへWordPressのログイン情報を共有します。
この時に口頭またはオンラインで簡単な操作説明を行うと、納品後のサポート依頼が減ります。
【渡すものの例】
- ログインURL、ユーザー名、パスワード
- 更新や操作に関する注意点
OLTANAの操作マニュアルを案内しておくのもいいですね。
ステップ5 運用サポート
ホームページは公開して終わりではありません。
公開後の更新や改善を続けることで、集客や信頼性の向上につながります。
制作者として更新作業のフォローや改善提案を行うことで、クライアントとの長期的な関係も築きやすくなります。
更新作業のフォロー
クライアントが自分で更新できるようにマニュアルを渡しても、最初は不安や疑問が出ることがあります。
納品後、1ヶ月間の無料サポートをつけると喜ばれましたよ！
クライアントさんも自分でブログを更新しようとしても、難しい場合がありますからね。
フォロー内容の例
- 画像や文章の差し替えサポート
- ブログやお知らせ投稿のサポート
- SNS連携の設定や更新サポート
| 保守契約に含まれる例 | |
|---|---|
| 項目 | 内容例 |
| 更新作業代行 | 月○回までの画像差し替えや文章修正 |
| バックアップ | 月1回のデータバックアップ |
| セキュリティ対策 | プラグイン更新や脆弱性チェック |
| 簡易サポート | メールやチャットでの質問対応 |
月額制の保守契約を用意しておくと、安定収入にもつながりますよ。
改善提案
サイトは公開後にアクセス状況や問い合わせ件数を見ながら改善もできたらなおいいですね。
アクセス解析ツール（Google AnalyticsやSearch Console）を使えば、どのページがよく見られているかがわかります。
改善提案例
- よく見られているページに写真や文章を追加して強化する
- 問い合わせにつながる導線をわかりやすく改善する
- 季節やイベントに合わせてトップ画像やバナーを変更する
| 改善提案のタイミング目安 | |
|---|---|
| タイミング | 提案例 |
| 公開後1か月 | アクセス数や表示スピードの確認、軽微な修正 |
| 公開後3か月 | 人気ページの分析、導線改善 |
| 半年ごと | 全体デザインの見直し、画像や文章の更新 |
定期的に改善提案をすることで、クライアントに「頼りになる制作者」と感じてもらえ、継続案件や紹介にもつながります。
改善提案のタイミングで、SNSやLINE構築なども提案できると、なおいいですね！
困ったら相談してみよう！
- 相談先→
