Webサイト制作の全体像を理解しよう！制作に必要な5つのステップと各工程の役割

前回の記事では、どんな技術を使ってWebサイトを作っても、最終的にブラウザが理解できるのは「HTML、CSS、JavaScript、メディア」の4つだけということを学びました。

今回は、その4つの要素を生み出すために、実際にWebサイトを制作する際にどのようなステップ（工程）が必要なのか、そして各ステップではどんな役割・技術が求められるのかを詳しく解説します。

特に「副業でWebサイト制作に関わりたい」と考えている方には、制作の全体像を知る上で重要な内容です。

「Webデザイナー」という言葉の誤解

「Webデザイナー = Webサイトを作る人全般」という誤解

副業やフリーランスを目指す人の間で「Webデザイナーになりたい」という声をよく聞きます。

しかし、多くの人が「Webデザイナー」という言葉を誤解しています。

多くの人が思っている「Webデザイナー」のイメージ

• おしゃれなWebサイトを一人で完成させる人
• PhotoshopやFigmaを覚えれば、すぐにWebサイトが作れる
• 企画からプログラミングまで、すべてを一人でこなす人
• デザインと技術の両方を自由に操れる人

「Webデザイナー」は制作工程の一部を担当する専門職

実際には、Webサイト制作には複数の工程があり、「Webデザイナー」は本来、その中の特定の工程を専門とする職種です。

本来の「Webデザイナー」の役割

• サイトの見た目（ビジュアルデザイン）を設計する
• ユーザーが使いやすいレイアウトを考える（UI設計）
• 色彩・フォント・画像を選択してデザインカンプを作成する
• ブランドイメージに合ったビジュアル表現を考える

重要なポイント

「Webデザイナー」は主に「設計図（デザインカンプ）」を作る専門家であり、それを実際に動くWebサイトにするには別の工程・別の専門技術が必要です。

なぜこの誤解が生まれるのか？

この誤解が生まれる理由は、小規模なWebサイト制作では一人で複数の工程を担当することが多いからです。

小規模なWebサイトを作る場合、予算や規模の関係で、一人が複数の役割を兼任することがよくあります。

そのため「Webデザイナー」と名乗っていても、実際にはデザイン以外の技術も身につけて幅広く対応している人が多いのです。

つまり、「Webデザイナー」という職種と「Webサイト制作者」という仕事は、実は異なる概念なのです。

Webサイト制作に必要な5つのステップと役割

では、実際にWebサイトを制作する際には、どのような工程が必要なのでしょうか？

Webサイトを制作する場合の、典型的な工程を5つのステップに分けて解説します。

ステップ1：企画・戦略立案

このステップでやること

• クライアントの要望・目的をヒアリング
• ターゲットユーザーの設定
• サイト全体の構成（どのようなページが必要か）を決定
• 競合サイトの調査・分析
• プロジェクトの予算・納期の調整

具体例　（地元の美容院のWebサイトを作る場合）

• 「新規客の獲得が目的」
• 「ターゲットは30～40代の女性」
• 「必要なページ：トップ、サービス紹介、料金表、スタッフ紹介、アクセス、予約フォーム」
• 「近隣の美容院のサイトを調査して差別化ポイントを見つける」

この工程を専門とする職種

• Webディレクター
• Webプランナー
• Webコンサルタント

ステップ2：コンテンツ企画・ライティング

このステップでやること

• 各ページに掲載する文章の作成
• SEO（検索エンジン対策）を意識したライティング
• 写真撮影の企画・ディレクション
• キャッチコピーやボタンのテキスト作成

具体例　（美容院のサイトの場合）

• 「あなたの『なりたい』を叶える、地域密着25年の実績」（キャッチコピー）
• サービス紹介文、料金表、スタッフプロフィール文章
• 「ご予約はこちら」「詳しく見る」などのボタンテキスト
• 店内・施術風景の写真撮影企画

この工程を専門とする職種

• Webライター
• コピーライター
• SEOライター
• Webカメラマン

ステップ3：デザイン設計

このステップでやること

• サイト全体のビジュアルコンセプト決定
• 各ページのレイアウト設計
• カラーパレット・フォントの選択
• デザインカンプ（完成見本）の作成
• PC・スマートフォン両対応のデザイン

具体例　（美容院のサイトの場合）

