Webサイトは思いつきで作り始めるのではなく、決まった流れ（フロー）に沿って制作されます。この流れを知っておくことで、自分が今どの工程にいるのかを常に把握しながら作業できるようになります。
一般的なWeb制作の5つのフロー
STEP 1｜企画・設計（ディレクション）
サイトの「骨組み」を決める最も重要なフェーズです。
- ヒアリング：目的（集客・採用など）、ターゲット、予算、納期を確認します。
- サイトマップ作成：どのページが何枚必要か、全体の構成図を作ります。
- ワイヤーフレーム（WF）作成：各ページのレイアウトをモノクロの図解で作成します。「どこに何を配置するか」の設計図です。
STEP 2｜デザイン
ワイヤーフレームをもとに、実際の見た目を作り込みます。
- ビジュアルデザイン：配色・フォント・写真を選定し、ブランドイメージに合わせたデザインを作成します（Photoshop・Illustrator・Figmaなどを使用）。
- クライアント確認：デザインカンプ（完成見本図）を共有してイメージのズレを修正します。
STEP 3｜コーディング・開発
デザインをブラウザで動く「Webサイト」の形に変える作業です。
- フロントエンド実装：HTML/CSSで見た目を整え、JavaScriptでアニメーション（動き）をつけます。
- バックエンド / CMS実装：お知らせ更新機能などのためにWordPressなどのシステムを組み込みます。
- レスポンシブ対応：スマホやタブレットでも正しく表示されるよう調整します。
STEP 4｜テスト・検品
公開前にミスがないか徹底的にチェックします。
- ブラウザチェック：Safari・Chrome・Edgeなど異なるブラウザで崩れがないか確認します。
- リンク・動作確認：ボタンが正しく動くか、リンク切れがないかを確認します。
- その他動作テスト：お問い合わせメールなど各種プログラムが正しく動くかテストします。
STEP 5｜公開・運用
サイトを公開します。FTPなどでサーバーへデータをアップロードし、Google Analyticsなどの解析ツールで改善しながらコンテンツを更新し続けます。公開して終わりではなく、継続的な保守・運用が求められます。
Web制作に関わる主な職種
| 職種 | 主な役割 |
|---|---|
| Webデザイナー | サイトの見た目（レイアウト・画像・デザイン）を作成する。 |
| コーダー / フロントエンドエンジニア | デザインをブラウザで表示できるようにHTML/CSS/JSで実装する。 |
| Webディレクター | 制作の進行管理や顧客との折衝を行い、プロジェクト全体を統括する。 |
| Webプロデューサー / プランナー | サイトの企画やマーケティング戦略を立てる。 |
| サーバーサイド / バックエンドエンジニア | PHP・Ruby・Python・Go・Java・Node.jsなどを使用した開発を行う。 |
AI・ノーコードツールの活用と「基礎」の重要性
最近では生成AIやノーコードツールを使えば誰でも短時間でWebサイトを作れるようになっています。現場でも積極的に活用されており、皆さんも積極的に使っていくべきです。
主な生成AI・ノーコードツール
Webサイト制作・ノーコードツール（AIでサイト丸ごと生成）
manus / Studio / Framer AI / Wix ADI / Relume / ジンドゥー AIビルダー
デザイン・プロトタイプ生成（UI/UX設計）
Figma AI（Figma Make）/ Adobe Firefly / Canva AI
AIコーディング・実装（エンジニア向け）
Cursor / v0（Vercel）/ GitHub Copilot / Windsurf
それでも基礎が必要な3つの理由
しかし、Web制作の基礎（HTML/CSS/JavaScript）を知らずにこれらのツールだけを使い続けると、必ず「プロの現場では通用しない壁」にぶつかります。
① AIは「直す力」まではくれない
AIが出したコードが1pxズレていたり、スマホだけ崩れていたりしたとき、基礎知識がないと「どこをどう直せばいいか」すらわかりません。AIへの指示（プロンプト）も、基礎を知っている人と知らない人では返ってくる結果の精度が全く違います。
② 構造を知る者が、一番強い
コードを読み解く力があれば、AIが作ったものに対しても「ここはこう書き換えれば動くはずだ」と自分の意志でコントロールできるようになります。
③ ノーコードはツールの範囲内でしか作れない
ノーコードは便利ですが、「ここにしかないオリジナルの動き」や「使い心地の良さ」を追求するにはやはり基礎の力が必要です。
まとめ
Web制作には企画→デザイン→コーディング→テスト→公開という明確なフローがあります。AI・ノーコードツールを積極的に活用しながらも、基礎知識をしっかり身につけることが現場で通用するスキルにつながります。この講義では HTML/CSS・JavaScript（jQuery）コーディング・Webデザイン制作・Webサイトの公開方法 を学んでいきます。
