Webフロントエンド設計ガイドライン
Web Frontend Design Guidelines
Skip to content
はじめに
昨今のWebフロントエンド領域は、単なるHTML、CSS、JavaScriptでのページ制作から、React、Vue.jsなどのモダンなフレームワークを活用した大規模かつ動的なWebアプリケーションの構築へと変化している。これにより、開発の効率化とユーザー体験（UX）が向上する一方で、設計の考慮点も多様化している。また、セキュリティ、アクセシビリティなどより多面的な品質も求められている。本ガイドラインでは、Webフロントエンド設計における考慮点・設計パターン・推奨手法を提示し、開発チームが設計方針を決めるための土台を提供する。
免責事項
- 有志で作成したドキュメントである。フューチャーには多様なプロジェクトが存在し、それぞれの状況に合わせて工夫された開発プロセスや高度な開発支援環境が存在する。本ガイドラインはフューチャーの全ての部署／プロジェクトで適用されているわけではなく、有志が観点を持ち寄って新たに整理したものである
- 相容れない部分があればその領域を書き換えて利用することを想定している。プロジェクト固有の背景や要件への配慮は、ガイドライン利用者が最終的に判断すること。本ガイドラインに必ず従うことは求めておらず、設計案の提示と、それらの評価観点を利用者に提供することを主目的としている
- 掲載内容および利用に際して発生した問題、それに伴う損害については、フューチャー株式会社は一切の責務を負わないものとする。掲載している情報は予告なく変更する場合がある
前提条件
本ガイドラインは、Webフロントエンドの開発者・アーキテクトを対象とする。
以下の項目は解説しない。
- 基本的なWeb技術に関する知識（HTML、CSS、JavaScript、HTTP通信など）
- React、Vue.jsなどのフレームワークの基礎知識
本ガイドラインの適用範囲は、ブラウザ上で動作するWebフロントエンドを対象とし、バックエンド（サーバーサイド）は対象外とする。また、一般的にフロントエンド領域に含まれることもある以下の領域も対象外とする。
- CDN（Contents Delivery Network）
- BFF（Backend For Frontend）
また、本ガイドラインは基本的に、業務アプリケーションの開発 を想定して作成している。例えば大規模なtoC向けサービスと比較して、以下のような特性を持つことが多い点を考慮しているためである。
- 権限管理が細かく、所属部署や役職で表示内容が細かく変わる、データの更新頻度が高いなどの理由で、CDN等を用いた積極的なキャッシュ戦略の効果が限定的
- 複雑なデータ入力フォームや、多機能なテーブル表示など、状態管理やUI制御が複雑になりやすい
- 利用するデバイスは比較的、絞り込みやすい
なお、ホスティング方式など、インフラ構成に関する記述はAWSを前提とする。
用語
| 用語 | 説明 |
|---|---|
| toB | 企業向けのサービスの意味 |
| toC | 一般消費者向けのサービスの意味 |
| Webフロントエンド | ブラウザ上で動作するWebアプリケーションでユーザーが操作するUI部分のこと |
| 静的ファイル | ブラウザで表示するために必要なHTML、CSS、JavaScript、画像、動画などのファイル |
| SPA | Single-page applicationの略。はウェブアプリの実装方法の一種で、単一のウェブ文書のみを読み込み、別の内容を表する際には フェッチなどの JavaScript API を通じて本文の内容を更新するもの |
| OSS | オープンソースソフトウェア |
| B/Gデプロイ | Blue/Greenデプロイメントの略。システムのダウンタイムを最小限に抑えてリリースするデプロイ手法のこと。本番環境（Blue環境）とは別に、新しいバージョン（Green環境）を構築し、ロードバランサーなどでトラフィックを切り替えることで、新旧の環境を同時に稼働させ、切り替え後の動作確認やロールバックを容易に行うことといったこと指す |
| LB | Load Balancerとは、トラフィックを複数のサーバに分散するミドルウェアのこと |
| FaaS | Function as a Service の略。イベントに応じてコードを実行できるサーバーレスアーキテクチャのこと。AWS Lambdaが有名 |
本ガイドラインの構成について
大まかに以下の1～8の流れで構成されている。
- 構成方針（ホスティング、レンダリング方式、コンポーネント設計など）
- 要件（対応ブラウザ、サポートバージョンなど）
- 動作方針（バリデーション、ルーティング、状態管理など）
- 表示制御（レスポンシブ、画像など）
- オフライン対応（PWAやオフライン判定方式など）
- 認証認可（認証方式、認可方針など）
- 開発（静的解析など）
- テスト（テスト方針など）
謝辞
このアーキテクチャガイドラインの作成には多くの方々にご協力いただいた。心より感謝申し上げる。
- 作成者: 武田大輝、小杉山護、長谷川寛人、小澤泰河、中村立基、山本竜玄、宮崎将太、村田靖拓、澁川喜規、真野隼記
Articles
- 2025.09.11 Webフロントエンド設計ガイドラインを公開しました