# Poncho デザインシステム ## Poncho デザインシステムのインターフェースプレビュー ネイティブのパネルグリッドを絞り込み、詳細を開いて、選択したアクティビティに戻ります。 ## Poncho デザインシステムのデザインリファレンス ar-poncho 2.0.320 CSS と Bootstrap 3.4.1。計算値は 1440、768、390px で検証済みです。フォントのフォールバックを明示しています。 ### 公開済みの CSS タイポグラフィ | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Package inspected | ar-poncho 2.0.320 | 古い v0.3.3 のバナーをパッケージのバージョンとして使わないでください。 | | Font documentation | Lora headings / Montserrat body | 現在のタイポグラフィページと CSS のフォント読み込み。古いリポジトリの README には、引き続き Encode Sans と記載されています。 | | Body | 16px / 1.42857143; weight 500 | Bootstrap 3.4.1 と Poncho を使って測定。ローカルプレビューでは Arial を使用しています。 | | H1 | 2.5rem = 40px / 44px | モバイルでもプレビューの見出しは 40px のままです。 | | H2 / H3 | 2rem / 1.75rem | 基本の見出しスタイル。パネル固有の見出しルールがこれらを上書きします。 | | Panel H3 | 20px / 26px | コンポーネント内での使用例。ネイティブの CSS を測定しています。 | | Lead | 18px / 1.2; weight 500 | 見出しではなく、短い紹介文です。 | ### 色の役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --primary | #242C4F | メインリンク／アクションのネイビー。 | | --secondary | #45658D | セカンダリブルー。 | | --success | #2e7d33 | 主要／成功アクションの役割。装飾目的で使うものではありません。 | | --danger | #c62828 | 破壊的アクションまたはエラーの役割。 | | --warning | #E7BA61 | 注意喚起の役割。テキストのコントラストも確認が必要です。 | | --gray-base | #333333 | 標準のテキスト。 | | --gray-lighter | #f2f2f2 | 明るいニュートラルな背景面。 | ### グリッドとコンポーネントの寸法 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Grid | 12 columns; 30px gutter | Bootstrap 3.4.1：各カラムの左右に 15px のパディング。 | | Breakpoints | 768 / 992 / 1200px | sm、md、lg。col-sm-4 は 768px 以上で3列になります。 | | Containers | 750 / 970 / 1170px | 各ブレークポイントに応じて変化し、768px 未満では幅が可変になります。 | | Panel body | 15px 20px | Poncho コンポーネントの上書き。 | | Panel radius / spacing | 10px / 30px bottom margin | この例で使用しているネイティブの CSS。 | | Button | 16px; 8px 20px padding; 3px border; 30px radius | Poncho の角丸アクションスタイル。Bootstrap の標準的な形状ではありません。 | | Section spacing | 30px default; 20px small; 40px large | section、section-sm、section-lg のルール。 | ## Poncho デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Poncho デザインシステムのバージョンと依存関係 ### Bootstrap 3 を基盤とするシステム > Poncho は Bootstrap 3.4.1 の上に、アルゼンチンの公共サービス向けスタイルを重ねています。インストールページには実験的な Bootstrap 4 の方針も記載されていますが、それによって Bootstrap 5 のクラスが公開済みの実例と互換になるわけではありません。このリソースでは ar-poncho 2.0.320 と Bootstrap 3.4.1 にバージョンを固定し、パネルの構造とレスポンシブ動作をあわせて確認できるようにしています。 CSS のバナーには v0.3.3 とありますが、インストールされているパッケージは 2.0.320 です。バナーだけを見ず、パッケージマニフェストとロックファイルを確認してください。独立したプレビューでは、パネル、ボタン、グリッドにネイティブの CSS を使用しています。アクティビティの絞り込みは独自の JavaScript であり、Poncho の検索コンポーネントではありません。 関連する仕様を確認する ## Poncho デザインシステムのタイポグラフィと根拠 ### 食い違うフォント情報を整理する 現在のタイポグラフィのドキュメントでは、見出しに Lora、本文に Montserrat を指定しています。ダウンロードしたスタイルシートはこれらのフォントを読み込みますが、古い Encode Sans の宣言も含まれています。リポジトリのセットアップ README では、今も Encode Sans が推奨されています。これは実際のバージョン／ソース間の不整合です。本番環境への移行時は、過去の記述がすべて一貫したテーマを示していると決めつけず、採用するリリースの最終的なカスケードを確認してください。 プレビューでは、オフラインで確実に表示できるよう Arial と Georgia のフォールバックを明示し、外部フォントの読み込みを削除しています。ネイティブのサイズ設定はそのまま確認できます。本文は 16px、H1 は 40px、リード文は 18px です。パネルの見出しには独自の 20px を使用するため、基本の H3 のサイズをカードに適用すると、コンポーネントの見た目が変わります。 関連する仕様を確認する ## Poncho デザインシステムの色とアクションの優先順位 ### 意味に応じてアクションを選ぶ ボタンのドキュメントでは、標準のリンクアクション、セカンダリリンク、主要または成功のアクション1つ、破壊的アクションを区別しています。btn-primary は標準的な強調リンクアクション、btn-link はセカンダリアクションに使用します。btn-success は主要な次のステップを示すもので、ガイドラインでは1ページにつき1つに限られています。btn-danger は破壊的、または取り消せない意図のアクションに限定します。 アクティビティ一覧では、セカンダリのリセット操作と、詳細を開いた状態での主要な戻る操作を使用しています。登録機能はないため、緑色の登録ボタンはありません。訪問者がローカルのパネルを開いただけで、成功したかのように表示してはいけません。 - btn-primary：標準的な強調アクション。同じアクショングループ内で競合するボタンを避けます。 - btn-link：フィルターのリセットなど、セカンダリまたは情報提示のアクション。 - btn-success / btn-danger：実際のアクションが定義された意味に合致する場合にのみ使用します。 関連する仕様を確認する ## Poncho デザインシステムのグリッドと間隔 ### 継承されたグリッドを意図的に使う Bootstrap 3 は、ガター幅 30px の 12 カラムグリッドを使用します。各列の 15px のパディングと釣り合うように、行には負のマージンが設定されています。col-sm-4 により、幅 768px 以上では 3 つのアクティビティパネルが均等な幅で並び、それより狭い画面では全幅のブロックになります。コンテナ幅は、記載されたブレークポイントに応じて 750px、970px、1170px に変わります。 Poncho は、これらの基本設定にコンポーネントの余白を加えます。パネル本文には縦 15px、横 20px のパディングがあり、パネル下部には 30px のマージンがあります。ボタンには半径 30px の角丸、3px のボーダー、縦 8px・横 20px のパディングが設定されています。これらの値が、変更していない Bootstrap ページとの見た目の違いを生みます。汎用的な角丸カードのテーマに置き換えないでください。 関連する仕様を確認する ## Poncho デザインシステム：クリック可能なパネルの構造 ### カードごとに遷移先は 1 つ 公式のパネル例では、パネル全体をアンカーで囲み、その内側に panel-body を配置して、見出しと補足文を本文内に収めています。これにより、コンパクトな一覧項目全体を 1 つの遷移先にできます。このアンカーの内側に別のリンクやボタンを入れないでください。操作対象が競合します。 本番用のスニペットでは、実際のアクティビティページにリンクしています。一方、ローカルプレビューでは、同じ意味を持つアンカーの動作を差し替え、元の詳細テキストを表示します。開いた要素を記録し、新しい詳細領域にフォーカスを移し、訪問者が閉じるとフォーカスを元に戻します。これは、ドキュメントに記載されたパネルのマークアップに重ねて実装するアプリケーションの動作です。 ```

