【初心者向け】Webサイト制作の流れをやさしく解説

「Webサイトって、どうやって作られてるの？」

そんな疑問を持ったことはありませんか？

私も制作会社に入社時は、全然わからない状態でしたが、
いろんな役割のメンバーが関わって1つのサイトが公開されています。

この記事では、Webサイト制作の流れを初心者向けにやさしく解説します。

これからWeb制作を学びたい方や、副業としてチャレンジしたい方は、
まずは全体の流れをつかむところから始めてみましょう。

※本記事は筆者の経験をもとにまとめています。
会社や案件によって違いはありますので、
ひとつのリアルな例として参考にしてください。

Web制作の全体像

Webサイト制作は、次の流れで進みます。

① ヒアリング
② サイト設計
③ デザイン
④ コーディング
⑤ テスト
⑥ 公開
⑦ 運用

家づくりに例えると、とてもわかりやすいです。

Web制作に関わるメンバー

Webサイト制作は、1人ではなくチームで作ることが多い仕事です。
それぞれの役割を持ったメンバーが協力して、Webサイトを完成させます。

主に次のようなメンバーが関わります。

ディレクター

クライアントとやりとりし、プロジェクト全体をまとめる役割です。

▼ 主な仕事
・クライアントとの打ち合わせ
・ヒアリング
・制作の進行管理
・チームへの指示
・ワイヤーフレームの作成

デザイナー

Webサイトの見た目を作る仕事です。

▼ 主な仕事
・レイアウト設計
・配色
・フォント選び
・バナーや画像制作

コーダー / フロントエンドエンジニア

デザインをもとに、Webサイトを実装し、ブラウザで見られる形にします。

▼ 主に使う技術
・HTML
・CSS
・JavaScript

バックエンドエンジニア

サイトの裏側の仕組みを作る仕事です。
ユーザーには見えないシステム部分を担当します。

例えば
・お問い合わせフォーム
・会員ログイン
・データ管理

インフラエンジニア

Webサイトが動く環境を整える役割です。

▼ 主な仕事
・サーバー構築
・セキュリティ管理
・サイトの安定運用

Webサイトが問題なく動くように支えています。

実際のWeb制作はこう進む！現場のリアルな流れ

実際の例を交えながら、見てみましょう。
ここからは、実際の現場の流れを見ていきましょう。

案件獲得

フリーランスと同じく、人脈や紹介が大事で認知される必要があります。
・お問い合わせフォームから相談
・社長の人脈
・グループ会社や顧客からの紹介案件
・ビジネスマッチング
・セミナー開催

ヒアリング

こんな相談からスタートします。
・ホームページを作りたい
・新規起業するので、ロゴも含めてサイトを作りたい
・新商品用のLPを作りたい

まずはディレクターがヒアリングシートをもとに、クライアントの課題や目的を引き出します。

何をヒアリングするのか
・サイトの目的（何のためのサイトか）
・ターゲット（誰に向けたサイトか）
・必要なページ（どんな情報が必要か）

方向性を決める
・WordPressで作るのか
・STUDIOなどのノーコードを使うのか
・ECサイトにするのか

必要に応じてデモサイトなどを見せながら、完成イメージをすり合わせます。この段階で方向性が決まります。

「どう課題を解決するか」

「どう目的を達成するか」

を決める工程です。

見積もり・契約

1回目のヒアリングで見積もりを作成して、料金やスケジュールなども確認して受注することになったら、契約します。

契約前に会社情報を確認し、問題がないかチェックすることもあります

サイト設計（ワイヤーフレーム作成）

ヒアリングが終わったら、次にサイト設計を行います。
「どんな構成にするか」「どんな情報を載せるか」を決めていきます。

まずは、サイト全体の構成を整理します。
例えば
・トップページ
・会社概要
・サービス紹介
・お問い合わせ
といったページです。

次に、ワイヤーフレームを作成します。
・どこに何を配置するか
・情報の優先順位
を決めていきます。

スケジュールや進捗管理もディレクターが行います。

デザイン制作

サイトの見た目を作る工程です。
・レイアウト
・色
・フォント
・画像
などを決めていきます。

よく使われるツール
・Figma
・Photoshop
・Illustrator
最近は、Figmaが主流です。

実務の流れ
ワイヤーフレームをもとにデザイン制作します。
まずはトップページから作ることが多いです。
トップページデザインがOKになったら、下層ページの制作に進みます。

よくある進め方
・参考サイトを共有する
・デザイン案を作成する
・フィードバックをもらう
・修正する

起業や新規事業の場合は
・ロゴ制作
・名刺デザイン
なども合わせて依頼されることがあります。

コーディング

デザインをもとに、実際にWebサイトを作る工程です。
ここで初めて、ブラウザで見られる形になります。

コーディングでは、役割が分かれることもあります。

▼ フロントエンドエンジニア
デザインデータをもとにWebサイトをコーディングしていきます。
私の勤める会社ではデザイナーが画像を書き出し、コーダーは実装に集中することが多いです。

・Webサイトの見た目を実装
・アニメーションの実装
→ デザイナーと相談しながら、見た目を再現していきます。

【主に使用する技術】
・HTML（構造）
・CSS（見た目）
・JavaScript（動き）

▼ バックエンドエンジニア
・データ移行（顧客や商品情報をサイトに移すプログラム開発）
・会員登録機能やECサイトのカートなどの裏側の処理を実装する
→ フロントエンドエンジニアと相談しながら実装

【主に使用する技術】
・PHPなどのサーバー言語
・SQL

顧客によっては、HTML/CSSを自社で実装するケースもあります。
その場合は、顧客で更新できることを考慮してコーディングをします。

サーバー用意

サーバーとは、簡単に言うとWebサイトのデータを置いておく場所です。
インフラエンジニアがサーバーを用意し、設定などを行います。バックアップ設定やサーバー監視などサーバーに関する仕事をしています。

エンジニアが、サーバーにファイルを配置することで、閲覧できます。
基本的には、開発環境と本番環境の2つを構築しています。

テスト

デザイナーとディレクターで表示確認をします。
デザイナーさんは余白やフォントなどの細かい指摘がきます。
ディレクターは全体的な動作確認を含めてテストしていただいています。

ディレクターの確認OKとなったら、顧客に確認していただきます。

公開

顧客確認OKとなり、公開日になったら公開作業をします。
公開作業の内容によって、作業者が変わります。

メンテナンス画面になっているのを見かけるのは、公開作業などをしているんですね。

公開後、サイト表示確認を行います。
ディレクターがGoogleアナリティクスなど分析ツールを導入確認します。
必要だったら、インフラエンジニアにサーバー監視などの依頼をします。

運用

保守内容は契約によって異なります。
・お知らせ更新
・一部コンテンツ改修

ディレクターが改善提案したり、マーケティングする場合もあります。

現場で感じる3つのポイント

最後に、リアルな現場でよく感じることです。

① ヒアリングがすべて
最初の認識がズレると、後の工程が全部ズレます。
デザインまでに時間がかかると、後工程のエンジニアは大変なんです💦

② 誰でも対応可能にする
運用する際に、担当者が変わることがあります。
コーディングは特に修正しやすいようにコメントを入れたり、ディレクターはドキュメントにまとめたりしています。

③ 公開してからが本番
作って終わりではなく、改善していくことで価値が出ます。
分析して成果が出ることで紹介にもつながります。

最後に

Web制作は、特別な才能が必要な仕事ではありません。
正しい順番で学び、少しずつ経験を積めば、誰でもできるようになります。

まずは小さく一歩。
今日から、HTML/CSSに触れてみましょう。