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

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

これはScalableのヒーローセクションを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。「New Feature: Zapier Integration」は、レイアウトが背負うために組まれた一行。配色は深いのインディゴ #2B1F36の下地。納品形式はReactとTailwind CSSなので、ヒーローセクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。モーションはループする動画の下地で、コピーが主役のままになる程度に抑えている。 AI・SaaSプロダクトのヒーローセクションを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。以下に引用する値はすべてこのブリーフのもので、1920x1592の枠から最小の余白ステップまで含む。

対象

プロダクトマーケターで、コピーの背後に10.5sのループ映像があってもヒーローセクションが読める状態を保ちたい。
このヒーローセクションを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。
まず数値が要るデザイナー。1920x1592、すべて仕様からの引用である。

含まれる内容

操作1つだけの上段. バーは1行のテキストと1つの操作だけで、1920x1592のフレームとして測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに1920x1592の構図の上に載るため、その下のメディアは端から端まで届きます。
雰囲気を担うメディア1つ. 雰囲気を作るのは1920x1592の10.5sクリップです。ブリーフはトリミングを固定し、その上の文字には手を加えていません。1920x1592以上で書き出せば、coverの切り抜きはそのまま機能する。
新しい1つだけを示すピル. 見出しの上でお知らせを担うのはピル1つだけで、その位置を争う要素はほかにありません。お知らせは1件だけです。バッジがニュースらしく見えるのはそのためです。古くなったお知らせは外してください。この参考は1920x1592で収録しました。
段落ではなくパネル. 文章を流し込む場所にパネルを並べている。ヒーローセクションを見渡せるのはそのためだ。どのパネルも内部の配置は同じで、グリッドは形で見渡せる。この参考は1920x1592で収録しました。

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

ループが環境演出を担う

10.5秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。ほかに連続して動くものがないので、注意を引くのは映像だけだ。この参考は1920x1592で収録しました。

ホバーは意味のある場所だけに

フィードバックは固定された要素が位置を保ち、その下を内容が流れる、その場で内容を差し替えるタブまたはアコーディオンに限る。密度の高い最初の画面が煩くならないのはそのためだ。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。この参考は1920x1592で収録しました。

Scalableで最初に変えるもの

自社のメディアを入れるときは、トリミングとレイヤーの順序を守る。メディアは1920x1592の10.5sループ映像だ。コピーの可読性を保っているのはその配置だ。色に触る前に、見出しの一行を書き換える。

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

こうしたページは普通、機能グリッドの下にアクションを埋める。これはナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを固定の順序に置き、アクションを3画面分スクロールした先ではなくファーストビューの中に置く。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1920x1592で収録しました。