Repair café

Skills · Saturday, 10:00
``` コードリファレンス 関連する仕様を確認する ## Poncho デザインシステム：フィルタリングとローカル状態 ### 装飾的なチップではなく、実際に機能するフィルター アクティビティの種類を選ぶセレクトには、明示的なラベルと 3 つのカテゴリがあります。選択が変わると、一致しないパネルのラッパーを非表示にし、新しい件数をステータスメッセージで知らせます。この件数が示すのは表示中のアクティビティ数であり、登録数や空き状況ではありません。リセットすると 3 件すべてを再表示し、フィルターにフォーカスを戻します。 カテゴリを変更したときに詳細表示が開いていれば閉じることで、非表示になったアクティビティの内容が結果から切り離されたまま残らないようにします。パネルを開いてもフィルターは変わりません。これらのルールは意図的にシンプルですが、操作部、結果、詳細の関係をテストするには十分な内容です。 1. 「アート」を選び、「版画ワークショップ」だけが表示されることを確認してください。 2. アクティビティを開いて説明を確認し、同じパネルに戻ってください。 3. フィルターをリセットし、3 件すべてのアクティビティが再び表示されることを確認してください。 関連する仕様を確認する ## Poncho デザインシステム：キーボード操作とコンテンツ構造 ### 見た目だけの無効状態をコピーしない 公式のボタン一覧では、無効状態の CSS クラスが紹介されています。HTML の実際のボタンを無効にする場合は、disabled 属性も必要です。クラスだけではキーボード操作を防げません。リンクについては、無効なスタイルを完全な操作モデルと見なすのではなく、有効な遷移先があるかどうかを判断してください。 H1 は 1 つだけ使用し、見出しの階層を一貫させてください。この一覧では、展開した詳細が H2 のセクションであるため、パネル内では H3 を使用しています。中間のセクション見出しがない独立した一覧の場合は、実際のドキュメント構造に合わせて見出しレベルを調整してください。装飾用アイコンライブラリの使用は任意です。ここではテキストラベルだけですべての操作を伝えられるため、省略しています。 関連する仕様を確認する ## Poncho デザインシステム：ネイティブ設定と適用範囲 ### 例で使用するレイヤーだけを読み込む Bootstrap CSS を Poncho CSS より先に読み込み、テーマが基盤の設定を上書きするようにします。基本的なグリッドとパネルに、Bootstrap JavaScript や jQuery は必要ありません。アプリケーションで Bootstrap のインタラクティブなウィジェットを追加する場合は、Bootstrap 3.4.1 JavaScript より前に互換性のあるバージョンの jQuery を読み込み、実際に使用するウィジェットをテストしてください。 これは、互換性の範囲が定められたレガシーな依存関係の構成です。これと並行して最新の Bootstrap をインストールしても、移行にはなりません。リポジトリの MIT ライセンスに基づくコードの再利用と、政府機関のページに表示される政府機関のアイデンティティ、公式ロゴ、コンテンツライセンスは分けて考えてください。このプレビューでは架空のコミュニティアクティビティを使用しており、アルゼンチン政府のサービスであるとは主張していません。 関連する仕様を確認する ## Poncho デザインシステム：コンポーネント例 ### パネル全体を使ったナビゲーション アンカー 1 つでパネル本文を囲みます。操作可能な要素を内側に入れないでください。 ```

