# NHS デザインシステム

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

方法を選び、任意のヘルプを確認し、未回答の質問を解消して、希望を変更できます。

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

NHS.UK frontend 10.6.1とNHSのデジタルサービスマニュアルを参照しています。プレビューでは公式のローカルCSS/JSをArialとともに使用し、ライセンスが必要なFrutigerやNHSロゴは使用していません。レスポンシブの値は選択したパッケージに照らして確認しています。臨床に関するコンテンツは含まれていません。

### タイポグラフィとアイデンティティ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | Frutigerの使用には該当するライセンスが必要なため、この資料ではArialを使用しています。 |
| nhsuk-body | 16px small / 19px large | 既定の本文テキスト。 |
| nhsuk-body-l | 26px desktop | 導入文すべてではなく、リード文に使用します。 |
| nhsuk-body-s | 14px small / 16px large | 必要な箇所に絞って使う補足情報。 |
| nhsuk-heading-l | Transactional h1 | 後続のh2にはheading-mを使用します。 |
### セマンティックな色変数

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | 本文コンテンツ |
| $nhsuk-secondary-text-colour | #4c6272 | ヒント |
| $nhsuk-link-colour | #005eb8 | リンク先 |
| $nhsuk-focus-colour | #ffeb3b | キーボードフォーカス |
| $nhsuk-border-colour | #d8dde0 | 構造上の境界 |
| $nhsuk-input-border-colour | #4c6272 | 入力の境界 |
| $nhsuk-error-colour | #d5281b | 入力エラーのフィードバック |
| $nhsuk-button-colour | #007f3b | 主操作 |
### レスポンシブな余白

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
| nhsuk-u-margin-bottom-2 | 8px → 8px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
| nhsuk-u-margin-bottom-3 | 8px → 16px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
| nhsuk-u-margin-bottom-4 | 16px → 24px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
| nhsuk-u-margin-bottom-5 | 24px → 32px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
| nhsuk-u-margin-bottom-6 | 32px → 40px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
| nhsuk-u-margin-bottom-7 | 40px → 48px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
| nhsuk-u-margin-bottom-8 | 48px → 56px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
| nhsuk-u-margin-bottom-9 | 56px → 64px | 小画面から768px超まで。ローカルで重複した設定を作らず、クラスを使用します。 |
### ページの構成

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | 幅固定の外側コンテナ。 |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | 手続き型サービスに推奨。 |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | グリッド幅は769px以上で適用されます。 |
| Breakpoints | 320 / 641 / 769 / 990px | モバイル、タブレット、デスクトップ、大型デスクトップ。 |
| nhsuk-u-reading-width | Readable content measure | 親コンテナの幅が広い場合に使用します。 |
## NHS デザインシステム完全ガイド

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

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

## NHS デザインシステム NHSの背景とフォント

### 誤解を招くアイデンティティ表現を避けた医療インターフェース

> NHS.UK frontendは、ビジュアルとインタラクションの基盤を提供します。診察の予約を取ったり、診療所が対応する受診方法を決めたりするものではありません。この資料では架空の予約を表示し、希望する方法を選べます。選択後に表示されるのはローカルでの確認であり、予約ではありません。

Frutigerはライセンス条件のあるNHSブランド資産です。この独立したリソースでは、文書に記載されたフォールバックフォントのArialを使用し、NHSロゴは使っていません。公式のCSSはそのまま維持し、ローカルでフォントを明示的に上書きしてFrutigerが要求されないようにしています。

関連する仕様を確認する

## NHS デザインシステム手続き型サービスのタイポグラフィ

### 質問を軸に階層を組み立てる

ページの質問にはnhsuk-heading-l、下位のセクションにはnhsuk-heading-mを使用します。ガイダンスがheading-xlから始まる長い編集記事とは異なります。ラジオボタンのフィールドセットでは、グループとしての意味を保ったまま、見出しサイズの凡例を使えます。

通常の段落クラスで、本文、リード文、小さな補足文を使い分けます。26pxのリード文はページ冒頭に一度使うと効果的ですが、予約の案内には通常の本文テキストを使います。プレビューでは、日付や場所の名称が折り返されるよう、十分な行幅を確保しています。

関連する仕様を確認する

## NHS デザインシステム間隔とコンテナ

### NHSのスペーシングはGOV.UKのスペーシングスケールとは異なる

NHSのレスポンシブ単位は異なる数列に基づき、768pxを超えると切り替わります。たとえば、単位6は32pxから40pxに変わります。ヘルパーの名前が似ているからといって、GOV.UKのunit-6の値をNHSに流用しないでください。

デモでは960pxのコンテナと、読み物向けの3分の2幅のカラムを使用しています。ネイティブのグリッド動作により、デスクトップ未満では1カラムになります。レイアウトの切り替えはライブラリが制御し、小さな独立したアイデンティティ用の帯のみアプリケーション側でスタイルを設定しています。

