# GOV.UK デザインシステム ## GOV.UK デザインシステム インターフェースのプレビュー 入力欄を空のまま送信し、リンクからエラーに移動して回答を修正します。その後、確認画面から値を編集してください。情報がページ外に送信されることはありません。 ## GOV.UK デザインシステム デザインリファレンス GOV.UK Frontend 6.5.1および2026年10月3日時点の現行v6ドキュメントを参照。16進カラー値は参考用のスナップショットです。本番環境では名前付きSass関数を優先してください。プレビューでは、ローカルの公式CSSとJavaScriptを、代替フォントと独自のアイデンティティで読み込みます。 ### 書体とレスポンシブな文字組み | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | govuk-heading-xl | 32px / 35px → 48px / 50px | タブレットのブレークポイント前後のフォントサイズ／行の高さ。ページタイトル。 | | govuk-heading-l | 27px / 30px → 36px / 40px | タブレットのブレークポイント前後のフォントサイズ／行の高さ。質問の見出し。 | | govuk-heading-m | 21px / 25px → 24px / 30px | タブレットのブレークポイント前後のフォントサイズ／行の高さ。セクション見出し。 | | govuk-body-l | 21px / 25px → 24px / 30px | タブレットのブレークポイント前後のフォントサイズ／行の高さ。リード文。 | | govuk-body | 19px / 25px → 19px / 25px | タブレットのブレークポイント前後のフォントサイズ／行の高さ。通常のテキスト。 | | govuk-body-s | 16px / 20px → 16px / 20px | タブレットのブレークポイント前後のフォントサイズ／行の高さ。補足テキスト。 | ### フォントの使用条件 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | GDS Transport | service.gov.uk services | そのサブドメインの対象サービスでは、公式フォントが必要です。 | | Independent preview | Helvetica Neue, Helvetica, Arial, sans-serif | ブランド表示のないFrontEndガイダンスで推奨されている代替フォントスタックです。Transportのフォントファイルは読み込みません。 | ### レスポンシブな間隔と固定の間隔 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | unit 0 | 0px → 0px; static 0px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 1 | 5px → 5px; static 5px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 2 | 10px → 10px; static 10px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 3 | 15px → 15px; static 15px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 4 | 15px → 20px; static 20px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 5 | 15px → 25px; static 25px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 6 | 20px → 30px; static 30px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 7 | 25px → 40px; static 40px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 8 | 30px → 50px; static 50px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | | unit 9 | 40px → 60px; static 60px | レスポンシブ：小→大。govuk-spacing(unit)は固定。 | ### 用途別の色名 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | govuk-functional-colour("text") | #0b0c0c | 主要な可読コンテンツ | | govuk-functional-colour("secondary-text") | #484949 | ヒントと補足情報 | | govuk-functional-colour("link") | #1a65a6 | 通常のリンク | | govuk-functional-colour("link-hover") | #0f385c | リンクのホバー状態 | | govuk-functional-colour("link-visited") | #54319f | 訪問済みのリンク先 | | govuk-functional-colour("border") | #cecece | 構造上の区切り | | govuk-functional-colour("input-border") | #0b0c0c | 入力欄の境界線 | | govuk-functional-colour("focus") | #ffdd00 | キーボードフォーカス時のみ | | govuk-functional-colour("focus-text") | #0b0c0c | フォーカス時の黄色地のテキスト | | govuk-functional-colour("error") | #ca3535 | 入力エラーのフィードバック | | govuk-functional-colour("success") | #0f7a52 | 成功フィードバック | | govuk-functional-colour("body-background") | #ffffff | 読み取り用の背景面 | ### レイアウトの基本要素 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | govuk-width-container | 1020px maximum | 標準のコンテンツ幅。実際に必要な場合は上書きできます。 | | govuk-grid-row + govuk-grid-column-two-thirds | 2/3 at wider widths | 質問や本文は読みやすい幅の列に収め、狭い画面では縦に並べます。 | | govuk-main-wrapper | Main content region | 幅コンテナ内のmainランドマークに使用します。 | ### ブレークポイントとコントロールのアウトライン | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | $govuk-breakpoints.mobile | 320px | Sassのブレークポイントキーであり、追加のレイアウトを必須とするものではありません。 | | $govuk-breakpoints.tablet | 641px | レスポンシブな文字、間隔、グリッドの標準境界。スタイルガイドでは640pxより広い幅とされています。 | | $govuk-breakpoints.desktop | 769px | 追加の名前付きブレークポイント。 | | $govuk-focus-width | 3px | フォーカスアウトラインの幅。ドキュメントに記載されたフォーカススタイルと組み合わせてください。 | ## GOV.UK デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## GOV.UK デザインシステム バージョンとアイデンティティ ### 独自のアイデンティティを備えたv6リファレンス > このリファレンスは、モバイル画面での文字サイズ拡大や用途別カラーの改訂を含むv6ドキュメントに基づいています。そのため、古いスクリーンショットとは値が異なる場合があります。上の表には、複数のリリースを混在させず、現在ドキュメントに記載されている標準値を示しています。 このライブデモは、架空の地域イベントに関する問い合わせです。王冠、GOV.UKのワードマーク、Transportフォント、実際の送信先は使用していません。タスクの内容とローカルの入力検証ルールはアプリケーション側の設定であり、コンポーネントの構造はリンク先の公式サンプルに基づいています。 関連する仕様を確認する ### 適切なフォントを選ぶ 対象となるservice.gov.ukのサービスでは、GDS Transportを公式実装の一部として使用します。それ以外のドメインの公共サービスでは、別の書体を使用してください。この独立したデモでは、推奨されているHelvetica Neue, Helvetica, Arial, sans-serifの代替フォントスタックを採用しています。フォントを変更しても、デザインシステムの階層を維持できます。 関連する仕様を確認する ## GOV.UK デザインシステム 文字組みと読みやすいリズム ### サイズと行の高さをセットで指定する 問い合わせの質問にはgovuk-heading-l、補足文にはgovuk-bodyを使用します。狭い画面では見出しが27/30px、広い画面では36/40pxになります。v6では本文の文字サイズは19/25pxのままです。狭い画面で本文を16pxにすると、現行のリファレンスではなく古い挙動になります。 レスポンシブなルールは1つの画面幅のスクリーンショットだけでは判断できないため、サイズ表には両方の値を示しています。本番用のCSSでは相対単位を使用します。govuk-heading-lのようなクラスは見た目を定めますが、意味上の要素をh1とh2のどちらにするかは決めません。 ``` .app-question-note { @include govuk-font($size: 19); } // Size and line-height only, without changing the font family: .app-existing-font { @include govuk-font-size($size: 19); } ``` コードリファレンス 関連する仕様を確認する ## GOV.UK デザインシステム 間隔とページ幅 ### レスポンシブ単位は固定ピクセル値ではない 質問グループ間にはunit 6が便利です。狭い画面では20px、タブレットのブレークポイントより広い画面では30pxになります。固定値のヘルパーgovuk-spacing(6)は、どの画面幅でも30pxを返します。そのため、どちらもデスクトップでは同じに見えても、ヘルパーを選ぶと挙動が変わります。 ``` .app-question-group { @include govuk-responsive-margin(6, "bottom"); } .app-fixed-inset { padding: govuk-spacing(3); } ``` コードリファレンス 関連する仕様を確認する ### コンテナ内に読み取り用の列を配置する 標準の幅コンテナの最大幅は1020pxです。その中にグリッドの2/3幅の列を設けることで、ページ全体の構造を揃えながら、質問の流れを読みやすい幅に収められます。狭い画面では自然に縦並びになります。このプレビューでは、各入力欄をダッシュボードのカードいっぱいに広げず、読みやすさを重視した階層を維持しています。 ```

