# Ontario デザインシステム ## Ontario デザインシステムインターフェースプレビュー すべてのステージを開く、折りたたむ、関連セクションへ直接移動する操作を試せます。 ## Ontario デザインシステムデザインリファレンス Ontarioのデザイントークンとcomplete-styles 9.1.0。実際のパッケージエクスポートパス、アコーディオンのSCSS、公開済みスクリプトをローカルで確認済みです。 ### テキスト、背景、操作の色 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ontario-colour-greyscale-white | #FFFFFF | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-greyscale-black | #1A1A1A | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-greyscale-greyscale5 | #F2F2F2 | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-greyscale-greyscale20 | #CCCCCC | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-system-link | #0066CC | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-system-link-hover | #00478F | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-system-link-active | #002142 | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-system-link-visited | #551A8B | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-system-focus | #009ADB | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-system-alert | #CD0000 | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-system-success | #118847 | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | | --ontario-colour-system-information | #1080A6 | 実際の9.1.0トークンエクスポートです。コンパイル済みコンポーネントCSSはこれらの役割を値に解決します。トークンをインポートするだけでは、コンポーネントは作成されません。 | ### スペーシングスケール | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ontario-spacing-0 | 0 | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-1 | 0.25rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-2 | 0.5rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-3 | 0.75rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-4 | 1rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-5 | 1.5rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-6 | 2rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-7 | 2.5rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-8 | 3rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-9 | 4rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | | --ontario-spacing-10 | 5rem | 公開されているrem単位のスペーシングです。spacing-5は1.5remであり、接尾辞はピクセル値を直接表すものではありません。 | ### タイポグラフィとグリッドのリファレンス | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --ontario-font-sizes-small | 0.875rem | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | | --ontario-font-sizes-standard-body-text | 1rem | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | | --ontario-font-sizes-large | 1.25rem | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | | --ontario-font-sizes-x-large | 1.5rem | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | | --ontario-breakpoints-small | 40em | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | | --ontario-breakpoints-medium | 73em | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | | --ontario-grid-columns-total-columns | 12 | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | | --ontario-grid-columns-row-width | 1152 | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | | --ontario-grid-columns-column-gutter | 32 | 公開されているトークン値です。単位のないグリッド値は元のシステムを表しており、該当するグリッド実装に応じて解釈する必要があります。 | ## Ontario デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Ontario デザインシステムパッケージのエクスポートとコンポーネントのスタイル ### 完全なスタイルパッケージを意図的に使用する > このサンプルでは@ongov/ontario-design-system-complete-styles 9.1.0を固定し、公開済みの展開・折りたたみスクリプトを使用しています。これはHTML/CSSによる実装であり、別のOntario Web Componentsランタイムではありません。パッケージのエクスポートマップでは、コンパイル済みテーマをstyles/css/compiled/ontario-theme.min.cssから参照できます。distを余分に含めた推測のディープインポートは、最新のバンドラーでは失敗します。 ### アコーディオンのルールを含める 確認した9.1.0パッケージでは、コンパイル済みテーマにこのサンプルで使うアコーディオンのセレクターが含まれていません。そのため、ページには提供されたCSSに含まれる、パッケージ独自のontario-accordion.scssからコンパイルしたルールを記述しています。該当するディープJavaScriptパスはエクスポートされていないため、スクリプトは公開済みのdist/scriptsディレクトリからコピーしています。これらは具体的なビルド要件であり、任意の見た目の調整ではありません。 ## Ontario デザインシステム Design SystemOntarioのタイポグラフィと階層 ### 意図されたフォントの組み合わせを維持する 公開済みのテーマでは、見出しにRaleway Modified、通常のテキストにOpen Sansを使用しています。プレビューには、このページで使う400と700のウェイトを同梱しています。これにより、特徴的な見出しの字形を保ちながら、外部フォントへの依存を避けられます。フォントの読み込み後にタイポグラフィを確認してください。フォールバックフォントでは、改行位置とアコーディオン見出しの相対的な太さが変わる場合があります。 ### ステージを見やすく整理する タイトルでタスクを示し、リード文でガイドの使い方を説明し、3つのステージ見出しで順序を明確にします。各パネルには補足の段落やリストを配置します。参加やアクセスに関する重要な情報は、折りたたまれたパネルを見つけることに依存させないため、隣接する注記は常に表示します。階層はコンテンツモデルの一部であり、すべての文を見出しにする理由ではありません。 ## Ontario デザインシステム色の役割とコンポーネントの操作性 ### リンクとフォーカスに異なる役割を持たせる エクスポートされたリンクの色は#0066CCで、ホバー、アクティブ、訪問済みにはそれぞれ別の色が設定されています。フォーカスには#009ADBを使います。アコーディオンは、見えるラベル、方向を示すアイコン、展開状態を組み合わせています。その動作を青い文字だけで説明することはできません。グレーの境界線でステージを区切りつつ、すべての段落が個別のカードに見えないようにします。 ### 公開済みのスペーシング段階を使用する スペーシング表には、0から5remまでの値と名前付きの中間段階が示されています。このサンプルでは、公式コンポーネントのルールを使いながら、独自に2カラムレイアウトを構成しています。760pxでの折り返しは、この埋め込みガイドのレイアウト上の判断であり、Ontarioの新しいブレークポイントとして示すものではありません。公式のブレークポイントは、別途リファレンス表に記載しています。 ## Ontario デザインシステムアコーディオンの構造と状態 ### 各ボタンを対応するコンテンツに関連付ける 各ステージには、実際に操作できるボタンを含む見出しがあります。aria-controlsは一意のIDを持つコンテンツセクションを参照し、aria-expandedはそのセクションが開いているかどうかを示します。コンテンツ側ではaria-labelledbyを使ってボタンを参照します。パネルの開閉に合わせて、ネイティブスクリプトがコンポーネントのクラスとaria-hiddenを連動させます。IDが重複すると、見た目が正しくてもこの関連付けが機能しません。 - ボタンとコンテンツには一意のIDを指定します。 - 実際に操作できるボタンを見出しで囲みます。 - マークアップを、バージョン指定されたスクリプトの表示動作に合わせます。 ### すべてのステージを操作するコントロールの状態を同期する 「すべて展開」と「すべて折りたたむ」は、3つのステージパネルをまとめて操作します。各パネルは個別にも操作できます。このサンプルでは、固定されたスクリプトがサポートするマークアップに従います。固定されたスクリプトでは削除されない、hidden-until-foundなどの新しいWebサイト用マークアップを混在させません。ドキュメントのページはインストール済みのリリースとは別に更新できますが、実行可能なサンプルは実際のパッケージに合わせる必要があります。 ## Ontario デザインシステムリンクからの展開と重要なコンテンツ ### 実際のボタンを使ってステージを開く サイドバーのリンクを選ぶと、ステージに移動し、閉じている場合はそのステージのネイティブボタンを操作します。展開後はそのボタンにフォーカスを移します。これにより、ボタンのexpanded属性、見出しのクラス、コンテンツの表示が同じ切り替えで連動します。追加のハンドラーはアプリケーションコードです。読者が同じ動作を再現できるよう、全体を掲載しています。 ### 展開して読む価値のある補足情報を記載する 作成した3つのステージでは、小規模なワークショップの準備、資料、フォローアップを扱います。それぞれに具体的なアクションと、このサンプルの範囲を説明する段落が含まれています。実際の案内では、目的、参加にあたっての配慮、参加方法を必ず明記してください。このパターンは長めのガイドを整理するためのものです。ページを短く見せるために、重要な情報を隠してはいけません。 ## Ontario デザインシステムの全ソースと検証 ### バージョン固定のサンプルを再現する Viteのバニラプロジェクトを作成し、バージョン固定のcomplete-stylesパッケージをインストールして、展開・折りたたみスクリプトをsrcにコピーします。付属のmain.jsとontario.cssを保存し、ルートのマウント要素はそのまま維持してください。CSSには、このリリース向けにコンパイルされた公式アコーディオンのルールと、オリジナルのレイアウトルール（明示的に区別）を含みます。このHTML実装では、コンポーネントの登録もバックエンドサービスも不要です。 1. バージョン固定のcomplete-stylesパッケージをインストールします。 2. 展開・折りたたみスクリプトをコピーし、エントリーファイル全体とCSSを保存します。 3. すべてのパネルを開き、リンクからステージを折りたたんで再び開きます。 4. キーボードフォーカス、展開状態の属性、スマートフォンでのレイアウトを確認します。 ### リンクとグループの動作を確認する すべてのステージを開き、すべてを折りたたんだ後、サイドバーのリンクから中央のステージを再び開くテストをします。ボタンの展開状態と、表示されるコンテンツが一致することを確認してください。スマートフォンの幅でも同様に確認します。サイドバーはガイドの後に表示されます。ローカルでの確認では、フォントアセットの読み込み、ページの横方向のはみ出しがないこと、ネイティブスクリプトでブラウザーエラーが発生しないことも確認します。 ## Ontario デザインシステムのコンポーネント例 ### main.js — ワークショップガイド全体 オリジナルコンテンツ全体、公開済みスクリプトのインポート、リンクから開く動作。 ``` import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css'; import './ontario-expand-collapse.js'; import './ontario.css'; const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']]; const icon=(dir)=>``; document.getElementById('root').innerHTML=`

ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY

