Webアプリ用プロファイル

公式資料の確認日: 2026-09-05（DADS等）、2026-09-12（Carbon UI shell）。採用規約の更新日: 2026-09-12。プロファイル名: web-app。管理画面、業務フロー、ダッシュボード、入力・検索・一覧・詳細画面に使用する。共通基盤 / トークン / コンポーネント / カタログ / 完成画面の操作見本

Fluxionと外部デザインシステムの使い分け

Fluxionの共通ブランドを起点に、DADSは日本語の可読性、アクセシビリティ、色の役割、入力や表の操作設計等の参照として使う。HTML部品やナビゲーションの外観を一律に採用せず、他デザインシステムも用途別に比較する。Google Material 3 から既に取り入れた、主操作色とその上の文字色、面とその上の文字色という役割分け、状態を揃える考え方は維持する。Material 3 のテーマと色役割

これは FP の採用方針であり、Roboto、小さい文字、波紋効果、FAB、角丸などを Web 全体へ自動導入する指定ではない。CSS px と Android の dp を変換なしに同一の基準値として使わない。Material の視覚原則の参照とライブラリ導入は分けて判断する。@material/web の公式リポジトリは確認時点で maintenance mode と案内しているため、既定の実装依存にはしない。Material Web 公式 README

イラスト・アイコンは 共通基盤の素材方針 に従い、.claude/paths.json の folders.digital_agency_assets からデジタル庁素材を参照する。未収録の操作記号は統一した補助セットで補う。

2026-09-12のユーザーの続行依頼を受け、以下の画面構成と操作をFPの共通規約として具体化した。完成画面で、検索→詳細→編集→保存、左ナビの縮小、狭幅ドロワーを操作できる。既存の色トークン・48pxボタン・8px角丸・状態・アクセシビリティ規約を引き継ぐ。LP用の大きな企業ナビゲーションとフッターは業務画面に持ち込まず、ブランドを共通にした小さなフッターを使う。

公式とFP採用の区別:

以下の寸法、ブレークポイント、配置と操作はFP独自の採用判断であり、他組織の推奨値の転記ではない。Carbon/Fluentのライブラリは導入していない。

画面の骨格

以下は FP 採用値。

ページの見出しと主操作を上部に置き、その下に検索・フィルター、件数、一覧を配置する。狭幅ではこの順序を保って積み重ねる。共通基盤の768pxは出発点に留め、本プロファイルのナビ切替は上記の960pxを優先する。フォーム等の列は内容に合わせて先に1列へ切り替えてよい。画面を埋めるための大きなHero、意味のない指標カード、装飾アニメーションを設けない。

topbarとブランド

• 左端は狭幅時のメニュー起点、次にFluxionの波・粒子マークと製品名。マークは自社HPの形を静止画として踏襲する。UIラベルは単色とし、ライムは装飾・ブランド識別に限定する。
• ヘルプは右側。アカウント情報は左ナビの最下部へ置く。検索はこの見本では一覧にのみ作用するため、本文内に置く。実機能を持たない通知ベルや検索箱を飾りとして追加しない。
• stickyの高さはResizeObserverで測り、左ナビ位置と見出しのスクロール余白へ反映する。960px未満ではtopbarを通常フローへ戻し、拡大時の本文領域を確保する。

左ナビ・ドロワー

