shaunbent/govuk-proposal-pages

GOV.UK 提案書ページ

目的

GOV.UK デザインシステムの実際のスタイルと、再利用可能なコンポーネントの小規模なライブラリを使用して、方向性を主張し、アイデアを説明し、変更を提案する、単一の自己完結型HTMLページを作成します。

基本原則:内容を示し、それを語らない。 チームが所有するもののリストはカードグリッドになります。一連のステップはフロー図になります。比較は、差異が強調されたテーブルになります。散文はコンポーネント間の接続組織であり、情報を伝える主要な手段ではありません。

内容を説明してください。このスキルが見た目を処理します。

出力は1つのHTMLファイルです

このスキルで作成されたページはファイルとして共有され、多くの場合SharePointまたは同様のドキュメントライブラリにアップロードされ、そこからリンクされます。したがって:

• すべてが1つの.htmlファイルに格納されます。 CSS、フォント、画像は埋め込まれています（フォントと画像はbase64データURIとして）。外部のスタイルシート、スクリプト、フォント、画像はありません。
• ページはJavaScriptがオフの状態でも正しく読み取れる必要があります。 一部のドキュメントライブラリは、プレビューでスクリプトを削除またはブロックします。インタラクティブコンポーネント（ビュースイッチャーなど）は拡張機能です:JavaScriptなしで表示されるデフォルト状態は、それ自体で意味をなす必要があります。
• 読み手のためのビルドステップはありません。 ファイルはブラウザで直接開きます。

ファイル

• page-starter.htmlは空白のページです:GOV.UK Frontend CSS、base64として埋め込まれたGDS Transportフォント、完全なコンポーネントCSS、ステータスバナー、ヒーロー、変更ログ付きのフッター。新しいページはすべて、このファイルのコピーとして開始します。GDS TransportはGOV.UKでの使用のみライセンスされています。GOV.UK以外では、別の書体に置き換えてください（NOTICE.mdを参照）。
• docs/index.htmlはこのスキルのドキュメンテーションページであり、このスキルを使用して構築されています。その「コンポーネント」セクションはビジュアルリファレンスです:すべてのコンポーネントに名前とラベルが付けられ、いつ使用するか、いつ避けるか、およびライブの例が示されています。gx-specimen__demoブロックからコンポーネントのマークアップをコピーしてください。gx-クラスはコピーしないでください。これらはドキュメンテーションページのみをスタイリングします。これはスターターと同じコンポーネントCSSを使用するため、コピーされたマークアップは変更なしで機能します。

ドキュメント構造

コンポーネントを選択する前に、議論を練り上げてください。ほとんどの提案は次の順序に従います。内容に不要なセクションは削除してください。

セクション	機能	よく適合するコンポーネント
ステータスとヒーロー	ドキュメントが何であるか、そして伝えるべき唯一のことを示す	ステータスバナー、ヒーロー
それが何か	聴衆がそのアイデアを知らないかもしれない場合、アイデアを説明する	カテゴリ、ファンアウト、レイヤー、コードペア
それがもたらすもの	初期のメリットを、会議室のすべてのグループに対して	ベネフィットグリッド、ワイドカード
なぜ今なのか	現状の問題を、証拠とともに	サイロ、統計、比較表、多対一、研究引用
それがどのように機能するか	提案されたアプローチ	フロー、ビフォーアフター、ハブアンドスポーク、ファンイン、実例
誰が何を所有するか	責任	責任、パネル
どこから始めるか	スコープと順序	フェーズ、タイムライン
リスク	何がうまくいかない可能性があるか	リスク
未解決の質問	読者に必要なもの	未解決の質問
成功	それが機能したことをどのように知るか	成功指標、成果
フッター	バージョンと変更ログ	変更ログ

読者がすでにソリューションスペースを理解している場合にのみ、「なぜ今なのか」を最初に配置します（「編集方針」を参照）。

コンポーネントカタログ

すべてのコンポーネントには名前があります。このスキルを使用する人は、コンポーネントを名前で要求することができ（「アプリケーションがどこから来ているかを示すためにファンインを使用してください」）、提案するときも同じ名前を使用する必要があります。docs/index.htmlの「コンポーネント」セクションには、各コンポーネントがライブで、そのクラス、いつ使用するか、いつ避けるかが示されています。そこからマークアップをコピーしてください。

ページ付属品

名前	クラス	使用するタイミング
ステータスバナー	pt-topbanner	すべてのページ。バージョンと、そのドキュメントが何であるかを示す1行を表示します。
ヒーロー	pt-hero	すべてのページ。アイブロウタグ、タイトル、およびドキュメントで最も鋭い文。
補足注釈	pt-note	図、表、または一連の統計の下にあるメタ情報:出典、注意事項、「説明用」。
変更ログ	pt-footer	すべてのページのフッター。最新のエントリを最初に。