Run an inclusive workshop

Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.

Workshop stages

${topics.map(([title,intro,items,note],i)=>`

`).join('')}
`; // Drive linked opening through the native button so its ARIA state stays synchronized. document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()})); ``` コードリファレンス - セットアップコマンドを使って公開済みスクリプトをコピーします。リンクからネイティブボタンを呼び出し、ARIAの状態を同期させます。 ### ontario.css — コンパイル済みアコーディオンとオリジナルレイアウト 公式の9.1.0アコーディオンルールと、それに続くオリジナルのレスポンシブ構成。 ``` /* Accordion rules compiled from Ontario 9.1.0 published SCSS. */ .ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid rgba(0,0,0,0);transition:box-shadow .1s ease-in-out}.ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-accordion__button{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #ccc}.ontario-accordion:last-of-type{border-bottom:2px solid #ccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:.5rem;color:#06c;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478f;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#06c;cursor:pointer;padding:.75rem .5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:hsl(0,0%,95%);color:#00478f}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:.75rem .75rem 2rem .75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0} /* Original composition. */ main{max-width:1200px;padding:32px;margin:auto}.kicker{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:24ch}.ontario-lead-statement{max-width:65ch}.layout{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;margin-top:40px}aside{padding:24px;border-top:4px solid #1a1a1a;background:#f2f2f2;align-self:start}aside h2{font-size:26px;line-height:1.35;margin-top:0}aside h3{font-size:20px}.jump{padding-left:24px}.jump li{margin-bottom:16px}.note{font-size:16px;line-height:1.5}.ontario-accordion__content p+ul{margin-top:16px}.ontario-accordion__content ul+p{margin-top:16px}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}h1{font-size:36px}} ``` コードリファレンス - このバージョン固定リリースでは、コンパイル済みテーマとコンポーネント固有のアコーディオンスタイルシートの両方が必要です。 ## Ontario デザインシステム AIエージェントのセットアップ ### 実装の出発点 プレビューでは、ローカルのフォントアセットを使い、公開済みのアコーディオンスクリプトと同じものを実行します。この例では、別途提供されているWebコンポーネントライブラリは読み込みません。 ``` npm create vite@latest ontario-guide -- --template vanilla cd ontario-guide npm install npm install @ongov/ontario-design-system-complete-styles@9.1.0 cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js # Replace src/main.js and add src/ontario.css. Keep
. npm run dev ``` ### あなたのプロジェクト向けプロンプト ``` complete-styles 9.1.0と対応するアコーディオンスクリプトを使って、オンタリオのワークショップガイドを作成します。コンポーネント固有のアコーディオンCSS、実際のRaleway Modified/Open Sansフォント、アクセシブルなボタンコンテンツID、同期された展開・折りたたみ動作を含めてください。重要な情報は常に表示し、ステージへのリンクはネイティブボタンを経由させます。 ``` ## Ontario デザインシステムのソースと対象範囲 Ontario 9.1.0のスタイルと公開済みの展開・折りたたみスクリプトを使い、OpenDesignが作成したワークショップガイドです。コンテンツとページ構成はオリジナルであり、公式サービスページではありません。 - アコーディオンのガイダンス コンテンツ、マークアップ、展開モデル。 - パッケージのセットアップ パッケージの役割と統合方法。 - カラーシステム インタラクションとセマンティックカラー。 - バージョン管理された公開ソース 公開済みのスタイル、トークンのエクスポート、アコーディオンの実装。 ## Ontario デザインシステムの関連リソース ### Poncho 動作するアクティビティディレクトリを使って、Poncho の Bootstrap 3 グリッド、セマンティックなアクションカラー、クリック可能なサービスパネルを確認できます。 ### Queensland Government デザインシステム 実際のテーマロール、ネイティブのチェックボックススタイル、アクセシブルな回答確認ダイアログを備えた、図解付きの完全なリソース選択ツールを通じて、クイーンズランド州の Bootstrap 実装をご覧ください。 ### Ripple ワークショップのタイムライン全体を通して、段階的な情報開示、進捗状況、次のステップへのキーボードフォーカスを確認しながら、Rippleの実際のカラーの役割、14段階のスペーシングスケール、レスポンシブなタイポグラフィの参考例を見ていきます。 - [実装リファレンス](https://designsystem.ontario.ca/components/detail/accordions.html) - [ソース](https://github.com/ongov/ontario-design-system) - [コードリファレンス](https://designsystem.ontario.ca/components/detail/accordions.html) - [コードリファレンス](https://github.com/ongov/ontario-design-system) - [アコーディオンのガイダンス コンテンツ、マークアップ、展開モデル。](https://designsystem.ontario.ca/components/detail/accordions.html) - [パッケージのセットアップ パッケージの役割と統合方法。](https://designsystem.ontario.ca/docs/documentation/develop/npm-packages.html) - [カラーシステム インタラクションとセマンティックカラー。](https://designsystem.ontario.ca/components/detail/colours.html) - [バージョン管理された公開ソース 公開済みのスタイル、トークンのエクスポート、アコーディオンの実装。](https://github.com/ongov/ontario-design-system)