• 主階層と子階層の2段まで。遷移リンクと階層を開閉するボタンは別の操作領域にする。折返したラベルを切り詰めない。
• 現在のページにaria-current="page"、親階層は青い面・左線・太字で示す。子階層開閉はaria-expandedとaria-controlsで伝える。左ナビは可視の見出しを置かず、asideに「メインナビゲーション」、内部のnavに「機能メニュー」の名前を付ける。
• 縮小はユーザーが選ぶ補助状態。アイコンリンクは読み上げ名を保持し、hover/focusでラベルを表示する。縮小時は子階層を隠し、プロジェクトの主リンクから一覧へ移動できる。左ナビ最下部に置く同じパネル型トグルで切り替え、開閉どちらもLucide panel-left図形を使う。トグルの状態は読み上げ名で縮小・展開を伝える。
• 展開時の最下部は、左にアカウント情報、右に縮小トグルを同じ高さで並べる。長い表示名は省略記号で収め、読み上げ名とtitleで全文を保持する。縮小72pxではアカウントと展開トグルを縦に並べ、両方の48px操作領域を維持する。アカウントの名前は読み上げ可能なまま視覚的に隠し、hover/focusで用途を表示する。狭幅ドロワー内ではアカウント名を表示し、選択時はドロワーを閉じて設定画面へ移る。
• 子階層の開閉chevronは16px相当の細いグレーとし、閉じた状態は右、開いた状態は下を向ける。グレーは背景上で十分なコントラストを確保し、透明度だけで薄くしない。
• 狭幅では同じナビをモーダルドロワーにする。開くと閉じるボタンへフォーカスを移し、Tab/Shift+Tabをドロワー内に留める。role="dialog"とタイトル、aria-modal="true"を付け、背景のtopbar・本文・スキップリンクをinertにする。
• 閉じるボタン、Escape、背景選択で閉じ、起点へフォーカスを戻す。遷移した場合は新画面の見出しへ移す。閉状態のナビは非表示・inertにする。
• 開状態で広幅へ戻った場合もinert、スクロール抑止、backdrop、モーダル属性を解除する。ドロワーで変更したbodyのoverflowは元の値へ戻す。
• 長いナビはナビ領域内でスクロールさせる。縮小操作は左ナビ最下部に置き、ナビ項目を覆わない。

本文・カード・フッター

一覧の重要列は狭幅でも削らず、名前付き・キー操作可能な表領域内で横スクロールさせる。行全体をリンク化せず、プロジェクト名をリンクにする。詳細は本文と補助情報を分け、幅が不足したら縦に並べる。

カードは共通基盤の用途別規約に従う。一覧行や各セクションをすべてカード化せず、見出し・余白・区切り線で構造が伝わるときはそれを使う。データの一覧は表、概要は本文、状態や担当者は補助領域へ置く。

フッターはFluxion Toolsの実装を外観基準に、#1a1a2eの面へ左のグラデーション「Fluxion Partners」と右の © 2026 Fluxion Partners. All rights reserved. を置く。社名はOutfit 700・24px・行高1.6、135度の#0066ff→#7fd300。著作権文字は14.4px・行高1.6で、元サイトの白45%を読みやすさの確保のため白48%へ調整する。余白はapp向けに上下16px・左右32px（960px未満は左右16px）へコンパクトにし、狭幅では折り返して自然に高さを増やす。中央の企業ナビや補助リンクを置かず、ヘルプ・規約・カタログはヘルプ本文から案内する。保存操作やフォームを覆う固定フッターにしない。

操作の状態を揃える

FP採用: 各画面で次の状態を用意し、コンポーネント単位でも必要な状態を定義する。

保存成功や検索件数の短い通知には role="status" を選択できる。重要な失敗や未保存の注意を短時間のトーストだけで消さない。これは FP の通知設計であり、入力エラーにライブ通知を付けない DADS の規約と区別する。DADS も成功・エラー・警告・情報の通知を用途別に整理している。DADS ノティフィケーションバナー

入力・確認・保存

DADS の基本に合わせ、ラベル、必須・任意、形式のヒント、入力、エラーの順に組む。フィールド幅は想定する内容に合わせる。プレースホルダーや入力を無言で切り詰める maxlength を使わず、上限はヒントと検証結果で伝える。電話番号やメールなどの意味に合う type / autocomplete / inputmode を選び、コピー・貼り付けを妨げない。DADS 入力の使い方、入力のアクセシビリティ

FP採用: 編集中の必須空欄を逐次叱るのではなく、送信時を基本に検証する。形式の誤りは入力完了後にも示せる。エラーは静的な文で表示し、対象に aria-invalid="true"、説明とエラーに aria-describedby を結びつける。DADS が禁じる aria-live / role="alert" はフォームエラーテキストに付けない。

複数エラー時はフォーカス可能なエラー要約に移動し、各項目へのリンクを置く。修正可能な値を保持する。サーバー検証でも同じ構造で結果を返す。処理中は「保存中…」などに変更し、送信の重複を防ぐ。保存完了は楽観的に断言せず、実際の処理結果と同期させる。

変更破棄・削除など、取り消しが難しい操作には対象名と結果が分かる確認を用意する。通常の保存に不要な確認ダイアログを重ねない。確認操作の主ボタンは「削除する」等、動詞を具体化する。

完成画面の実装: 編集前の値と現在値を比較して未保存状態を判定し、ナビ・キャンセル・ブラウザの戻るで移動するときはネイティブdialogで破棄を確認する。変更を元の値へ戻した場合は確認を出さない。再読み込み・タブを離れる操作はbeforeunloadで保護する（ダイアログの文面や表示条件はブラウザに従う）。保存時は必須項目と文字数を検証し、エラー要約と項目を結び付ける。入力値は保持し、HTMLとして挿入しない。