Repair café

Skills · Saturday, 10:00
``` コードリファレンス ### アクティビティ一覧の完成例 ネイティブな Poncho パネルに、動作するカテゴリフィルターと、フォーカスを元に戻す詳細表示を組み合わせています。 ``` Community activities

COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE

Find a local activity

Browse practical sessions at the community centre.

3 activities

Repair café

Skills · Saturday, 10:00

Community garden

Outdoors · Sunday, 09:30

Printmaking workshop

Arts · Tuesday, 16:00

``` コードリファレンス ## Poncho デザインシステム：エージェントの設定 ### 実装の出発点 ネイティブな CSS の設定です。このプレビューではフィルターと詳細のロジックを独自に実装しているため、Bootstrap JavaScript は不要です。Sources にある、動作するサンプル一式の ZIP には、プレビューに必要な依存関係とドキュメント全体も含まれています。展開したディレクトリで python3 -m http.server 8080 を実行し、http://localhost:8080/poncho.html を開いてください。モジュールベースのサンプルを file:// から開かないでください。 ``` npm install ar-poncho@2.0.320 bootstrap@3.4.1 # Copy the following package assets into your site's public vendor directory: # node_modules/bootstrap/dist/css/bootstrap.min.css # node_modules/ar-poncho/dist/css/poncho.min.css # Load Bootstrap first, then Poncho. # Optional Bootstrap JS components also need jQuery before bootstrap.min.js. ``` ### あなたのプロジェクト向けプロンプト ``` Bootstrap 3.4.1 で ar-poncho 2.0.320 を使用してください。12 カラムグリッドと、単一のアンカーで囲んだパネルカードを使って、アクセシブルな一覧を構成します。ネイティブなボタンの役割に応じた色、パディング、角丸を保ってください。ラベル付きのフィルタリング、結果件数の通知、フォーカスの復帰を実装してください。固定されたパッケージに基づいてフォントの継承を確認してください。Bootstrap 5 の API を混在させたり、登録が成功したと偽ったりしないでください。 ``` ## Poncho デザインシステム：出典と適用範囲 政府機関のアイデンティティを使わず、ネイティブな CSS を使用した独立した OpenDesign の例です。現行のドキュメントと古い README ではフォントファミリーの記載が異なります。このプレビューでは固定された CSS と明示的な代替フォントを使用しています。 - 公式リポジトリとインストール パッケージの設定、依存関係、MIT コードライセンス。 - パネルの構造 カード全体を囲むアンカー、補足文、バリエーション。 - ボタンの意味 アクションの階層、クラス名、状態。 - タイポグラフィ 現行のフォントファミリーと、意味に基づいたテキストの指針。 - 公開済みの CSS 実際の色、タイポグラフィ、形状に関する宣言。 - Bootstrap 3 のグリッド 継承されるレスポンシブな列、ガター、コンテナ幅。 - 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。 ## Poncho デザインシステム：関連リソース ### Queensland Government デザインシステム 実際のテーマロール、ネイティブのチェックボックススタイル、アクセシブルな回答確認ダイアログを備えた、図解付きの完全なリソース選択ツールを通じて、クイーンズランド州の Bootstrap 実装をご覧ください。 ### Ripple ワークショップのタイムライン全体を通して、段階的な情報開示、進捗状況、次のステップへのキーボードフォーカスを確認しながら、Rippleの実際のカラーの役割、14段階のスペーシングスケール、レスポンシブなタイポグラフィの参考例を見ていきます。 ### Scottish Government デザインシステム スコットランド政府のレスポンシブな文字組み、余白、色の役割を、上限超過後も入力内容を保持して修正を支援するネイティブな文字数入力フィールドに適用します。 - [実装リファレンス](https://argob.github.io/poncho/componentes/paneles/) - [ソース](https://github.com/argob/poncho/blob/master/dist/css/poncho.css) - [ソース](https://getbootstrap.com/docs/3.4/css/#grid) - [関連する仕様を確認する](https://github.com/argob/poncho) - [関連する仕様を確認する](https://argob.github.io/poncho/identidad/tipografia/) - [関連する仕様を確認する](https://argob.github.io/poncho/componentes/botones/) - [関連する仕様を確認する](https://getbootstrap.com/docs/3.4/css/#grid) - [コードリファレンス](https://argob.github.io/poncho/componentes/paneles/) - [関連する仕様を確認する](https://argob.github.io/poncho/componentes/paneles/) - [公式リポジトリとインストール パッケージの設定、依存関係、MIT コードライセンス。](https://github.com/argob/poncho) - [パネルの構造 カード全体を囲むアンカー、補足文、バリエーション。](https://argob.github.io/poncho/componentes/paneles/) - [ボタンの意味 アクションの階層、クラス名、状態。](https://argob.github.io/poncho/componentes/botones/) - [タイポグラフィ 現行のフォントファミリーと、意味に基づいたテキストの指針。](https://argob.github.io/poncho/identidad/tipografia/) - [公開済みの CSS 実際の色、タイポグラフィ、形状に関する宣言。](https://github.com/argob/poncho/blob/master/dist/css/poncho.css) - [Bootstrap 3 のグリッド 継承されるレスポンシブな列、ガター、コンテナ幅。](https://getbootstrap.com/docs/3.4/css/#grid)