リストタイトル
- 何を確認するカードかを書く。
チェックリスト情報カード
手順を保存しやすく実行しやすいチェックカードにする。
info-card
公開前確認
この投稿、準備できた？
- 具体的な見出し
- 一目で分かる表紙
- 保存価値
- 次の行動
使い方
4〜6個の項目
- 各項目は「できた / まだ」で判断できる形にする。
短い補足
- 注意、制限、励ましを一つ添える。
そのまま応用できる例
Design specs
Color values
White card
#ffffff · RGB(255, 255, 255)
Main information surface.
Deep teal
#0f766e · RGB(15, 118, 110)
Header band, check marks, and strong labels.
Mint fill
#ccfbf1 · RGB(204, 251, 241)
Soft status area or secondary block.
Lime action
#c8ff42 · RGB(200, 255, 66)
Completion marker or one priority chip.
Type and size
Card heading
- Use a bold system sans at 28-38px, 800-900 weight, with clear sentence case rather than decorative lettering.
Checklist rows
- Use 15-17px text, 600-750 weight for item names, and 13-14px muted helper notes when needed.
Layout rules
Information rhythm
- Use one header, 3-5 checklist rows, and one small footer note. Avoid more than two nested levels.
Spacing
- Use 22-28px outer padding, 10-14px row gaps, and 44-52px minimum row height so it remains touch-friendly.
Build notes
- Works well as a 4:5 social card, printable checklist, or small dashboard widget.
- Use left-aligned text and repeated row spacing so users can scan completion state quickly.
置き換えられる部分
チェックする対象
- 公開ページ
- 旅行バッグ
- カフェ開店
- 運動メニュー
向かない場合
- 依存関係が多い手順。
- 各項目に長い説明が必要な場合。
- 本当は表が必要な場合。
展開例
- 箇条書きの代わりにアイコンを使う。
- 朝、昼、夜で分ける。
- 各項目をカルーセルの一枚にする。
関連アイデア
近い構造、雰囲気、用途を続けて見られます。