Tell us about the event

``` コードリファレンス 関連する仕様を確認する ## GOV.UK デザインシステム 色とフォーカス ### 古いスクリーンショットに色を合わせるのではなく、役割に応じた色を使う v6の機能色では、リンクに#1a65a6、エラーに#ca3535を使用します。実際のSassビルドではgovuk-functional-colour("link")とgovuk-functional-colour("error")を使うと、アップグレード時に上流のカラーパレットを反映できます。これらの機能色は、一般的な赤や青のイラスト用カラーとは異なります。 フォーカス用の黄色は、フォーカス表示に限って使用します。選択状態やプロモーション用のアクセントカラーには使わないでください。プレビューでは、黄色に濃い色のテキストと視認性の高い濃色の境界線を組み合わせています。エラーは赤だけに頼らず、テキストと配置でも示します。 ``` .app-supporting-text { color: govuk-functional-colour("secondary-text"); } .app-custom-error { color: govuk-functional-colour("error"); } ``` コードリファレンス 関連する仕様を確認する ## GOV.UK デザインシステム 質問用コンポーネント ### フィールドは相互に関連する要素で構成する 入力欄の例では、govuk-form-group、govuk-label、govuk-hint、govuk-inputを組み合わせています。ラベルは入力欄のIDを参照し、aria-describedbyはヒントを参照します。入力が無効な場合は、エラー用のクラスに加えて、エラーメッセージのIDも追加してください。この関連付けを行わず、赤い境界線だけを表示しても、完全な再現にはなりません。 この問い合わせでは、イベント名と連絡先メールアドレスを一緒に扱います。1つの短いタスクに含まれる、ラベル付きの別々の値です。すべての入力欄を個別のページに分けるよう指示するものではありません。プレビューでは検証の例として両方を必須にしていますが、実際の許可要件を定めるものではありません。 - 常時表示するラベル：イベント名。 - 常時表示するヒント：イベント情報に記載されている名前を入力してください。 - 修正可能なエラー：イベント名を入力してください。 関連する仕様を確認する ### ネイティブのマークアップとアプリケーションの挙動は役割が異なる GOV.UK Frontendはコンポーネントのスタイル設定と拡張を行いますが、このサービスで受け付けるメールアドレスの判定、下書きの保存、問い合わせの受信は行いません。プレビューではJavaScriptが2つのフィールドを検証し、入力値は現在のページ内だけに保存します。ページを再読み込みすると、このデモの入力内容は消去されます。 関連する仕様を確認する ## GOV.UK デザインシステム エラーからの復帰をサポートする ### サマリーから修正箇所へ移動できるようにする 「続行」を押した後に入力エラーがある場合は、フォームの前にエラーサマリーを表示し、そこにフォーカスを移します。各リストリンクは、対応する回答先を指定します。単一のテキストフィールドでは入力要素のIDを指定します。グループ化された選択肢では、公式ガイダンスの説明に従い、適切な最初のコントロールを指定してください。 ネイティブのサマリーでは、機能拡張に data-module="govuk-error-summary" を使用します。プレビューでは、入力エラーがある場合にのみサマリーを挿入し、ローカルの6.5.1モジュールから ErrorSummary を生成します。ライブラリはフォーカスとリンクによる移動を処理し、アプリケーションはメッセージを表示し、入力値を保持し、不要になったエラーを削除します。 関連する仕様を確認する ### 実際のエラー解消手順を試す 両方のフィールドを空欄のまま「続行」してください。イベント名のエラーリンクを選び、架空のイベント名を入力してから、無効なメールアドレスを入力します。もう一度「続行」すると、残っているエラーだけが表示され、イベント名は保持されます。メールアドレスを正しく入力すると確認画面に進みます。エラーを常時表示するのではなく、状態の動作を確認できます。 関連する仕様を確認する ## GOV.UK デザインシステム 回答の確認と変更 ### データテーブルではなく定義リストを使う 回答確認画面には govuk-summary-list を使用します。各行には dt の項目名、dd の値、dd の操作領域があります。「変更」の後に非表示のラベルを付けて、どの回答を変更するかを示します。長いイベント名は値の欄で折り返され、編集先も隠れません。 変更操作を行うとフォームに戻り、選択したフィールドにフォーカスが移ります。続行時に再度入力を検証し、更新された確認画面に戻ります。戻り先の処理はアプリケーションコードで実装します。デザインシステムが提供するのは表示構造です。 関連する仕様を確認する ### 実際の動作に即した範囲で終了する このサンプルではデータを受け取るサービスがないため、確認画面で終了します。実際の回答確認画面は送信操作の前に表示し、送信される情報を示す必要があります。宣言文やバックエンドでの確認処理が必要なアプリケーションでは、追加のサービスロジックが必要です。緑色のパネルを表示しても、その処理の代わりにはなりません。 1. 架空の回答を2つとも入力して、確認画面に進んでください。 2. 「イベント名を変更」を選び、その回答だけを編集します。 3. 続行して、修正したイベント名と保持されたメールアドレスの両方を確認します。 関連する仕様を確認する ## GOV.UK デザインシステム フロントエンドの統合 ### ブランド設定を適用しないSassエントリをコンパイルする 以下の設定では govuk-frontend@6 と、Nodeパッケージインポーターを使用するDart Sassを使います。ドキュメントに記載された、ブランド設定を適用しないフォント構成をコンパイルし、ブラウザー用の JavaScript ディストリビューションをコピーします。実際のプロジェクトで使用する正確なリリースを記録するため、解決済みのロックファイルをコミットしてください。 このサンプルではTransportも政府機関の画像アセットも使用しません。ブランド設定の適用対象となるサービスでは、ドキュメントに記載されたアセットパスを通じて公式アセットも配信する必要があります。別のビルドツールを使うアプリケーションでも、バンドル方法を調整すれば、同じSassモジュールと initAll エントリを使用できます。 関連する仕様を確認する ### コンポーネントのマークアップができてから初期化する 静的ページでは、コピーしたモジュールを読み込み、initAll を呼び出します。クライアントレンダリングを行うアプリケーションでは、新しく挿入した領域ができてから initAll({ scope: element }) でその領域を初期化します。起動時に非表示のエラーサンプルを初期化し、それを実際の入力検証フローと誤認しないでください。 スタンドアロンプレビューでは、ローカルにコピーした公式の CSS と JavaScript をバージョン6.5.1で実行します。限定的なフォントオーバーライドを適用し、このサンプル全体でTransportを置き換えています。フォームの入力検証と確認画面はアプリケーションコードで実装し、Button と ErrorSummary の機能拡張にはライブラリを使用します。別途記載したSassのビルド手順は、設定可能な方法を推奨するものです。この環境ではコンパイルしていません。 関連する仕様を確認する ## GOV.UK デザインシステムのコンポーネント例 ### テキスト入力：ラベル、ヒント、入力エラー この例では、グループと入力要素にエラー修飾クラスを追加しています。入力要素の説明には、IDで参照する継続表示のヒントと現在のエラーを含めます。 ```
Use the name shown on your event information.

