# Digital Agency デザインシステム

## Digital Agency デザインシステム インターフェースプレビュー

形式が無効な受付番号、該当なしの受付番号を試した後、123456 を入力すると、架空のステータス記録が表示されます。

## Digital Agency デザインシステム デザインリファレンス

DADS beta v2.18.0 のドキュメント、2026年10月3日に確認したネイティブ HTML のサンプルスタイル、design-tokens 2.0.1 を参照しています。ドキュメント、サンプルリポジトリ、トークンパッケージは、それぞれ異なるバージョン履歴を持ちます。以下では、レイアウト上の選択と公式コンポーネントの値を明確に区別しています。

### タイポグラフィ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Sans family | Noto Sans JP, system fallbacks | プレビューでは、フォントをダウンロードせず、ドキュメントに記載されたフォールバックスタックを使用します。 |
| Std-17N-170 | 17px / 1.7; weight 400 | 標準の本文テキストです。トークン名はサイズ、太さ、行の高さを表します。 |
| Body / UI baseline | 16px or greater | 14px は、限られた補助的な用途にのみ使用します。 |
| Weight roles | N = 400; B = 700 | レギュラーとボールドのネイティブフォントを使用します。 |
### ネイティブ入力の構造

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| data-size sm / md / lg | 2.5rem / 3rem / 3.5rem | コントロールの高さにはルートフォントサイズを使用し、テキストサイズを3種類に分けません。 |
| Input border / radius | 1px / 0.5rem | ボーダーには neutral-solid-gray-600 を使用し、角丸にはコンポーネントの CSS を使用します。 |
| Input padding | 0.75rem 1rem | ブロック方向とインライン方向のパディングを設定し、最大幅を 100% にします。 |
| Focus | 4px black outline, 2px offset, 2px yellow shadow | ネイティブの focus-visible スタイルを使用し、コンテナの端で切れないようにします。 |
### トークンパッケージの色

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --color-key-900 | #0017c1 | デフォルトのキーエイリアスは primitive-blue-900 を参照します。 |
| --color-semantic-error-1 | #ec0000 | エイリアスは primitive-red-800 を参照します。エラーメッセージと併用してください。 |
| --color-neutral-solid-gray-900 | #1a1a1a | 入力テキスト。 |
| --color-neutral-solid-gray-600 | #666666 | デフォルトの入力欄の境界線。 |
| --color-primitive-yellow-300 | #ffd43d | 黒いアウトラインの背後に表示するフォーカスシャドウ。 |
### ボタンとアプリケーションの余白

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Large minimum | 136 × 56px | ラベルの拡大と折り返しを許可します。 |
| Medium minimum | 96 × 48px | 副次的な操作に適しています。 |
| Small / extra-small minimum | 80 × 36px / 72 × 28px | 表示されるコントロールが小さくても、44 CSS px のタップ領域を確保してください。 |
| Preview rhythm | 8 / 24 / 64px | 余白ガイドの例からアプリケーションで選択した値です。DADS の必須スケールではありません。 |
## Digital Agency デザインシステム 完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Digital Agency デザインシステム リソースと対象範囲

### HTML のソースパスを選択

> 公式リソースインデックスには、HTML/CSS/JavaScript のサンプル、React/Tailwind のサンプル、Tailwind プラグイン、Figma デザインデータが用意されています。この例では、プレーンな HTML のパスを選択します。入力欄とボタンの CSS は変更せずにコピーし、周辺のステータス照会とクライアント側の入力検証はアプリケーションコードで実装します。汎用的な DADS コンポーネントパッケージを独自に想定しているわけではありません。

プレビューは、架空の自治体手続き照会を独立して実装したものです。政府機関のヘッダーを再現せず、公開データベースにも接続しません。また、公式なサービス状況を示すものでもありません。受付票の形式とステータス情報はサンプルデータです。

1. 2つのコンポーネントスタイルより先に design-tokens を読み込んでください。

2. ネイティブな HTML コントロールには、ドキュメントに記載されたクラスとデータ属性を適用してください。

3. サービス固有の入力検証、ステータス表示、フォーカス移動はアプリケーションコードに追加してください。

関連する仕様を確認する

