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

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

AI Workflow Heroは書き下ろされたブリーフ1本から組んだSaaSのヒーローセクションで、このページはそのブリーフを記録している。配色は深いのグリーン #1F2A1Dの下地で、書体はInter。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。モーションは400msのトランジション、cubic-bezier(0.22,1,0.36,1)で、コピーが主役のままになる程度に抑えている。書いている間は開いておく。16,580文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

低速回線でもこのヒーローセクションを成立させたいエンジニアは、640x470とタイプスケールを重さの予算に使う。
見出しをAI Workflow Heroと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
公開中のサイトからモーションを仕様化するデザイナーは、400msの数値とcubic-bezier(0.22,1,0.36,1)の曲線を書かれたとおりに使う。

含まれる内容

邪魔にならないナビゲーションバー. バーはヒーローセクションを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに640x470の構図の上に載るため、その下のメディアは端から端まで届きます。
スケールがスタイルになる. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInter、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。サイズの刻みが固定値なので、書体を差し替えても同じ階層を保てる。スケールは明記されています。それを使ってください。
明記された余白の刻み. 寸法は640x470のレンダリングから読み取った（10px刻みの余白、400msのトランジション、cubic-bezier(0.22,1,0.36,1)のイージング）。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
ファーストビューに置く根拠. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。ヒーローセクションが機能リストに変わるのを防ぐためです。数字は周囲のコピーと同じベースラインに乗り、行が1つの塊として読める。この参考は640x470で収録しました。

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

意図を感じる速さ

仕様では状態変化ごとに時間が指定されている。トランジションは400ms、cubic-bezier(0.22,1,0.36,1)で前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。値が短いので、作り直しでこれを遅くすればすぐに分かる。

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

ページが反応するのは操作できる場所だけ。すべてのカードではなくボタンとリンクのホバー状態。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。この参考は640x470で収録しました。

ヒーローセクションを支えるタイミング

モーションは400msのトランジション、ホバー状態と押下状態、ライブキャンバスだけに限っている。このヒーローセクションで、ブリーフの許容を超えて動く要素は一つもない。このヒーローセクションで、動くために動く要素はない。

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

ブロックを入れ替えてもページは表示される。ただし主張としては読めなくなる。ナビゲーション、お知らせのピル、数値の行、機能リスト、背景のクリップは順序であり、10px刻みの余白、400msのトランジションはその順序でしか機能しない。 SaaSの読み手は、選択肢より先に訴求を受け取る。

このヒーローセクションが正しい理由

メディアに色の膜をかぶせるのが簡単な解決だったはず。ブリーフはそれを外している。メディアは640x470の静止画だ。それでもコピーが保つのは、10px刻みの余白、400msのトランジションが画面を静かに保つから。 AI Workflow Heroは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。