Error: Enter an event name

``` コードリファレンス - 入力に誤りがない状態では、エラーの段落、エラー修飾クラス、aria-describedby に指定したエラーのIDを削除します。 - 入力エラーがあっても実際の値を保持してください。サーバーから出力する場合はエスケープ処理を行い、DOMでは text/value の代入を使用します。 ### エラーサマリー：回答への移動 質問の前にサマリーを配置します。サマリーのメッセージはフィールド内のエラーと一致させ、無関係なラッパーではなく入力要素をリンク先に指定します。 ```

There is a problem

``` コードリファレンス - ネイティブ実装では、Frontendの初期化によってサマリーのフォーカス動作が有効になります。 - このサンプルでは、入力検証に失敗したサマリーを挿入するたびに新しい ErrorSummary を生成します。アプリケーションの入力検証処理とは別に実装します。 ### 回答確認：セマンティックなサマリーリスト 定義リストでは、回答ラベルと値を組み合わせ、編集先を指定します。非表示の補足テキストにより、複数の「変更」リンクを区別できます。 ```
Event name
Riverside community picnic
Change event name
``` コードリファレンス - returnTo パラメーターは、この例で使うアプリケーション上の規約であり、Frontend API の機能ではありません。 - 編集から確認画面に戻るとき、関係のない回答はすべてそのまま保持します。 ### 単体で動作するサンプル一式 レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。 ``` Event enquiry — OpenDesign component study Skip to main content

