「制作会社に依頼してから公開まで、実際にどんな作業が行われているのか？」——依頼する側はなかなか見えにくいweb制作の現場。
この記事では、web制作プロジェクトの全工程をプロの視点で解説します。各フェーズで制作側が実際に何を考え・何を判断しているかを知ることで、スムーズなプロジェクト進行と高品質な成果物につながります。
web制作プロジェクトの全体像
web制作は大きく7つのフェーズで進みます。それぞれの工程には固有の役割があり、前工程の品質が後工程に直結する連続したプロセスです。
| フェーズ | 主な作業 | 期間目安 | 主な担当 |
|---|---|---|---|
| 1. ヒアリング・要件定義 | 目的・ターゲット・機能要件の整理 | 1〜2週間 | PM・ディレクター |
| 2. 情報設計・サイトマップ | ページ構成・導線設計・SEO構造設計 | 1週間 | IA・ディレクター |
| 3. ワイヤーフレーム | ページレイアウト・コンテンツ配置の設計 | 1〜2週間 | デザイナー・IA |
| 4. ビジュアルデザイン | デザインカンプ作成・トーン&マナーの決定 | 1〜3週間 | UIデザイナー |
| 5. コーディング・実装 | HTML/CSS/JS・CMS構築・機能開発 | 2〜4週間 | エンジニア |
| 6. テスト・品質確認 | 表示確認・動作テスト・SEOチェック | 1週間 | 全員 |
| 7. 公開・運用開始 | サーバー設定・アナリティクス設定・公開 | 数日〜1週間 | エンジニア・PM |
PHASE 1：ヒアリング・要件定義
プロが最初にすること
プロジェクトのスタートは「ヒアリング」ですが、優れた制作会社はただ要望を聞くだけではありません。クライアントの事業・競合・ターゲットユーザーを深く理解した上で、「本当に必要なサイトとは何か」を一緒に考えます。
ヒアリングで確認すべき重要項目
- 事業目標：このサイトで達成したいビジネス上の成果は何か（問い合わせ増・採用・売上など）
- ターゲットユーザー：誰が・どんな状況で・何を求めてサイトを訪れるか
- 競合分析：同業他社のサイトの強みと弱みはどこか
- 制約条件：予算・公開期限・既存資産（ロゴ・ブランドガイドラインなど）
- 成功指標（KPI）：完成後に何で成功を測るか（問い合わせ数・PV数・コンバージョン率など）
要件定義が曖昧なままプロジェクトが進むと、後工程でのやり直しが増え、コストと時間が膨らみます。この工程への投資は、プロジェクト全体の品質を左右します。
PHASE 2：情報設計・サイトマップ作成
サイトの骨格を設計する
「どんなページが必要で、ユーザーをどう誘導するか」を設計するのが情報設計です。単純にページ一覧を作るのではなく、ユーザーの行動導線・コンバージョンへの最短経路を論理的に設計します。
情報設計で制作側が考えていること
- ユーザーの流入経路：検索・SNS・広告など、どこから来るユーザーをどのページで受け止めるか
- コンバージョンへの導線：問い合わせ・購入・予約など、目標行動へのルート設計
- SEOキーワードとページの対応：どのページでどのキーワードを狙うか
- グローバルナビゲーションの設計：ユーザーが迷わないメニュー構造
サイトマップは単なる「ページ一覧」ではなく、ビジネス目標とユーザー導線が統合された設計図です。
PHASE 3：ワイヤーフレーム・UI設計
見た目の前に「構造」を決める
ワイヤーフレームとは、デザインを加える前の「ページのレイアウト設計図」です。グレースケールのボックスと文字だけで、どこに何を配置するかを決めます。
この工程を省略して一気にデザインに進むと、「コンテンツが収まらない」「ユーザーが迷う」という問題が後から発覚しやすくなります。
プロがワイヤーフレームで検討すること
- ファーストビュー（スクロールせずに見える範囲）に何を配置するか
- CTAボタン（問い合わせ・予約・購入など）の位置と視認性
- モバイルファーストでのレイアウト優先順位
- 各セクションのコンテンツ量と視覚的なバランス
クライアントの確認・フィードバックを受けるのもこのタイミングが最も効率的です。ワイヤーフレーム段階で方向性を合わせることで、デザイン修正を最小限に抑えられます。
PHASE 4：ビジュアルデザイン
ブランドをビジュアルに落とし込む
ワイヤーフレームの骨格にビジュアルを加えるのがこの工程です。単に「きれいに装飾する」のではなく、企業・ブランドのアイデンティティを視覚言語として表現します。
デザイナーが決定するビジュアル要素
- カラーパレット：ブランドイメージと心理的効果を考慮した色の組み合わせ
- タイポグラフィ：フォントの種類・サイズ・行間・見出し階層
- 余白設計：情報密度とリーダビリティのバランス
- 画像・イラストのトーン：写真スタイル・イラストの有無と方向性
- アニメーション指針：スクロールアニメーション・ホバーエフェクトの設計
デザインカンプの確認ポイント
デザインカンプ（完成イメージ画像）をクライアントに確認してもらう際、「なんとなく好き・嫌い」ではなく、「ターゲットユーザーに刺さるか」「ビジネス目標に沿っているか」という視点でフィードバックすることが、高品質な成果物につながります。
PHASE 5：コーディング・実装
デザインをブラウザで動くように実装する
承認されたデザインカンプをもとに、HTML/CSS/JavaScriptで実際のWebページを作成します。これがコーディング工程です。
コーディングで制作側が行うこと
- HTML：ページの構造をセマンティックなタグで記述（SEOにも直結）
- CSS：デザインの再現・レスポンシブ対応・アニメーション実装
- JavaScript：インタラクション・フォームバリデーション・動的な表示制御
- CMS構築：WordPressなどのCMSセットアップ・テーマ開発・プラグイン設定
- パフォーマンス最適化：画像圧縮・コードの軽量化・表示速度の改善
スマートフォン対応は必須
現在、Webサイトへのアクセスの60〜70%はスマートフォンからです。レスポンシブデザイン（画面サイズに応じてレイアウトが最適化される設計）は品質基準として外せない要素です。
PHASE 6：テスト・品質確認
公開前の最終チェックで品質を担保する
「動くものができた」で終わりではありません。公開前の品質確認は、ユーザー体験とビジネス成果を守るための重要な工程です。
テストで確認する主な項目
| テスト種別 | 確認内容 |
|---|---|
| ブラウザテスト | Chrome・Safari・Firefox・Edge での表示確認 |
| デバイステスト | PC・タブレット・各種スマートフォンでの表示確認 |
| リンクテスト | 全リンクの遷移先が正しいか |
| フォームテスト | 送信・バリデーション・自動返信メールの動作確認 |
| 表示速度テスト | Google PageSpeed InsightsなどでCore Web Vitalsを確認 |
| SEOチェック | メタタグ・OGP・構造化データ・noindexの誤設定がないか |
| アクセシビリティ | alt属性・コントラスト比・キーボード操作の確認 |
このテスト工程を丁寧に行うかどうかで、公開後のトラブル発生率が大きく変わります。
PHASE 7：公開・運用開始
「公開したら終わり」ではない
テストが完了したら、本番サーバーへのデプロイ（ファイルの移行）を行います。
公開時に行う作業
- 本番サーバーへのファイルアップロード・データベース移行
- SSL証明書の確認（httpsでアクセスできるか）
- Google Search ConsoleへのサイトマップURL登録
- Google Analytics（GA4）の計測設定と動作確認
- リダイレクト設定（旧URLが存在する場合）
公開は「ゴール」ではなく「スタート」です。Googleがサイトをインデックスし、検索結果に表示され始めるまでには数週間かかります。公開後のアクセスデータを確認しながら、継続的な改善を行うことが成果につながります。
工程ごとにクライアントが関わるタイミング
| フェーズ | クライアントの作業 | 所要時間の目安 |
|---|---|---|
| ヒアリング | 要望・目的・素材の整理と共有 | 数時間〜数日 |
| 情報設計確認 | サイトマップ・導線のフィードバック | 1〜3日 |
| ワイヤーフレーム確認 | レイアウト・コンテンツ配置の承認 | 1〜3日 |
| デザイン確認 | デザインカンプのフィードバック・承認 | 1〜5日 |
| コーディング中 | テキスト・画像・動画の素材納品 | 並行して進める |
| テスト確認 | 実際のサイトでの最終確認 | 1〜3日 |
クライアント側の確認・素材準備が遅れると、全体のスケジュールに影響します。制作開始と同時に素材準備をスタートしておくことが、スムーズな公開につながります。
イロドリの制作プロセス
千葉県船橋市を拠点とするweb制作会社イロドリでは、ヒアリングから公開まで一貫して対応しています。
10万円〜の料金プランで、SEO設計・レスポンシブ対応・CMS導入を含む明確な制作フローを提供しています。「どんな流れで作ってもらえるか不安」という方も、まずはご相談ください。
まとめ
web制作は単なる「デザインとコーディング」ではなく、ヒアリング・情報設計・UI設計・デザイン・実装・テスト・公開という7つの工程が連携した専門的なプロジェクトです。
各フェーズで制作側が何を考え・何を判断しているかを理解することで、クライアントとして適切なフィードバックができ、結果として高品質なサイトが完成します。制作会社を選ぶ際は、このプロセスを丁寧に説明してくれるかどうかも、信頼できるパートナーかどうかを見極める重要な基準のひとつです。
