Web制作ロードマップ

Web制作の全工程を、戦略・企画からUX設計、デザイン、フロントエンド・バックエンド開発、インフラ、テスト、SEO、運用まで9つのセクションで整理したロードマップの概要版です。各分野の流れと重要スキルをつかむことを目的としています。
詳細版はこちら→

Transcript

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