GUIDELINE制作ガイドライン

Web制作ガイドライン (2025年2月14日版)

本ガイドラインは、フェニックスデザイン株式会社（以下、当社という）が行うWebサイト制作全般においての品質を保持するために定めたものである。当社は本ガイドラインに基づいたWebサイト制作を行うこととし、お客様に対し常に安定した品質のサービス及び納品物の提供をすることに努める。

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. ドキュメント管理

• ドキュメントのバージョン管理を徹底し、常に最新の状態を保つ
• 変更履歴と承認フローにより、ドキュメントの信頼性を担保する
• アクセス制御により、閲覧できるメンバーを限定し、情報漏洩を防ぐ
• ドキュメントのフォーマットを統一し、メンテナンス性を高める
• 定期的にドキュメントの棚卸しを行い、不要になったものは破棄する