## Digital Agency デザインシステム タイポグラフィと言語

### テキストスタイル名を読み取る

Std-17N-170 は、17px のレギュラー書体と単位なしの行高 1.7 を表します。このプレビューでは、本文にその行間を適用し、見出しには 32px のボールドと行高 1.5 を指定しています。ドキュメントで推奨されているサンセリフ書体は Noto Sans JP です。Webフォントが読み込まれない場合は、システムフォントにフォールバックします。このローカルの例では、意図的にフォールバックを使用しています。

日本語と英語では、同じ文字数でも幅が異なります。ラベルは常にコントロールの上に表示し、見出しの折り返しを許可してください。また、想定した文字数だけを基準にボタンのサイズを決めないでください。翻訳によって縦方向のスペースが増えても、コンポーネントの役割は変わりません。

関連する仕様を確認する

## Digital Agency デザインシステム セマンティックカラーとフォーカス

### CSS が実際に使用するエイリアスを使う

サンプルボタンのデフォルトカラーには --color-key-900 を指定しています。配布されるトークンスタイルシートでは、このエイリアスは blue-900、#0017c1 に解決されます。ホバー時とアクティブ時には、不特定の不透明度を適用するのではなく、key-1000 と key-1200 を選択します。入力欄のエラー境界線には --color-semantic-error-1 を使用します。

コントロールにキーボードフォーカスが当たると、黒いアウトラインと黄色のシャドウが表示されます。コントロールは、はみ出しが切り取られるコンテナから離して配置してください。コンポーネントの CSS が正しくても、overflow-hidden が設定されたカードではフォーカスリングが切れることがあります。赤い境界線に加え、エラーテキストと aria-invalid も使用してください。

関連する仕様を確認する

## Digital Agency デザインシステム 余白とレスポンシブなレイアウト

### アプリケーションに適した小さな余白リズムを選ぶ

DADS の余白ガイドは使用例を示すものであり、すべてのインターフェースに必須の一律な順序を定めるものではありません。このレイアウトでは、関連する要素間に 8px、フォームセクション間に 24px、デスクトップページの左右の余白にゆとりをもたせるため 64px を使用しています。コンテンツ幅の上限である 52rem はアプリケーション独自の判断であり、DADS のトークンではありません。

画面幅が狭い場合、結果の定義リストは縦に並び、コントロールは利用可能な幅いっぱいに広がります。この例では 768px のメディアクエリを使用しています。これは DADS 共通のブレークポイントではありません。変更の理由は、コンテンツの折り返しとボタンの最小サイズです。

```
.lookup { max-width:52rem; margin-inline:auto; padding:64px 24px; }
@media(max-width:767px) { .lookup { padding:24px; } .actions { align-items:stretch; } }
```

コードリファレンス

関連する仕様を確認する

## Digital Agency デザインシステム 入力欄の構造とエラー

### ラベル、ヒント、エラーを分けて表示する

ネイティブの .dads-input-text ラッパーでテキストのデフォルトを定義します。.dads-input-text__input 子要素がサイズ、境界線、パディング、角丸、フォーカス状態を担います。対応するラベルは for/id で明示的に関連付けます。エラーが発生しても、想定される形式をユーザーが確認できるよう、ヒントは表示したままにします。

この例では、ASCII 数字 6 桁のみを受け付けます。形式が正しくない値が入力されると、aria-invalid=true が設定され、関連するエラーメッセージが表示され、入力欄にフォーカスが戻ります。構文上は有効でも 123456 以外の値を入力した場合は、一致する結果がないことを別のメッセージで伝えます。これは形式エラーとして扱いません。どちらもこのデモ内だけの動作です。

- 参照番号は数量ではなく識別子なので、入力タイプはテキストのままにしてください。

- 数値入力用のスピンボタンを表示せず、キーボードのヒントとして inputmode=numeric を使用してください。

- 次に修正する内容を説明する際も、入力済みの値は保持してください。

関連する仕様を確認する

## Digital Agency デザインシステム ボタンの階層と状態

### この照会の主操作は1つにする

