このテンプレートについて
これはPower AIのヒーローセクションを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。「The most powerful AI ever deployed in talent acquisition」は、レイアウトが背負うために組まれた一行。色は黒 #000000の下地、イエロー #FCD34Dの文字、インディゴ #A855F7のアクセントに限り、Geistで組んでいる。納品物は単一のコンポーネントで、800x604で記録しているため、コードを書く前に枠が決まっている。動きは100msのトランジションだけで完結する。書いている間は開いておく。3,838文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、800x604の枠から最小の余白ステップまで含む。
対象
- このヒーローセクションは、キックオフに同席していない相手へ単一のコンポーネントを説明する必要があるチームに応える。
- 単一のコンポーネントから組み始めるなら、先に220pxで固定した表示サイズ、82px刻みの余白を取り出せ。グリッドが固まるまでは配色に触るな。
- 競合のSaaSヒーローセクションを作り直すチームが、フレームワークを決める前に単一のコンポーネントを明示したい。
含まれる内容
- 背景を持たないナビゲーション. バーに載るのはワードマーク、セクションのリンク、#A855F7のボタン1つだけです。220pxで固定した表示サイズ、82px刻みの余白で測られているため、第二のヘッダーに膨らむことはありません。リンクはワードマークより小さいサイズで組み、#A855F7の操作だけがバーの中で重みを持つ要素です。
- 下端に沿わせた導入実績. ロゴはベースライン上にGeistの1行で並べ、ラベルは付けません。主張は暗黙のまま、構図は崩れません。見出しも罫線もないため、その行はファーストビューの一部に留まります。行は1本、ベースラインも1本。
- 実装まで持ち込む数値. レイアウトは比率ではなく絶対値で組む（220pxで固定した表示サイズ、82px刻みの余白、100msのトランジション）。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
- アクセントは操作系のみ. 色はアクセント1色に絞ります。操作にはインディゴ #A855F7、それ以外は黒 #000000です。ほかはすべて黒 #000000の上にあり、彩度の高い配色でも読めるのはそのためです。下地は静かに保つ。
モーションとインタラクション
インタラクティブ層はコントロール
ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態）。すべての要素を的にせずに、ページは反応して感じられる。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。長い効果のリストより、確実な状態をいくつか。この参考は800x604で収録しました。
止まらない帯
横方向の帯は見出しに次いで目立つ要素だ。途切れない動き、アクティブな項目の#A855F7、そして読者に操作を求めない。アクティブな項目はサイズ変更ではなく#A855F7で示す。
AI・SaaSに効くところ
Power AIはAI・SaaSプロダクト向けのヒーローセクション参考であり、この対象読者が実際に抱える課題に答えている。ページは「The most powerful AI ever deployed in talent acquisition」と明言している。配色は黒 #000000とインディゴ #A855F7の2色に絞られ、書体はGeistで組まれているので、借り物の流行に寄りかかる要素がない。制作を依頼するとき写すべきなのはこの部分である。表示サイズで約束を一つだけ置き、支える情報はすべてその下に収める。 Power AIは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
Power AIで動くもの
ここでのモーションはライブラリではなく、判断の積み重ねである。100msのトランジション、ホバー状態と押下状態、ループするマーキー。スクロールで動くものはない。結果として、著者のいるページになる。短い時間、一度だけの入場、そして装飾ではなく操作を確認するための状態変化である。このヒーローセクションで、動くために動く要素はない。
ヒーローセクションを自社のものにする
再利用できるのは構図のほうで、題材は自分のものである。見出しを入れ替え、タイプスケール（220pxで固定した表示サイズ）は維持し、#A855F7のアクセントを自社のメディアの上で測り直す。新しい要素が提供内容や次の操作の説明に寄与しないなら、それはファーストビューの下に置く。新しいコピーも同じ表示サイズで組み、何かを足す前にコントラストを確認し直します。
よくある質問（FAQ）
Power AIを作り直すのに単一のコンポーネントは必要ですか？
Power AIは単一のコンポーネントで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Power AIのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。800x604のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Power AIはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x604で収録しました。
