フランス国家デザインシステムの具体的なタイポグラフィ、グリッド、アコーディオン API を、制度上の対象範囲と併せて理解します。明確に中立的な学習用サンプルを使い、連動する開閉動作と独立した開閉動作を比較します。
キーボードで操作できるトリガーと、展開状態がわかるフィードバックを使って、連動するセクションと独立したセクションを比較できます。
DSFR v1.15の公式ドキュメントと、@gouvfr/dsfr 1.15.3パッケージの検証済みメタデータです。これらは公式の参照値です。中立的なプレビューでは、国家のビジュアルアイデンティティを使わずに操作構造を示しています。
| 名前 / ルール | 値 / 設定 | 用途 |
|---|---|---|
Primary / supplementary families | Marianne / Spectral | 公的機関のフォントです。適用される利用条件を遵守してください。 |
Fallback families | Arial / Georgia | ドキュメントに記載された代替フォント。 |
Standard text | 16px / 24px | fr-textの本文スタイル。 |
Article text | 18px / 28px | fr-text--lgの読み物向けスタイル。 |
H1 mobile → desktop | 32/40px → 40/48px | フォントサイズ / 行の高さ。MDで切り替わります。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|---|---|
SM / MD / LG / XL | 576 / 768 / 992 / 1248px | ドキュメントに記載されたブレークポイント。 |
XL content maximum | 1200px | グリッドリファレンスにおけるコンテナの最大幅。 |
Optional gutters | 16px small; 24px LG and above | コードのグリッドでは、ガターはデフォルトで有効になりません。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|---|---|
Base progression | Multiples of 4px | 一般的なレイアウトのリズム。 |
Documented exceptions | −6, −2, 2, 6px | 新たな任意スケールではなく、個別の調整値。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|---|---|
fr-accordions-group | Linked by default | 1つを開くと、ほかは閉じます。 |
data-fr-group="false" | Multiple panels may stay open | 明示的に指定する独立モード。 |
aria-controls | Matches panel id | トリガーとパネルの関連付け。 |
fr-collapse--expanded | Runtime expanded class | DSFR JavaScriptが管理しています。 |
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
DSFRはフランス国家のデザインシステムです。現行の公式利用条件では、.gouv.fr のサービスと国家のモバイルアプリを対象としており、国家の利用者や運営者と、外部組織を区別しています。これは導入に関わる重要な境界であり、ロゴを隠せば省略できる注記ではありません。
対象となるチームは、公式のプロジェクト承認および実装プロセスに従ってください。関連のない製品でも、フランス国家のアイデンティティを用いているかのように見せることなく、ドキュメントに記載された情報設計やアクセシビリティの考え方を参考にできます。このページのプレビューは、学習用に独自に作成した中立的なアコーディオンの例です。DSFRのスタイル、フォント、スクリプトは読み込んでいません。
タイポグラフィのドキュメントでは、MarianneとSpectral、およびそれぞれの代替フォントとしてArialとGeorgiaが指定されています。標準の本文は16px/24px、記事本文は18px/28pxです。H1はモバイルで32px/40px、デスクトップで40px/48pxになります。これらは公式システムの値であり、デモでは独自の中立的な書体表現を使用しています。
文字サイズのクラスは、見出しの意味的なレベルの代わりにはなりません。ページタイトルにはh1を使い、各アコーディオンのタイトルには適切な階層の見出しを設定してください。見た目の文字を大きくするために、文書の見出し構造を飛ばしてはいけません。
グリッドリファレンスでは、SMが576px、MDが768px、LGが992px、XLが1248pxと定義されています。最大コンテンツ幅は1200pxです。任意のガター幅は、小さい画面では16px、LG以上では24pxです。コードのグリッドではデフォルトでガターがないため、Figmaのグリッドをマークアップに置き換える際は注意が必要です。
スペーシングは4pxの倍数を基本とし、例外として−6px、−2px、2px、6pxがドキュメントに記載されています。したがって、スペーシング用クラスは、任意のオフセットを自由に作るためのものではなく、統制されたシステムを表します。中立的なプレビューでは、独自の単一カラムを使っており、公式グリッドを再現するものではありません。
ドキュメントに記載されたコンポーネントは、section.fr-accordion、heading.fr-accordion__title、button.fr-accordion__btn、およびそれに続くdiv.fr-collapseで構成されます。ボタンのaria-controlsはパネルのidと一致させ、aria-expandedで開閉状態を示します。見出しのレベルは、ページ内の階層に合わせてください。
パネルには、段落やリストなど適切なテキスト要素を含めます。ネイティブのDSFR JavaScriptが展開状態のクラスを管理するため、対象となるアプリケーションでは、コンポーネントと競合する独立したクリックハンドラーを追加しないでください。中立的なプレビューでは、学習用の比較として、同様に明示的な独自の開閉状態を実装しています。
fr-accordions-groupはデフォルトで連動します。項目を開くと、ほかに開いている項目は閉じます。data-fr-group="false"を設定すると、複数のパネルを開いたままにできます。サンプルでは両方のモードを切り替え、それぞれが相互参照する情報に与える影響を比べられます。
この違いは、手続きの準備に関わる情報で特に重要です。書類一覧を確認する人は、住所のパネルも同時に開いておきたい場合があります。一度に1つだけ開くグループは省スペースですが、必要な文脈が繰り返し隠れてしまいます。デフォルトを編集上のルールと見なすのではなく、タスクに合わせてモードを選んでください。
アクセシビリティのページでは、実行時のデフォルトを踏まえたうえで、連動するグループは使いづらさにつながることがあるため、独立したグループをデフォルトにするよう推奨しています。そのため、サンプルは独立モードで開始します。
コンポーネントのガイダンスでは、長い内容、任意の内容、または読む人によって必要性が異なる内容にアコーディオンを使うことを推奨しています。一方、すべての利用者が読む必要のある情報を隠すこと、ごく短い内容にアコーディオンを使うこと、複雑なコントロールを入れ子にすること、モーダル内に配置することは避けるよう案内しています。
そのため、このサンプルでは目的と操作部を常に表示しています。折りたたむのは、任意の入室案内、持ち物リスト、到着後の説明のみです。各見出しはそれぞれ異なる疑問に答えるものとし、展開した内容には、別の操作フローを設けず、短い段落やリストを使っています。
各プレビュー用のシンプルなトリガーは実際のボタンであるため、Enter キーと Space キーでブラウザー標準のボタン操作ができます。スクリプトは aria-expanded と、対応するパネルの hidden 状態の両方を切り替えます。パネルを閉じてもトリガーは取り除かれず、フォーカスは操作したボタンに残ります。
モードセレクターでは、各パネルを独立して開閉する動作と、連動して開閉する動作をすぐに比較できます。現在開いているパネルは、小さな状態表示に一覧で示されます。これはサンプル内の学習用表示であり、公式のDSFRコンポーネントではありません。画面幅が狭い場合はタイトルが折り返され、ボタンのクリック領域は幅いっぱいに保たれます。
公式のアクセシビリティページでは、ダークテーマでホバー時のコントラストが不十分な点や、特定のスクリーンリーダーとブラウザーでの読み上げに関する制限についても説明しています。コンポーネントをそのまま使うだけで、アクセシビリティが完全に確保されると判断しないでください。導入するバージョンと環境について、既知の制限を確認してください。
公式のコードページには、コアとアコーディオンのCSS依存関係、およびコアとアコーディオンのモジュールスクリプトが記載されています。読み込みが完了すると、ランタイムが記載されたマークアップを自動的に拡張します。初期化後は、公開APIの dsfr(element).collapse.disclose() を使ってパネルを展開できます。
付属のインストール手順は、利用対象となる公共機関のプロジェクト向けです。ソースコード上で確認済みですが、DSFRのランタイム依存関係を意図的に含めていない、この中立的なプレビュー内では実行していません。本番環境に導入する際は、アップグレード時も公式のアセットディレクトリ構成、コンポーネントのマークアップ、最新の利用条件を一体として維持してください。
対象プロジェクト向けのマークアップ。各パネルを個別に展開できます。
<div class="fr-accordions-group" data-fr-group="false">
<section class="fr-accordion">
<h2 class="fr-accordion__title">
<button type="button" class="fr-accordion__btn"
aria-expanded="false" aria-controls="documents">
Documents to prepare
</button>
</h2>
<div id="documents" class="fr-collapse">
<p>Put the actual supporting-document instructions here.</p>
</div>
</section>
</div>公式ランタイムが対象パネルを初期化した後に呼び出してください。
const panel = document.getElementById('documents');
window.dsfr(panel).collapse.disclose();レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordion structure laboratory</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;color:#28251f;background:#faf9f6}main{max-width:54rem;margin:auto;padding:32px 24px}.notice{background:#eee9df;border-left:4px solid #6b573d;padding:16px}h1{font:700 32px/1.3 Georgia,serif;margin:24px 0}h2{font-size:18px;margin:0}.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}select{font:inherit;padding:10px;background:white;border:1px solid #777}section{border-bottom:1px solid #aaa18f}.trigger{font:700 18px/1.5 Arial,sans-serif;border:0;background:transparent;color:inherit;display:flex;justify-content:space-between;gap:16px;text-align:start;padding:20px 8px;width:100%;cursor:pointer}.trigger::after{content:'+'}.trigger[aria-expanded=true]::after{content:'−'}.panel{padding:0 24px 24px}.panel p{margin-top:0}:focus-visible{outline:3px solid #6b573d;outline-offset:3px}#state{font-size:14px;background:#eee9df;padding:12px;margin-top:24px}small{display:block;margin-top:24px;color:#625a4e;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 16px}h1{font-size:28px}.panel{padding-inline:8px}}</style><main><div class="notice">Neutral interaction study · No DSFR visual identity or assets</div><h1>Prepare for a community workshop</h1><p>The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.</p><div class="mode"><label for="mode">Panel behaviour</label><select id="mode"><option value="independent">Independent: compare sections</option><option value="linked">Linked: one section at a time</option></select></div><div id="group"><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="access">Room access</button></h2><div class="panel" id="access" hidden><p>The fictional workshop room is reached from the courtyard. The step-free entrance is on the same level as the activity room.</p><p>Ask the example welcome desk for assistance if the courtyard route is unavailable. These are demonstration instructions, not a real venue guide.</p></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="equipment">Equipment to bring</button></h2><div class="panel" id="equipment" hidden><p>The example workshop uses simple paper materials. Bring the following if convenient:</p><ul><li>A notebook for your own observations.</li><li>A pencil or pen you can use comfortably.</li><li>Your fictional booking reference.</li></ul></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="arrival">What happens on arrival</button></h2><div class="panel" id="arrival" hidden><p>The example facilitator explains the activity before participants choose a seat. No personal information is collected by this demonstration.</p><p>Keep this panel open with the equipment list to compare the two instructions in independent mode.</p></div></section></div><p id="state" role="status">Open sections: none</p><small>Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.</small></main><script>const buttons=[...document.querySelectorAll('.trigger')],mode=document.querySelector('#mode');function set(b,open){b.setAttribute('aria-expanded',String(open));document.getElementById(b.getAttribute('aria-controls')).hidden=!open}function announce(){const names=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').map(b=>b.textContent);document.querySelector('#state').textContent='Open sections: '+(names.join(', ')||'none')}buttons.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';if(open&&mode.value==='linked')buttons.forEach(x=>set(x,false));set(b,open);announce()});mode.onchange=()=>{if(mode.value==='linked'){let retained=false;buttons.forEach(b=>{if(b.getAttribute('aria-expanded')==='true'){if(retained)set(b,false);retained=true}})}announce()};</script></html>
対象プロジェクト向けのインストール方法です。ソースコード上で確認済みですが、中立的なプレビューでは実行していません。機関としての適用範囲と、最新の公式利用条件を守ってください。依存アセットの相対パスを維持するため、dist ディレクトリごとコピーしてください。「Sources」にある完全な実行例の ZIP には、プレビューに必要な依存関係とドキュメント一式も含まれています。ファイルを展開し、そのディレクトリで python3 -m http.server 8080 を実行してから、http://localhost:8080/dsfr.html を開いてください。モジュールを使ったサンプルは file:// から開かないでください。
# For a project within the documented DSFR institutional scope: npm install @gouvfr/[email protected] # Copy node_modules/@gouvfr/dsfr/dist to your public asset directory. # In <head>: # <link rel="stylesheet" href="/dsfr/core/core.min.css"> # <link rel="stylesheet" href="/dsfr/component/accordion/accordion.min.css"> # Before </body>: # <script type="module" src="/dsfr/core/core.module.min.js"></script> # <script type="module" src="/dsfr/component/accordion/accordion.module.min.js"></script>
DSFRのアコーディオン構造と適用範囲を説明します。対象となる公共機関のプロジェクトでは、fr-accordion、fr-accordion__title、fr-accordion__btn、fr-collapse を使い、id と aria-controls を対応させます。コアとアコーディオンのアセットを読み込み、複数のセクションを同時に開いた状態で比較する場合は data-fr-group=false を指定します。独立した教育用プレビューには、中立的な独自スタイルを使い、構造を参考にした実装であることを明示してください。公共機関のアイデンティティ用フォントを読み込んだり、公式サービスであるかのように示したりしないでください。
DSFRの利用対象は、機関に関する文書で定められています。このページは技術資料です。独自に作成した中立的なプレビューは、フランス政府のサービスでも、DSFRのブランドを使用した実装でもありません。