カード

名前	クラス	使用するタイミング
ベネフィットグリッド	pt-owns-grid	提供、所有、または獲得された3つまたは4つのもの。
ワイドカード	pt-owns-card--wide	兄弟よりも多くのスペースを必要とするアイテム、または1枚のカードが行に単独で配置されるのを避けるため。
原則	pt-works-grid	3つの原則または作業方法。
カテゴリ	pt-categories	物事のタイプ。それぞれにカテゴリを示す小さなビジュアルがあります。
パネル	pt-card	グリッドカードよりも多くのスペースを必要とするポイント。他のカードと同じようにスタイル設定されます。
リスク	govuk-inset-text pt-card pt-card--warning	保護すべきリスク。率直に、経験から述べます。
成果	pt-card pt-card--success	これが機能した場合にどうなるか。

数字

名前	クラス	使用するタイミング
統計	pt-baseline-grid	注目すべき数字。すべての数字にはプレーンなラベルがあり、セットは可能な場合は述べられた合計になります。

図

名前	クラス	使用するタイミング
ファンアウト	pt-fanout	1つのソースが複数の出力に供給される場合。
ファンイン	pt-fanin	1つのものに集約される複数のソース:決定へのインプット、1つのレコードに供給されるデータ、1つのサービスに貢献するチーム。3〜5つのインプットに最適です。例では、y 12.5、37.5、62.5、87.5から始まる4つの曲線を描きます。インプットの数が異なる場合は、各曲線をインプットの中心から開始します（3つの場合:16.7、50、83.3）。
ハブアンドスポーク	pt-hub	1つの中核となるものに接続する最大4つの部分。
サイロ	pt-silos	同じものが複数の場所で別々に保持され、それらを接続するものがない場合。異なるコピーにフラグを立てます。
多対一	pt-many-to-one	同じものにつながる複数の名前またはルート:重複、エイリアス、重複作業。
ビフォーアフター	pt-before-after	現在の同じものと提案されたものを、並べて表示します。
レイヤー	pt-layers	互いに積み重なるレベル。ラベル付き矢印で結合されます。コネクタラベルは通常の太さです。
フロー	pt-flow	番号付きのステップと最終状態を持つプロセス。未決定の宛先は、「合意するアプローチ」タグで未決定としてマークします。
フェーズ	pt-phases	実際の順序での作業の段階。現在の段階は塗りつぶされます。
タイムライン	pt-timeline	日付付きのマイルストーン。過去のマイルストーンは塗りつぶされ、将来のものは中空です。
スペクトラム	pt-spectrum	2つの端の間の範囲における物事の位置:成熟度、労力、リスク。
チーム	pt-squads	チームがどのように関連しているか、特に再編成。状態を変更するチームを破線でマークします。

表とリスト

名前	クラス	使用するタイミング
比較表	pt-compare	複数のオプションまたは場所を並べて表示します。行をグループ化し、セル全体で異常な値を強調表示します。
責任	pt-split	誰が何に責任があるか。2つのグループを並べて表示します。
未解決の質問	pt-questions	回答を求める質問。それぞれに誰宛かがタグ付けされています。
成功指標	pt-check-list	チェック可能な5つまたは6つの成果。

例とエビデンス

名前	クラス	使用するタイミング
実例	pt-example	具体的なケース:ビジュアル、次に各場所が今日それをどのように処理するか。
研究引用	pt-quote	ユーザー、同僚、または利害関係者が実際に言ったこと。誰が言ったかも含みます。
コードペア	pt-code-pair	データ、コード、または設定。単独または並べて表示。簡略化されたスニペットには「説明用」とラベルを付けます。
カラードット	pt-swatch	インライン、表、または文で表示される色またはステータス。常にテキストラベルとペアになります。

インタラクティブ

名前	クラス	使用するタイミング
ビュースイッチャー	pt-views	「今日」と「提案」など、2つの状態間で図を切り替えます。オプション、JavaScriptが必要です。

コンテンツがこれらのいずれにも適合しない場合は、短い段落を書くか（適度に問題ありません）、コンポーネントを追加します（「ライブラリの拡張」を参照）。

編集方針

構造

• 1つのドキュメント、1つの一貫したテーマ。 すべてのコンポーネントは、中心となる議論に役立つべきです。何かが興味深いが荷重に耐えない場合は、削除してください。
• 聴衆がそのアイデアを知らない可能性がある場合は、主張を行う前にアイデアを説明してください。 問題優先は、人々がすでにソリューションスペースを理解している場合に機能します。そうでない場合、問題セクションは出口のない苦情のリストのように読めます。デフォルトの順序については「ドキュメント構造」を参照してください。
• メリットを早めに配置してください。 読者は最初の1〜2画面で関心を持つかどうかを決定します。
• 最初の例で全範囲を示してください。 最初の例が狭い場合、読者は提案全体が狭いと想定します。アイデアが広く適用される場合は、範囲を示唆する例から始め、その後で狭いケースを証拠として使用します。
• 存在する必要のないセクションは削除してください。 セクションが別の会話のための決定に関するものである場合は、省略します。

