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

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

Transform DataはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。「Transform Data Quickly」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色はグレー #505050の下地、白 #F8F8F8の文字で、書体はInter。納品物は単一のコンポーネントで、800x592で記録しているため、コードを書く前に枠が決まっている。モーションは250msのトランジションに限っている。書いている間は開いておく。3,605文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

このヒーローセクションは、単一のコンポーネントをすでに理解し、単一のコンポーネントを文章にできれば足りるチームを対象にしている。
このページは、単一のコンポーネントでAI・SaaSプロダクトヒーローセクションを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。
見出しをTransform Dataと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

ページのグリッドに乗るバー. バーは1行のテキストと1つの操作だけで、16px刻みの余白、250msのトランジションとして測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに800x592の構図の上に載るため、その下のメディアは端から端まで届きます。ワードマークには文字が必要とする以上の幅を与えない。
1書体、2つの役割. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInterがあり、そこから補助コピーへはっきり落とします。書体の差し替えは可能ですが、比率がその差し替えに耐える必要があります。
刻みを名指しするブリーフ. ブリーフは数値を名指ししています（16px刻みの余白、250msのトランジション）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。リストの最小値と最大値が、構図の可動範囲を決める。再現は同じ数値で検証する。
お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。お知らせは1件だけです。バッジがニュースらしく見えるのはそのためです。古くなったお知らせは外してください。

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

時間も仕様に書く

1つの時間がすべてのインタラクションを覆う（250ms）。ホバーと押下が同じ体系に読めるのはそのため。コントロール間で同じ値を再利用するので、時間がばらけようがない。時間の値は実装にそのまま持ち込む。

モーションはほぼない

これは800x592の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。モーションは装飾ではなくフィードバックとして扱う。

ヒーローセクションの再配置

コピーが長いと、先に崩れるのは狭い幅のレイアウト。ここでは24px〜16pxのクランプが変化を吸収し、スケールは段階式ではなく可変。狭い幅のレイアウトは縮小ではなく判断であり、階層もそのまま保たれます。

このヒーローセクションが立てる主張

メディアがコピーより雄弁だとする。この構成はまさにその場合のためにある。メディアは800x592の静止画だ。枠は静かなままで、16px刻みの余白、250msのトランジションが読み手を文字につなぎとめる。 Transform Dataは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。