# DSFRデザインシステム ## DSFRデザインシステムのインターフェースプレビュー キーボードで操作できるトリガーと、展開状態がわかるフィードバックを使って、連動するセクションと独立したセクションを比較できます。 ## DSFRデザインシステムのデザインリファレンス 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デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## DSFRデザインシステムの制度上の対象範囲 ### 国家のアイデンティティを定めるシステム > DSFRはフランス国家のデザインシステムです。現行の公式利用条件では、.gouv.fr のサービスと国家のモバイルアプリを対象としており、国家の利用者や運営者と、外部組織を区別しています。これは導入に関わる重要な境界であり、ロゴを隠せば省略できる注記ではありません。 対象となるチームは、公式のプロジェクト承認および実装プロセスに従ってください。関連のない製品でも、フランス国家のアイデンティティを用いているかのように見せることなく、ドキュメントに記載された情報設計やアクセシビリティの考え方を参考にできます。このページのプレビューは、学習用に独自に作成した中立的なアコーディオンの例です。DSFRのスタイル、フォント、スクリプトは読み込んでいません。 関連する仕様を確認する ## DSFRデザインシステムの公式タイポグラフィ参照情報 ### Marianneの役割と代替フォント タイポグラフィのドキュメントでは、MarianneとSpectral、およびそれぞれの代替フォントとしてArialとGeorgiaが指定されています。標準の本文は16px/24px、記事本文は18px/28pxです。H1はモバイルで32px/40px、デスクトップで40px/48pxになります。これらは公式システムの値であり、デモでは独自の中立的な書体表現を使用しています。 文字サイズのクラスは、見出しの意味的なレベルの代わりにはなりません。ページタイトルにはh1を使い、各アコーディオンのタイトルには適切な階層の見出しを設定してください。見た目の文字を大きくするために、文書の見出し構造を飛ばしてはいけません。 関連する仕様を確認する ## DSFRデザインシステムのグリッドとスペーシング ### レスポンシブのブレークポイントは明確に定義されています グリッドリファレンスでは、SMが576px、MDが768px、LGが992px、XLが1248pxと定義されています。最大コンテンツ幅は1200pxです。任意のガター幅は、小さい画面では16px、LG以上では24pxです。コードのグリッドではデフォルトでガターがないため、Figmaのグリッドをマークアップに置き換える際は注意が必要です。 スペーシングは4pxの倍数を基本とし、例外として−6px、−2px、2px、6pxがドキュメントに記載されています。したがって、スペーシング用クラスは、任意のオフセットを自由に作るためのものではなく、統制されたシステムを表します。中立的なプレビューでは、独自の単一カラムを使っており、公式グリッドを再現するものではありません。 関連する仕様を確認する ## DSFRデザインシステムのアコーディオン構造 ### 見出し、トリガー、制御対象のパネル ドキュメントに記載されたコンポーネントは、section.fr-accordion、heading.fr-accordion__title、button.fr-accordion__btn、およびそれに続くdiv.fr-collapseで構成されます。ボタンのaria-controlsはパネルのidと一致させ、aria-expandedで開閉状態を示します。見出しのレベルは、ページ内の階層に合わせてください。 パネルには、段落やリストなど適切なテキスト要素を含めます。ネイティブのDSFR JavaScriptが展開状態のクラスを管理するため、対象となるアプリケーションでは、コンポーネントと競合する独立したクリックハンドラーを追加しないでください。中立的なプレビューでは、学習用の比較として、同様に明示的な独自の開閉状態を実装しています。 関連する仕様を確認する ## DSFRデザインシステムの連動または独立 ### グループ設定によって動作が変わります fr-accordions-groupはデフォルトで連動します。項目を開くと、ほかに開いている項目は閉じます。data-fr-group="false"を設定すると、複数のパネルを開いたままにできます。サンプルでは両方のモードを切り替え、それぞれが相互参照する情報に与える影響を比べられます。 この違いは、手続きの準備に関わる情報で特に重要です。書類一覧を確認する人は、住所のパネルも同時に開いておきたい場合があります。一度に1つだけ開くグループは省スペースですが、必要な文脈が繰り返し隠れてしまいます。デフォルトを編集上のルールと見なすのではなく、タスクに合わせてモードを選んでください。 アクセシビリティのページでは、実行時のデフォルトを踏まえたうえで、連動するグループは使いづらさにつながることがあるため、独立したグループをデフォルトにするよう推奨しています。そのため、サンプルは独立モードで開始します。 - 独立モードでは、2つのセクションを同時に見比べられます。 - 連動モードでは、展開できるセクションは常に1つだけです。 - モードを切り替えても、aria-expanded の状態に矛盾が生じないようにします。 関連する仕様を確認する ## DSFRデザインシステム：常に表示しておく情報 ### 重要な手順を隠さない コンポーネントのガイダンスでは、長い内容、任意の内容、または読む人によって必要性が異なる内容にアコーディオンを使うことを推奨しています。一方、すべての利用者が読む必要のある情報を隠すこと、ごく短い内容にアコーディオンを使うこと、複雑なコントロールを入れ子にすること、モーダル内に配置することは避けるよう案内しています。 そのため、このサンプルでは目的と操作部を常に表示しています。折りたたむのは、任意の入室案内、持ち物リスト、到着後の説明のみです。各見出しはそれぞれ異なる疑問に答えるものとし、展開した内容には、別の操作フローを設けず、短い段落やリストを使っています。 1. 中心となる案内はアコーディオンの外に配置します。 2. 長さではなく、読む人が知りたい内容ごとに補足情報を分けます。 3. 答えが短い場合は、通常の段落を使います。 関連する仕様を確認する ## DSFRデザインシステム：キーボード操作と状態の確認 ### 装飾の前に構造を確かめる 各プレビュー用のシンプルなトリガーは実際のボタンであるため、Enter キーと Space キーでブラウザー標準のボタン操作ができます。スクリプトは aria-expanded と、対応するパネルの hidden 状態の両方を切り替えます。パネルを閉じてもトリガーは取り除かれず、フォーカスは操作したボタンに残ります。 モードセレクターでは、各パネルを独立して開閉する動作と、連動して開閉する動作をすぐに比較できます。現在開いているパネルは、小さな状態表示に一覧で示されます。これはサンプル内の学習用表示であり、公式のDSFRコンポーネントではありません。画面幅が狭い場合はタイトルが折り返され、ボタンのクリック領域は幅いっぱいに保たれます。 公式のアクセシビリティページでは、ダークテーマでホバー時のコントラストが不十分な点や、特定のスクリーンリーダーとブラウザーでの読み上げに関する制限についても説明しています。コンポーネントをそのまま使うだけで、アクセシビリティが完全に確保されると判断しないでください。導入するバージョンと環境について、既知の制限を確認してください。 関連する仕様を確認する ## DSFRデザインシステム：対象プロジェクトへの導入 ### コアとコンポーネントの依存関係を読み込む 公式のコードページには、コアとアコーディオンのCSS依存関係、およびコアとアコーディオンのモジュールスクリプトが記載されています。読み込みが完了すると、ランタイムが記載されたマークアップを自動的に拡張します。初期化後は、公開APIの dsfr(element).collapse.disclose() を使ってパネルを展開できます。 付属のインストール手順は、利用対象となる公共機関のプロジェクト向けです。ソースコード上で確認済みですが、DSFRのランタイム依存関係を意図的に含めていない、この中立的なプレビュー内では実行していません。本番環境に導入する際は、アップグレード時も公式のアセットディレクトリ構成、コンポーネントのマークアップ、最新の利用条件を一体として維持してください。 関連する仕様を確認する ## DSFRデザインシステム：コンポーネントの例 ### 公式のアコーディオン構造 対象プロジェクト向けのマークアップ。各パネルを個別に展開できます。 ```

