No-Code WaitlistのAI・SaaSCTAセクションデザインとプロンプト

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

No-Code WaitlistはAI・SaaSプロダクト向けの実用的な参考だ。 CTAブロックはすでに配置され、寸法も測られ、いつでも作り直せる。見出しは「A new way to think and create with computers」で、CTAブロックの残りはその周りに配置されている。配色は深いのインディゴ #020004の下地、ティント #FFFFFFの文字、くすんだのブルー #7C78C7のアクセントで、書体はInter。納品物はReactとTailwind CSSで、988x720で記録しているため、コードを書く前に枠が決まっている。ページはモーションを60msのトランジション、ループする動画の下地にとどめる。 AI・SaaSプロダクトのCTAブロックを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。

対象

AI・SaaSプロダクトCTAブロックを提案する制作会社が、13px〜64pxの可変型サイズ、100vhのセクションを提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
プロダクトマーケターで、コピーの背後に9.4sのループ映像があってもCTAブロックが読める状態を保ちたい。
CTAブロックをモデルに指示する人は、6,532文字のプロンプトを出発点に使う。

含まれる内容

上段はワードマーク、リンク、操作1つ. ワードマーク、リンク、#7C78C7の操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#7C78C7の操作だけがバーの中で重みを持つ要素です。
刻みを名指しするブリーフ. リストは短く（13px〜64pxの可変型サイズ、100vhのセクション、14px刻みの余白、60msのトランジション）、システム全体を手作業で確認できる。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。根拠がなさそうに見える値こそ残す。
全画面の動画、パネルなし. 988x720の画幅は1本のループで埋まる。コピーの後ろで再生し、操作系を必要としない。988x720以上で書き出せば、coverの切り抜きはそのまま機能する。
新しい1つだけを示すピル. お知らせは見出しの上の#7C78C7のピルで、補助コピーより小さいサイズにします。第二のタイトルではなくラベルとして読ませるためです。バッジが#7C78C7を持ち、見出しは文字色に留まります。

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

タイムラインではなくループ

9.4秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。この参考は988x720で収録しました。

現れ方が記憶に残る

最初のフレームは意図的に未完成で、タイプライターのように導入文が打ち出される。残りの構図はその下ですでに整っている。入場は名指しした要素に限定されるので、レイアウトの残りは一切動かない。静止画の状態だけで成立するか確かめる。この参考は988x720で収録しました。

CTAブロックの背後にある順序

このページの上部と、よくあるSaaSのランディング画面を比べる。どちらも見出しとアクションを持つが、ここではナビゲーション、見出し、お知らせのピル、数値の行、フォームが同じ強さで競合せず、固定の順序に収まる。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は988x720で収録しました。

この構図がSaaSで効く理由

いまのファーストビューが3つのことを説明しているなら、これは1つだけを説明する版。ナビゲーション、見出し、お知らせのピル、数値の行、フォームを読み順に並べ、13px〜64pxの可変型サイズ、100vhのセクションがリズムを決める。 No-Code Waitlistは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。

No-Code Waitlistで最初に変えるもの

再利用できるのは構図のほうで、題材は自分のものである。見出しを入れ替え、タイプスケール（13px〜64pxの可変型サイズ）は維持し、#7C78C7のアクセントを自社のメディアの上で測り直す。新しい要素が提供内容や次の操作の説明に寄与しないなら、それはファーストビューの下に置く。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。