このテンプレートについて
AI・SaaSプロダクト向けにヒーローセクションを作り直す前にDatacore Bookingを読むと、構成とそれを支える仕様がここに揃っていることが分かる。「Book your perfect stay instantly and hassle-free」は、レイアウトが背負うために組まれた一行。カラースキームは黒 #171717の下地、グレー #D4D4D4の文字、明るいのインディゴ #7B39FCのアクセントで、ページはManropeで組む。納品物はReactとTailwind CSSで、800x553で記録しているため、コードを書く前に枠が決まっている。書いている間は開いておく。2,826文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、800x553の枠から最小の余白ステップまで含む。
対象
- AI・SaaSプロダクトヒーローセクションを提案する制作会社が、14px刻みの余白を提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
- 見出しをDatacore Bookingと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- 先に#7B39FCを塗り直し、#171717と突き合わせてから、下のレイアウトに触れ。
含まれる内容
- 操作1つだけの上段. バーに載るのはワードマーク、セクションのリンク、#7B39FCのボタン1つだけです。14px刻みの余白で測られているため、第二のヘッダーに膨らむことはありません。リンクはワードマークより小さいサイズで組み、#7B39FCの操作だけがバーの中で重みを持つ要素です。
- 書体が決める階層. タイポグラフィはManropeです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。
- ビューポート基準の計測. ブリーフは14px刻みの余白を固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。リストは短く、確認者は要素ごとに突き合わせられる。調整の前に測る。
- 役割を明記した色. #7B39FC以外はすべて黒 #171717の上に載る。アクセントが装飾ではなく信号として読めるのはそのためだ。#7B39FCと黒 #171717のコントラストが、小さいサイズでもアクセントを読ませる。
モーションとインタラクション
ホバーは控えめに
ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。状態の色はコンポーネントの既定値ではなく、ページ自身の配色から取る。この参考は800x553で収録しました。
邪魔をしないモーション
スクロールライブラリはない。800x553の構図は静止したままで、動くのは自分に反応する要素だけだ。モーションは装飾ではなくフィードバックとして扱う。
AI・SaaSに効くところ
2,826文字のブリーフが、余分のない1画面を生む。値は明示されており（14px刻みの余白）、言葉が変わっても構成が読めるのはそのため。 Datacore Bookingは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
ヒーローセクションの再配置
デスクトップの固定スケールのほうが簡単だったはず。ブリーフは96px〜14pxのクランプを加えており、幅が変わっても見出しの比率が保たれるのはそのため。自動再生とモーションは誠実に扱われているので、それらが使えない環境でもページは内容を伝えます。
ヒーローセクションの背後にある順序
順番どおりに読んでみる。ナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップ。各要素は役割を一つだけ持ち、明るいのインディゴ #7B39FCのアクセントは押してほしい要素にしか使われていない。 SaaSの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Datacore Bookingの土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。800x553のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Datacore BookingはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Datacore Bookingから作り直したページを、クレジット表記なしで公開してもよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x553で収録しました。
