Web制作ガイドライン (2025年2月14日版)
本ガイドラインは、
1. 基本方針
1-1. 目的
- 本ガイドラインは、
当社が 制作する Webサイトの 品質を 高い 水準で 維持する ことを 目的と する - 制作者間の
認識の 共有と スキルの 標準化を 図る ことで、 高品質な Webサイトを 効率的に 制作する
1-2. 基本原則
- Webの
技術の 進歩と ユーザーの ニーズの 変化に 柔軟に 対応できる Webサイトを 目指す - 常に
最新の Web標準と ベストプラクティスに 準拠し、 時代に 即した 開発を 行う - ユーザー目線を
大切にし、 アクセシビリティと ユーザビリティに 配慮した サイト設計を 行う - 一度
作って 終わりではなく、 リリース後の 継続的な メンテナンスと 改善を 前提とした 開発を 行う - チームでの
開発を 念頭に 置き、 メンバー間の コミュニケーションを 活性化しながら 進める
2. 制作フロー
2-1. 要件定義
- クライアントへの
ヒアリングを 通じて、 サイトの 目的や 目標を 明確に する - ユーザーの
ニーズを 的確に 把握し、 ペルソナや ユーザーストーリー、 ジャーニーマップを 作成する - 提供する
コンテンツや サービスを 具体化し、 サイトマップや 画面遷移図を 作成する - 必須の
機能と 実現可能な 機能を 選定し、 MVPを 定義する
2-2. デザイン
情報設計
- コンテンツの
種類や 構造を 整理し、 階層構造や ラベリングを 定める - モバイルファーストの
UIを 前提とした ワイヤーフレームを 作成する - ユーザーの
動線を 考慮した ナビゲーション設計を 行う - GatherContent、
Confluence、 Notionなどの ツールで コンテンツを 管理する
ビジュアルデザイン
- AtomicDesignの
手法を 用いて UIコンポーネントを 設計する - デザインシステムを
構築し、 複数ページでの 一貫性を 保つ - Figmaを
使った コラボレーションと バージョン管理を 行う - スタイルガイドを
作成し、 Zeplinなどの ツールで デザインデータを 共有する
インタラクションデザイン
- ユーザーアクションに
対する フィードバックや アニメーションを 設計する - ハイパーリンクや
ボタン、 フォームなどの 動作を 定義する - ProtoPieや
Originなどの ツールを 使って インタラクションの プロトタイプを 作成する
レスポンシブデザイン
- スマートフォン、
タブレット、 PCそれぞれの 画面サイズに 適した レイアウトを 作成する - 375px、
768px、 1024px、 1440pxの 主要ブレークポイントでの カンプを 作成する - 各ブレークポイント間の
動作を 詳細に 定義する
2-3. コーディング
HTML
- HTML5の
仕様に 準拠し、 セマンティックな マークアップを 行う - WAI-ARIAを
活用し、 アクセシビリティを 高める - OGPや
Twitterカードなどの メタデータを 適切に 設定する - 複雑な
コンテンツ構造の 場合は スキーママークアップ(JSON-LD)を 実装する
CSS
- CSS3の
仕様に 準拠し、 レイアウトや アニメーションを 実装する - Sassなどの
プリプロセッサを 活用し、 変数や mixinを 使って 効率的に コーディングする - OOCSS、
SMACSS、 BEMなどの CSS設計手法を 用いて、 モジュール化して 管理する - Bootstrapや
Tailwind CSS、 Bulmaなどの フレームワークの 採用を 検討する
JavaScript
- ES2015以降の
記法を 用い、 モダンな 開発を 行う - jQueryに
依存せず、 ネイティブの JavaScriptや フレームワークを 活用する - Vue.jsや
React、 Angularなどの フレームワークを 用いた コンポーネント開発を 行う - Webpackなどの
バンドラーや babelなどの トランスパイラを 導入する - TypeScriptの
導入に より 型安全な 開発を 目指す
アクセシビリティ
- WCAG 2.1の
ガイドラインに 準拠し、 適合レベルAA以上を 目指す - セマンティックな
マークアップに 加え、 WAI-ARIAに よる 属性付与を 行う - カラーコントラストを
確保し、 色覚多様性に 配慮する - キーボードのみでの
操作を 可能に する - 画像には
代替テキストを 設定する
パフォーマンス
- 表示速度と
サイズの バランスを 取り、 3秒以内の 表示完了を 目指す - 画像の
圧縮、 ファイルの 最小化、 不要な リクエストの 削減を 徹底する - 重い
ライブラリの 使用は 避け、 軽量で 高速な コードを 心がける - CDNを
活用した キャッシュコントロールや LazyLoadを 実装する - SSRや
PWAの 導入に より 高速化と offline対応を 図る
2-4. CMS実装
WordPress
- カスタムフィールド(ACF)を
活用し、 コンテンツの 構造化を 図る - 不要な
プラグインは 使用せず、 必要最小限の 機能に 絞り込む - 子テーマを
利用した カスタマイズを 行い、 本体アップデートに 備える - Gutenbergエディタの
ブロック開発に より、 リッチな レイアウトを 実現する - Yoastなどの
プラグインを 使って SEOを 最適化する
Headless CMS
- WordPress REST APIや
Contentful、 microCMSなどを 使った ヘッドレス構成を 検討する - フロントエンドと
バックエンドを 分離し、 各システムに 適した フレームワークを 選択する - コンテンツを
APIで 受け渡す ことで、 構造化と 再利用性を 高める - Next.jsや
Nuxt.js、 Gatsbyなどの 静的サイトジェネレータとの 組み合わせで 高速化を 図る
2-5. テスト・デバッグ
単体テスト
- 個々の
コンポーネントが 意図した 通りに 動作する ことを 確認する - Jest、
Mocha、 Jasmineなどの テストランナーと アサーションライブラリを 使用する - ロジックを
伴う JavaScriptの 関数は テストコードに よる 検証を 必須と する - スナップショットテストに
より マークアップの 変更を 検知する - カバレッジレポートに
より 網羅率を 可視化する
結合テスト
- 複数の
コンポーネントを 組み合わせた 際の 動作を 確認する - Storybookや
Styleguidistなどの ツールで ビジュアルテストを 行う - データの
受け渡しや 画面遷移などの 一連の フローを テストする - Cypressなどを
用いた E2Eテストを 自動化する
総合テスト
- 実際の
デバイスや 各種ブラウザでの 表示や 操作性を 確認する - ページ読み込み速度や
サーバーへの 負荷などの 非機能要件も テストする - クロスブラウザテストツール(BrowserStack, LambdaTestなど)を
活用する - 自動化した
ビジュアルリグレッションテスト(BackstopJS, Puppetieerなど)に より 変更を 検知する - ユーザビリティテストを
実施し、 実際の ユーザーの 声を 反映する
2-6. 運用・保守
デプロイ
- コードの
変更を Gitで 管理し、 GitHubや Bitbucketで Pull Requestベースの 開発を 行う - テスト、
ビルド、 デプロイの 自動化に より ヒューマンエラーを 防ぐ - Stagingと
Productionの 環境を 分離し、 安全性を 高める - 各環境への
自動デプロイには GitHub Actionsや CircleCIを 利用する - デプロイ後は
自動テストを 実行し、 問題ない ことを 確認してから リリースする
バージョン管理
- SemVer(Semantic Versioning)に
従った バージョン管理を 行う - Git-flowモデルを
採用し、 develop、 release、 hotfixブランチを 使い分ける - リリース単位で
タグ付けを 行い、 バージョンを 明示する - CHANGELOGを
自動生成し、 各バージョンの 変更内容を 明記する
監視・分析
- サーバーや
DBの 稼働状況を 監視し、 ダウンタイムを 未然に 防ぐ - NewRelicや
Datadogなどの サービスを 利用し、 リソース使用率の 変化を 監視する - アクセスログ解析(Google Analytics、
Adobe Analyticsなど)に より ユーザーの 行動を 分析する - ヒートマップツール(Ptengine、
Hotjarなど)に より ユーザビリティの 改善に つなげる - A/Bテストツール(Google Optimize、
VWOなど)に より、 UI改善の 効果を 測定する
リファクタリング
- 定期的に
コードを 見直し、 冗長な 記述や 非効率な 実装を 改善する - 新しい
技術トレンドを 積極的に 取り入れ、 より 良い コードを 目指す - パフォーマンスボトルネックの
特定と 解消に より、 サイトを 進化させ続ける - 外部ライブラリの
更新と セキュリティパッチの 適用を 欠かさない - ドキュメントの
整備と 知識の 共有に より 属人化を 防ぐ
3. セキュリティ
3-1. コーディングガイドライン
- OSコマンドインジェクション、
SQLインジェクション、 XSSなどの 脆弱性を 作り込まない - CWE(Common Weakness Enumeration)などを
参照しながら セキュアコーディングを 行う - ユーザー入力値は
必ずサーバーサイドでも バリデーションする - APIの
認可には OAuth 2.0を 使い、 トークンの 形式は JWTを 利用する - SSL/TLSに
よる 通信の 暗号化と 常時SSL化を 必須と する
3-2. 認証・認可
- パスワードポリシー(8文字以上、
複雑さ、 定期変更など)の 厳格化に より 不正ログインを 防ぐ - 多要素認証(SMS、
トークン、 生体認証など)を 導入し、 セキュリティ強度を 高める - パスワードレス認証(Magic Link、
WebAuthn)の 採用に より 利便性と セキュリティを 両立する - 機械学習を
用いた 異常検知(Stripe Radar、 Scouringなど)で 不正アクセスを 検知する - 不要な
アカウントを 定期的に 削除し、 アカウント管理を 徹底する
3-3. 脆弱性診断
- 定期的に
脆弱性診断を 行い、 問題点を 洗い出す - WHISPERSや
W3af、 ZAPなどの ツールを 使って ブラックボックステストを 行う - 発見された
脆弱性は 速やかに 修正し、 再発防止に つなげる - 必要に
応じて ペネトレーションテストを 外部に 委託し、 客観的な 評価を 受ける - DevSecOpsの
考えを 取り入れ、 開発の 初期段階から セキュリティテストを 組み込む
3-4. インシデント対応
- 問題発生時の
連絡体制と 対応手順を マニュアル化しておく - インシデントの
検知から 対処、 報告、 防止までの PDCAサイクルを 回す - インシデントレスポンスプラットフォーム(PagerDuty、
Opsgenie)などを 導入する - フォレンジック調査に
より 原因を 特定し、 被害範囲を 確認する - 二次被害防止の
ためにも、 インシデント情報を 関係者で 共有する
3-5. 情報管理
- 機密情報の
取り扱いルールを 定め、 アクセス制御を 徹底する - 社内システムへの
アクセス時は 二要素認証を 必須と する - VPNや
ゼロトラストネットワーク(Zscalerなどの SASE)に より 社外からの アクセスを 管理する - オンラインストレージ(Box、
Dropboxなど)の 利用時は 暗号化を 必須と する - 情報漏洩対策と
して DLP(Data Loss Prevention)システムの 導入を 検討する - 業務で
使用する すべての デバイスに おいて、 OSや ソフトウェアを 常に 最新の 状態に 保つ - 社員教育に
より 情報セキュリティ意識の 向上を 図る
4. パフォーマンス
4-1. 計測・分析
- Lighthouseを
使って ページの 表示速度と パフォーマンススコアを 計測する - WebPagetestで
さまざまな 回線速度や 地域での ロード時間を 比較する - SpeedCurveや
NewRelicなどの ツールで パフォーマンス状況を 常時監視する - Google Search Consoleに
より 検索エンジンからの 評価を 確認する - Chrome DevToolsを
使って ボトルネックと なっている 要因を 特定する
4-2. フロントエンド最適化
- 初回ペイントまでの
時間を 短縮する ため、 クリティカルレンダリングパスを 最適化する - JavaScriptや
CSSの ファイルサイズを 圧縮しリクエスト数を 減らす - 画像ファイルを
WebP形式に 変換し、 レスポンシブ画像で 最適な サイズを 読み込む - Vueなどの
フレームワークで 開発時は SSRを 検討し、 ファーストビューを 高速化する - Nuxt.jsのような
フレームワークの プリフェッチ機能に より、 次ページの 読み込みを 先読みする
4-3. バックエンド最適化
- N+1問題を
解消し、 DBへの クエリ発行回数を 減らす - キャッシュサーバー(Redisなど)を
利用し、 DBへの 読み取り負荷を 下げる - 複数台の
Webサーバーで ロードバランシングを 行い、 レスポンス時間を 短縮する - CDN(Cloudflare、
Fastlyなど)を 使って 静的コンテンツを エッジで 配信する - サーバーレスアーキテクチャに
より、 トラフィック 変動に 柔軟に 対応する
4-4. PWA
- Service Workerを
使って キャッシュ制御を 行い、 2回目以降の 訪問を 高速化する - キャッシュファーストの
戦略で、 オフライン時の 表示を 可能に する - Manifest.jsonに
より ホーム画面への インストールを 可能にし、 ネイティブアプリのような UXを 実現する - Push APIに
より プッシュ通知を 実装し、 ユーザーの リピート率を 高める - ネイティブの
機能(カメラ、 位置情報、 音声入力など)を 活用した サービスを 検討する
4-5. SEO
- サイトの
インデックス構造を 明確にし、 クローラビリティを 高める - robots.txtと
XMLサイトマップに より、 クロールの コントロールと インデックスの 促進を 行う - 各ページに
ユニークで 適切な タイトルと 説明文を 設定し、 検索結果での 見え方を 最適化する - 構造化データ(JSON-LD)に
より Googleリッチリザルトへの 対応を 検討する - パンくずリストや
カノニカルタグを 正しく 実装し、 重複コンテンツを 防ぐ
5. アクセシビリティ
5-1. セマンティックHTML
- ランドマークに
より ページ内の 主要な 領域を 明示する。 (header, nav, main, aside, footer) - 見出しの
階層構造を 守り、 アウトラインを 明確に する - リスト(ul, ol, dl)を
用途に 合わせて 使い分ける - テーブル(table)は
データの 表示にのみ 用い、 レイアウトには 使わない - ボタン(button)と
リンク(a)を 区別し、 正しい 用途で 使用する
5-2. WAI-ARIA
- ランドマークや
見出しだけでは 表現しきれない セマンティクスを ARIAで 補完する - ウィジェット(メニュー、
タブ、 アコーディオンなど)の 操作性を ARIAで 向上させる - ARIAラベルに
より、 特殊な コントロールの 役割を 明示する - ライブリージョンに
より、 動的な 変化を アナウンスする - 状態の
変化(expanded, checked, selectedなど)を 適切な ARIA属性で 伝える
5-3. カラーユニバーサルデザイン
- 色の
違いだけで 情報を 伝える ことは 避け、 アイコンや 線種、 テキストなどと 組み合わせる - 文字と
背景の コントラスト比を 十分に 確保する。 (4.5:1以上 ) - グラフなどで
複数の 色を 使う際は、 色覚多様性に 配慮した カラーパレットを 利用する - フォーカス時や
ホバー時の 状態変化を 色だけでなく、 枠線の 変化などでも 表現する - 白黒反転表示など、
OSの アクセシビリティ機能への 対応を 検討する
5-4. フォーム
- label要素と
for属性で フォームコントロールと ラベルを 関連づける - placeholderは
補足的な 説明にのみ 使い、 ラベルの 代わりには しない - 必須項目の
フォームコントロールに aria-required属性を 付与する - 入力エラー時は、
問題の ある 箇所と エラーの 内容を テキストで 説明する - 複雑な
入力項目には フィールドセットと レジェンドで グループ化する
5-5. マルチメディア
- img要素の
alt属性に 代替テキストを 提供し、 装飾的な 画像は 空に する - 情報を
伝える 重要な 画像には figcaptionで 説明文を 付ける - videoや
audio要素には キャプションと トランスクリプトを 提供する - 音声や
動画に 含まれる 重要な 情報は、 テキストでも 伝える - アニメーションの
点滅は 1秒間に 3回を 超えないように する
6. パフォーマンス設計
6-1. ネットワーク
- HTTPリクエストを
減らすため、 ファイルの 結合や 画像スプライトを 検討する - テキストファイルの
圧縮には gzip、 brotliなどを 使用する - ブラウザキャッシュを
活用し、 適切な Cache-Control、 ETagヘッダを 設定する - 不要な
リダイレクトを 減らし、 リソースの パスを 一定に 保つ - 既存の
TCP接続を 再利用する ため、 HTTP/2への 対応を 検討する
6-2. レンダリング
- CSSの
非同期読み込みに より、 レンダーブロッキングを 回避する - JavaScriptの
非同期読み込み （defer）に より、 DOMの パースを 妨げない - 不要な
CSSや JavaScriptを 削除し、 全体の ファイルサイズを 減らす - スタイルの
再計算やリフローを 最小限にし、 レンダリング時間を 短縮する - CSSアニメーションを
使い、 JavaScriptアニメーションを 減らす
6-3. JavaScript実行
- JavaScriptの
パースと 実行に かかる 時間を 短縮する ため、 バンドルサイズを 小さく する - 初期ロード時に
不要な コードを 遅延ロードし、 TTIを 改善する - DOMアクセスを
最小限にし、 reflow、 repaintを 抑える - WebWorkerを
使って 重たい 処理を バックグラウンドで 実行する - メモ化や
キャッシュを 活用し、 重複する 計算を 避ける
6-4. フォント
- Webフォントの
サイズを 小さくし、 サブセットを 使って 必要な 文字だけを 読み込む - js-prioritized、
swap、 optionalなどの font-display戦略を 選択する - 重要な
テキストには system fontを 使い、 CUFONや SVGフォントの 使用は 避ける - Font Smoothingに
よって フォントの レンダリング品質を 上げる - OSや
ブラウザの デフォルトフォントサイズを 尊重する
6-5. PWA
- App Shellモデルを
導入し、 ファーストビューの 表示を 高速化する - Service Workerを
使って リソースを プリキャッシュし、 オフライン対応を 実現する - Add to Homescreen (A2HS)に
よって、 ネイティブアプリのような エクスペリエンスを 提供する - Cache APIや
IndexedDBを 使って、 動的な コンテンツを オフラインで 利用可能に する - バックグラウンドフェッチに
より、 大容量コンテンツを ダウンロードする
7. 情報設計
7-1. IA (Information Architecture)
- カードソートなどの
UXリサーチ手法に よって、 ユーザーの 思考モデルを 理解する - サイトの
コンテンツを 棚卸しし、 情報の 関連性と 優先順位を 明確に する - ツリー構造に
より、 情報の 階層と グループ化を 定義する - ラベリングシステムに
より、 情報の 種類や 粒度に 応じた 命名規則を 設ける - フォールダウトテストに
より、 情報の 見つけやすさを 評価する
7-2. ナビゲーション
- グローバルナビゲーションに
より、 サイト全体の 主要な セクションへの アクセスを 提供する - ローカルナビゲーションに
より、 現在の セクション内の 関連ページへの 移動を アシストする - コンテキストナビゲーションに
より、 現在の ページと 関連する 重要なリンクを 提示する - サイト内検索を
設け、 キーワードに よる コンテンツへの ダイレクトアクセスを 可能に する - ブレッドクラムに
より、 現在位置を 明示し、 階層を 遡れるように する
7-3. サイトマップ
- サイトマップには
IA全体を 反映し、 情報の 全体像を 利用者に 伝える - 2クリック/3クリックルールに
より、 主要な コンテンツへの アクセスを 最適化する - セクション内の
ページ数が 多くなる 場合は、 インデックスページを 設けて 整理する - ユーザーの
主要な ゴールと タスクを 分析し、 シンプルな 構成を 心がける - 定期的に
アクセス解析を 行い、 利用されていない コンテンツを 改善・削除する
7-4. タクソノミー
- コンテンツの
特性と 階層関係に 基づいて、 情報の カテゴリ分類を 行う - 閲覧履歴や
購買履歴など、 ユーザー属性に 応じた ファセット分類を 検討する - シソーラス辞書を
整備し、 統制語と 非統制語を 紐付ける - 共起語の
分析や LSIなどにより、 新たな 分類軸の 発見を 試みる - 機械学習に
よる 自動分類の 仕組みを 取り入れる
7-5. メタデータ
- Dublin Coreなどの
標準的な 語彙で ページの 主題と 属性情報を 記述する - コンテンツを
一意に 同定する ための 識別子 （URI/DOI/ISBNなど）を 付与する - Schema.orgや
OGP、 Twitterカードに よって ページの 概要情報を 提供する - ISO 8601などの
標準的な 記法で 日付と 時刻の データを 記述する - XMPや
IPTC、 EXIFなどの メタデータ規格を 画像や 動画に 応用する
8. ドキュメンテーション
8-1. デザインドキュメント
- デザインシステムを
構成する コンポーネントの カタログを 整備する - コーディングガイドラインにより、
HTMLと CSSの 記述ルールを 標準化する - パターンライブラリを
公開し、 モジュールの 使い方を 説明する - スタイルガイドにより、
サイトの 色彩、 タイポグラフィー、 トーンアンドマナーを 規定する - ビジュアル仕様書に
より、 画面の 表示ルールを 細部まで 指示する
8-2. 機能仕様書
- フロントエンドの
機能要件を 明確に 定義する - ユースケース図や
画面遷移図に より、 画面と システムの 振る 舞いを 可視化する - REST APIの
仕様を Swaggerなどの ツールで 管理し、 外部連携を 円滑に する - E2Eテストの
シナリオを 具体的な テストケースと して 記述する。 - 非機能要件
（パフォーマンス、 セキュリティ、 アクセシビリティなど）の 基準値を 設定する
8-3. プロジェクトドキュメント
- プロジェクトの
目的と ゴールを 明文化し、 関係者間で 共有する - マイルストーンと
デリバラブルを 定義し、 スケジュールを 策定する - コミュニケーションプランに
より、 会議体と 情報共有の ルールを 定める - 課題管理表に
より、 リスクと 対応策を 可視化する - 議事録に
より、 決定事項と 行動項目を 記録し、 進捗を 追跡する
8-4. ナレッジ共有
- ナレッジベースを
構築し、 FAQや HowTo、 トラブルシューティングの 情報を 蓄積する - 開発者向けの
Wikiを 整備し、 技術的な 情報を 集約する - 社内ブログやフィードに
より、 チーム内の 知見を 共有する - 勉強会や
読書会を 開催し、 最新技術の キャッチアップに 努める - カンファレンスへの
登壇や OSS活動を 通じて、 社外への アウトプットを 行う
8-5. ドキュメント管理
- ドキュメントの
バージョン管理を 徹底し、 常に 最新の 状態を 保つ - 変更履歴と
承認フローに より、 ドキュメントの 信頼性を 担保する - アクセス制御に
より、 閲覧できる メンバーを 限定し、 情報漏洩を 防ぐ - ドキュメントの
フォーマットを 統一し、 メンテナンス性を 高める - 定期的に
ドキュメントの 棚卸しを 行い、 不要に なった ものは 破棄する