Webディレクター・PMのためのモダンWeb制作入門

32学習ページ

約22時間合計学習時間

6実務用付録

この教科書が必要な理由

WebディレクターやPMは、すべての技術を自分で実装する必要はありません。しかし、技術を知らなくても進行管理だけできればよい、という仕事でもありません。

実案件では、次のような判断が求められます。

• 提案された構成が、案件の規模・更新方法・保守体制に合っているか
• 見積に含まれる作業と、クライアント・外部事業者が担当する作業は何か
• API、CMS、ビルド、キャッシュのどこで更新が止まり得るか
• セキュリティ、テスト、アクセシビリティをいつ・誰が確認するか
• 公開後の監視、障害対応、依存ライブラリ更新を誰が担うか
• リニューアル時に既存URL・検索流入・計測をどう引き継ぐか

この教科書では、用語の意味だけでなく、技術が制作・公開・運用へ与える影響と、PMが確認すべき問いを重点的に扱います。

この教科書のゴール

読み終えたとき、次の状態になることを目指します。

• Webサイトの構成とデータの流れを図で説明できる
• 技術選定の理由・前提条件・トレードオフを質問できる
• 見積・スケジュール・公開手順・保守範囲を整理できる
• クライアント、制作会社、開発会社、サービス事業者の責任を分けられる
• 正常時だけでなく、障害・仕様変更・移行時の動きを予測できる
• エンジニアの説明を、非技術者へ分かりやすく伝え直せる

学習の全体像

flowchart LR
    A[第1部<br/>Webの仕組み] --> B[第2部<br/>インフラ]
    B --> C[第3部<br/>フロントエンド]
    C --> D[第4部<br/>API・CMS]
    D --> E[第5部<br/>品質]
    E --> F[第6部<br/>公開・運用・移行]

順番には意味があります。APIやCMSから読み始めるより、先にブラウザ、HTTP、DNS、サーバーを知っていた方が理解しやすくなります。SSR・SSGやビルドを理解した後にCMSの公開経路を学び、最後に品質・公開・運用・移行へ進みます。

第1部・4ページ・約1時間35分

Webの仕組みを知る

ブラウザへURLを入力してからページが表示されるまでを、URL、ドメイン、DNS、HTTP、HTTPSの順に理解します。

第1部を始める →

第2部・5ページ・約2時間40分

Webサイトを動かす

サーバー、クラウド、サーバーレス、静的ホスティング、CDN、WAFと、契約・責任分界を学びます。

第2部を始める →

第3部・6ページ・約3時間35分

モダンなWebサイトを作る

HTML・CSS・JavaScript、フレームワーク、CSR・SSR・SSG・ISR、ビルドとデプロイを整理します。

第3部を始める →

第4部・6ページ・約4時間10分

データを連携し、コンテンツを更新する

API連携の認証・制限・エラーと、従来型CMS・ヘッドレスCMSの選定・運用・移行を学びます。

第4部を始める →

第5部・5ページ・約4時間15分

品質を守る

セキュリティ、テスト、アクセシビリティを、公開前の最終確認ではなく企画・設計から扱います。

第5部を始める →

第6部・6ページ・約5時間45分

公開し、運用し、育てる

Git、CI/CD、監視・障害対応、技術SEO、リニューアル移行を一つのライフサイクルとして理解します。

第6部を始める →

読み進め方

1. 最初は第1部から順番に読む
   左側のナビゲーションと各ページ下部の「次へ」を使います。
2. 各ページの全体像を先に見る
   図と冒頭説明で、そのページが扱う範囲をつかみます。
3. 実案件での考え方とPMチェックリストを読む
   用語を暗記せず、何を確認するかへ置き換えます。
4. 理解度チェックへ回答する
   回答を開く前に、自分の言葉で説明してみます。
5. 実案件では付録を複製して使う
   未確定項目には、決定者と確定期限を記入します。

各ページの目安は30〜70分です。一度に読み切る必要はありません。部ごとに区切り、章末のまとめで理解を確認してください。

最初の問い

今の時点ですべてに答えられる必要はありません。全32ページを読み終えた後に、どこまで説明できるようになったか確認します。

1. ブラウザにURLを入力してから、ページが表示されるまでにDNS・HTTP・サーバーは何をするか
2. ドメイン、DNS、サーバー、CDN、HTTPS証明書は、誰が契約・設定・更新するものか
3. レンタルサーバー、クラウド、サーバーレス、静的ホスティングを何の条件で比較するか
4. HTML・CSS・JavaScriptと、React・Vue・Astro・Next.js等の役割はどう違うか
5. CSR・SSR・SSG・ISRの違いが、SEO、CMS反映、障害点、費用へどう影響するか
6. API連携で、認証、CORS、レート制限、タイムアウト、二重送信をなぜ確認するか
7. 従来型CMSとヘッドレスCMSを、初期費用だけでなく保守・公開・運用からどう比較するか
8. セキュリティ、テスト、アクセシビリティを、要件・デザイン・実装・運用へどう分担するか
9. Gitのコミット、ブランチ、Pull Requestと、CI/CDの自動検査・承認・デプロイはどうつながるか
10. サイトが200を返していても、フォームや予約が壊れている問題をどう検知・対応するか
11. robots.txt、noindex、canonical、リダイレクト、サイトマップは、それぞれ何を伝える仕組みか
12. サイトリニューアルでURL・CMS・ホスティングを変えるとき、何を引き継ぎ、いつ移行完了と判断するか

実案件で使う付録

• 案件開始時の技術確認
• API確認テンプレート
• CMS確認テンプレート
• 公開・移行チェックリスト
• 用語集
• 参考資料一覧

この教科書が扱わないこと

• JavaScript、SQL、クラウド設定等の具体的な実装演習
• 特定サービスの管理画面を操作する手順書
• 特定のフレームワークやCMSを万能な正解として推奨すること
• セキュリティ診断・アクセシビリティ試験の専門家を代替すること
• 検索順位を保証する施策集

ディレクター・PMは、すべてを自分で実装することではなく、必要性、前提、影響、確認方法、担当、費用、公開後の責任を説明できることを優先します。