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

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

Contact CyberneticはAI・SaaSプロダクト向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。「). Inside, display an acknowledgment banner reading」は、レイアウトが背負うために組まれた一行。配色は白 #F1F3F1の下地、深いのグリーン #1C2E1Eの文字で、書体はInter。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。結局、動きは1sのトランジションに尽きる。書いている間は開いておく。6,423文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、640x458の枠から最小の余白ステップまで含む。

対象

このヒーローセクションを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく21px〜76pxの可変型サイズ、23px刻みの余白を渡せ。
見出しをContact Cyberneticと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
AI・SaaSプロダクトヒーローセクションを立ち上げる創業者には、開発者が着手する前にInterとタイプスケールを確定させておく必要がある。

含まれる内容

ドロワーを持たない一行. 細いバーをヒーローセクションの上に重ね、左にワードマーク、リンクはInterで組みます。そのため構図はコンテンツが先、装飾は後に読めます。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに640x458の構図の上に載るため、その下のメディアは端から端まで届きます。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
既定値に頼らない構成. サイズは継承ではなく明記されています（21px〜76pxの可変型サイズ、23px刻みの余白、1sのトランジション）。書体やコピーを差し替えても、この関係は保たれます。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。ピルはブリーフ最小の段階に置くため、第二のタイトルではなくラベルとして読めます。
大きくなるほど詰まる字間. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInterがあり、そこから補助コピーへはっきり落とします。サイズが大きくなるほど字間を詰めるため、21–76pxの範囲でディスプレイの行がまとまります。

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

ホバーは控えめに

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。状態が単純なので、どんなコンポーネント体系にも移植できる。状態は絞り、そのぶん書き切る。この参考は640x458で収録しました。

ミリ秒で書かれた時間

1つの時間がすべてのインタラクションを覆う（1s）。ホバーと押下が同じ体系に読めるのはそのため。イージングは再生時間と一緒に指定されている（1s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

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

多くのレスポンシブ対応は要素を隠して終わる。ここではレイアウトの形が変わる。ナビゲーションはモバイルメニューに畳まれる。折り返しに収めるために重要な要素は削っていない。再配置を越えて残るのは階層だ。この参考は640x458で収録しました。

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

このヒーローセクションには明示された読みの経路がある。ナビゲーションはプロダクトを提示し、再訪した読者に見慣れた導線を与える。そこから視線はナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップを順にたどる。1画面が箇条書きに見えないのはそのため。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は640x458で収録しました。

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

仕様はムードボードではなく、一冊の仕様書である。21px〜76pxの可変型サイズ、23px刻みの余白、1sのトランジションを固定し、メディアを640x458として指定する。この細かさがあるからこそ、作り直しても設計が生き残る。コピーを変えても関係は保たれる。このヒーローセクションに、初期値任せの部分はない。