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 デザインシステム完全ガイド

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

DESIGN-nhs.md

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

ガイドをダウンロード

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

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

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

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カラムになります。レイアウトの切り替えはライブラリが制御し、小さな独立したアイデンティティ用の帯のみアプリケーション側でスタイルを設定しています。

scss

.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 デザインシステム選択時のエラーと確認

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

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

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

来院方法を選択してから続行してください。
「電話」を選択して、ローカルの確認画面を開きます。
希望を「対面」に変更し、更新された確認画面を確認します。

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

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

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

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

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

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

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

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

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

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

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

html

<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要素を使うと、タスクに必要な情報を隠さずに追加情報を提示できます。

html

<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経由で配信してください。

html

<!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>