OpenDesign · Component studyGOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.

Tell us about the event

Enter fictional details to try linked validation and the check-answers pattern.

Use the name shown on your event information.
For example, organiser@example.com. Use a fictional address.
``` コードリファレンス - 完全なサンプルは「ソース」からダウンロードできます。READMEに正確なローカル起動コマンドが記載されています。 - ベンダーのパスはこのドキュメントからの相対パスのままにしてください。アーカイブには、このプレビューで使用するアセット一式が含まれています。 ## GOV.UK デザインシステム エージェントのセットアップ ### 実装の出発点 シェルコマンド、app.scss の内容、HTML の断片を、それぞれ指定された場所に分けて配置します。プレビューでは、フォントオーバーライドを適用した、ローカルにコピーした公式の6.5.1アセットを実行します。このSassのビルド手順は記載されていますが、このワークスペースではコンパイルしていません。「Sources」にある動作例の完全版ZIPには、プレビューに必要な依存関係一式と完全なドキュメントも含まれています。ZIPを展開し、そのディレクトリで python3 -m http.server 8080 を実行してから、http://localhost:8080/gov-uk.html を開いてください。モジュールを使う例を file:// から直接開かないでください。 ``` # Run in a project directory npm install govuk-frontend@6.5.1 npm install --save-dev sass mkdir -p public/assets # Save the following as app.scss @use "pkg:govuk-frontend" as * with ( $govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif) ); # Compile, then copy the browser module npx sass --pkg-importer=node app.scss public/assets/app.css cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/ ``` ### あなたのプロジェクト向けプロンプト ``` GOV.UK Frontend v6 を使い、このガイドに記載されたブランド設定を適用しないHelveticaのフォント構成で、2フィールドのイベント問い合わせフォームを実装してください。実際の form-group/input/error-summary と summary-list の構造、リンク付きのフィールド内エラー、保持される回答、回答先を指定した「変更」リンク、確認画面で終了する動作を使用します。Frontendのクラスを使って、記載されたレスポンシブな文字サイズと余白を適用してください。実際のプロジェクトの名称やブランドはそのまま使用し、公式の送信処理や、実在しないバックエンドの結果を作らないでください。空欄、無効なメールアドレス、修正後、確認画面、回答変更の各状態を検証してください。 ``` ## GOV.UK デザインシステム 出典と適用範囲 GOV.UK Frontend 6.5.1のコンポーネントを使った、独立した OpenDesign アプリケーションのサンプルです。CSS と JavaScript を使用しています。政府のロゴ、Transportフォント、公式サービス、実際の送信処理、コンプライアンス認証を示すものではありません。フォームのルールと確認画面への移動は、独自のアプリケーションコードで実装しています。 - v6の文字サイズスケール 小画面と大画面におけるサイズと行の高さの組み合わせ。 - レスポンシブな余白 固定単位とレスポンシブ単位、およびSassヘルパー。 - 機能別の色 現在の役割とSassアクセサー。 - レイアウト コンテナとグリッドの構成。 - テキスト入力 ラベル、ヒント、エラーの構造。 - エラー概要 修正箇所へのリンクとフォーカスの動作。 - サマリーリスト キー、値、状況に応じた変更操作。 - GOV.UKのブランド表記なし フォント、アイデンティティ、Sassの設定。 - CSSを組み込む Dart Sassとパッケージの統合。 - JavaScriptをインポート ブラウザモジュールとinitAll。 - 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。 ## GOV.UK デザインシステム関連リソース ### HarvardSites デザインシステム HarvardSites を編集プラットフォームとして理解しましょう。サイトのスタイルを比較し、文書化されたフォントの組み合わせを選び、目的に合わせたコンテンツコンポーネントで大学のページを組み立てます。 ### Helsinki ネイティブのHDS選択グループ、意味に即したフィードバックカラー、相互にリンクしたエラーサマリーを組み合わせ、確認と修正まで完了できるローカルなフローを構築します。 ### Rivet Rivetの実際のトークンスケール、HTMLのコンポーネント構造、キーボード操作への標準対応を活用して、大学のページを作成します。アクセシブルな来場案内タブを備えた、コンパクトなワークショップ詳細ページをご覧ください。 - [実装リファレンス](https://design-system.service.gov.uk/components/error-summary/) - [ソース](https://design-system.service.gov.uk/styles/type-scale/) - [ソース](https://design-system.service.gov.uk/styles/typeface/) - [ソース](https://design-system.service.gov.uk/styles/spacing/) - [ソース](https://design-system.service.gov.uk/styles/colour/) - [ソース](https://design-system.service.gov.uk/styles/layout/) - [ソース](https://frontend.design-system.service.gov.uk/sass-api-reference/) - [関連する仕様を確認する](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [関連する仕様を確認する](https://design-system.service.gov.uk/styles/typeface/) - [コードリファレンス](https://design-system.service.gov.uk/styles/type-scale/) - [関連する仕様を確認する](https://design-system.service.gov.uk/styles/type-scale/) - [コードリファレンス](https://design-system.service.gov.uk/styles/spacing/) - [関連する仕様を確認する](https://design-system.service.gov.uk/styles/spacing/) - [コードリファレンス](https://design-system.service.gov.uk/styles/layout/) - [関連する仕様を確認する](https://design-system.service.gov.uk/styles/layout/) - [コードリファレンス](https://design-system.service.gov.uk/styles/colour/) - [関連する仕様を確認する](https://design-system.service.gov.uk/styles/colour/) - [関連する仕様を確認する](https://design-system.service.gov.uk/components/text-input/) - [関連する仕様を確認する](https://design-system.service.gov.uk/patterns/question-pages/) - [関連する仕様を確認する](https://design-system.service.gov.uk/components/error-summary/) - [関連する仕様を確認する](https://design-system.service.gov.uk/components/summary-list/) - [関連する仕様を確認する](https://design-system.service.gov.uk/patterns/check-answers/) - [関連する仕様を確認する](https://frontend.design-system.service.gov.uk/include-css/) - [関連する仕様を確認する](https://frontend.design-system.service.gov.uk/import-javascript/) - [コードリファレンス](https://design-system.service.gov.uk/components/text-input/) - [コードリファレンス](https://design-system.service.gov.uk/components/error-summary/) - [コードリファレンス](https://design-system.service.gov.uk/components/summary-list/) - [v6の文字サイズスケール 小画面と大画面におけるサイズと行の高さの組み合わせ。](https://design-system.service.gov.uk/styles/type-scale/) - [レスポンシブな余白 固定単位とレスポンシブ単位、およびSassヘルパー。](https://design-system.service.gov.uk/styles/spacing/) - [機能別の色 現在の役割とSassアクセサー。](https://design-system.service.gov.uk/styles/colour/) - [レイアウト コンテナとグリッドの構成。](https://design-system.service.gov.uk/styles/layout/) - [テキスト入力 ラベル、ヒント、エラーの構造。](https://design-system.service.gov.uk/components/text-input/) - [エラー概要 修正箇所へのリンクとフォーカスの動作。](https://design-system.service.gov.uk/components/error-summary/) - [サマリーリスト キー、値、状況に応じた変更操作。](https://design-system.service.gov.uk/components/summary-list/) - [GOV.UKのブランド表記なし フォント、アイデンティティ、Sassの設定。](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [CSSを組み込む Dart Sassとパッケージの統合。](https://frontend.design-system.service.gov.uk/include-css/) - [JavaScriptをインポート ブラウザモジュールとinitAll。](https://frontend.design-system.service.gov.uk/import-javascript/)