```
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}
```

コードリファレンス

関連する仕様を確認する

### レスポンシブの境界値

ドキュメントでは641pxをタブレット、769pxをデスクトップと定義しています。グリッドのカラム幅が適用されるのはデスクトップからですが、すべてのタイポグラフィ設定が同じ境界まで切り替わらないという意味ではありません。すべてのプロパティに共通のブレークポイントを一つ実装するのではなく、ネイティブのクラスを使用してください。

関連する仕様を確認する

## NHS デザインシステム受診方法の選択肢をまとめる

### 1つのフィールドセットに、回答は1つ

この例では、表示される凡例を備えたnhsuk-fieldsetを使い、ラジオボタンには共通のname属性を設定しています。各入力には固有のidとラベルがあります。aria-describedbyでヒントをグループに関連付けています。こうした関連付けにより、ブラウザーは相互に排他的な1つの選択肢として扱えます。

ラジオ項目の構造では、入力とラベルをnhsuk-radios__itemの中に配置します。標準のラジオボタンは主要な質問に適しています。小サイズのバリエーションは、より密度の高いフィルターに使用します。架空の受診方法は、矢印キーで操作しても相互排他性が保たれます。

- 凡例で選択の内容を示します。

- 受診方法に共通のname属性を設定し、選択肢をグループ化します。

- 各ラベルはそれぞれ異なる入力IDを参照します。

関連する仕様を確認する

## NHS デザインシステム 必要な情報を隠さずにサポートする

### ネイティブのdetails要素を使う

detailsの例では、nhsuk-details__summaryとsummary-textのspanに続けてnhsuk-details__textを配置しています。ブラウザー標準の動作で開閉できます。予約の識別情報と、ここでは予約が行われないことは、誰にとっても必要な情報なので、開示部分の外に表示してください。

10.6では、NunjucksのAPIでsummary.textまたはsummary.htmlを使います。以前のsummaryTextオプションは非推奨です。マクロを使う場合は、新しいオブジェクト形式を優先してください。HTMLの例はテンプレートへの依存を避けながら、同じ構成を保っています。

関連する仕様を確認する

## NHS デザインシステム 選択時のエラーと確認

### グループを事前選択せずに検証する

初期状態では、どの選択肢も選択されていません。回答せずに続行すると、インラインエラーが表示され、グループとそのメッセージが関連付けられます。プレビューではエラーにフォーカスが移ります。確認画面から戻っても選択内容は表示されたままです。これらはネイティブコントロールに重ねて実装するアプリケーションの状態管理です。

確認画面には、選択した方法と架空の予約情報が再表示されます。操作には「希望を変更」と表示します。医療サービスが希望を受け付けたと誤解させる確認表示はなく、健康に関する助言や準備事項も追加していません。

1. 来院方法を選択してから続行してください。

2. 「電話」を選択して、ローカルの確認画面を開きます。

3. 希望を「対面」に変更し、更新された確認画面を確認します。

関連する仕様を確認する

## NHS デザインシステム ローカルのフロントエンドアセット

### 指定されたパッケージとモジュールを使う

このセットアップでは、10.6.1のCSSとブラウザーモジュールを静的アセット用ディレクトリにコピーします。モジュールはinitAllをエクスポートします。コンポーネントのマークアップができてから呼び出してください。単独の例でも、同じ配布ファイルをローカルで配信し、ページ単位でArialに上書きしています。

スタイルには、コンポーネントのルールとレスポンシブデザインの基礎が含まれます。確認パネルを切り替える短いスクリプトは、アプリケーション側のコードです。本番サービスでは、架空の予約情報を適切に管理されたデータに置き換え、独自のバックエンドで実際の希望を処理します。

関連する仕様を確認する

## NHS デザインシステム 構成の確認

### 医療サービスの文脈を確認する

特に確認すべき点は、利用者が予約内容を把握できること、来院方法の希望はまだ確定していないと理解できること、そして状況を見失わずに選択方法を変更できることです。汎用的な成功通知では、この違いが分かりにくくなります。

ラジオボタングループとdetailsの概要部分をキーボードで操作し、クリニック名が長い場合の狭い画面も確認してください。未選択時のエラーから、グループに戻れる必要があります。ライブラリは再利用可能な動作を提供しますが、実際の予約ルールや医療情報に関する責任は組織にあります。

関連する仕様を確認する

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

### 来院方法のラジオボタングループ

相互に排他的なネイティブ入力とNHSコンポーネントのクラスを使った、ラベル付きのfieldsetです。

```
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>
```

コードリファレンス

### 任意の補足情報

ネイティブのdetails要素を使うと、タスクに必要な情報を隠さずに追加情報を提示できます。

```
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
```

