コホート表
Cohort Table
開始時期別の継続率を比べる。
- Stable ID
urn:uiux-atlas:pattern:100- 設計・アクセシビリティ
- 行の母数・経過期間・欠測を明示する。
- PC・スマホ
- PCは比較、スマホは要約。数値表と凡例を併記。
AI実装指示文
「コホート表 / Cohort Table」を実装してください。 目的:開始時期別の継続率を比べる。 想定場面:継続率・分析・ヒートマップを扱う画面。 仕様: - 行の母数・経過期間・欠測を明示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件: - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 行の母数・経過期間・欠測を明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。
サンプル値
| 開始月 | 0か月 | 1か月 | 2か月 | 3か月 | 4か月 | 5か月 |
|---|---|---|---|---|---|---|
| 1月 | 100% | 86% | 72% | 58% | 44% | 30% |
| 2月 | 100% | 83% | 69% | 55% | 41% | 未観測 |
| 3月 | 100% | 80% | 66% | 52% | 未観測 | 未観測 |
| 4月 | 100% | 77% | 63% | 未観測 | 未観測 | 未観測 |
| 5月 | 100% | 74% | 未観測 | 未観測 | 未観測 | 未観測 |
| 6月 | 100% | 未観測 | 未観測 | 未観測 | 未観測 | 未観測 |