塗りつぶしの Large ボタンで照会を実行し、テキストスタイルのボタンで入力例をクリアします。ネイティブの data-type 値は solid-fill、outline、text です。data-size では lg、md、sm、xs を選択します。これらはサンプルの HTML 属性であり、React の props ではありません。

Large ボタンの最小幅は 136px、高さは 56px です。ラベルに必要なスペースに応じて拡大できます。付属の CSS では、Small と Extra-small のバリエーションもタップ領域を拡大しています。その領域内に隣接するタップ対象を詰め込まないでください。このデモでは、競合を避けるために大きいバリエーションを使用しています。

関連する仕様を確認する

## Digital Agency デザインシステム 有用なステータス結果

### ローカルの状態を確認できるようにする

123456 を入力すると、架空の受付票が表示され、参照番号、申請日、次のアクションが定義リストに示されます。照会後は見出しにフォーカスを移すため、キーボード利用者は新しい結果に直接移動できます。一致する結果がない場合も、その状態にフォーカスを移し、再試行する方法を示します。

3段階のリストは、このアプリケーション独自のマークアップです。「受付済み」「確認中」「決定」を、形や色だけでなくテキストでも区別しています。実際に実装する場合は、サービスからこれらの値を取得し、未認証、利用不可、期限切れの記録にも対応する必要があります。このプレビューは外部へのリクエストを行わず、実在する住民の記録が見つかったかのように示すこともありません。

関連する仕様を確認する

## Digital Agency デザインシステム サンプルを組み込む

### トークン、スタイル、動作を分離する

トークンパッケージは dist/tokens.css を公開しています。HTML のサンプルは Storybook スクリプトを含むソースリポジトリです。リポジトリをクローンすると、内容を確認できる環境が得られます。本番環境向けに調整する前に、必要なコンポーネントのスタイルをライセンス情報とともにコピーし、取得元のリビジョンを記録してください。

このページでは、トークンパッケージのバージョンを 2.0.1 に固定し、HTML のスタイルには日付付きのソーススナップショットを使用しています。スタンドアロンのデモはローカルファイルを読み込むため、表示の検証にライブ CDN は必要ありません。Storybook のセットアップコマンドは、公式リポジトリへのエントリーパスとして記載しています。このプレビュー用に依存関係を新規インストールしたわけではありません。

関連する仕様を確認する

## Digital Agency デザインシステムのコンポーネント例

### ラベル付きの参考入力欄

ヒントを常時表示し、エラーに関連付けたネイティブ DADS 入力クラス。

```
<div class="dads-input-text">
  <label for="reference">Reference number (required)</label>
  <p id="reference-hint">Use the 6 digits on your example receipt.</p>
  <input class="dads-input-text__input" data-size="lg"
    id="reference" inputmode="numeric" autocomplete="off"
    aria-describedby="reference-hint reference-error" aria-invalid="true">
  <span class="dads-input-text__error-text" id="reference-error">
    Enter 6 digits, for example 123456.
  </span>
</div>
```

コードリファレンス

- 入力値が正しく修正されたら aria-invalid を削除し、エラーを非表示にします。

- 参考例のバリデーションはアプリケーションのロジックです。

### 検索とリセットの主要アクション

ネイティブのボタンバリアントと HTML のアクションタイプを使用します。

```
<button class="dads-button" data-type="solid-fill" data-size="lg" type="submit">
  Show example status
</button>
<button class="dads-button" data-type="text" data-size="md" type="reset">
  Clear reference
</button>
```

コードリファレンス

### 単体で動作するサンプル一式

レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>DADS procedure receipt example</title><link rel="stylesheet" href="vendor/dads-2026-10-03/tokens.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/input-text.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/button.css"><style>
*{box-sizing:border-box}body{margin:0;color:var(--color-neutral-solid-gray-900);font:400 17px/1.7 var(--font-family-sans);background:#fff}.lookup{max-width:52rem;padding:64px 24px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.08em;border-bottom:1px solid #b3b3b3;padding-bottom:16px}h1{font-size:32px;line-height:1.5;margin:24px 0}h2{font-size:24px;line-height:1.5}p{margin:8px 0 24px}.field{margin:32px 0}label{font-weight:700;display:block}.dads-input-text__input{width:22rem}#reference-hint{margin:8px 0}.actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin:24px 0}.result{border-top:4px solid var(--color-key-900);background:#f5f5f5;padding:24px;margin-top:32px}.result:focus{outline:3px solid #111;outline-offset:4px}dl{display:grid;grid-template-columns:10rem 1fr;gap:16px}dt{font-weight:700}dd{margin:0;overflow-wrap:anywhere}ol{padding-left:24px}li{padding:8px}li.current{font-weight:700;color:var(--color-key-900)}small{display:block;font-size:14px;margin-top:32px;color:#555}[hidden]{display:none!important}@media(max-width:767px){.lookup{padding:24px}h1{font-size:28px}.actions{align-items:stretch;flex-direction:column}.actions button{width:100%}dl{grid-template-columns:1fr;gap:4px}dd{margin-bottom:16px}}
</style><main class="lookup"><div class="eyebrow">SERVICE PATTERN · DADS HTML</div><h1>Check a procedure receipt</h1><p>Use the reference from your receipt to view the next step. This is a fictional local example.</p><form id="lookup-form" novalidate><div class="dads-input-text field"><label for="reference">Reference number (required)</label><p id="reference-hint">Enter 6 digits. Try <strong>123456</strong> for the example record.</p><input id="reference" class="dads-input-text__input" data-size="lg" inputmode="numeric" autocomplete="off" aria-describedby="reference-hint reference-error"><span id="reference-error" class="dads-input-text__error-text" hidden>Enter 6 digits, for example 123456.</span></div><div class="actions"><button class="dads-button" data-type="solid-fill" data-size="lg" type="submit">Show example status</button><button class="dads-button" data-type="text" data-size="md" type="reset">Clear reference</button></div></form><section class="result" id="missing" tabindex="-1" hidden><h2>No matching example</h2><p>This reference has the correct format, but is not in the local example data. Try 123456.</p></section><section class="result" id="found" tabindex="-1" hidden><h2>Receipt 123456</h2><dl><dt>Procedure</dt><dd>Community room request</dd><dt>Submitted</dt><dd>1 October 2026 — fictional date</dd><dt>Next action</dt><dd>Wait for the example review. No documents are currently requested.</dd></dl><ol aria-label="Procedure progress"><li>Received</li><li class="current" aria-current="step">Checking the request — current step</li><li>Decision — not started</li></ol></section><small>Independent OpenDesign demonstration. Native DADS component CSS; system font fallback. No information is sent or stored.</small></main><script>
const f=document.querySelector('form'),i=document.querySelector('input'),e=document.querySelector('#reference-error'),found=document.querySelector('#found'),missing=document.querySelector('#missing');f.addEventListener('submit',ev=>{ev.preventDefault();found.hidden=missing.hidden=true;const valid=/^[0-9]{6}$/.test(i.value.trim());e.hidden=valid;i.setAttribute('aria-invalid',String(!valid));if(!valid){i.focus();return}const target=i.value.trim()==='123456'?found:missing;target.hidden=false;target.focus()});f.addEventListener('reset',()=>{found.hidden=missing.hidden=e.hidden=true;i.removeAttribute('aria-invalid');i.focus()});
</script></html>
```

コードリファレンス

- 完全なサンプルは「ソース」からダウンロードできます。READMEに正確なローカル起動コマンドが記載されています。

- ベンダーのパスはこのドキュメントからの相対パスのままにしてください。アーカイブには、このプレビューで使用するアセット一式が含まれています。

## Digital Agency デザインシステム エージェントのセットアップ

### 実装の出発点

公式サンプルリポジトリのワークフローと、検証済みのトークン読み込みパスです。このプレビューはローカルにコピーした CSS を実行するため、React やバックエンドは必要ありません。「Sources」に含まれる、動作するサンプル一式の ZIP には、プレビューに必要な依存関係と完全なドキュメントも収録されています。展開後、そのディレクトリで python3 -m http.server 8080 を実行し、http://localhost:8080/japan-dads.html を開いてください。モジュールを使うサンプルは file:// から開かないでください。

```
# Official HTML samples are a source repository, not a published component SDK.
git clone https://github.com/digital-go-jp/design-system-example-components-html.git
cd design-system-example-components-html
npm install
npm run storybook
# For the standalone composition, copy these component styles into your app:
# src/components/input-text/input-text.css
# src/components/button/button.css
# Install the independently versioned token package:
npm install @digital-go-jp/design-tokens@2.0.1
# In a CSS-aware bundler entry:
# import '@digital-go-jp/design-tokens/dist/tokens.css';
# import './input-text.css';
# import './button.css';
```

### あなたのプロジェクト向けプロンプト

```
DADS HTML の input-text とボタンのスタイル、および design-tokens 2.0.1 を使い、架空の行政サービスの受付番号照会を実装します。表示ラベル、形式のヒント、aria-describedby、無効状態を維持してください。Std-17N-170 の文章リズムと、大きな主要アクションを採用します。形式不正、該当なし、該当ありの状態をそれぞれ表示します。入力されたテキストを保持し、新しいステータス見出しにフォーカスを移し、実在する個人情報や行政機関の識別マークは使用しないでください。コンテンツ幅 52rem、間隔 8/24/64px はアプリケーション側の選択として扱います。
```

## Digital Agency デザインシステム 出典と対象範囲

公式サンプルの CSS とトークンを用いた、独立した教育目的の構成です。政府の承認を受けたものではなく、実際の照会機能や行政機関の識別情報の複製もありません。フォントは、ローカルで利用可能なシステムサンセリフにフォールバックします。アプリケーションのレイアウトとレコードデータは、公式の DADS 仕様ではありません。

- 公式システム システムの対象範囲、ガイダンス、最新リリース情報。

- Foundation タイポグラフィ、色、レイアウトなど、ビジュアルの基礎。

- 実装リソース 公式のデザインデータ、コード例、Markdown ドキュメント。

- 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。

## Digital Agency デザインシステム 関連リソース

### KERN

タイポグラフィ、セマンティックなテーマ、開閉パネル、元に戻せる確認フローを備えたネイティブなKERNインターフェースを構築します。

### Michigan Forty Two

動作する役割・研究分野フィルターの例を通じて、Forty-TwoがサポートするWordPressのワークフロー、Web用カラーパレット、人物ディレクトリのパターンを確認できます。

### Aksel

Aksel v8 の実際の ax トークン、ネイティブのテーブル密度、セマンティックなヘッダー構造を使用します。ライトテーマとダークテーマを切り替えながら、架空のフォローアップ記録を並べ替え、選択できます。


- [実装リファレンス](https://github.com/digital-go-jp/design-system-example-components-html)
- [ソース](https://design.digital.go.jp/dads/foundations/typography/)
- [ソース](https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/input-text/input-text.css)
- [ソース](https://github.com/digital-go-jp/design-tokens)
- [ソース](https://design.digital.go.jp/dads/components/button/)
- [関連する仕様を確認する](https://design.digital.go.jp/dads/resources/)
- [関連する仕様を確認する](https://design.digital.go.jp/dads/foundations/typography/)
- [関連する仕様を確認する](https://github.com/digital-go-jp/design-tokens)
- [コードリファレンス](https://design.digital.go.jp/dads/foundations/spacing/)
- [関連する仕様を確認する](https://design.digital.go.jp/dads/foundations/spacing/)
- [関連する仕様を確認する](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text)
- [関連する仕様を確認する](https://design.digital.go.jp/dads/components/button/)
- [関連する仕様を確認する](https://design.digital.go.jp/dads/components/description-list/)
- [関連する仕様を確認する](https://github.com/digital-go-jp/design-system-example-components-html)
- [コードリファレンス](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text)
- [コードリファレンス](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/button)
- [コードリファレンス](https://github.com/digital-go-jp/design-system-example-components-html)
- [公式システム システムの対象範囲、ガイダンス、最新リリース情報。](https://design.digital.go.jp/dads/)
- [Foundation タイポグラフィ、色、レイアウトなど、ビジュアルの基礎。](https://design.digital.go.jp/dads/foundations/)
- [実装リソース 公式のデザインデータ、コード例、Markdown ドキュメント。](https://design.digital.go.jp/dads/resources/)