このテンプレートについて
これはConvix Softwareのヒーローセクションを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。色は白 #EDEDEDの下地、深いのブルー #0B0F1Aの文字、明るいの赤 #EF4D23のアクセントに限り、Interで組んでいる。この参考例はReact、Lucide iconsで組んであり、レイアウトの判断はそれとは独立に書かれている。書いている間は開いておく。5,587文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、800x578の枠から最小の余白ステップまで含む。収録したプロンプトは800x578で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- AI・SaaSプロダクトヒーローセクションを提案する制作会社が、22pxで固定した表示サイズ、100vhのセクションを提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
- 見出しをConvix Softwareと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- #EF4D23を調整し直すほうを選び、ヒーローセクションをグリッドから組み直したくないデザイナーのために作った。
含まれる内容
- 意図的に細いナビゲーション. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#EF4D23の1つだけ。いずれも独自の背景を持たずにヒーローセクションの上に載ります。リンクはワードマークより小さいサイズで組み、#EF4D23の操作だけがバーの中で重みを持つ要素です。主張の強いファーストビューでも耐えるナビゲーションが必要なときに、このパターンをそのまま使ってください。
- 目分量ではなく実測. ここでは文字と余白を同じ1つのリストから取る（22pxで固定した表示サイズ、100vhのセクション、13px刻みの余白）。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。
- 中盤を担うカードグリッド. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。パネルの高さはコピーに従い、行が長くなっても列の揃いが崩れない。
- お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。バッジが#EF4D23を持ち、見出しは文字色に留まります。
モーションとインタラクション
静止も設計
これは800x578の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。動くのはポインターに反応する要素だけだ。
邪魔をしないモーション
これは800x578の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。動くのはポインターに反応する要素だけだ。静止も有効な選択だ。
Convix Softwareで動くもの
テンプレートがすべてのセクションを登場時に動かすのに対し、これはホバー状態と押下状態だけを動かし、あとは止める。このヒーローセクションで、動くために動く要素はない。この参考は800x578で収録しました。
ヒーローセクションを自社のものにする
作業時間が半日しかないとする。見出しとアクションのラベルを変え、22pxで固定した表示サイズ、100vhのセクションには触れなければ、意図して組んだように見えるページになる。配色を変える前に、コピーとメディアを書き換える。
ヒーローセクションを支える数値
このページは見た目より多くの数値でできている。作り直しで守るべきなのは22pxで固定した表示サイズ、100vhのセクション、13px刻みの余白で、残りは動かしてよい。このヒーローセクションに、初期値任せの部分はない。
よくある質問（FAQ）
Convix Softwareのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは5,587文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目にReact、Lucide iconsが書かれているのはなぜですか？
必要ありません。ブリーフは依存関係の一覧ではなく仕様です。React、Lucide icons向けに書かれていますが、同じ構図は今お使いの技術スタックでも作り直せます。技術スタックを明記しているのは、参照デザインがどう作られたかを知るためです。
Convix Softwareの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x578で収録しました。
