# Designsystemet デザインシステム ## Designsystemet デザインシステムのインターフェースプレビュー ネイティブの文字数カウンターを確認し、テーマとサイズを変更して、変更内容に応じて確認状態を保持または無効にしてください。 ## Designsystemet デザインシステムのデザインリファレンス @digdir/designsystemet-css/web 1.23.0 のデフォルトテーマのエクスポートとネイティブな ds-field の実装。カラーの各行にはライトモードの値を明記しています。 ### デフォルトのライトアクセントの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ds-color-accent-background-default | #fff | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-background-tinted | #eef4fa | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-surface-tinted | #ddeaf6 | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-surface-hover | #c7ddf0 | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-border-subtle | #99c0e3 | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-border-default | #2a7cc5 | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-text-default | #002c54 | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-base-default | #0062ba | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-base-hover | #004f96 | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-base-active | #003d75 | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | | --ds-color-accent-base-contrast-default | #fff | 1.23.0 のデフォルトのライトテーマで実際に使われる役割です。ランタイムのダークスキームでは、別の役割値が使われます。 | ### デフォルトのライトニュートラルの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | | --ds-color-neutral-background-tinted | #f3f3f4 | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | | --ds-color-neutral-surface-default | #fff | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | | --ds-color-neutral-surface-tinted | #e8e8e9 | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | | --ds-color-neutral-border-subtle | #bbbcbd | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | | --ds-color-neutral-text-subtle | #5b5d60 | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | | --ds-color-neutral-text-default | #292c30 | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | | --ds-color-neutral-base-default | #24272b | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | | --ds-color-neutral-base-contrast-default | #fff | 不要なステータスの意味を持たせずに、ニュートラルの役割を補助的な背景面やテキストに使います。 | ### サイズモードと文字の基礎 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-size-mode-font-size--md | 1.125 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-size-mode-font-size--lg | 1.3125 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-size-base | 18 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-font-family | Inter | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-font-weight-regular | 400 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-font-weight-medium | 500 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-font-weight-semibold | 600 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-line-height-sm | 1.3 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-line-height-md | 1.5 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-line-height-lg | 1.7 | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-border-radius-base | 0.25rem | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | 実際にエクスポートされるスカラー値または式です。すべてのスカラー値をピクセル値として解釈せず、data-size モードを使用してください。 | ## Designsystemet デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Designsystemet デザインシステムの動作、CSS、テーマパッケージ ### 3つの要素を正しい順序で読み込む > Designsystemetは、フレームワークに依存しない動作、コンポーネントのCSS、テーマの値を分けています。この例では designsystemet-web と designsystemet-css を 1.23.0 に固定し、CSSを読み込んでからデフォルトテーマを読み込み、動作を一度だけ登録します。動作パッケージなしでスタイルを適用したフィールドは、ここで示す連携済みの ds-field と同じ実装ではありません。 ### 現在のプレーンな HTMLの仕様を使う この実例では、通常の input、textarea、select 要素を ds-field で囲み、ds-input クラスを使用しています。これによりネイティブのフォームコントロールを維持しながら、パッケージによってラベルと説明を連携できます。古い Reactのみのフィールド APIをコピーするものではありません。ソース全体には、正しいパッケージのインポートと、元のアプリケーションの確認ロジックが含まれています。 ## Designsystemetデザインシステムの配色とサイズモード ### データ属性で外観を切り替える ページのルート要素に data-color-scheme を設定し、ライトまたはダークを指定します。テーマは対応するセマンティックカラーを適用し、フォームの値はそのまま保持します。パラメータ表にはライトモードのデフォルト値を明記しています。同じ16進カラーコードがダークモードにも適用されるかのような誤解を招く表現はしていません。外観を切り替えるボタンには、次に実行される操作を示すラベルを付けています。 ### サイズモードをシステム全体に適用する 読みやすさのサイズを切り替えるコントロールは、data-size を sm、md、lg の間で変更します。タイトルだけを拡大するのではなく、テーマのサイズモードを切り替えます。公開されているモード係数は 1、1.125、1.3125 です。これらはトークンの計算式に使われるものであり、すべてのコントロールにそのピクセル値を設定するという一律の指示ではありません。この例では、デスクトップだけでなくスマートフォンの幅でも大サイズモードをテストしています。 ## DesignsystemetデザインシステムのInterとセマンティックタイポグラフィ ### 必要なウェイトを含める プレビューには Inter 400、500、600 を含め、小文字の l の字形に関するドキュメント記載の cv05 フォント機能を有効にしています。ページでは標準の見出しクラスと段落クラスを使い、フォントウェイトと行の高さがテーマに従うようにしています。固定値の 14px 注釈は作成者が追加した補足であり、メインの操作スケールには含まれないことが明確です。 ### 補助コンテンツを対応するコントロールのそばに配置する タイトルのヒントはラベルの目的を、期待される内容のヒントは入力内容の種類を説明します。これらは対応するコントロールのそばに配置され、ds-field で関連付けられています。補足ガイダンスは別のカードにまとめ、画面幅が狭い場合はフォームの後に表示します。説明の表示にホバー操作は必要ありません。 ## Designsystemetデザインシステムの自動関連付けと文字数フィードバック ### ds-field で1つのコントロールを関連付ける 各 ds-field には、入力形式のコントロールを1つと、そのラベル、および任意の data-field 説明を含めます。パッケージが ID を割り当て、ラベルと説明の関連付けを構成します。関係のないコントロールを1つの ds-field にまとめると、この自動処理の前提が曖昧になります。複数の項目をグループ化する場合は、ラッパーを汎用フォームコンテナとみなさず、fieldset を使用してください。 - 各 ds-field には入力形式のコントロールを1つだけ配置します。 - 関連する補助コンテンツには data-field の説明を使用します。 - ID と aria-describedby の関連付けは標準のオブザーバーに任せます。 ### カウンターの計測対象を理解する 標準のカウンターでは data-limit、data-under、data-over を使い、%d を残り文字数または超過文字数に置き換えます。1.23.0 では JavaScript の文字列長に基づいて計算し、data-label/data-state を通じてフィードバックを表示します。上限を超えた場合は無効状態も示します。あらゆる絵文字について書記素単位の文字数を保証するものではありません。140文字の上限はこの例における執筆上の制約であり、Designsystemetの公式なコンテンツルールではありません。 ## Designsystemetデザインシステムのアプリケーション検証とレビュー状態 ### 作成した内容を個別に検証する アプリケーションでは、タスクのタイトルと成果を必須とし、成果がサンプルの上限を超えた場合は入力を受け付けません。操作につながるメッセージを表示した後、該当するフィールドにフォーカスします。標準のカウンターは文字数を説明し、送信処理はアプリケーション独自のレビュー条件を適用します。maxlength によって貼り付けたテキストが通知なく切り捨てられることはありません。 ### 表示を切り替えてもデータを保持する レビューが成功すると、現在のタイトルと成果をテキストで表示します。どちらかのフィールドを編集すると結果をクリアします。一方、外観やサイズの切り替えでは概要の内容が変わらないため、レビュー結果を保持します。この違いは意図したもので、動作も検証済みです。プロジェクト管理サービスへのデータ送信は行いません。また、プレビューが外部にタスクを作成したと示すこともありません。 ## Designsystemetデザインシステムのネイティブフィールド完全実装 ### バージョンを固定したサンプルを再現する Vite のバニラプロジェクトを作成し、バージョンを固定した Designsystemet の2つのパッケージと Inter をインストールしてから、完全なエントリーファイルと digdir.css を保存します。ルートのマウント要素は残してください。ソースには登録処理、テーマの適用順、カウンターのマークアップ、表示コントロール、レビュー検証のすべての遷移が含まれています。ローカルプレビューでも手描きの模倣ではなく、同じ標準のフィールドオブザーバーを使用します。 1. 動作を一度インポートしてから、コンポーネント CSS とデフォルトテーマを読み込みます。 2. Inter 400、500、600 を読み込み、完全なエントリー/CSSを保存します。 3. 上限超過時のカウンターを確認し、成果の内容を修正します。 4. レビューを実行し、サイズと外観を切り替えてから、テキストを編集して結果が消えることを確認します。 ### 上限超過と修正後の動作をテストする 成果に通常の文字を150文字貼り付け、上限超過として10文字と報告されることを確認します。この状態ではレビューが拒否される必要があります。短い成果に置き換えてレビューを成功させ、その後、結果を保持したままダークモードと読みやすさのサイズを切り替えます。タイトルを編集し、古いレビュー結果が消えることを確認します。各ビューポート幅で、フォーカス表示と折り返しも確認してください。 ## Designsystemetデザインシステムのコンポーネント例 ### main.js — ネイティブフィールドとテーマの完全な実装例 完全なエディター、実際のカウンターマークアップ、外観とサイズのコントロール、ローカルでのレビュー検証。 ``` import '@digdir/designsystemet-web'; import '@digdir/designsystemet-css'; import '@digdir/designsystemet-css/theme'; import '@fontsource/inter/latin-400.css'; import '@fontsource/inter/latin-500.css'; import '@fontsource/inter/latin-600.css'; import './digdir.css'; document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`