コードリファレンス

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

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

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>
```

コードリファレンス

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

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

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

### 実装の出発点

シェルコマンドとHTMLを、それぞれ該当するファイルに配置してください。Arialへの上書きは独立したプレビュー用に明示的に設定しています。NHSの各組織は、実際のフォントライセンスとブランド要件に従ってください。Sourcesにある動作確認済みのサンプルZIPには、プレビューに必要なファイル一式と完全なドキュメントも含まれています。展開して、そのディレクトリでpython3 -m http.server 8080を実行し、http://localhost:8080/nhs.htmlを開いてください。モジュールを使う例はfile://経由で開かないでください。

```
npm install nhsuk-frontend@10.6.1
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>
```

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

```
NHS.UK Frontend 10.6.1を使って、独立した予約希望の質問画面を作成します。相互に排他的な来院方法にはfieldsetとlegendを使い、ラジオボタンのヒントを関連付け、任意の補足情報にはネイティブのDetailsを使います。質問と重要な案内は常に表示してください。未回答のまま確認に進んだ場合は、エラーサマリーとインラインエラーを表示し、ローカルの確認画面から戻っても選択した方法を保持します。対応するCSSとモジュールのinitAllを読み込み、明示的に記載したArialによる検討用の上書きを適用してください。予約の照会、実際の予約変更、医療上の助言、NHS公式であるとの表示は追加しないでください。
```

## NHS デザインシステム 参照元と対象範囲

NHS.UK frontend 10.6.1を使った、独立した予約希望の検討用サンプルです。NHSのロゴ、ライセンス取得済みのFrutiger、実際の予約、医療上の指示、推薦を示唆する表現は含まれません。

- タイポグラフィ フォントの適用条件と、手続きにおける文字の階層。

- 色 名前付きのセマンティック変数。

- スペーシング レスポンシブ対応のクラス体系。

- レイアウト コンテナとデスクトップ向けグリッド。

- ラジオボタン グループの構造と状態。

- 詳細 開示コンポーネントの構造と、現在のマクロAPI。

- フロントエンドのソース 公式の実装と配布ファイル。

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

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

### NL デザインシステム

実際のコントリビューターコンポーネントと明示的なテーマを使って、公共サービスのインターフェースを構成します。このリファレンスでは、Utrecht CSSを使い、トークンのマッピング、データリストの構造、同じ編集ワークフローで使える2つの独自テーマを紹介します。

### NSW デザインシステム

独立したローカル参考資料の一覧を含む充実したワークショップガイドで、NSWのデザイントークン、Public Sansのタイポグラフィ、ネイティブでキーボード操作に対応したタブを確認できます。

### ONS デザインシステム

回答に矛盾が生じないアンケートを作成します。ONSのネイティブチェックボックス、相互排他的な回答、正確なタイポグラフィと色の参照、ローカルで完結する確認フローを使用します。


- [実装リファレンス](https://service-manual.nhs.uk/design-system/components/radios)
- [ソース](https://service-manual.nhs.uk/design-system/styles/typography)
- [ソース](https://service-manual.nhs.uk/design-system/styles/colour)
- [ソース](https://service-manual.nhs.uk/design-system/styles/spacing)
- [ソース](https://service-manual.nhs.uk/design-system/styles/layout)
- [関連する仕様を確認する](https://service-manual.nhs.uk/design-system/styles/typography)
- [コードリファレンス](https://service-manual.nhs.uk/design-system/styles/spacing)
- [関連する仕様を確認する](https://service-manual.nhs.uk/design-system/styles/spacing)
- [関連する仕様を確認する](https://service-manual.nhs.uk/design-system/styles/layout)
- [関連する仕様を確認する](https://service-manual.nhs.uk/design-system/components/radios)
- [関連する仕様を確認する](https://service-manual.nhs.uk/design-system/components/details)
- [関連する仕様を確認する](https://github.com/nhsuk/nhsuk-frontend)
- [コードリファレンス](https://service-manual.nhs.uk/design-system/components/radios)
- [コードリファレンス](https://service-manual.nhs.uk/design-system/components/details)
- [タイポグラフィ フォントの適用条件と、手続きにおける文字の階層。](https://service-manual.nhs.uk/design-system/styles/typography)
- [色 名前付きのセマンティック変数。](https://service-manual.nhs.uk/design-system/styles/colour)
- [スペーシング レスポンシブ対応のクラス体系。](https://service-manual.nhs.uk/design-system/styles/spacing)
- [レイアウト コンテナとデスクトップ向けグリッド。](https://service-manual.nhs.uk/design-system/styles/layout)
- [ラジオボタン グループの構造と状態。](https://service-manual.nhs.uk/design-system/components/radios)
- [詳細 開示コンポーネントの構造と、現在のマクロAPI。](https://service-manual.nhs.uk/design-system/components/details)
- [フロントエンドのソース 公式の実装と配布ファイル。](https://github.com/nhsuk/nhsuk-frontend)