Webアプリ用プロファイル
確認日: 2026-09-05。プロファイル名: web-app。管理画面、業務フロー、ダッシュボード、入力・検索・一覧・詳細画面に使用する。共通基盤 / トークン / コンポーネント / カタログ
DADS と Material の使い分け
日本語の可読性、入力、ボタン、フォーカス、表、ナビゲーションはデジタル庁デザインシステム（DADS）を主基準にする。Google Material 3 からは、主操作色とその上の文字色、面とその上の文字色という役割分け、状態を揃える考え方を補助として採用する。Material 3 のテーマと色役割
これは FP の採用方針であり、Roboto、小さい文字、波紋効果、FAB、角丸などを Web 全体へ自動導入する指定ではない。CSS px と Android の dp を変換なしに同一の基準値として使わない。Material の視覚原則の参照とライブラリ導入は分けて判断する。@material/web の公式リポジトリは確認時点で maintenance mode と案内しているため、既定の実装依存にはしない。Material Web 公式 README
画面の骨格
以下は FP 採用値。
| 要素 | 標準 |
|---|---|
| 背景 | 白、ブロックや表見出しは --fp-surface-subtle |
| 主コンテンツ左右 | 狭幅 16px / 広幅 32px |
| 画面内ブロック間 | 24〜32px |
| 本文・入力・操作名 | 16px / 行高 1.5 |
| ページ見出し | 32px / 700 / 行高 1.5 |
| セクション見出し | 24px / 700 / 行高 1.5 |
| ボタン・入力 | M、最小高さ 48px、ボタン角丸 8px |
| 補助情報 | 通常 16px、密度制約時のみ 14px |
| ナビゲーション | 広幅でサイド、狭幅で閉じられるドロワー |
ページの見出しと主操作を上部に置き、その下に検索・フィルター、件数、一覧を配置する。狭幅ではこの順序を保って積み重ねる。カラムが成立しない時点で 1 カラムに切り替え、768px は出発点として調整する。画面を埋める目的の装飾や大きな Hero は設けない。
操作の状態を揃える
FP採用: 各画面で次の状態を用意し、コンポーネント単位でも必要な状態を定義する。
| 状態 | 表示と次の行動 |
|---|---|
| 読み込み中 | 「読み込み中…」と進行表示。内容領域に aria-busy。操作中のフォーカスを勝手に移さない |
| 空・初回利用 | データがまだない理由と「最初の項目を作成」などの行動 |
| 検索結果なし | 検索条件を示し、条件変更・解除への導線。初回利用と別の文言 |
| 入力エラー | 値を保持し、項目の近くに内容と直し方。複数エラーは上部要約も表示 |
| 通信・処理失敗 | 実行されていないことと再試行手段。二重送信の可能性がある処理は結果確認を先に提示 |
| 成功 | 実際の保存・送信が成功してから完了を表示。必要なら詳細・一覧へ戻る導線 |
| 権限不足 | 操作できない理由と、閲覧可能な範囲や依頼手段。権限制御はサーバー側でも行う |
| 無効 | 理由と有効になる条件を隣に表示。ホバーしないと読めない理由にしない |
保存成功や検索件数の短い通知には role="status" を選択できる。重要な失敗や未保存の注意を短時間のトーストだけで消さない。これは FP の通知設計であり、入力エラーにライブ通知を付けない DADS の規約と区別する。DADS も成功・エラー・警告・情報の通知を用途別に整理している。DADS ノティフィケーションバナー
入力・確認・保存
DADS の基本に合わせ、ラベル、必須・任意、形式のヒント、入力、エラーの順に組む。フィールド幅は想定する内容に合わせる。プレースホルダーや入力を無言で切り詰める maxlength を使わず、上限はヒントと検証結果で伝える。電話番号やメールなどの意味に合う type / autocomplete / inputmode を選び、コピー・貼り付けを妨げない。DADS 入力の使い方、入力のアクセシビリティ
FP採用: 編集中の必須空欄を逐次叱るのではなく、送信時を基本に検証する。形式の誤りは入力完了後にも示せる。エラーは静的な文で表示し、対象に aria-invalid="true"、説明とエラーに aria-describedby を結びつける。DADS が禁じる aria-live / role="alert" はフォームエラーテキストに付けない。
複数エラー時はフォーカス可能なエラー要約に移動し、各項目へのリンクを置く。修正可能な値を保持する。サーバー検証でも同じ構造で結果を返す。処理中は「保存中…」などに変更し、送信の重複を防ぐ。保存完了は楽観的に断言せず、実際の処理結果と同期させる。
変更破棄・削除など、取り消しが難しい操作には対象名と結果が分かる確認を用意する。通常の保存に不要な確認ダイアログを重ねない。確認操作の主ボタンは「削除する」等、動詞を具体化する。
表・検索・フィルター
DADS は表のセルを原則上寄せ、値に合わせて左右寄せとし、データテーブルのセル結合を避ける。モバイルでは表領域内を横スクロールさせ、スクロールできることを影等で示す。行全体のリンク化はせず、セル内のリンクを使う。DADS テーブルの使い方
FP採用:
table/caption/thead/tbody/th scopeで構造を表し、見出しを太字にする。本文は 16px、数値は右寄せ・桁揃えを基本とする。- ソートできる列見出しはボタンにし、現在の並び順を
aria-sortで伝える。選択状態はチェックボックスと表示の両方で分かるようにする。 - 検索条件、件数、適用中フィルター、解除操作を一覧の近くへまとめる。ページ移動や詳細から戻った際も、条件と位置を必要に応じて復元する。
- 横スクロール領域はキーボードでも操作でき、名前が分かるようにする。横スクロールを隠す目的で重要列を消さない。
- 高密度の行はポインター操作中心の画面で検討し、タッチ操作時は 44px 以上のターゲットを維持する。
複雑なデータは、結合セルを増やすより表の分割や詳細画面で整理する。DADS も意味が単純な表構造を推奨する。DADS テーブルのアクセシビリティ
ナビゲーション・ダイアログ
FP採用: 現在地は文字や形でも示し、ナビの現ページに aria-current="page" を付ける。ドロワーの起点に開閉状態と対象を伝え、閉じたら起点へ戻す。ドロワーは Escape と閉じる操作で閉じられるようにする。
モーダルはネイティブ dialog または検証済みの実装を優先し、開閉時のフォーカス、背後の操作停止、タイトルの関連付けを確認する。画面遷移に近い長い作業は、狭いモーダルへ詰め込まず専用画面にする。トグル、タブ、フィルターチップは外見だけを作らず、状態・名前・キーボード操作を含めて採用する。
受入確認
代表的な「検索→詳細→編集→保存」をキーボードと狭幅で通す。読み込み・空・入力不備・通信失敗・成功・権限不足をそれぞれ確認し、値の保持と次の行動を検証する。Tab 移動中にフォーカスが消えず、200% の文字拡大と 400% のブラウザ拡大で操作できることを確認する。配色と基本動作の確認だけで、本番アプリの完全なアクセシビリティ適合とは判定しない。