このテンプレートについて
ADHD Plannerは判断の履歴を残しており、この料金セクションを生んだブリーフは8,810文字。配色はくすんだのオレンジ #F6E4CFの下地、深いのオレンジ #321C04の文字、くすんだのオレンジ #D9C4AAのアクセントに絞り、書体はInter。納品物はReactとTailwind CSSで、1458x1080で記録しているため、コードを書く前に枠が決まっている。ページはモーションを300msのトランジション、cubic-bezier(0.77,0,0.175,1)、ループする動画の下地にとどめる。記録されたブリーフから始め、料金セクションをゼロから作り直すのではなく編集する。収録したプロンプトは1458x1080で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- この料金セクションは、レイアウトの中で42px〜96pxの可変型サイズ、25px刻みの余白が何を決めているのかを知りたい実装者に答える。
- プロダクトマーケターで、コピーの背後に7.3sのループ映像があっても料金セクションが読める状態を保ちたい。
- ヘルスケア・ウェルビーイングプロダクト料金セクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- 邪魔にならないナビゲーションバー. 上段に載るのはワードマーク、4〜5本のリンク、#D9C4AAに染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#D9C4AAの操作だけがバーの中で重みを持つ要素です。6本目のリンクを足す前に、折りたたみ状態を設計する。
- 検証できる数値. レイアウトは比率ではなく絶対値で組む（42px〜96pxの可変型サイズ、25px刻みの余白、300msのトランジション、cubic-bezier(0.77,0,0.175,1)のイージング）。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
- 文字の背後に全面配置したクリップ. ファーストビューは1458x1080のクリップ1本で、ほかの要素はすべてその上に配置されます。自動再生が使えないときは1458x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- アクセントの節度. 色は配分して使います。くすんだのオレンジ #D9C4AAが現れるのは操作要素と小さな強調だけなので、次に押す場所が常に分かります。ほかはすべてくすんだのオレンジ #F6E4CFの上にあり、彩度の高い配色でも読めるのはそのためです。
モーションとインタラクション
見出しが自ら組み上がる
スクロール連動の表示演出だけで、ページ上のほかの要素は何も演じない。入場は、読者の目が補足コピーに届く前に終わる。持っていくのは到達の順序で、曲線そのものではない。この参考は1458x1080で収録しました。
タイムラインではなくループ
7.3秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。ほかに連続して動くものがないので、注意を引くのは映像だけだ。この参考は1458x1080で収録しました。
料金セクションの背後にある順序
マーケティングページが折り返しの下に実績を積んで期待するのに対し、この料金セクションはナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを読み手の前に出し、残りは引いておく。ヘルスケアの読み手は、選択肢より先に訴求を受け取る。この参考は1458x1080で収録しました。
料金セクションを支えるタイミング
ページが落ち着かないときの原因は、たいてい登場演出の多さにある。これはその一覧を短く保ち、300msのトランジション、7.3sのメディアループ、スクロール連動の表示演出で打ち止めにしている。この料金セクションで、動くために動く要素はない。
ADHD Plannerで最初に変えるもの
素直な差し替えには限界がある。製品が別の階層を必要とするなら、42px〜96pxの可変型サイズ、25px刻みの余白が邪魔になる。その場合は順序を先に、値を後に変える。触れずにおくのは枠とスケール。
よくある質問（FAQ）
ADHD Plannerの背後のブリーフには、実際に何が入っていますか？
気分を書いた説明ではなく、制作のための仕様です。1458x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
ADHD PlannerはReactとTailwind CSSにどこまで依存していますか？
ADHD PlannerはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
ADHD Plannerはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1458x1080で収録しました。