Put the actual supporting-document instructions here.

``` コードリファレンス ### プログラムからの展開 公式ランタイムが対象パネルを初期化した後に呼び出してください。 ``` const panel = document.getElementById('documents'); window.dsfr(panel).collapse.disclose(); ``` コードリファレンス ### 単体で動作するサンプル一式 レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。 ``` Accordion structure laboratory
Neutral interaction study · No DSFR visual identity or assets

Prepare for a community workshop

The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.

Open sections: none

Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.
``` コードリファレンス - 完全なサンプルは「ソース」からダウンロードできます。READMEに正確なローカル起動コマンドが記載されています。 - ベンダーのパスはこのドキュメントからの相対パスのままにしてください。アーカイブには、このプレビューで使用するアセット一式が含まれています。 ## DSFRデザインシステム：AIエージェントのセットアップ ### 実装の出発点 対象プロジェクト向けのインストール方法です。ソースコード上で確認済みですが、中立的なプレビューでは実行していません。機関としての適用範囲と、最新の公式利用条件を守ってください。依存アセットの相対パスを維持するため、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/dsfr@1.15.3 # Copy node_modules/@gouvfr/dsfr/dist to your public asset directory. # In : # # # Before : # # ``` ### あなたのプロジェクト向けプロンプト ``` DSFRのアコーディオン構造と適用範囲を説明します。対象となる公共機関のプロジェクトでは、fr-accordion、fr-accordion__title、fr-accordion__btn、fr-collapse を使い、id と aria-controls を対応させます。コアとアコーディオンのアセットを読み込み、複数のセクションを同時に開いた状態で比較する場合は data-fr-group=false を指定します。独立した教育用プレビューには、中立的な独自スタイルを使い、構造を参考にした実装であることを明示してください。公共機関のアイデンティティ用フォントを読み込んだり、公式サービスであるかのように示したりしないでください。 ``` ## DSFRデザインシステム：情報源と適用範囲 DSFRの利用対象は、機関に関する文書で定められています。このページは技術資料です。独自に作成した中立的なプレビューは、フランス政府のサービスでも、DSFRのブランドを使用した実装でもありません。 - DSFRの概要 公式システムの利用案内とリソースのカテゴリー。 - 適用範囲 DSFRを利用できる組織を定めた公式ルール。 - Foundation 基盤となるデザインとアイデンティティのガイダンス。 - 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。 ## DSFRデザインシステム：関連リソース ### Europa Component Library キーボード操作、すべて開く動作、JavaScriptを使わない場合でも読みやすいフォールバックを含む、ネイティブなアコーディオンのブリーフ全体を通じて、Europa の EC カラー、文字、間隔の役割を確認できます。 ### gov.cz デザインシステム 6つのリソースを通じて、Gov Design System CEで実際に使われている色の役割、カードのスロット、ネイティブのページネーションを、フォーカスとページ状態を明示しながら詳しく見ていきます。 ### GOV.UK デザインシステム GOV.UK のような質問回答・回答確認のフローを構築します。最新の v6 タイプスケール、レスポンシブな余白、用途に応じた色、連動する入力検証、具体的なフロントエンド連携を備えています。 - [実装リファレンス](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [ソース](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie) - [ソース](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture) - [ソース](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/espacement) - [ソース](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [関連する仕様を確認する](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon) - [関連する仕様を確認する](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie) - [関連する仕様を確認する](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture) - [関連する仕様を確認する](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [関連する仕様を確認する](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/accessibilite-de-l-accordeon) - [コードリファレンス](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [DSFRの概要 公式システムの利用案内とリソースのカテゴリー。](https://www.systeme-de-design.gouv.fr/version-courante/fr) - [適用範囲 DSFRを利用できる組織を定めた公式ルール。](https://www.systeme-de-design.gouv.fr/version-courante/fr/premiers-pas/perimetre-d-application) - [Foundation 基盤となるデザインとアイデンティティのガイダンス。](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux)