Web開発イントロダクション
概要
アウトプット
内容
イントロダクション
- 今日見るのは、Web制作ロードマップの全体像
- 企画から運用まで、9つのセクションを順番に説明する
- それぞれの流れと、代表的な重要スキルをつかむ
- ゴールは、自分が楽しめそうな分野を1つ見つけ、さらに深堀りしてみること
流れ
- 戦略・企画
- UX・情報設計
- UI・ビジュアルデザイン
- フロントエンド開発
- バックエンド開発
- インフラ・DevOps
- 品質管理・テスト
- SEO・マーケティング
- 運用・監視・改善
戦略・企画
- まず何のためにサイトを作るのかを決める工程
- 誰をターゲットにするかを整理する
- どんな成果が出たら成功かを定量的に決める
- デザインや実装の前に、方向性をそろえる役割がある
流れ
- サイトの目的を決める
- ゴールやKPIを決める
- ターゲットを考える
- 競合や市場を調べる
- 必要な機能やページを決める
SMART KGI KPI ペルソナ 競合分析 3C分析 SWOT分析 ゴール設定 要件定義 サイトマップ
重要スキル① ペルソナ設計
- 想定ユーザー像を具体化する作業
- 誰に向けるかがはっきりすると内容や導線を決めやすい
- なるべく具体的な人物像が浮かぶように詳しく設定する
ペルソナ ターゲット ユーザーニーズ整理
重要スキル② KPI設計
- サイトの成果を測る指標を決める
- 改善するときの判断材料になる
- 例：お問い合わせ数 / 資料請求数 / 購入数 / 直帰率 / CV率
KGI KPI PV CV 直帰率
重要スキル③ サイトマップ
- サイト全体のページ構成を一覧で整理したもの
- どのページが必要かを関係者と共有するために使う
- 抜け漏れや重複を早い段階で防ぐ
サイトマップ ページ構成
UX・情報設計
- サイトの構造と、迷いにくい情報の配置を考える工程
- ユーザーの導線や、予想される行動を整理する
- UIを作成する手前で、体験の骨組みを作る役割がある
流れ
- ユーザーの行動を整理する
- 情報の優先順位を決める
- 画面遷移や導線を考える
- ワイヤーフレームに落とす
- 使いにくさを見直す
カスタマージャーニー ユーザーフロー ワイヤーフレーム CTA 情報設計 サイトマップ
重要スキル① カスタマージャーニー
- ユーザーがサイトを認知してからの行動を整理する
- どこで迷い、どこで不安になりそうかを見つける
- 体験の流れ全体を考えるための基本になる
カスタマージャーニー タッチポイント 感情の変化
重要スキル② ワイヤーフレーム
- 画面の情報配置や優先順位を整理するための書類
- 見た目の装飾より先に、必要な要素を整理する
- 迷わない画面構成を考えるための土台になる
ワイヤーフレーム 情報設計 CTA
UI・ビジュアルデザイン
- 見やすさを整えて、見栄えの良い画面にする工程
- 色、文字、部品の見せ方を決める
- UXで作った構造に、見た目のルールを与える
流れ
- 画面の目的を確認する
- 配色や文字のルールを決める
- ボタンや見出しを部品化する
- 画面ごとの見た目を整える
- 一貫性を確認する
配色設計 タイポグラフィ コンポーネント 余白設計 デザインシステム アクセシビリティ
重要スキル① Figma
- 主にUIデザインや画面設計で使われる代表的なツール
- 画面を作るだけでなく、部品をまとめたり、チームで共有したりしやすい
- ワイヤーフレームから完成イメージ、簡単なプロトタイプまで対応できる
Figma プロトタイプ
重要スキル② コンポーネント設計
- ボタンやカードなどを再利用できる部品として考える
- ページごとの差を減らし、修正しやすくする
- コンテンツを通して常に一貫したデザイン・ユーザビリティを提供するために重要なプロセス
コンポーネント 再利用性 デザインシステム
フロントエンド開発
- 設計された画面を、ブラウザで動く形に実装する工程
- HTML / CSSで見た目を組み、JavaScriptで動きをつける
- APIとつないで、使える画面にする
流れ
- HTML / CSSで画面を組む
- JavaScriptで動きをつける
- Reactで部品化する
- Next.jsでページ構成や表示を整える
- APIとつないで機能を完成させる
HTML CSS JavaScript TypeScript React Next.js API連携 SSR SSG
重要スキル① React / Next.js
- ReactはUIを**「部品」単位で組み立てる**JavaScriptライブラリ
- Next.jsはReactを土台に、ルーティング・表示最適化まで一括で扱えるフレームワーク
- 2つをセットで使うのが、モダンなフロントエンド開発の定番
React Next.js TypeScript コンポーネント SSR SSG
重要スキル② TypeScript
- JavaScriptに型の考え方を加え、コードの安全性と読みやすさを上げる
- 開発中にミスへ気づきやすくなり、保守もしやすくなる
- ReactやNext.jsと一緒に使われることが多い
- 利用する場面の増加によりPythonと並んで人気のある言語の一つ
TypeScript 型推論
重要スキル③ API連携
- 外部サービスやバックエンドと通信してデータをやり取りする
- 一覧表示、フォーム送信、ログインなどでよく使う
- 見た目だけの画面を、使える機能に変える
API連携 REST API async/await
バックエンド開発
- データや認証、APIなど、サイトの裏側を作る工程
- 見えない部分だが、機能の土台になる
- 保存・取得・制御の仕組みを担当する
流れ
- APIの役割を決める
- データベースを設計する
- データを操作する処理を書く
- 認証や権限を組み込む
- セキュリティや性能を整える
Node.js PHP Python REST API CMS API連携 DB設計 ER図 SQL OWASP
重要スキル① DB設計
- データの構造や関係性を整理する
- ユーザー、投稿などのDBをどう分け、データをどう持ち、どう参照し合うかを決める
- 後から機能追加しやすい構造にする
DB設計 MySQL PostgreSQL ER図 正規化
重要スキル② API設計
- フロントエンドとバックエンドのやり取りのルールを決める
- 何を受け取り、何を返すかを整理する
- エラー時の返し方も含めて設計する
API設計 REST API OpenAPI
重要スキル③ CMS
- 記事やお知らせなどの内容を、管理画面から更新できる仕組み
- 保存するデータ構造や公開方法を考える点で、バックエンド寄りの仕事とつながりやすい
- フロントエンドとはAPIやデータ取得を通して連携する
CMS WordPress ヘッドレスCMS microCMS
インフラ・DevOps
- 作ったサイトやアプリを安全に公開し、安定して動かす
- 具体的には、サーバー（クラウド）、デプロイ、自動化を扱う
- 公開後の安定運用にも大きく関わる
流れ
- Gitで変更を管理する
- Dockerで実行環境をそろえる
- AWSなどクラウド環境に公開先を用意する
- CI/CDでテストとデプロイを自動化する
- 安定稼働を確認しながら更新を回す
Git GitHub GitHub Actions Docker CI/CD AWS EC2 S3
重要スキル① Git / GitHub
- コードの変更履歴を管理し、安全に開発を進めるための基盤
- いつ何を変更したかを残しながら、ブランチを分けて作業できる
- レビューやCI/CDともつながり、安定運用を支える
Git GitHub ブランチ プルリクエスト
重要スキル② Docker
- 仮想化という技術により、クラウド等の環境をどこでも同じ状態にそろえやすくする技術
- 開発環境と本番環境の差を減らし、動作のズレを防ぐ
- Dockerでイメージを作成し、それをそのままクラウドにデプロイすることも可能
Docker コンテナ Dockerfile
重要スキル③ AWS
- サイトやアプリを動かす基盤を用意する代表的なクラウドサービス
- サーバー、ファイル保存、配信など200以上のサービスを提供
- Amazonが開発・運営し、世界規模のインフラも構築可能
AWS EC2 S3 CloudFront Lightsail
重要スキル④ CI/CD
- 開発中にテスト・ビルド・デプロイを自動化する仕組み
- Gitの更新をきっかけに、DockerやAWSと連携して反映までつなぐ
- 手作業ミスを減らし、更新を速く安全にしやすい
CI/CD GitHub Actions 自動テスト デプロイ
品質管理・テスト
- 作ったものが正しく使えるかを確認し、品質を守る工程
- 動作確認、表示確認、端末確認、自動テストなどを扱う
- 安心して公開するための最後の壁にもなる
流れ
- 確認する点を整理する
- 基本動作と表示を確認する
- フォームや導線を確認する
- ブラウザや端末差異を確認する
- 自動テストや再テストを回す
単体テスト 結合テスト ビジュアルリグレッションテスト E2Eテスト アクセシビリティテスト Playwright
重要スキル① テストケース設計
- 何をどう確認するかを整理する
- 正常系、異常系、境界値を考える
- 確認漏れを防ぎやすくなる
テストケース 正常系 異常系 境界値
重要スキル② 単体・結合テスト
- 基本的なコードのテスト方法
- 単体テスト：関数やコンポーネント単体が正しく動くかを確認する
- 結合テスト：複数の部品を組み合わせたときに正しく連携するかを確認する
- 小さい単位で早く問題を見つけられるのが強み
単体テスト 結合テスト Jest
重要スキル③ ビジュアルリグレッションテスト
- 画面の見た目が意図せず変わっていないかをスクリーンショットで比較するテスト
- コード変更の前後で画面を自動撮影し、ピクセル単位で差分を検出する
- デザイン崩れや意図しないスタイル変更を早期に発見できる
ビジュアルリグレッションテスト Storybook Chromatic
重要スキル④ E2Eテスト
- 実際の操作の流れを、全体を通して確認するテスト
- ログイン、購入、送信など一連の流れを見られる
- 連携部分の不具合を見つけやすい
E2Eテスト Playwright
SEO・マーケティング
- 検索エンジンでの検索順位の最適化と、リスティング広告におけるキーワード選定の最適化をする工程
- 検索キーワード、ページ内容、導線、検索での反応を見る
- 作ったサイトをどう効率的に宣伝するかを考える
流れ
- キーワードを調べる
- 検索意図を整理する
- ページ内容を最適化する
- 技術的なSEOを整える
- Search ConsoleやSNSで反応を見る
キーワード調査 Google Trends Keyword Planner Google Search Console SNS戦略 構造化データ
重要スキル① キーワード調査
- どんなキーワードが検索されているかを調査する
- 検索ボリューム、競合難易度、関連語を見る
- ユーザーの検索ワードの方向性をつかむ
キーワード調査 Google Trends Keyword Planner
重要スキル② Search Console確認
- どんなキーワードで検索され、クリックされているかを確認する
- 検索クエリ、表示回数、クリック数、掲載順位が見られる
- 検索での反応を見て改善につなげる
Google Search Console 検索クエリ 掲載順位
重要スキル③ SNS戦略
- SNSを使って、サイトやコンテンツを知ってもらう流れを作る
- どの媒体を使うか、何を発信するか、どこへ誘導するかを考える
- 検索だけに頼らず、見つけてもらう入口を増やせる
Instagram X 拡散
運用・監視・改善
- 公開後のサイトを育て、見直し、改善し続ける工程
- 更新、分析、改善のサイクルを回していく
- 公開して終わりではなく、ここからも仕事が続く
流れ
- コンテンツを更新する
- アクセス状況を見る
- 離脱ポイントを探す
- 改善案を整理する
- 変更後の数字を見直す
Google Analytics 直帰率 離脱率 PV CV PDCA 更新スケジュール
重要スキル① Google Analytics（GA）
- 公開後のユーザー行動を数字で確認する
- どのページが見られたか、どこで離脱したかを見られる
- 感覚ではなく、根拠を持って改善しやすくなる
Google Analytics 直帰率 離脱率 PV CV
まとめ
どこか気になる分野がありましたか？
気になる分野やスキルがあったら、それを深堀りしてみて下さい。深堀りすることで、他のスキルへと繋がり、世界がさらに広がってゆきます。