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

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

AI・SaaSプロダクト向けにヒーローセクションを作り直す前にPlanorを読むと、構成とそれを支える仕様がここに揃っていることが分かる。配色はオレンジ #634635の下地、白 #E5E7EBの文字で、書体はInter。納品物は自己完結したHTMLファイル1つで、1964x1402で記録しているため、コードを書く前に枠が決まっている。動きは0.2sのトランジション、ループする動画の下地だけで完結する。書いている間は開いておく。3,036文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは1964x1402で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1964x1402の枠から最小の余白ステップまで含む。

対象

このヒーローセクションは、キックオフに同席していない相手へ自己完結したHTMLファイル1つを説明する必要があるチームに応える。
このヒーローセクションは、自己完結したHTMLファイル1つの実装をエンジニアへ渡し、モーションを文章で残したいデザイナーに応える。
自己完結したHTMLファイル1つから組み始めるなら、先に58pxで固定した表示サイズ、30px刻みの余白を取り出せ。グリッドが固まるまでは配色に触るな。

含まれる内容

邪魔にならないナビゲーションバー. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInterで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに1964x1402の構図の上に載るため、その下のメディアは端から端まで届きます。ワードマークには文字が必要とする以上の幅を与えない。
ブリーフで固定した寸法. ブリーフの寸法はすべて、測り直せる数値だ（58pxで固定した表示サイズ、30px刻みの余白、0.2sのトランジション）。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。
オーバーレイなしのメディア. メディアは6.4sのクリップ1本で、1964x1402の画幅にcoverで切り抜く。どの幅でも黒帯が出ない。1964x1402以上で書き出せば、coverの切り抜きはそのまま機能する。書き出しは1964x1402以上にして、トリミングを正確に保ってください。
スケールがスタイルになる. 書体はサイズと一緒に書いてある（Inter、58px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、58pxの範囲でディスプレイの行がまとまります。役割が明確な1ファミリーは、競い合う2つに勝ります。

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

ループが環境演出を担う

環境の動きはスクロール演出ではなく6.4秒の1964x1402ループから生まれる。だからページは落ち着き、文字は読める。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。

時間はブリーフ由来

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

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

厳密な順序は、後から自由度を奪う。ファーストビューにセクションを足すなら58pxで固定した表示サイズ、30px刻みの余白を切り直す必要がある。順序が装飾ではなく構造を支えているからだ。 SaaSの読み手は、選択肢より先に訴求を受け取る。

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

このヒーローセクションを1964x1402とスマートフォン幅で見比べる。順序は同じまま保たれ、ナビゲーションはモバイルメニューに畳まれる。変わるのは寸法だけだ。詰め込みのほうが安く済むが、保たない。

Planorで最初に変えるもの

作業時間が半日しかないとする。見出しとアクションのラベルを変え、58pxで固定した表示サイズ、30px刻みの余白には触れなければ、意図して組んだように見えるページになる。配色を変える前に、コピーとメディアを書き換える。

よくある質問（FAQ）

Planorは自己完結したHTMLファイル1つにどこまで依存していますか？

Planorは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

Planorの背後のブリーフには、実際に何が入っていますか？

気分を書いた説明ではなく、制作のための仕様です。1964x1402のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。

Planorから作り直したページを、クレジット表記なしで公開してもよいですか？

ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1964x1402で収録しました。