• 「上品で親しみやすい」ビジュアルコンセプト
• 温かみのある色合い（ベージュ・ブラウン系）を選択
• 読みやすいフォントサイズ・行間の設定
• 予約ボタンを目立つ位置に配置
• スマホでも見やすいレイアウトに調整

この工程を専門とする職種

• Webデザイナー
• UI/UXデザイナー
• グラフィックデザイナー

ステップ4：プログラミング実装

このステップでやること

• デザインカンプを基にHTML・CSSでページを構築
• JavaScriptで動的な機能を実装
• レスポンシブ対応（PC・スマホ・タブレット対応）
• お問い合わせフォームなどの機能実装
• 表示速度・SEOの最適化

具体例　（美容院のサイトの場合）

• デザインカンプ通りの見た目をHTML・CSSで再現
• 画像スライダー、ハンバーガーメニューをJavaScriptで実装
• スマホで見た時に適切にレイアウトが変わるよう調整
• 予約フォームが正しく動作するよう実装
• Googleで検索されやすくなるよう最適化

この工程を専門とする職種

• フロントエンドエンジニア
• マークアップエンジニア
• Webプログラマー

ステップ5：公開・運用・保守

このステップでやること

• サーバー・ドメインの設定
• Webサイトの公開作業
• SSL証明書の設定（セキュリティ対策）
• Google Analyticsなど解析ツールの設定
• 定期的な更新・メンテナンス

具体例 （美容院のサイトの場合）

• レンタルサーバーの契約・設定
• 「salon-example.com」などの独自ドメイン取得
• https:// で安全にアクセスできるよう設定
• アクセス数や予約数を測定できるよう解析設定
• 新しいサービスやキャンペーン情報の定期更新

この工程を専門とする職種

• サーバーエンジニア（インフラエンジニア）
• Webマーケター
• サイト運用担当者

各ステップと「ブラウザが理解できる4つの要素」の関係

前回学んだ「ブラウザが理解できる4つの要素」が、各制作ステップでどのように生み出されるかを整理しましょう。

HTML（構造）の生成過程

関わるステップ

• ステップ1（企画）：サイト全体の構造・ページ構成を決定
• ステップ2（コンテンツ）：見出し・段落・リストなどの文章構造を作成
• ステップ4（プログラミング）：構造をHTMLタグで実装

具体例

1. 企画段階で「トップページには、キャッチコピー→サービス紹介→お客様の声→予約ボタンの順序で配置」と決定
2. コンテンツ段階で「サービス紹介は3つの項目に分けて、それぞれ見出しと説明文を作成」と具体化
3. プログラミング段階で「<h2>タグで見出し、<p>タグで説明文、<button>タグで予約ボタン」として実装

CSS（装飾）の生成過程

関わるステップ

• ステップ1（企画）：ブランドイメージ・ターゲットに合った方向性を決定
• ステップ3（デザイン）：具体的な色・フォント・レイアウトを設計
• ステップ4（プログラミング）：デザインをCSSで実装

JavaScript（動き）の生成過程

関わるステップ

• ステップ3（デザイン）：ユーザビリティを考慮した動作を設計
• ステップ4（プログラミング）：実際の動作をJavaScriptで実装

メディア（画像・動画）の生成過程

関わるステップ

• ステップ2（コンテンツ）：必要な画像・動画の企画・撮影・編集
• ステップ3（デザイン）：デザインに合わせた画像処理・最適化
• ステップ4（プログラミング）：画像をWebに最適化して実装

小規模案件では一人で複数の工程を担当することが多い

大規模制作と小規模制作の違い

大規模なWebサイト制作（企業サイト・ECサイトなど）

• 各工程に専門スタッフを配置
• Webディレクター、デザイナー、エンジニア、ライターなどがチームで分業
• 高い専門性と品質を追求

小規模なWebサイト制作（個人商店・小規模企業など）

• 予算・規模の制約により、一人で複数の工程を担当
• 「何でもできる人」が求められる
• 効率性とコストパフォーマンスを重視

小規模案件での現実的な対応パターン

パターン1：得意分野を中心に、他の分野をカバー

• デザインが得意な人：ステップ3を中心に、企画・実装も基礎レベルで対応
• プログラミングが得意な人：ステップ4を中心に、シンプルなデザインで対応
• ライティングが得意な人：ステップ2を中心に、デザインはテンプレートを活用

パターン2：外部リソースを活用して効率化

