Web制作ロードマップ
26.5.16
ロードマップ
Web制作
概要
ダウンロード
内容
戦略・企画
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 目的設計 | サイトの目的整理 | 何のためにサイトを作るのかを明確にする | |
| ゴール設定 | 問い合わせ、購入、応募、資料請求など達成したい成果を定める | SMART KGI KPI | |
| KPI設計 | PV、CV、直帰率など成果を測る指標を決める | PV CV 直帰率 コンバージョン 数値分解 イベント設計 Google Analytics Google Search Console | |
| ターゲット設計 | ペルソナ設計 | 想定ユーザー像を具体化する | ペルソナ ターゲット STP分析 |
| ユーザーニーズ整理 | ユーザーが何を求めて訪れるのかを整理する | ユーザーインタビュー ユーザーリサーチ アンケート設計 検索ワード分析 | |
| ユーザー課題の整理 | ユーザーが抱える課題や不満、不便を整理する | VOC分析 共感マップ | |
| コンテンツ戦略 | 価値提案の整理 | サイトで何を伝え、どんな価値を提供するかを定める | USP |
| コンテンツ精査 | 掲載すべき情報や不要な情報を見直し、優先順位を整理する | 情報アーキテクチャ | |
| 競合調査 | 他社サイトや類似サービスを調べて差別化の方向を探る | 競合分析 3C分析 SWOT分析 ベンチマーク分析 ポジショニング分析 | |
| 要件定義 | 必要機能の洗い出し | フォーム、検索、会員機能など必要な機能を整理する | 要件定義 機能要件整理 ユーザーストーリー |
| ページ要件の整理 | 必要なページ種類や掲載内容を定義する | サイトマップ | |
| 制約条件の確認 | 予算、納期、運用体制、使用技術などの条件を明確にする | RFP 技術選定 | |
| プロジェクト計画 | スコープ定義 | 今回どこまで作るか、何を対象外にするかを決める | スコープ |
| 進行管理 | 制作工程、マイルストーン、公開時期を整理・管理する | WBS ガントチャート マイルストーン管理 Notion Backlog | |
| 役割分担 | 誰が企画、制作、レビュー、運用を担うかを明確にする | 役割分担表 |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| Google Analytics | サイト訪問数、ユーザー行動、コンバージョンなどを分析する |
| Google Search Console | 検索流入、掲載状況、検索クエリ、技術的な検索課題を確認する |
| Notion | 企画メモ、要件整理、進行管理、ドキュメント共有に使う |
| Google スプレッドシート | KPI整理、競合比較、要件一覧、進行管理表の作成に使う |
| Microsoft Excel | KPI整理、競合比較、要件一覧、進行管理表の作成に使う |
| FigJam | アイデア整理、構造化、ペルソナやカスタマージャーニーの可視化に使う |
| Backlog | 制作の進行管理、タスク管理、担当者管理、課題管理に使う |
| Microsoft PowerPoint | 企画内容の整理、提案資料作成、構成案の共有に使う |
ユーザー体験(UX) / 情報設計
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| UX設計 | カスタマージャーニー設計 | ユーザーが認知・比較・行動に至るまでの体験の流れを整理する | カスタマージャーニー |
| ユーザーシナリオ設計 | どんな状況のユーザーが、何を目的にサイトを使うかを具体化する | ユーザーシナリオ ユーザーフロー | |
| ワイヤーフレーム設計 | ページ構成設計 | 各ページに必要な情報や要素を整理し、画面上の配置を設計する | ワイヤーフレーム Figma |
| ナビゲーション設計 | グローバルナビゲーションやパンくずなど、画面上の案内要素を設計する | グローバルナビゲーション ローカルナビゲーション パンくずリスト | |
| ラベリング設計 | メニュー名や見出し名などの言葉を、ユーザーに分かりやすく設計する | ラベリング | |
| CTA / フォーム導線設計 | 問い合わせ・購入・応募などの行動へ自然に導き、入力開始から送信完了まで迷いなく進める流れを設計する | CTA EFO コンバージョン導線 | |
| 回遊導線設計 | 関連ページや次の行動へスムーズに移動できる導線を設計する | 内部リンク 関連記事導線 回遊率 | |
| 評価・検証 | ユーザビリティテスト | 実際の操作を観察し、使いにくさや迷いやすさを検証する | ユーザビリティテスト |
| ユーザーアンケート | ユーザーの印象や満足度、使い勝手に関する意見を収集する | アンケート設計 |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| Figma | ワイヤーフレーム作成、画面構成整理、画面遷移や導線の検討に使う |
| FigJam | ユーザーフロー整理、アイデア出し、情報設計の可視化に使う |
| Google Analytics | ユーザー行動や離脱ポイントを確認し、導線や体験改善の判断材料にする |
| Google Search Console | 検索クエリや流入状況を確認し、ユーザーニーズや情報設計の見直しに活かす |
ユーザーインターフェース(UI) / ビジュアルデザイン
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| デザイン基礎設計 | 配色設計 | ブランドやサービスの印象に合う色のルールを設計する | CIガイドライン WCAG カラーパレット |
| タイポグラフィ設計 | 読みやすさと印象を両立する文字組みや書体のルールを設計する | タイポグラフィ | |
| 余白・グリッド設計 | 情報を見やすく整理するための余白やレイアウトの基準を設計する | グリッドシステム | |
| ムードボード作成 | 参考ビジュアルを集めて、世界観や表現の方向性を整理・共有する | ムードボード | |
| ビジュアル設計 | トーン&マナー設計 | サイト全体の雰囲気や表現の方向性を定める | ブランドパーソナリティ ブランドガイドライン |
| キービジュアル設計 | サイトの印象を決める中心的なビジュアル表現を設計する | KV設計 | |
| アイコン / 画像設計 | 写真、イラスト、アイコンなどの視覚要素の使い方を設計する | Illustrator Photoshop | |
| レスポンシブ設計 | 画面サイズやデバイスに応じて見やすく使いやすい表示ルールを設計する | レスポンシブデザイン ブレイクポイント | |
| UIコンポーネント設計 | ボタン設計 | 主要な操作要素としての見た目や状態変化を設計する | ボタン状態設計 |
| フォームUI設計 | 入力しやすく、迷いにくいフォームの見た目と構造を設計する | フォームUI | |
| コンポーネント設計ルール | 再利用しやすく一貫性を保てるよう、部品の使い分けや状態・バリエーションの基準を整理する | デザインシステム バリアント設計 状態設計 Figma | |
| モーション / インタラクション設計 | ストーリーボード作成 | 体験の流れや演出の意図を時系列で整理する | ストーリーボード |
| 動画・アニメーション設計 | 動きや時間変化を用いた視覚表現を設計・制作する | モーションデザイン After Effects | |
| インタラクティブコンテンツ設計 | 操作に応じて反応が変わる体験型コンテンツを設計する | インタラクションデザイン | |
| プロトタイプ設計 | プロトタイプ作成 | 画面遷移や操作感を試作し、体験の流れを確認する | プロトタイピング |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| Figma | UIデザイン、コンポーネント設計、プロトタイプ作成に使う |
| Adobe Illustrator | ロゴ、アイコン、図版などのベクター素材制作に使う |
| Adobe Photoshop | 写真加工、ビジュアル制作、画像編集に使う |
| Adobe After Effects | モーションやアニメーションの設計・制作に使う |
フロントエンド開発
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 開発基礎 | HTML / CSS実装 | Webページの構造と見た目を実装し、基本的なレイアウトや装飾を構築する | HTML CSS Tailwind Sass |
| JavaScript基礎実装 | 画面上の動きや基本的な処理をJavaScriptで実装する | JavaScript TypeScript | |
| 開発環境 / コード品質 | 開発に必要な実行環境やパッケージ管理、コード品質を保つツールを整える | Node.js npm Vite Webpack Turbopack ESLint Prettier | |
| バージョン管理 | ソースコードの変更履歴を管理し、チームでの共同作業や変更の追跡を行う | Git GitHub | |
| フレームワーク選定 / 導入 | プロジェクトの要件に合ったフレームワークを選び、開発環境を構築する | React Vue Next.js Astro Nuxt Svelte | |
| UI実装 | レイアウト実装 | 設計された画面構成に沿って要素配置や余白を実装する | Flexbox CSS Grid ボックスモデル |
| UI部品管理 | 再利用するUI部品を整理し、見た目や使い方の一貫性を保てるようにする | Storybook デザインシステム | |
| レスポンシブ / アクセシビリティ実装 | 画面サイズや利用環境の違いに対応し、見やすく使いやすい画面を実装する | メディアクエリ セマンティックHTML WAI-ARIA | |
| インタラクション実装 | 操作に応じた動きや演出を実装し、画面の反応や体験の質を高める | GSAP Three.js Pixi.js Framer Motion | |
| アプリケーション実装 | 状態管理 | 画面や機能で共有するデータの状態を整理し、一貫した挙動を実装する | Redux Vuex |
| フォーム実装 / バリデーション | 入力フォームの構造や入力補助、送信処理を実装する | React Hook Form Yup Zod | |
| データ連携 | API連携 | バックエンドや外部サービスと通信し、必要なデータを取得・送信する | REST API GraphQL |
| 非同期処理 / エラーハンドリング | 通信待ちや失敗時の処理を適切に扱い、安定した画面挙動を実装する | Promise async/await エラーバウンダリ | |
| 認証連携 | ログイン状態や認可制御に応じた画面表示や連携処理を実装する | JWT OAuth Cookie | |
| 品質・最適化 | デバッグ / 保守性改善 | 不具合の原因を調べて修正し、読みやすく保守しやすい実装へ改善する | Chrome DevTools Jest Vitest |
| 表示速度 / パフォーマンス改善 | 表示速度や操作の快適さを改善し、負荷を抑えた実装にする | 画像最適化 CDN SSR SSG ISR Lighthouse | |
| SEO / アクセシビリティ改善 | 検索エンジンに伝わりやすく、より多くの利用者に配慮した実装へ改善する | メタタグ設計 構造化データ WAI-ARIA axe DevTools |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| VS Code | コードエディタ。拡張機能が豊富でフロントエンド開発に広く使われる |
| GitHub | バージョン管理・コードレビュー・CI/CD連携に使う |
| Figma | デザインファイルの確認、実装時のデザイン参照に使う |
| Chrome DevTools | ブラウザ上でのデバッグ、パフォーマンス計測、ネットワーク確認に使う |
| Postman | APIのリクエスト・レスポンスを確認・テストする |
| Vercel / Netlify | フロントエンドのデプロイ・プレビュー環境の構築に使う |
| Lighthouse | ページのパフォーマンス・アクセシビリティ・SEOを計測する |
| Storybook | UIコンポーネントのカタログ化、状態確認、ドキュメント共有に使う |
| Sass | CSSの変数、ネスト、mixinなどを使い、スタイルの保守性と再利用性を高める |
| axe DevTools | アクセシビリティの問題を検出し、WCAG基準との对照や改善提案を確認する |
バックエンド開発
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 開発基礎 | サーバーサイド基礎実装 | サーバー上で動作するプログラムの基本的な処理を実装する | Node.js Python PHP |
| フレームワーク選定・導入 | プロジェクトの要件に合ったフレームワークを選び、開発環境を構築する | Express Laravel Django | |
| 開発環境 / コード品質 | 実行環境やパッケージ管理、コード品質を保つツールを整える | npm pip Composer ESLint Prettier | |
| バージョン管理 | ソースコードの変更履歴を管理し、チームでの共同作業や変更の追跡を行う | Git GitHub | |
| API設計・実装 | API設計 | クライアントとサーバー間のインターフェースを設計する | REST API GraphQL OpenAPI |
| エンドポイント実装 | リクエストを受け取り、処理結果を返すエンドポイントを実装する | ルーティング ミドルウェア | |
| レスポンス設計 / エラーハンドリング | 適切なレスポンス形式とエラー時の返却内容を設計・実装する | ステータスコード エラーレスポンス | |
| データベース | DB選定 | プロジェクトの要件に合ったデータベースを選定する | MySQL PostgreSQL |
| DB設計 | データの構造や関係性を設計し、適切なスキーマを定義する | ER図 正規化 リレーション | |
| クエリ実装 | データの取得・更新・削除を行うクエリを実装する | SQL クエリ最適化 | |
| ORM / マイグレーション | オブジェクトとDBのマッピングや、スキーマの変更管理を行う | Prisma Sequelize | |
| 認証 / 認可 | 認証 / 認可実装 | ユーザーの本人確認に加えて、ユーザーごとに実行できる操作や閲覧できる範囲を制御する | JWT OAuth RBAC パスワードハッシュ化 |
| セッション / トークン管理 | ログイン状態の維持や無効化、トークンの発行・検証を実装する | セッション管理 リフレッシュトークン | |
| セキュリティ | 脆弱性対策 | 入力値の検証を含む、SQLインジェクションやXSSなど一般的な脆弱性への対策を実装する | OWASP CORS CSP 入力値バリデーション SQLインジェクション対策 XSS対策 |
| CMS | CMS選定 / 導入 | プロジェクトの要件に合ったCMSを選定・導入する | WordPress microCMS Contentful Strapi |
| コンテンツ設計 | 管理するコンテンツの構造やフィールドを設計する | ||
| CMS実装 / カスタマイズ | CMSの機能を拡張・カスタマイズし、要件に合った実装を行う | プラグイン カスタムフィールド | |
| 品質・最適化 | テスト実装 | ロジックや機能の正しさを検証するテストを実装する | Jest Vitest pytest PHPUnit |
| パフォーマンス改善 | レスポンス速度やDB負荷を改善し、効率的な処理を実現する | Redis DBインデックス キャッシュ戦略 | |
| ログ / エラーハンドリング | 処理の記録とエラー発生時の対応を適切に実装する | Sentry |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| GitHub | バージョン管理・コードレビュー・CI/CD連携に使う |
| Postman | APIのリクエスト・レスポンスを確認・テストする |
| Sentry | サーバーサイドで発生したエラーをリアルタイムで検知・通知する |
| OpenAPI | API仕様の可視化・ドキュメント化、エンドポイントのテストに使う |
| Prisma | TypeScript向けORMで、スキーマ定義からマイグレーションやクエリを自動生成する |
| Strapi | ヘッドレスCMSで、コンテンツモデルの設計とAPIの自動生成に使う |
インフラ / DevOps
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| インフラ基礎 | OS / Linux基礎操作 | サーバー上での基本操作やファイル管理、サービス操作を行えるようにする | Linux Ubuntu CLI シェルスクリプト |
| ネットワーク基礎 | IP、ポート、HTTP/HTTPS など通信の基本を理解する | TCP/IP HTTP HTTPS ポート DNSレコード | |
| DNS / ドメイン / SSL基礎 | 独自ドメイン設定や名前解決、HTTPS化の基礎を理解する | DNS ドメイン SSL/TLS Let's Encrypt | |
| サーバー / ホスティング運用 | サーバー選定 | 案件規模や要件に応じて共有サーバー、VPS、クラウドなどを選定する | 共用サーバー VPS クラウド サーバレス |
| Webサーバー設定 | Webサーバーの公開設定やリバースプロキシ設定を行う | Nginx Apache バーチャルホスト | |
| 実行環境構築 | アプリケーションが動作するためのランタイムや依存環境を整える | Node.js Python PHP | |
| デプロイ / リリース運用 | デプロイ基礎 | 開発したアプリケーションを本番環境へ反映する基本的な流れを理解する | FTP SSH Git CI/CDパイプライン |
| 本番 / 開発環境の切り分け | 開発・検証・本番などの環境を分け、影響を抑えながら運用する | 開発環境 ステージング環境 本番環境 | |
| 環境変数 / 設定管理 | 環境ごとの設定値や秘密情報を安全に管理する | .env 環境変数 シークレット管理 | |
| リリース手順 / ロールバック | 公開手順を整備し、不具合時に安全に戻せる運用を考える | ロールバック | |
| クラウド / マネージドサービス活用 | クラウド基礎理解 | オンプレミスとの違いや、クラウドでの基本的なリソースの考え方を理解する | AWS GCP Azure リージョン IAM |
| ストレージ / CDN活用 | 静的ファイル配信や高速配信のためのストレージ・CDNを利用する | S3 CloudFront Cloudflare | |
| DB / キャッシュのマネージド利用 | データベースやキャッシュをマネージドサービスとして利用し、運用負荷を下げる | RDS Aurora Neon Redis | |
| サーバレス / マネージド実行環境の理解 | サーバー管理を減らしてアプリを実行できる仕組みを理解する | Lambda | |
| CI/CD | CI/CD基礎 | Continuous Integration / Continuous Deliveryとして、ビルド・テスト・デプロイを自動化する流れを理解する | CI/CD GitHub Actions ビルドパイプライン |
| ビルド / テスト自動化 | 変更時に自動でビルドやテストを実行し、品質を保つ | 自動テスト Lint ビルド | |
| デプロイ自動化 | 本番反映までの作業を自動化し、手作業ミスを減らす | Vercel Netlify Amplify | |
| 監視 / 障害対応 | ログ / メトリクス監視 | サーバーやアプリケーションのログ、CPU、メモリ、通信量などを監視し、問題の原因や異常の兆候を把握する | CloudWatch Datadog |
| 障害検知 / アラート | 障害発生時にすぐ気づけるよう通知や監視条件を設定する | Sentry | |
| 障害時の切り分け | 障害発生時に、どこで問題が起きているかを順序立てて調査する | ログ解析 | |
| セキュリティ / バックアップ | サーバー / インフラのセキュリティ基礎 | 公開サーバーを安全に運用するための基本対策を理解する | ファイアウォール WAF DDoS対策 |
| アクセス制御 / 権限管理 | サーバーやクラウドの利用権限を適切に管理する | IAM SSH鍵認証 | |
| バックアップ / 復旧 | 障害時に備えてデータを保存し、復旧手順を整備する | スナップショット | |
| 可用性 / 冗長化の基礎 | サービスを止まりにくくするための基本的な考え方を理解する | ロードバランサー 冗長化 オートスケーリング | |
| コンテナ / 開発環境共有 | Docker基礎 / コンテナでのローカル開発 | コンテナとは何か、なぜ使うのかを理解し、ローカル環境で実行環境差異を減らしながら開発する | Docker Docker Compose Dockerfile |
| 実行環境差異の吸収 | 開発・検証・本番で同じように動かすための考え方を理解する | コンテナ イメージ |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| AWS | クラウド上でサーバー、ストレージ、DB、監視などを構築・運用する |
| S3 | AWSのオブジェクトストレージで、画像や静的ファイル、バックアップ保存などに使う |
| CloudFront | AWSのCDNサービスで、静的ファイルやWebコンテンツを高速配信する |
| RDS | AWSのマネージドDBサービスで、データベース運用の負荷を減らせる |
| Aurora | AWSの高性能なマネージドリレーショナルデータベースサービス |
| Lambda | AWSのサーバレス実行サービスで、サーバー管理を減らしてコードを動かせる |
| CloudWatch | AWSの監視サービスで、ログやメトリクスを収集して可視化・監視する |
| GCP | Googleのクラウド基盤を利用してアプリやインフラを運用する |
| Azure | Microsoftのクラウド基盤を利用してサーバーや各種サービスを運用する |
| Cloudflare | DNS、CDN、セキュリティ保護をまとめて扱いやすいサービス |
| GitHub Actions | ビルド、テスト、デプロイを自動化するCI/CDに使う |
| Vercel | フロントエンドやWebアプリのデプロイを簡単に行いやすいホスティングサービス |
| Netlify | フロントエンドや静的サイトの公開・デプロイを手軽に行えるホスティングサービス |
| Amplify | AWS上でフロントエンドのホスティングやデプロイ、周辺機能の連携を行いやすくするサービス |
| Docker | 開発環境や実行環境をコンテナ化し、環境差異を減らす |
| Sentry | アプリやサーバーで発生したエラーを検知・通知する |
| Datadog | サーバーやアプリのログ、メトリクス、監視ダッシュボードをまとめて扱える監視サービス |
| Docker Compose | 複数コンテナの連携や起動順序を定義し、ローカル開発環境を構築・管理する |
| Let’s Encrypt | 無料でSSL/TLS証明書を発行・更新し、HTTPS化を手軽に実現する |
品質管理 / テスト
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 品質管理の基礎 | 品質観点の整理 | 何をもって品質がよいとするか、確認すべき観点を整理する | 品質基準 |
| 受け入れ基準の整理 | 公開や納品の前に満たすべき条件を明確にする | 受け入れ基準 | |
| テスト対象 / 範囲の整理 | どこまでを確認対象にするか、対象画面や機能の範囲を整理する | ||
| 動作確認 / 表示確認 | 基本動作確認 | ボタン、メニュー、ページ遷移など基本機能が正しく動くかを確認する | |
| レイアウト / 表示崩れ確認 | 文字、画像、余白、UI要素が意図どおり表示されるかを確認する | クロスブラウザテスト | |
| リンク / 遷移確認 | 内部リンクや外部リンク、導線先のページ遷移が正しいかを確認する | ||
| フォーム / 導線テスト | フォーム入力 / バリデーション確認 | 入力項目、必須チェック、形式チェックなどが正しく動作するかを確認する | 境界値テスト |
| 送信完了 / エラー時確認 | 正常送信時とエラー発生時の表示や挙動が適切かを確認する | 正常系 異常系 エラーメッセージ | |
| CTA / コンバージョン導線確認 | 問い合わせや購入などの導線が分かりやすく、途中で迷わず進めるかを確認する | Google Analytics | |
| ブラウザ / 端末検証 | ブラウザ差異確認 | 主要ブラウザごとに見た目や動作に違いがないかを確認する | Chrome Safari Edge Firefox ブラウザ互換性 |
| レスポンシブ確認 | 画面サイズごとにレイアウトや操作性が保たれているかを確認する | ブレイクポイント ビューポート | |
| 実機 / シミュレーター確認 | PCやスマートフォンなどの実機に加えて、シミュレーター上でも表示や操作感を確認する | Android Studio Xcode | |
| アクセシビリティ / SEOチェック | アクセシビリティ確認 | キーボード操作、読み上げ対応、見やすさなどの観点から使いやすさを確認する | WAI-ARIA axe DevTools Lighthouse アクセシビリティテスト |
| メタ情報 / OGP確認 | タイトル、説明文、OGP画像などが正しく設定されているかを確認する | titleタグ meta description OGP Meta Sharing Debugger | |
| 構造化データ / 検索表示確認 | 構造化データや検索結果上での表示が意図どおりかを確認する | 構造化データ (JSON-LD) Schema.org Schema Markup Validator Google Search Console Rich Results Test | |
| 確認項目 / テストケース整理 | 確認項目の洗い出し | 画面や機能ごとに、何を確認する必要があるかを整理し、確認漏れを防ぐ | テストケース |
| 正常系 / 異常系の整理 | 想定通りに動く場合と、入力ミスやエラー時の動きを分けて確認できるようにする | 正常系 異常系 エッジケース | |
| 修正後の再確認項目整理 | 修正した箇所だけでなく、影響がありそうな関連箇所も含めて再確認項目を整理する | 回帰テスト | |
| 自動テスト基礎 | テスト種類の基礎 | 単体テスト、結合テスト、E2Eテスト、ビジュアルリグレッションテストなど、テストの種類と目的を理解する | 単体テスト 結合テスト E2Eテスト ビジュアルリグレッションテスト |
| 単体テスト基礎 | 関数や処理単位で期待通りの結果になるかを自動で確認する | テストケース モック アサーション Jest Vitest カバレッジ | |
| UI / E2Eテスト基礎 | 画面操作を通した一連の流れを自動で確認する考え方を理解する | テストシナリオ Playwright | |
| テスト自動実行の基礎 | 変更時にテストを自動実行し、品質低下を早めに検知できるようにする | GitHub Actions CIパイプライン | |
| 不具合管理 / 改善 | 不具合報告 / 再現確認 | 発生した不具合の内容を整理し、再現条件を確認する | Backlog GitHub Issues 再現手順 |
| 修正確認 / 再テスト | 不具合修正後に期待通り直っているか、関連箇所へ影響が出ていないかを確認する | Backlog | |
| 改善項目の蓄積 | テストや運用で見つかった課題を記録し、今後の改善につなげる | バグトラッキング |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| Google Search Console | 検索表示や構造化データ、検索上の問題点を確認する |
| Jest | JavaScriptやTypeScriptの単体テストを自動実行する |
| Vitest | フロントエンド開発と相性のよい高速なテストツールとして使う |
| Playwright | ブラウザ操作を自動化し、画面ベースのE2Eテストに使う |
| GitHub Actions | テストの自動実行や品質チェックの自動化に使う |
| axe DevTools | アクセシビリティ上の問題を検出し、改善点を確認する |
| Meta Sharing Debugger | OGPの読み取り結果や共有プレビューを確認する |
| Schema Markup Validator | schema.orgやJSON-LDの記述内容が正しいかを検証する |
| Rich Results Test | 構造化データがGoogleのリッチリザルトとして認識されるか確認する |
| Backlog | 不具合管理や確認項目、修正タスクの管理に使う |
| GitHub Issues | GitHub上で不具合や改善項目をチケットとして管理する |
| Android Studio | Android向けのシミュレーターや実機確認に使う開発環境 |
| Xcode | iPhoneやiPad向けのシミュレーターや実機確認に使う開発環境 |
| Lighthouse | ページのパフォーマンス・アクセシビリティ・SEOを計測し、改善点を提示する |
SEO / マーケティング
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| SEO戦略 / キーワード設計 | キーワード調査 | どの検索語で流入を狙うかを調べ、優先順位を整理する | Google Trends Keyword Planner 検索ボリューム 競合難易度 |
| 検索意図の整理 | ユーザーが何を知りたいか、何を比較したいかなど検索目的を整理する | 検索クエリ分析 検索意図 | |
| 対象ページの設計 | どのキーワードをどのページで扱うかを整理し、ページ同士の役割を分ける | キーワードマップ | |
| コンテンツ最適化 | タイトル / 見出し設計 | 検索キーワードや意図に合わせて、伝わりやすいタイトルや見出しを設計する | titleタグ 見出し構造 Hタグ |
| 本文構成の最適化 | 必要な情報を過不足なく盛り込み、読みやすい順序で本文を構成する | コピーライティング | |
| 内部リンク設計 | 関連ページ同士を適切につなぎ、回遊性と情報理解を高める | 内部リンク パンくずリスト 関連記事導線 | |
| テクニカルSEO | メタタグ最適化 | 検索結果に表示されるタイトルや説明文を整え、内容が正しく伝わるようにする | OGP meta description canonical noindex |
| 構造化データ対応 | 検索エンジンが内容を理解しやすいように、構造化データを設定する | 構造化データ (JSON-LD) Schema.org Schema Markup Validator | |
| インデックス / クロール / 表示速度確認 | 検索エンジンに正しく巡回・登録されるようにしつつ、表示速度や技術的な状態も確認する | XMLサイトマップ robots.txt PageSpeed Insights | |
| 検索結果 / クリック率改善 | title / description改善 | 検索結果一覧で内容が伝わり、クリックしたくなる表現に調整する | CTR A/Bテスト |
| OGP / サムネイル確認 | SNSやチャットで共有されたときに、意図した画像や説明が表示されるかを確認する | OGP Meta Sharing Debugger | |
| リッチリザルト確認 | 構造化データにより、検索結果で追加情報が適切に表示されるかを確認する | Rich Results Test | |
| SNS / 広告との連携 | SNS導線設計 | SNSからサイトへ自然に遷移できる導線や共有導線を整える | シェアボタン SNS連携 |
| 広告流入ページ(LP)設計 | 広告から流入したユーザーが迷わず目的を達成できるようにページを設計する | LP 広告導線 Google Ads Meta Ads ファーストビュー | |
| CV導線最適化 | 問い合わせや購入などの成果地点まで、分かりやすく誘導できるよう改善する | CV CTA | |
| アクセス解析 / 効果測定 | Search Console確認 | 検索クエリ、掲載順位、表示回数、クリック数などを確認する | Google Search Console |
| Analytics確認 | 流入経路、ユーザー行動、コンバージョン状況などを把握する | Google Analytics ヒートマップ ユーザー行動分析 コンバージョン測定 | |
| KPI / CV計測 | 目標に対してどの数値を見るべきかを決め、改善判断に使えるようにする | KPI CV イベント計測 KGI ファネル分析 | |
| 改善運用 / リライト | 順位 / 流入変化の確認 | 検索順位や流入の増減を継続的に確認し、変化の要因を把握する | トラフィック推移 |
| 既存ページ改善 | 既存ページの内容や構成を見直し、検索流入や成果につながるよう改善する | ||
| 効果検証と改善継続 | 施策の結果を確認し、次の改善につなげる流れを回す | PDCA ABテスト |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| Google Search Console | 検索クエリ、掲載順位、インデックス状況などを確認する |
| Google Analytics | 流入経路やユーザー行動、コンバージョンを分析する |
| Google Trends | 検索需要の傾向や季節性、話題の変化を調べる |
| Keyword Planner | キーワード候補や検索ボリュームの目安を調べる |
| Rich Results Test | 構造化データがGoogleのリッチリザルトとして認識されるか確認する |
| Schema Markup Validator | schema.org や JSON-LD の記述内容が正しいかを検証する |
| Meta Sharing Debugger | OGPの読み取り結果や共有プレビューを確認する |
| PageSpeed Insights | ページ表示速度や改善ポイントを確認する |
| Google Ads | 検索広告やディスプレイ広告の配信と流入設計に使う |
| Meta Ads | FacebookやInstagram向け広告の配信と導線設計に使う |
運用 / 監視 / 改善
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 更新運用 / コンテンツ管理 | 更新計画の整理 | どの情報をいつ更新するかを整理し、継続的に運用できる状態を作る | 更新スケジュール 更新フロー |
| ページ / コンテンツ更新 | テキストや画像、ニュース、実績などの情報を適切に更新する | ||
| CMS運用ルール管理 | 誰がどこまで更新できるかや、更新手順・公開ルールを整理する | 権限管理 承認フロー | |
| 監視 / 障害一次対応 | 稼働状況の確認 | サイトや関連サービスが正常に動いているかを日常的に確認する | 死活監視 稼働率 |
| エラー / 障害検知 | 異常や停止、エラー発生に気づけるよう監視情報を確認する | Sentry | |
| 一次切り分け | どこで問題が起きているかを確認し、影響範囲を把握する | ログ確認 原因切り分け 影響範囲 | |
| 復旧依頼 / エスカレーション | 自力で解決できない問題を、適切な担当者や保守先へ迅速に引き継ぐ | エスカレーション インシデント管理 | |
| 定期確認 / 保守 | リンク / フォーム定期確認 | リンク切れやフォーム送信不良など、重要機能を定期的に確認する | |
| 基盤ソフト / セキュリティパッチ更新 | PHPやWebサーバー、OS、ミドルウェアなどの基盤ソフトを定期的に更新し、既知の脆弱性や不具合に対応する | セキュリティパッチ 脆弱性通知 | |
| CMS / プラグイン更新 | CMS本体やプラグイン、関連モジュールを安全に更新する | プラグイン更新 | |
| バックアップ確認 | 復旧に備えてバックアップが取得できているか、利用可能かを確認する | バックアップ 世代管理 | |
| セキュリティ / アカウント管理 | 不要アカウントの整理や権限確認を行い、安全な運用状態を保つ | 権限管理 二段階認証 | |
| アクセス分析 / 改善 | アクセス状況の確認 | 流入数や閲覧状況、主要ページの動きを確認する | Google Analytics Google Search Console トラフィック分析 |
| 課題ページの特定 | 離脱が多いページや成果につながりにくいページを見つける | 離脱率 直帰率 | |
| 改善案の整理 / 施策反映 | 確認結果をもとに改善内容を整理し、優先度をつけて実際の施策へ反映する | PDCA | |
| レポート / 振り返り | 定例レポート作成 | 更新内容やアクセス状況、課題、対応内容を整理して共有する | 月次レポート KPIダッシュボード |
| KPI進捗確認 | 目標に対する進捗を定期的に確認し、必要な対応を判断する | KPI KGI | |
| 施策の振り返り / 次回改善計画 | 実施した更新や改善の結果を振り返り、次に行う改善や対応方針を整理する |
よく使うツール / サービス
| ツール名 / サービス名 | 説明 |
|---|---|
| Google Analytics | 流入数、閲覧状況、コンバージョンなどを確認し、改善判断に使う |
| Google Search Console | 検索流入や掲載順位、検索上の課題を確認する |
| Sentry | エラーや障害の発生を検知し、原因調査の手がかりにする |