DESIGNSYSTEMET / NATIVE FIELD STUDY

Write a useful task brief

Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.

Use a short label that identifies the work.

Describe the result, not a list of implementation instructions.

`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()}); ``` コードリファレンス - Select では ds-field 内で現在の ds-input スタイルを使用します。カウンターのフィードバックは標準のオブザーバーが管理します。 ### digdir.css — オリジナルのレスポンシブレイアウト ネイティブテーマを基にしたレイアウト。Inter の機能設定も含みます。 ``` body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}} ``` コードリファレンス - テーマとサイズの切り替えでは値を保持し、コンテンツの編集時だけレビューを無効にします。 ## Designsystemetデザインシステムのエージェント設定 ### 実装の出発点 ブラウザー上で、ネイティブなラベルの関連付け、カウンターの状態、検証後の修正、ライト/ダークモードとサイズの切り替えをテストしました。 ``` npm create vite@latest ds-brief -- --template vanilla cd ds-brief npm install npm install @digdir/designsystemet-css@1.23.0 @digdir/designsystemet-web@1.23.0 @fontsource/inter # Replace src/main.js and add src/digdir.css. Keep
. npm run dev ``` ### あなたのプロジェクト向けプロンプト ``` 正しい順序で Designsystemet 1.23.0 の動作/CSS/デフォルトテーマを使用し、概要エディターを構築してください。ds-field と1つのネイティブコントロールを組み合わせ、実際の data-field カウンター属性と Inter のウェイトを使用します。外観とサイズを切り替えてもレビュー結果を保持し、コンテンツの編集後は結果をクリアしてください。貼り付けた入力を切り捨てず、元の140文字ルールを適用します。 ``` ## Designsystemetデザインシステムの情報源と対象範囲 OpenDesignで作成したローカルエディターです。Designsystemet CSS とウェブ動作 1.23.0 を使用しています。デフォルトテーマとフィールドオブザーバーは標準機能で、概要の内容、140文字の上限、レビューの手順は独自のものです。 - セットアップとテーマの適用順 ネイティブの動作、CSS、テーマ、フォントの設定。 - テーマの基盤 サイズ、配色、タイポグラフィのエントリーポイント。 - 公開実装 バージョン管理された ds-field オブザーバーと生成済みテーマ。 - システムの対象範囲 共有コンポーネントとガイドラインの対象範囲。 ## Designsystemetデザインシステムの関連リソース ### DSFR フランス国家デザインシステムの具体的なタイポグラフィ、グリッド、アコーディオン API を、制度上の対象範囲と併せて理解します。明確に中立的な学習用サンプルを使い、連動する開閉動作と独立した開閉動作を比較します。 ### Europa Component Library キーボード操作、すべて開く動作、JavaScriptを使わない場合でも読みやすいフォールバックを含む、ネイティブなアコーディオンのブリーフ全体を通じて、Europa の EC カラー、文字、間隔の役割を確認できます。 ### gov.cz デザインシステム 6つのリソースを通じて、Gov Design System CEで実際に使われている色の役割、カードのスロット、ネイティブのページネーションを、フォーカスとページ状態を明示しながら詳しく見ていきます。 - [実装リファレンス](https://designsystemet.no/en/fundamentals/code/setup) - [ソース](https://github.com/digdir/designsystemet) - [コードリファレンス](https://designsystemet.no/en/fundamentals/code/setup) - [セットアップとテーマの適用順 ネイティブの動作、CSS、テーマ、フォントの設定。](https://designsystemet.no/en/fundamentals/code/setup) - [テーマの基盤 サイズ、配色、タイポグラフィのエントリーポイント。](https://designsystemet.no/en/fundamentals) - [公開実装 バージョン管理された ds-field オブザーバーと生成済みテーマ。](https://github.com/digdir/designsystemet) - [システムの対象範囲 共有コンポーネントとガイドラインの対象範囲。](https://designsystemet.no/en/intro)