Fluxion Partners 共通基盤
公式資料の確認日: 2026-09-05（デジタル庁デザインシステム（DADS）β版 v2.17.1）。制作方針の更新日: 2026-09-12。Fluxionブランドと自社HPを起点に、DADSはアクセシビリティ・読みやすさ・色設計等の参照として使い、他デザインシステムも用途別に比較する。本文中の「公式」は記載の確認日に参照元で確認した事項、「FP採用」はFluxionの採用判断を示す。公式コンポーネントの外観を一律に採用する指定ではなく、サイトのアクセシビリティ適合を保証するものでもない。
適用範囲
既存の白背景・ブルーとライム・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 を使用する場合は案件側でフォントを読み込む。オフラインのカタログでは利用できるフォントへフォールバックする。
イラスト・アイコンと外観の参照
Web制作のイラストレーション・アイコンはデジタル庁素材を第一候補とする。保存先は .claude/paths.json の folders.digital_agency_assets から解決し、同梱README・利用規約・ガイドラインを確認する。未収録の操作記号は製品内で統一した補助セットで補い、説明用のイラストと操作アイコンの役割を区別する。装飾は支援技術から隠し、意味を伝える画像には目的に合う代替テキストや操作名を付ける。
LP・ホームページのヘッダー・フッターは 自社HP の外観を基準とする。Webアプリは共通ブランドを使いながら、ヘッダー・左ナビ・ドロワー・フッターを別の構成で使う。DADSのHTML部品の外観は一律に採用しない。2026-09-12に、色・文字・ボタン寸法を維持したまま、LP完成見本、Webアプリ完成見本、カード4用途とボタンの役割を実装・具体化した。公開コピーは正本から生成し、正本と別々に編集しない。
共通ブランド・色・操作状態は本書を参照し、画面の骨格は LP・ホームページ または Webアプリ で選ぶ。LPの企業ナビゲーションをアプリの業務ナビゲーションに追加せず、アプリの左ナビをLPへ持ち込まない。
色の役割と採用値
公式: 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 以上確保し、隣の操作領域と重ねない。
2026-09-12に Carbon Button の操作優先度・破壊操作と、既存DADSの状態規約を比較し、以下をFPとして採用した。名称や用途の全条件をCarbonと同一にはしない。特にFPのsecondaryは、取り消しだけでなく主CTAに対する補助導線にも使える。
| 役割 | クラス | 採用する場面 |
|---|---|---|
| Primary | fp-button |
その操作領域の主目的。保存、作成、LPの問い合わせ。1つのCTA群に主操作は1つ |
| Secondary | fp-button fp-button-secondary |
主操作の補助。キャンセル、戻る、サービスを見る。白背景と青い枠 |
| Tertiary | fp-button fp-button-tertiary |
優先度の低い操作。条件リセット、補足を開く。通常時から下線を表示 |
| Danger | fp-button fp-button-danger |
データの削除などの破壊操作。赤塗りは最終確定に使い、単なる戻る・閉じるには使わない |
| Danger secondary | fp-button fp-button-secondary fp-button-danger |
削除の確認を開く等、主導線ではない破壊操作への入口 |
Dangerの色はFP追加値として通常 #C60000、hover #A30000、active #800000、白文字とする。入力エラーの --fp-error: #EC0000 は変えない。色に加え「削除する」等の具体的なラベル、対象、必要なら確認・取消可能性を示す。キャンセルを赤にしない。リンクとして遷移するCTAにも同じ見た目を適用できるが、要素は a のままにする。
各プロファイルに記載する M の幅 96px / L の幅 136px は通常時の目安とし、狭幅や文字拡大で親領域に収まらない場合は最小幅を親幅以下に緩和し、ラベルの折り返しと高さの増加を許容する。
| 状態 | 共通挙動 |
|---|---|
| 通常 | 主要は青塗り＋白文字、補助は白背景＋青輪郭、低優先度は下線付きテキスト |
| ホバー | 色を濃くし、ラベルに下線を追加。テキスト型は下線を太くする |
| 押下 | --fp-action-active を使い、下線を維持 |
| フォーカス | 次節の黄＋黒の二重インジケーターを表示 |
| 無効 | 隣接テキストで理由を説明。無効の理由をホバーだけに隠さない |
| 処理中 | ラベルを「保存中…」等にし、同じ処理の重複実行を防止。幅の急変を避ける |
原則、遷移には a、実行には button を用いる。フォーム未入力を理由に送信ボタンを最初から押せなくするより、押下時に入力不足を説明する。無効にする場合、HTML の disabled はタブ順から外れることを考慮する。aria-disabled="true" だけでは実行を止められないため、クリック・キーボード・送信側を実装で防ぐ。DADS ボタンのアクセシビリティ
処理中の共通CSSは [aria-busy="true"] で短いスピナーを表示し、動きの低減時は回転を止める。ラベルは「保存中…」等に更新し、隣の role="status" で結果を伝える。実行側で多重送信を防ぎ、成功・失敗どちらでも処理中状態を解除する。フォーカスを保つ必要がある場合は aria-disabled="true" を使ってハンドラー内でも実行を止める。常に操作対象から外す場合はネイティブの disabled を使い、理由を近くに書く。CSSは見た目を提供するものであり、aria-disabled のイベント防止は各アプリの責務となる。
文中リンクは通常時から下線を表示し、訪問済みリンクを区別する場合は青と区別できる紫を選ぶ。新規タブに遷移させる場合は、その挙動をリンク名または補足で伝える。DADS リンクテキスト
添付 CSS の通常リンクとアウトライン・テキストボタンの文字は、淡い面でも読みやすい --fp-action-hover を使用する。訪問済みリンクの色分けを必要とするサイトでは、実際の背景に合う紫を追加で検証・定義する。
カードを4つの用途で使い分ける
2026-09-12に Carbon Tile の情報・遷移・選択と、Fluent 2 Card の単一導線・複数操作の区別を比較した。以下はFP採用のHTML・CSS契約であり、両ライブラリの公式実装ではない。
| 用途 | HTML / クラス | 操作と見た目 |
|---|---|---|
| 情報 | article.fp-card.fp-card-info |
読むためのまとまり。Tab停止・手形・hover移動を付けない |
| 単一遷移 | a.fp-card.fp-card-link |
カード全体が1つのリンク。末尾の fp-card-link-label に下線と遷移先を示す。枠＋淡青のhover、黄黒focusを表示 |
| 選択 | label.fp-card.fp-card-select 内にネイティブ input[type=radio/checkbox] |
単一選択はradio、複数選択はcheckbox。fieldset.fp-card-options と legend で選択群の質問を示す。選択はチェックと青い枠・淡青背景で伝える |
| 複数操作 | article.fp-card.fp-card-actions + fp-card-action-row |
カードの容器はクリック対象にしない。詳細・編集等の各リンク／ボタンだけを操作する |
共通はpadding 24px、角丸16px、薄い装飾枠。遷移・選択カードは操作範囲が分かる --fp-border の枠を使う。カードのタイトルは階層に合う見出し、本文は1つの概念にまとめ、主要操作の位置を同じ集合内で揃える。画像を必須にせず、同種の情報を無理にカードへ分割しない。長文は省略を強制せず高さを伸ばす。全カード共通の浮き上がりや translateY は加えない。
単一遷移カードに別リンク・ボタン・入力を入れない。選択カードのlabel内に別リンクやボタンを入れず、追加の説明リンクが必要ならlabelの外に置く。選択をクリック可能な div で再実装しない。無効選択はinputの disabled と外から読める理由を併用する。ラジオの矢印キー移動とSpace、チェックボックスのSpaceはHTML標準動作を維持する。選択カード内のテキストは fp-card-select-body、見出し相当は strong.fp-card-select-title、補足は span.fp-card-select-description とする。
4用途の比較と実際に操作できる状態は カタログ を参照する。
フォーカスと操作
公式: 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採用: input / textarea / select は、入力位置と選択状態を追いやすくするため、ブランド青 --fp-action の 2px outline と -1px の offset を境界へ重ね、黄＋黒の二重リングを表示しない。input と textarea のキャレットも --fp-action とする。input[type="checkbox"] / input[type="radio"] はネイティブの選択表示を保持し、フォーカスの輪郭だけを同じ青へ揃える。
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 アクセシビリティ方針