言語

• 用語を使用する前にそれを紹介してください。 これには見出し、ラベル、テーブルグループが含まれます。用語が説明される前に表示される場合は、代わりに平易な説明を使用してください。
• 各用語に1つの役割を与えてください。 2つの類似した単語が両方とも表示される場合（たとえば、単一の選択肢に対する「決定」と全体の方法に対する「アプローチ」）、全体を通してそれぞれを独自の意味に保ちます。
• アプローチを「一般的な方法」として説明し、「唯一の方法」として説明しないでください。 本当に唯一の方法でない限り。より正確で、議論を促します。
• 説明する言葉を使用し、非難する言葉は使用しないでください。 「一部の場所で定義されているが、他の場所では定義されていない」は状況を説明します。「ギャップ」や「欠落」は誰かが失敗したことを示唆します。
• 作成者が文言を提供する場合は、それをそのまま使用してください。 文法のみを修正し、何を変更したかを伝えてください。

エビデンス

• ソースからの実際のデータを使用してください（システム、スプレッドシート、エクスポート）。記憶または推定された数字は使用しないでください。数字の出典を明記してください。
• スクリーンショットまたは概要から読み取ったものにはフラグを立ててください。 ページが共有される前に確認できるようにします。
• ステータスを過大評価しないでください。 何かが好評であったが正式に合意されていない場合は、そのように正確に述べるか、ステータスを省略します。
• 未決定の選択肢は未決定としてマークしてください。 オプションの「合意するアプローチ」タグは、推測を決定として提示するよりも優れています。

混合した聴衆へのトーン

• 公平であること。 複数のチームまたは場所が関与する問題を示す場合は、それぞれの役割を示してください。1つのグループを名指しするページは、そのグループによって防御的に読まれます。
• 会議室のすべてのグループに対して共有メリットを枠組みしてください。 各グループが何を得るかを、そのグループ独自の用語で説明してください。たとえそれが本当の動機であっても、グループ間の摩擦をドキュメント内で名前を挙げないでください。メリットは、それを説明しなくても対処できます。

ハウススタイル

デフォルトのハウススタイル。状況に応じて変更してください:

• イギリス英語、文の先頭だけ大文字の見出し、オックスフォードコンマ
• ダッシュなし。コンマ、コロン、セミコロン、またはピリオドで言い換えてください
• 「それはXではなく、Yです」という構文は使用しないでください
• 軍事または戦闘の比喩は使用しないでください
• 名前の一部でない限り「government」は小文字
• 平易で、直接的で、自信に満ちている。すべての単語がその場所に値し、導入行は要点を繰り返さない

ビジュアルルール

• どこでも1つのカード処理。 カードは白で、1pxのグレーの境界線、4pxの青い上部境界線、オプションのアイコン、小さな見出し（govuk-heading-s）および小さな本文テキスト（govuk-body-s）。1回限りのカードスタイルを考案しないでください。新しいコンテンツを一致するようにスタイル変更します。
• グリッド内に孤立したものを作らないでください。 グリッドが1枚のカードを行に単独で残す場合は、そのカードをワイドにするか、列数を変更します。
• カラースウォッチは円形です。 GOV.UK デザインシステムのカラーページに一致します。
• 比較テーブルはセル全体を強調表示します。 テキストの後ろのインラインベースではなく、値が各列で揃うようにします。すべてのセルとグループヘッダーは同じ左端を共有します。
• 図のコネクタラベルは通常の太さです。 太字は見出しと指されているもの用です。
• 補足注釈（pt-note）: セカンダリテキストカラー（#505a5f）の16pxの小さな本文テキスト。図、表、または一連の統計の下のメタ情報に使用します:注意事項、出典、「説明用」ラベル。
• 並べて表示されるコードブロックは同じ高さです。
• 図はbox-sizing: border-boxを使用します（コンポーネントCSSで設定）。これにより、パディングと境界線がコンポーネントをボックスの外に押し出すことはありません。
• ヒーロータグは1行に収まります。 GOV.UK タグのデフォルトの最大幅は160pxです。コンポーネントCSSは、ヒーローとバナーでそれを解除します。
• カスタムフォントまたは画像は埋め込まれている必要があります。 ライセンスが許可する場合に限ります。最初にライセンスを確認してください。カスタム書体は、多くの場合手動の垂直方向の中央揃えが必要です:レンダリングされたテキストを測定し、パディングを調整します。
• アクセシビリティ: 図にテキストによる代替を提供し（`role=