• クライアントとの分業：原稿や写真はクライアント側で準備してもらう
• 素材サイトの活用：写真は無料素材、デザインは既存テンプレートを使用
• ツールの活用：ノーコードツールやCMSで実装を効率化

パターン3：段階的にスキルを拡張

1. 第1段階：一つの工程を専門として実績を積む
2. 第2段階：隣接する工程の基礎スキルを習得
3. 第3段階：幅広い工程に対応できる「制作者」として成長

一人で対応する場合の重要なポイント

すべてを完璧にする必要はない

• 得意分野で高い品質を提供し、苦手分野は必要十分なレベルで対応
• クライアントの予算と要求に応じて、対応範囲を調整

効率的な学習が重要

• 制作の全体像を理解した上で、必要なスキルを優先順位をつけて習得
• 一つずつ着実にスキルアップしていく

制作に関わる人が理解しておくべき基礎技術

なぜ全体像の理解が重要なのか？

どの工程を専門にする場合でも、制作全体の流れと基礎技術を理解しておくことが重要です。

理由1：他の工程との連携が効率的になる

• デザイナーがプログラミングの制約を理解していれば、実装しやすいデザインが作れる
• エンジニアがデザインの意図を理解していれば、より適切な実装ができる

理由2：クライアントのニーズに幅広く対応できる

• 小規模案件では「これもお願いできますか？」という要望が多い
• 基礎的な理解があれば、自分で対応するか外注するかを適切に判断できる

理由3：将来的なスキルアップの方向性が見える

• 制作の全体像を理解していることで、次に何を学ぶべきかが明確になる

最低限理解しておくべき基礎技術

HTML・CSS

なぜ必要？

すべてのWebサイトの基盤となる技術であり、どの構築方法を選んでも最終的にはHTML・CSSが生成されるため。

理解すべきレベル

• HTMLとCSSが何をするものかを理解
• 基本的なタグやプロパティの存在を知っている
• レスポンシブデザインの概念を理解

JavaScript

なぜ必要？

現代のWebサイトでは、ユーザビリティ向上のためにインタラクティブな要素が重要だから。

理解すべきレベル

• JavaScriptで何ができるかを理解
• アニメーションやフォーム処理などの基本概念を知っている

画像・メディア処理

なぜ必要？

Webサイトの表示速度とユーザー体験に直結するため。

理解すべきレベル

• Web用画像フォーマットの基本を理解
• 画像の最適化が必要な理由を知っている

サーバー・公開の基礎

なぜ必要？

Webサイトを公開・運用するために必要な知識だから。

理解すべきレベル

• サーバーとドメインの関係を理解
• Webサイトが表示される仕組みの基本を知っている

まとめ：制作の全体像を理解することで見えてくる道筋

Webサイト制作は「5つのステップ」の連携で成り立っている

今回学んだ内容を整理すると：

5つの制作ステップ

1. 企画・戦略立案
2. コンテンツ企画・ライティング
3. デザイン設計
4. プログラミング実装
5. 公開・運用・保守

各ステップには専門職種が存在する

• Webディレクター、Webライター、Webデザイナー、エンジニア、運用担当者など

小規模案件では一人で複数の工程を担当することが多い

• 予算・規模の制約により、効率的な制作が求められる
• 得意分野を中心に、必要に応じて他の工程もカバーする

「Webデザイナー」の誤解が解けた

• 「Webデザイナー」：デザイン設計（ステップ3）を専門とする職種
• 「Webサイト制作者」：複数の工程を組み合わせてWebサイトを完成させる人

この違いを理解することで、学習すべき技術や目指すべき方向性が明確になります。

制作の全体像を理解した上で次のステップへ

今回の学習により、Webサイト制作がどのような工程で進められるかが理解できました。

この全体像の理解があることで、次に学ぶべき「具体的な構築方法」の特徴や使い分けがより明確に理解できるはずです。

次回予告：様々なWebサイト構築方法の比較

次回は、今回学んだ5つのステップを踏まえて、実際にWebサイトを構築する具体的な方法を比較検討します。

次回のテーマ

• HTML直接コーディング
• ノーコードツール（Wix、Squarespace等）
• CMS（WordPress等）
• プログラミングフレームワーク（Next.js、React等）

各構築方法について

• 5つのステップがどのように効率化されるか
• 必要な技術レベルとコスト
• 適用場面とメリット・デメリット
• どんな人・案件に適しているか

制作の全体像を理解したからこそ、自分に最適な構築方法を選択できるようになります。

この投稿をシェアする