※ この記事の日本語には、少し不自然な部分があるかもしれません。AIの言語サポートを利用しながら作成しています。
目次
はじめに
この記事は、フロントエンドプロジェクトをこれから始める方、または既に進行中のプロジェクトで品質に課題を感じている方を対象としています。
筆者について：私は現在、日本市場向けのシステム開発を手がけるTOMOSIA VIETNAMでエンジニアとして働いています。この記事に記載するチェックリストは、実際のプロジェクトで適用・検証されたものであり、AIが生成したものではありません。
この記事の目的：
- フロントエンド開発における非機能要件（NFR） の全体像を把握する
- プロジェクトで具体的に「何を」「どの基準で」要求すべきかを明確にする
- 品質の高いプロダクトを効率的に届けるための共通言語を提供する
想定読者：
- フロントエンドエンジニア（ジュニア〜シニア）
- プロジェクトリーダー、テックリード
- 品質管理や顧客対応に関わる方
この記事の使い方：
- プロジェクト立ち上げ時に、このリストをベースに要件を洗い出してください
- 必要に応じて基準値（指標）をプロジェクトに合わせて調整してください
- 「何を計測するか」だけでなく「どう計測するか」も参考にしてください
A. 非機能要件とは？なぜ気にすべきか
非機能要件とは
非機能要件（Non-Functional Requirements: NFR） とは、システムが「何をするか」（機能）ではなく、「どのように行うか」――つまり品質、特性、制約条件を記述する要件です。
機能要件との違い
| 機能要件 (FR) | 非機能要件 (NFR) |
|---|---|
| 「ユーザーはログインできる」 | 「ログインは2秒以内に完了する」 |
| 「システムは商品一覧を表示する」 | 「システムは10,000人が同時に利用しても動作する」 |
| 「ユーザーは検索できる」 | 「検索はデータを漏らさず、安全に行う」 |
| 「決済ボタンがある」 | 「モバイル・タブレット・デスクトップで見やすい」 |
なぜ非機能要件を気にすべきか
1. 顧客は言葉にしないが、「感覚」で評価する
顧客は「NFR」という言葉を知らなくても、次のように言います：
- 「アプリが遅すぎる」 → パフォーマンスNFRの欠如
- 「なぜ突然エラーになるの？」 → 信頼性NFRの欠如
- 「ハッキングされたらどうする？」 → セキュリティNFRの欠如
- 「見た目が気持ち悪い」 → ユーザビリティNFRの欠如
2. 「作ること」と「プロフェッショナルに作ること」を区別する
- 作ること：ログイン、カート、決済があればOK
- プロフェッショナルに作ること：ログインは速く、カートはオフラインでも壊れず、決済は安全に、UIはあらゆるデバイスでスムーズに
→ NFRこそが、学生の課題とプロのチームの差を生み出します。
3. 自分自身（開発者・リーダー）を守る
NFR（遅い・スケールしない・脆弱・保守困難）が原因でプロジェクトが失敗した場合：
- 顧客はあなたを責める
- 上司は「なぜ最初から考えなかったのか」と問う
- あなたは夜通し修正することになる
逆に、NFRを最初に明確にしておけば：
- 無理な機能追加を断る根拠になる：「この機能を入れるとパフォーマンス予算に影響します。あと3日必要です」
- 品質の証拠となる：「LCP 2.5秒未満、Lighthouse 95以上を3つのブラウザで達成しています」
B. フロントエンドで考慮すべき非機能要件リスト
1. パフォーマンス
| 区分 | 要件 | 指標 | 参考基準 | 測定方法 |
|---|---|---|---|---|
| パフォーマンス | First Contentful Paint (FCP) | < 1.5秒 | Google Web Vitals (Good: ≤1.5s) | Lighthouse, Chrome DevTools |
| パフォーマンス | Largest Contentful Paint (LCP) | < 2.5秒 | Google Web Vitals (Good: ≤2.5s) | Lighthouse, Chrome DevTools |
| パフォーマンス | Time to Interactive (TTI) | < 2.5秒 | Google Web Vitals (Good: ≤2.5s) | Lighthouse, Chrome DevTools |
| パフォーマンス | Cumulative Layout Shift (CLS) | < 0.1 | Google Web Vitals (Good: ≤0.1) | Lighthouse, Chrome DevTools |
| パフォーマンス | First Input Delay (FID) | < 100ms | Google Web Vitals (Good: ≤100ms) | Lighthouse, Chrome DevTools |
| パフォーマンス | Interaction to Next Paint (INP) | < 200ms | Google Web Vitals (Good: ≤200ms) | Chrome DevTools, web-vitals |
| パフォーマンス | Time to First Byte (TTFB) | < 600ms | Google Web Vitals (Good: ≤600ms) | Lighthouse, Chrome DevTools |
| パフォーマンス | Speed Index | < 3.0秒 | Lighthouse (Good: ≤3.4s) | Lighthouse, WebPageTest |
| パフォーマンス | スクロール滑らかさ | 60fps、カクつきなし | RAIL model (Animation: 60fps) | Chrome DevTools → FPS meter |
| パフォーマンス | JSバンドルサイズ | < 500KB (gzip) | Lighthouse推奨 | Bundle analyzer |
| パフォーマンス | CSSバンドルサイズ | < 100KB (gzip) | Lighthouse推奨 | Bundle analyzer |
| パフォーマンス | 画像・動画の遅延読み込み | ビューポートに入ったら読み込み | W3C Intersection Observer | DevTools Network |
| パフォーマンス | APIレスポンス表示 | < 500ms | RAIL model (Response time) | DevTools Network tab |
| パフォーマンス | ページ全体読み込み時間 | < 3.0秒 | Lighthouse (Good: ≤3.0s) | Lighthouse, GTmetrix |
2. セキュリティ
| 区分 | 要件 | 指標 | 参考基準 | 測定方法 |
|---|---|---|---|---|
| セキュリティ | XSS対策 | ユーザー入力からスクリプトを実行させない | OWASP Top 10 (A3: Injection) |
<script>alert('XSS')</script>を入力 |
| セキュリティ | CSRF対策 | TokenまたはSameSite Cookie | OWASP Top 10 (A8: CSRF) | リクエストにトークンがあるか確認 |
| セキュリティ | HTTPS | 全ページHTTPS | OWASP (A2: Cryptographic Failures) | URLと証明書を確認 |
| セキュリティ | Content Security Policy (CSP) | 基本的なCSPヘッダー | OWASP (CSP recommendations) | レスポンスヘッダーを確認 |
| セキュリティ | X-Frame-Options | DENY または SAMEORIGIN | OWASP (Clickjacking) | レスポンスヘッダーを確認 |
| セキュリティ | X-Content-Type-Options | nosniff | OWASP (MIME sniffing) | レスポンスヘッダーを確認 |
| セキュリティ | Referrer-Policy | strict-origin-when-cross-origin | W3C Referrer Policy | レスポンスヘッダーを確認 |
| セキュリティ | localStorage/sessionStorage | 機密情報を保存しない | OWASP (Secure storage) | Application → Storage を確認 |
| セキュリティ | パスワード（フロントエンド） | ログ出力・保存・平文送信禁止 | OWASP (Password storage) | ネットワークリクエストを確認 |
| セキュリティ | JWTトークン保存 | httpOnly Cookie またはメモリ（localStorage禁止） | OWASP (Token storage) | ストレージを確認 |
| セキュリティ | 環境変数 | クライアントコードにキー・シークレットを露出しない | 12-factor app | ソースコード、DevToolsを確認 |
3. プライバシー
| 区分 | 要件 | 指標 | 参考基準 | 測定方法 |
|---|---|---|---|---|
| プライバシー | Cookie同意 | Cookie設定前に同意バナーを表示 | GDPR (Art. 7), CCPA | 初回アクセス時のバナーを確認 |
| プライバシー | プライバシーポリシー | 明確なプライバシーポリシーへのリンク | GDPR, APPI（日本） | フッターや専用ページを確認 |
| プライバシー | データ最小収集 | 必要なデータのみ収集 | GDPR (Data minimization) | フォームやアナリティクスを確認 |
| プライバシー | 匿名化 | 個人情報を公開表示しない | GDPR (Pseudonymization) | UIでメールや電話番号が表示されていないか確認 |
| プライバシー | 消去権 | ユーザーがアカウント削除を要求できる | GDPR (Art. 17 Right to erasure) | アカウント削除機能を確認 |
| プライバシー | データポータビリティ | ユーザーが個人データをダウンロードできる | GDPR (Art. 20 Data portability) | データエクスポート機能を確認 |
| プライバシー | アナリティクストラッキング | トラッキングを拒否できる | GDPR (Opt-out consent) | 設定画面や拒否ボタンを確認 |
| プライバシー | ロギング | 機密情報をログに出力しない | OWASP (Logging) | ログファイルを確認 |
4. ユーザビリティ
| 区分 | 要件 | 指標 | 参考基準 | 測定方法 |
|---|---|---|---|---|
| ユーザビリティ | 主要タスク完了 | ≤ 30秒、≤ 3クリック | ISO 9241-11, 3-click rule | User testing, recording |
| ユーザビリティ | タスク成功率 | ≥ 95% | ISO 9241-11 | User testing |
| ユーザビリティ | 重要なアクションの確認 | Toast/通知あり | Nielsen Norman Group (Feedback) | 削除・送信後の動作を確認 |
| ユーザビリティ | ローディング状態 | スケルトン/スピナーあり | Google Material Design | API呼び出し時の表示を確認 |
| ユーザビリティ | エラーメッセージ | 理由＋対応方法を明示 | Nielsen Norman Group | ネットワークエラーやバリデーションエラーを確認 |
| ユーザビリティ | 元に戻す | 5秒以内に取り消し可能 | Nielsen Norman Group | 削除・更新後に確認 |
| ユーザビリティ | レスポンシブ | デスクトップ・タブレット・モバイル対応 | W3C responsive design | Chrome DevTools Device Toolbar |
| ユーザビリティ | ダークモード | ダークインターフェースのサポート | OS preference, Material Design | 切り替えボタンを確認 |
| ユーザビリティ | 読みやすいフォント | ≥ 16px, line-height ≥ 1.5 | WCAG 2.1 (1.4.8) | CSSと見た目を確認 |
5. 可用性
| 区分 | 要件 | 指標 | 参考基準 | 測定方法 |
|---|---|---|---|---|
| 可用性 | アップタイム | ≥ 99.9% | ISO 27001 (Availability) | UptimeRobot, Statuspage |
| 可用性 | 年間最大停止時間 | ≤ 8.76時間/年 (99.9%) | SLA standard | 計算: 365×24×0.001 |
| 可用性 | 月間最大停止時間 | ≤ 43.2分/月 (99.9%) | SLA standard | 計算: 30×24×60×0.001 |
| 可用性 | エラー率 (5xx) | < 0.1% | Google SRE book | Sentry, Datadog |
| 可用性 | グレースフルデグラデーション | API障害時も主要機能が動作 | Resilience engineering | APIをオフにしてUIを確認 |
| 可用性 | フォールバックUI | エラー時に親切な表示＋再試行ボタン | OWASP (Error handling) | APIエラー時の表示を確認 |
| 可用性 | メンテナンスモード | メンテナンス時の通知あり | DevOps best practice | デプロイ時の表示を確認 |
| 可用性 | オフライン対応 (PWA) | オフライン時も基本ページにアクセス可能 | PWA standard | ネットワークをオフにしてリロード |
6. スケーラビリティ
| 区分 | 要件 | 指標 | 参考基準 | 測定方法 |
|---|---|---|---|---|
| スケーラビリティ | ルートの遅延読み込み | ルート単位でコード分割 | Lighthouse (Code Splitting) | ルートごとにバンドルが分割されているか確認 |
| スケーラビリティ | 仮想リスト | 10,000項目をカクつかずに表示 | TanStack Query, react-window | 10,000項目でテスト |
| スケーラビリティ | 無限スクロール | 末尾までスクロールしたら追加読み込み | Common pattern | フィードスクロールを確認 |
| スケーラビリティ | Debounce/Throttle | 検索・スクロール・リサイズ時に適用 | RAIL model (Response <100ms) | イベントリスナーを確認 |
| スケーラビリティ | メモ化 | React.memo, useMemo, useCallback | React performance best practices | React DevTools Profiler |
| スケーラビリティ | CDN | JS、CSS、画像をCDNから配信 | CloudFront, Cloudflare | ネットワークでCDNから配信されているか確認 |
| スケーラビリティ | キャッシュ戦略 | HTTPキャッシュ、Service Worker | RFC 9111 (HTTP Caching) | キャッシュヘッダーを確認 |
| スケーラビリティ | 同時ユーザー（FE） | 10,000人以上の同時利用をサポート | Load testing standard | K6, Artillery |
7. 正確性
| 区分 | 要件 | 指標 | 参考基準 | 測定方法 |
|---|---|---|---|---|
| 正確性 | データ表示 | APIのデータと一致 | ISO 25010 (Functional correctness) | UIとAPIレスポンスを比較 |
| 正確性 | フロントエンド計算 | ロジックどおりの正しい結果 | IEEE 829 (Test accuracy) | Unit test, integration test |
| 正確性 | フォームバリデーション | 不正入力を検出し送信させない | OWASP (Input validation) | 不正なメール・負の数・空欄などでテスト |
| 正確性 | 数値・通貨・日付のフォーマット | ロケール（JP, VN, EN）に準拠 | Unicode CLDR, ISO 8601 | 複数ロケールでテスト |
| 正確性 | 認証 | 不正なページアクセスを許可しない | OWASP (Authorization) | 一般ユーザーで /admin にアクセス |
| 正確性 | 認可 | 自分のデータのみ表示・編集可能 | OWASP (Authorization) | ユーザーAがユーザーBの記事を編集しようとする |
| 正確性 | リアルタイムデータ | 正確な時間でデータ更新 | WebSocket standard | データ受信時間を確認 |
| 正確性 | 検索結果 | キーワードに関連する結果を表示 | ISO 25010 (Search accuracy) | 様々なキーワードで検索テスト |
8. 保守性
| 区分 | 要件 | 指標 | 参考基準 | 測定方法 |
|---|---|---|---|---|
| 保守性 | コード規約 | ESLint エラー0、警告0 | Airbnb JavaScript Style Guide | npm run lint |
| 保守性 | コードフォーマット | Prettierを全コードベースに適用 | Prettier default config | npx prettier --check |
| 保守性 | コンポーネント再利用 | 3回以上再利用されているコンポーネント | DRY principle | 手動確認 |
| 保守性 | ドキュメント | README: setup, run, build, test | Conventional Commits | READMEファイルを確認 |
| 保守性 | フォルダ構成 | components, pages, services, utils, hooks | Feature-based または role-based | 手動確認 |
| 保守性 | Gitコミット規約 | Conventional Commits (feat, fix, docs, style...) | Conventional Commits spec | コミット履歴を確認 |
| 保守性 | TypeScriptカバレッジ | ≥ 90%（TS使用時） | Microsoft TypeScript |
tsc --noEmit, ts-coverage |
| 保守性 | 単体テストカバレッジ | ≥ 80% | Jest, Vitest recommendations | npm run test -- --coverage |
| 保守性 | コード内コメント | 複雑なコードに解説コメントあり | Google JavaScript Style Guide | 手動確認 |
| 保守性 | 依存関係管理 | クリティカルな脆弱性なし、定期的に更新 | OWASP (Dependency check) |
npm audit, Snyk |
| 保守性 | CI/CD | push時に自動でlint, test, build | DevOps best practice | GitHub Actionsなどを確認 |
| 保守性 | 環境設定 | .envを使用、dev/staging/prodを分離 | 12-factor app | 設定ファイルを確認 |
最後に
ここまでお読みいただき、誠にありがとうございます。
もし**「システム開発を依頼したい」「技術的な相談をしたい」「AIを活用した課題解決のアイデアがある」** といったお悩みがございましたら、ぜひ私たちTOMOSIA VIETNAMにご相談ください。
私たちの主なサービス
- 💻 ソフトウェア受託開発（Web・アプリ・システム）
- 🤖 AIソリューション（チャットボット、画像処理、LLM応用）
- 📱 モバイルアプリ開発（iOS / Android）
- 🔌 Fintech / IoT開発
- 🔧 ブリッジSE（BrSE）支援（日本語でのコミュニケーションをスムーズに）
私たちの強み
- ISO/IEC 27001（情報セキュリティ）認証取得済み – 安心して任せていただけます
- 日本語対応チーム – 日本の文化・ビジネス習慣を理解したメンバーが直接対応
- 「Win-Win, Happy Together」の文化 – 長期的なパートナーシップを大切にします
🔗 公式サイト: tomosia.com
まずはお気軽に、一言ご連絡ください。私たちと一緒に、「ベトナムの知恵」で世界に挑戦しませんか？