Digitwist AI BuilderのAI・SaaSヒーローセクションデザインとプロンプト

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

Digitwist AI BuilderはAI・SaaSプロダクト向けのヒーローセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。ページ自身の見出しは「Design at the speed of thought」で、構図はその言葉をそのまま中心に組まれている。配色は明るいのブルー #3054FFの下地、くすんだのブルー #B4C0FFの文字に絞り、書体はInstrument Sans。この項目は、ページを生んだ技術スタック（React、Lucide icons）を隠さずに書いている。モーションは0.6sのトランジションで、コピーが主役のままになる程度に抑えている。書いている間は開いておく。6,001文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

制作会社に発注する創業者は、1回目の受け入れ判定に800x556の画角を使う。
このヒーローセクションにブロックを足していく社内チームには、20px〜136pxの可変型サイズ、120px刻みの余白を変えずに新しいブロックへ引き継ぐ必要がある。
見出しをDigitwist AI Builderと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

背景を持たないナビゲーション. バーは1行のテキストと1つの操作だけで、20px〜136pxの可変型サイズ、120px刻みの余白として測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに800x556の構図の上に載るため、その下のメディアは端から端まで届きます。
お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInstrument Sansの最小段階で置き、その位置を争う要素はほかにありません。見出しが構図の中心を保つ位置に置きます。古くなったお知らせは外してください。
文字と画幅で1つの尺度. ブリーフの寸法はすべて、測り直せる数値だ（20px〜136pxの可変型サイズ、120px刻みの余白、0.6sのトランジション）。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。
1つずつ役割を持つ書体. 書体はサイズと一緒に書いてある（Instrument Sans、20–136px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、20–136pxの範囲でディスプレイの行がまとまります。書体は1つ、役割は明確に。

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

インタラクティブ層はコントロール

ページが反応するのは操作できる場所だけ。すべてのカードではなくボタンとリンクのホバー状態。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。この参考は800x556で収録しました。

状態変化にも時間を与える

トランジションの指定は0.6s。コントロールはこの時間に縛られる。イージングは再生時間と一緒に指定されている（0.6s）ので、作り直しの際に別の感触へ黙って差し替わることはない。見た目を作り替えても再生時間は残す。

ヒーローセクションの背後にある順序

機能訴求型のレイアウトは製品の機能を並べる。これは読み手を1つの判断へ導く。その経路はナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップと、20px〜136pxの可変型サイズ、120px刻みの余白の取り方に表れる。 SaaSの読み手は、選択肢より先に訴求を受け取る。

ヒーローセクションを支える数値

このヒーローセクションをブロックごとに分解しても、値はそれを説明し続ける。枠と、その下のリズムを決めているのが20px〜136pxの可変型サイズ、120px刻みの余白だ。このヒーローセクションに、初期値任せの部分はない。

SaaSのブリーフが効く理由

SaaSのヒーローセクションを発注するとき難しいのは、ファーストビューが何を言わないかを決めること。 Digitwist AI Builderはそれを先に答えている。見出しの一行と、その後ろのナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップだ。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。この参考は800x556で収録しました。