この見本の保存は現在のページのメモリー上だけに即時反映し、再読み込みでリセットする。外部送信・認証・永続保存は行わない。成功表示はメモリー更新後にのみ出し、詳細・一覧・更新履歴を同じデータから描画する。見せるための待ち時間は入れず、同期ガードと詳細画面への遷移で二重実行を防ぐ。読み込み・通信失敗・権限不足は専用の状態見本として表示する。本番への組込みではサーバーの権限・検証・結果確認を別途実装する。

表・検索・フィルター

DADS は表のセルを原則上寄せ、値に合わせて左右寄せとし、データテーブルのセル結合を避ける。モバイルでは表領域内を横スクロールさせ、スクロールできることを影等で示す。行全体のリンク化はせず、セル内のリンクを使う。DADS テーブルの使い方

FP採用:

• table / caption / thead / tbody / th scope で構造を表し、見出しを太字にする。本文は 16px、数値は右寄せ・桁揃えを基本とする。
• ソートできる列見出しはボタンにし、現在の並び順を aria-sort で伝える。選択状態はチェックボックスと表示の両方で分かるようにする。
• 検索条件、件数、適用中フィルター、解除操作を一覧の近くへまとめる。ページ移動や詳細から戻った際も、条件と位置を必要に応じて復元する。
• 横スクロール領域はキーボードでも操作でき、名前が分かるようにする。横スクロールを隠す目的で重要列を消さない。
• 高密度の行はポインター操作中心の画面で検討し、タッチ操作時は 44px 以上のターゲットを維持する。

複雑なデータは、結合セルを増やすより表の分割や詳細画面で整理する。DADS も意味が単純な表構造を推奨する。DADS テーブルのアクセシビリティ

ナビゲーション・ダイアログ

FP採用: 現在地は文字や形でも示し、ナビの現ページに aria-current="page" を付ける。ドロワーの起点に開閉状態と対象を伝え、閉じたら起点へ戻す。ドロワーは Escape と閉じる操作で閉じられるようにする。

モーダルはネイティブ dialog または検証済みの実装を優先し、開閉時のフォーカス、背後の操作停止、タイトルの関連付けを確認する。画面遷移に近い長い作業は、狭いモーダルへ詰め込まず専用画面にする。トグル、タブ、フィルターチップは外見だけを作らず、状態・名前・キーボード操作を含めて採用する。

受入確認

代表的な「検索→詳細→編集→保存」をキーボードと狭幅で通す。読み込み・空・入力不備・通信失敗・成功・権限不足をそれぞれ確認し、値の保持と次の行動を検証する。Tab 移動中にフォーカスが消えず、200% の文字拡大と 400% のブラウザ拡大で操作できることを確認する。配色と基本動作の確認だけで、本番アプリの完全なアクセシビリティ適合とは判定しない。

追加の確認項目: 検索0件→条件解除、検索条件の詳細往復時の保持、未保存→ナビ/キャンセル/戻る→編集継続または破棄、保存→詳細/一覧/更新履歴への反映、長い日本語と&<>を含む名前の安全な表示、全ナビの移動先、ドロワーのfocus trap/Escape/背景/起点復帰、開いたまま広幅へ戻したときの背景操作とスクロールの復旧。prefers-reduced-motionでは動きを省略する。

再利用時のファイル契約

• tokens.css → components.css → web-app.cssの順に読み込み、web-app.jsはdeferを付ける。body.fpdsの下に.fpa-shell[data-profile="web-app"]を置く。HPの共通外枠で二重に包まない。
• main#app-main、aside#app-navigation、header#app-topbarが画面の主要ランドマーク。CSSは.fpds .fpa-*に閉じる。
• 主要ルート: #projects、#projects/active、#projects/done、#project/1、#edit/1、#new、#activity、#help、#settings、#guide。初期サンプルIDは1〜3。
• デジタル庁SVGは必要な10点を未加工でassets/media/digital-agency/app-*.svgへ複製。採用元と用途はapp-sources.mdを参照。原本を直接編集しない。
• Webアプリの固定フレームを揃えるときはこの完成画面を起点にする。本文のデータモデルや特定製品名、サンプルの個人名を共通仕様と誤解しない。