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

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

これはStellar AIのヒーローセクションを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。ページ自身の見出しは「Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time」で、構図はその言葉をそのまま中心に組まれている。カラースキームは白 #FFFFFFの下地、深いのブルー #101117の文字で、ページはInterで組む。納品物はReactとTailwind CSSで、800x708で記録しているため、コードを書く前に枠が決まっている。結局、動きは0.1sのトランジションに尽きる。書いている間は開いておく。3,973文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

1回ごとの精算で進め、初回の前に80pxで固定した表示サイズ、30px刻みの余白を合意しておきたい制作会社のために作った。
見出しをStellar AIと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
Interに触る前にヒーローセクションのコピーを差し替えろ。文字サイズは今の行長に合わせてある。

含まれる内容

一行に収めたナビゲーション. 短いリンク列と1つの操作がヒーローセクションの上に載り、寸法は80pxで固定した表示サイズ、30px刻みの余白で抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに800x708の構図の上に載るため、その下のメディアは端から端まで届きます。
ファーストビュー上部のバッジ. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。お知らせは1件だけです。バッジがニュースらしく見えるのはそのためです。
刻みを名指しするブリーフ. ブリーフの寸法はすべて、測り直せる数値だ（80pxで固定した表示サイズ、30px刻みの余白、0.1sのトランジション）。リストの最小値と最大値が、構図の可動範囲を決める。
下端に沿わせた導入実績. クライアントのマークは下端に沿って低いコントラストで、ブリーフ最小の段階で並びます。ヒーローセクションのテクスチャとして読め、見出しと競うことはありません。この行は構図のほかの要素と同じベースラインに揃えます。この参考は800x708で収録しました。

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

アニメーションの予算はこれで全部

ホバー、押下、フォーカスはいずれも0.1sで解決する。インターフェースが即座に感じられるのはそのためだ。イージングは再生時間と一緒に指定されている（0.1s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

インタラクティブな範囲は狭く

インタラクティブな層は意図的に小さい（すべてのカードではなくボタンとリンクのホバー状態、その場で内容を差し替えるタブまたはアコーディオン）。状態の色はコンポーネントの既定値ではなく、ページ自身の配色から取る。ホバーでレイアウトにアニメーションを付けない。この参考は800x708で収録しました。

Stellar AIの最初の読みの順序

ここでは順序そのものがデザイン。訴求が実績より先に届くようナビゲーション、お知らせのピル、数値の行、クライアントの行、カードグリッドを置き、両者の距離を80pxで固定した表示サイズ、30px刻みの余白が決める。 SaaSの読み手は、選択肢より先に訴求を受け取る。

AI・SaaSプロダクトがここで得るもの

別々のカードの積み重ねとして作り直すこともできるが、失われるのは主張そのもの。このヒーローセクションは1つの判断として読ませる。ナビゲーション、お知らせのピル、数値の行、クライアントの行、カードグリッドを1本の順序に置いている。 Stellar AIは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。この参考は800x708で収録しました。