FAQ CTAのヘルスケアCTAセクションデザインとプロンプト

このテンプレートについて

FAQ CTAは、ヘルスケア・ウェルビーイングプロダクトがCTAブロックで抱える課題を記録済みのブリーフ1本で解く。見出しは「Send Money Worldwide at the Best Rates」で、CTAブロックの残りはその周りに配置されている。色は白 #F0F0F0の下地、明るいの赤 #FF4B2Bのアクセントに限り、Interで組んでいる。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。ブリーフはモーションの予算を6.5sのトランジションに使う。新しいセクションを足す前にCTAブロックの順序を決めたいときに使う。

対象

低速回線でもこのCTAブロックを成立させたいエンジニアは、640x468とタイプスケールを重さの予算に使う。
ヘルスケア・ウェルビーイングプロダクトCTAブロックを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
CTAブロックをモデルに指示する人は、9,456文字のプロンプトを出発点に使う。

含まれる内容

1つの幅で折りたたむリンク. 上段に載るのはワードマーク、4〜5本のリンク、#FF4B2Bに染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。リンクはワードマークより小さいサイズで組み、#FF4B2Bの操作だけがバーの中で重みを持つ要素です。
刻みを名指しするブリーフ. サイズは継承ではなく明記されています（10px刻みの余白、6.5sのトランジション）。書体やコピーを差し替えても、この関係は保たれます。リストは短く、確認者は要素ごとに突き合わせられる。
トーンを担うタイポグラフィ. 最上位の文字はInterで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。字間はサイズごとに設定し、大見出しとキャプションで同じ値を共有しない。
リンクの山ではなく列. フッターは1つの構図です。ワードマークの列、2〜3のリンク列、#FF4B2Bの操作1つでできています。列は上のページと同じグリッドに揃うため、フッターも同じデザインに感じられます。

モーションとインタラクション

奥行きはレンダリングから

ここでの設計判断は実行時レンダリング（WebGLのキャンバス）で、レイアウトはそれに場所を空けるように組んである。レンダリングが自前の色を持つので、その周りの配色は静かに抑える。この参考は640x468で収録しました。

効く場所だけポインター

インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態、その場で内容を差し替えるタブまたはアコーディオン）。状態が予測できるのはそのため。状態の色はコンポーネントの既定値ではなく、ページ自身の配色から取る。操作を確認しない状態は削る。この参考は640x468で収録しました。

CTAブロックを自社のものにする

装飾より先に約束を決める。「Send Money Worldwide at the Best Rates」を、自分の仕事を一文で言い切る形に書き直し、仕様が使っている表示サイズでInterに組む。明るいの赤 #FF4B2Bを自社のアクセントに置き換え、ほかを触る前に白 #F0F0F0との対比を確認する。触れずにおくのは枠とスケール。

CTAブロックの再配置

仕様は各幅で何が変わるかを記述している（モーションに低減モーションの分岐がある）。つまりモバイル版は判断であり、縮小ではない。コントラストはメディア上の#FF4B2Bのアクセントで保たれ、動画はミュートのインライン再生である。最後まで変えないのは順序。

このCTAブロックが正しい理由

ヘルスケア・ウェルビーイングプロダクトに対してこれが機能するのは、読み手に情報を組み立てさせないからである。ページは「Send Money Worldwide at the Best Rates」と明言している。レイアウトも書体も色も決まっており（白 #F0F0F0と明るいの赤 #FF4B2B、Inter）、最初の画面は部品の寄せ集めではなく、結論の出た主張として読める。 FAQ CTAは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。