Fluxion Partners 共通基盤
確認日: 2026-09-05。デジタル庁デザインシステム（DADS）β版 v2.17.1 を主な参照とする。本文中の「公式」は参照元で確認できた事項、「FP採用」はブランドに合わせた今回の設計判断を示す。これは公式コンポーネント一式の複製や、サイトのアクセシビリティ適合を保証するものではない。
適用範囲
既存の白背景・ブルーとライム・Outfit と Noto Sans JP を classic として保持する。追加する web-lp と web-app はこの共通基盤を利用する。スマホのネイティブアプリは mobile-app.md を使い、Web の CSS px を iOS の pt / Android の dp と同一視しない。
新しい実装は tokens.css と components.css の .fpds / --fp-* 名前空間を使用する。旧 --electric-blue などの変数を一括置換せず、ページ単位で追加プロファイルを選ぶ。カタログ で見た目を確認できる。
CSS は tokens.css → components.css の順で読み込み、.fpds の子孫に data-profile="web-app" などを置く。data-profile だけでページ全体が完成するわけではなく、fp-button / fp-form / fp-lp-hero 等のクラスと本規約を組み合わせる。カタログの外側にある紹介見出しや .fp-section は見本を並べるための UI で、各プロファイルのページテンプレートではない。
<div class="fpds">
<main data-profile="web-app">
<!-- fp-button / fp-form / fp-table 等を用途に合わせて配置 -->
</main>
</div>
Outfit / Noto Sans JP を使用する場合は案件側でフォントを読み込む。オフラインのカタログでは利用できるフォントへフォールバックする。
色の役割と採用値
公式: DADS はテキストのサイズを問わず背景とのコントラスト比 4.5:1 以上、意味を伝える UI の輪郭等は隣接色との 3:1 以上を求める。ブランド色を装飾に残し、UI の機能色を調整する考え方も認めている。以下の色役割は FP 採用であり、DADS のパレット名との同一性を意味しない。DADS カラーのアクセシビリティ
| トークン | 値 | 使用先 |
|---|---|---|
--fp-brand-blue |
#0066FF |
ブランドの青 |
--fp-brand-lime |
#7FD300 |
装飾、ブランドアクセント |
--fp-action |
#0066FF |
主操作、リンク色の起点 |
--fp-action-hover |
#0052CC |
ホバー |
--fp-action-active |
#003D99 |
押下中 |
--fp-on-action |
#FFFFFF |
青い塗りボタン上の文字 |
--fp-text |
#1A1A2E |
本文、見出し |
--fp-text-muted |
#595959 |
補足、日付、ヒント |
--fp-surface |
#FFFFFF |
基本背景 |
--fp-surface-subtle |
#F5F7FA |
セクション、表ヘッダー等の補助背景 |
--fp-border |
#767676 |
フィールドや選択可能な領域の境界 |
--fp-error |
#EC0000 |
入力エラー、失敗 |
--fp-warning |
#C74700 |
注意事項 |
--fp-success |
#116A3D |
完了、正常な状態 |
--fp-focus-yellow |
#FFD43D |
DADS Yellow-300 を採用 |
--fp-focus-black |
#000000 |
フォーカス外枠 |
FP計算: 青と白は約 4.83:1、ホバー青と白は約 6.82:1、押下青と白は約 9.87:1。ライムと白は約 1.87:1 のため、白背景上の本文、リンク、必要な輪郭線には使わない。ライム背景上に --fp-text を載せる場合も実際の組み合わせを確認する。グラデーションは装飾に残し、追加プロファイルのボタンと本文は単色を基本とする。
色の組み合わせは前景と背景を対で指定し、薄い背景・画像・選択状態上でも測る。エラーは赤だけで伝えず「入力エラー」などの文言を併用する。情報カードの装飾線と、入力欄を識別するための境界線を区別する。
タイポグラフィと余白
公式: DADS の本文・UI は 16 CSS px 以上を基準とし、14px は領域制約等がある補助情報に限る。本文行高は少なくとも 1.5 を推奨し、CSS は単位なしで指定する。基本書体は Noto Sans JP / Noto Sans Mono、通常・強調は 400 / 700。DADS タイポグラフィ
FP採用:
| 用途 | LP・ホームページ | Webアプリ |
|---|---|---|
| 本文 | Noto Sans JP / 16px / 400 / 1.75 | Noto Sans JP / 16px / 400 / 1.5 |
| ページ見出し | Outfit + Noto Sans JP / 36〜48px / 700 / 1.4 | Noto Sans JP / 32px / 700 / 1.5 |
| セクション見出し | 24〜36px / 700 / 1.5 | 24px / 700 / 1.5 |
| 操作ラベル | Noto Sans JP / 16px / 700 / 1.5 | 同左 |
| 補足 | 16px、制約時のみ 14px / 1.5 | 同左 |
Outfit は英字見出しやブランド表現に残し、日本語は Noto Sans JP にフォールバックする。読物を詰める目的で文字を小さくしない。高さを固定して拡大文字や複数行ラベルを切り落とさない。
公式: DADS は余白に唯一の絶対値を指定せず、8 CSS px を一般的な基準単位の例としている。FP は 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96px を採用し、4px はアイコン等の微調整、8px は関連要素、24〜32px はブロック間に使う。DADS 余白
ボタンとリンク
公式: DADS は塗り・アウトライン・テキストの 3 種類を定義し、ボタンのターゲットを 44 CSS px 以上としている。サイズ目安は L が幅 136px / 高さ 56px、M が幅 96px / 高さ 48px。幅と高さは内容に応じて増やす。DADS ボタン
FP は M を標準、L を LP の主要 CTA に採用する。角丸は 8px、幅は min-width、高さは min-height で指定する。密度を下げたくない箇所でも実際に操作できる領域を 44px 以上確保し、隣の操作領域と重ねない。
各プロファイルに記載する M の幅 96px / L の幅 136px は通常時の目安とし、狭幅や文字拡大で親領域に収まらない場合は最小幅を親幅以下に緩和し、ラベルの折り返しと高さの増加を許容する。
| 状態 | 共通挙動 |
|---|---|
| 通常 | 主要は青塗り＋白文字、補助は白背景＋青輪郭、低優先度は下線付きテキスト |
| ホバー | 色を濃くし、ラベルに下線を追加。テキスト型は下線を太くする |
| 押下 | --fp-action-active を使い、下線を維持 |
| フォーカス | 次節の黄＋黒の二重インジケーターを表示 |
| 無効 | 隣接テキストで理由を説明。無効の理由をホバーだけに隠さない |
| 処理中 | ラベルを「保存中…」等にし、同じ処理の重複実行を防止。幅の急変を避ける |
原則、遷移には a、実行には button を用いる。フォーム未入力を理由に送信ボタンを最初から押せなくするより、押下時に入力不足を説明する。無効にする場合、HTML の disabled はタブ順から外れることを考慮する。aria-disabled="true" だけでは実行を止められないため、クリック・キーボード・送信側を実装で防ぐ。DADS ボタンのアクセシビリティ
文中リンクは通常時から下線を表示し、訪問済みリンクを区別する場合は青と区別できる紫を選ぶ。新規タブに遷移させる場合は、その挙動をリンク名または補足で伝える。DADS リンクテキスト
添付 CSS の通常リンクとアウトライン・テキストボタンの文字は、淡い面でも読みやすい --fp-action-hover を使用する。訪問済みリンクの色分けを必要とするサイトでは、実際の背景に合う紫を追加で検証・定義する。
フォーカスと操作
公式: DADS のフォーカス色は Yellow-300 と Black の二重構造で、色変更を認めていない。Yellow-300 の値は公式トークンで #FFD43D。FP の Web 追加プロファイルでもこの組み合わせを採用する。DADS フォーカスカラー、公式トークン
公式 Button の実装例に合わせ、要素の外側に黄 2px、その外側に黒 4px を表示する。黄色の輪郭は box-shadow、黒は outline で重ね、外側 6px 分が親の overflow に切り落とされないようにする。公式 Button 実装
/* .fpds 内の操作要素に適用する規約。既存サイトの全要素へ展開しない。 */
.fpds :focus-visible {
outline: 4px solid #000000;
outline-offset: 2px;
box-shadow: 0 0 0 2px #FFD43D;
}
FP採用: 強制カラーモードではシステム色のアウトラインを保つ。装飾を理由にフォーカス表示を削除しない。キーボード操作、表示順、読み上げ順を合わせ、固定ヘッダー・フッターでフォーカス対象を覆わない。アニメーションは必須情報を担わせず、prefers-reduced-motion で省略できるようにする。
レイアウトと受入確認
公式: DADS はリキッドレイアウトと論理順の一致を重視する。768px はブレークポイントの設定例であり、すべてのプロダクトへの固定的な指定ではない。DADS レイアウト、レイアウトのアクセシビリティ
FP採用: まず 768px で 1 カラム / 複数カラムを切り替え、内容が崩れるときに見直す。ページ左右は狭幅 16px / 広幅 32px、文章のあるカラム間は 32px を基本とする。幅 320 CSS px、文字拡大 200%、ブラウザ拡大 400%、長い日本語・英字、Tab / Shift+Tab / Enter / Space / Escape で主要フローを確認する。二次元の意味をもつ表などは領域内スクロールを使う。
確認対象は、全状態の配色、操作名とラベル、入力エラーの関連付け、フォーカス移動、画面幅、拡大表示、動きの低減。DADS を利用するだけでは、各サイト固有のコンテンツや運用のアクセシビリティは確保されない。公開時に対象画面で検証する。DADS アクセシビリティ方針