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

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

PortalはAI・SaaSプロダクト向けのヒーローセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。カラースキームはニュートラル #F2F2EEの下地、シェード #192837の文字、シェード #7342E2のアクセントで、ページはHelvetica Now Displayで組む。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。ブリーフはモーションの予算を0.3sのトランジションに使う。書いている間は開いておく。5,718文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

AI・SaaSプロダクトヒーローセクションの外観を差し替えるグロース担当は、訴求コピーを変えても640x474の画角を保ちたい。
まず100vhのセクション、24px刻みの余白から決めろ。配色は後からついてくる。このヒーローセクションを読ませているのは余白だ。
このヒーローセクションをクライアントに引き渡す制作会社には、ブランドの外装を載せる前に#7342E2と#F2F2EEを照合する必要がある。

含まれる内容

ページのグリッドに乗るバー. 上段に載るのはワードマーク、4〜5本のリンク、#7342E2に染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#7342E2の操作だけがバーの中で重みを持つ要素です。行は1行に保つ。
ブリーフで固定した寸法. ブリーフは100vhのセクション、24px刻みの余白、0.3sのトランジションを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。レイアウトと一緒に数値も持っていく。
1つずつ役割を持つ書体. Helvetica Now Displayに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。大見出し用の書体は1つのサイズでのみ使い、それ自体と競合しない。書体を変えてもサイズ段階はそのまま残してください。
構図そのものがコンテンツ. 構図全体が1画面に収まり、ReactとTailwind CSSで作られています。コピー、メディア、操作要素はブリーフで名指しされています。ページは640x474の1つの構図です。コピーが変わっても崩れないのはそのためです。ファーストビューに装飾は要りません。

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

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

トランジションの指定は0.3s。コントロールはこの時間に縛られる。イージングは再生時間と一緒に指定されている（0.3s）ので、作り直しの際に別の感触へ黙って差し替わることはない。ブラウザの既定値のまま出さない。

反応はコントロールに返す

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限る。密度の高い最初の画面が煩くならないのはそのためだ。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。この参考は640x474で収録しました。

Portalの最初の読みの順序

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

ヒーローセクションを支える数値

このヒーローセクションをブロックごとに分解しても、値はそれを説明し続ける。枠と、その下のリズムを決めているのが100vhのセクション、24px刻みの余白だ。このヒーローセクションに、初期値任せの部分はない。

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

PortalはAI・SaaSプロダクト向けのヒーローセクション参考であり、この対象読者が実際に抱える課題に答えている。配色はニュートラル #F2F2EEとシェード #7342E2の2色に絞られ、書体はHelvetica Now Displayで組まれているので、借り物の流行に寄りかかる要素がない。制作を依頼するとき写すべきなのはこの部分である。表示サイズで約束を一つだけ置き、支える情報はすべてその下に収める。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。