このテンプレートについて
Interactive Discoveryは製造・産業企業向けの実用的な参考だ。ヒーローセクションはすでに配置され、寸法も測られ、いつでも作り直せる。配色は黒 #000000の下地、白 #FFFFFFの文字、明るいのオレンジ #E8702Aのアクセントで、書体はInter。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。動きは1.1sのトランジション、cubic-bezier(0.16,1,0.3,1)だけで完結する。最初の画面で意図が伝わる必要がある製造・産業企業のヒーローセクションには、この参考が適している。以下に引用する値はすべてこのブリーフのもので、640x474の枠から最小の余白ステップまで含む。
対象
- 1回ごとの精算で進め、初回の前に100vhのセクション、28px刻みの余白を合意しておきたい制作会社のために作った。
- ヒーローセクションをモデルに指示する人は、6,894文字のプロンプトを出発点に使う。
- Figmaファイルを引き継ぐフロントエンド開発者は、#000000と#E8702Aで配色が受け渡しを越えたか確認する。
含まれる内容
- 1つの幅で折りたたむリンク. リンクは同じ文字サイズで1行に並び、#E8702Aの操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。リンクはワードマークより小さいサイズで組み、#E8702Aの操作だけがバーの中で重みを持つ要素です。
- ブリーフで固定した寸法. レイアウトは比率ではなく絶対値で組む（100vhのセクション、28px刻みの余白、1.1sのトランジション、cubic-bezier(0.16,1,0.3,1)のイージング）。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。根拠がなさそうに見える値こそ残す。
- トーンを担うタイポグラフィ. 大見出しはInterで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。字間はサイズごとに設定し、大見出しとキャプションで同じ値を共有しない。
- 構図そのものがコンテンツ. 構図全体が1画面に収まり、ReactとTailwind CSSで作られています。コピー、メディア、操作要素はブリーフで名指しされています。ページは640x474の1つの構図です。コピーが変わっても崩れないのはそのためです。
モーションとインタラクション
低減モーションに対応する
仕様にはprefers-reduced-motionの分岐が含まれる。入場を切ってもレイアウトは失われない。この分岐はそのまま自分の実装に写してよい。低減モーションでも操作のフィードバックは働き、外れるのは入場だけだ。この参考は640x474で収録しました。
最初の画面はキャンバスが支える
ビジュアルは静止画として読み込むのではなく実行時に生成される（WebGLのキャンバス）。だから640x474の画枠は素材が1つ少なくて済む。周囲のインターフェースは平坦なままで、奥行きは描画が担う。
Interactive Discoveryで動くもの
ここでのモーションはライブラリではなく、判断の積み重ねである。1.1sのトランジション、ホバー状態と押下状態、ライブキャンバス。スクロールで動くものはない。結果として、著者のいるページになる。短い時間、一度だけの入場、そして装飾ではなく操作を確認するための状態変化である。このヒーローセクションで、動くために動く要素はない。
Interactive Discoveryの最初の読みの順序
注意は偶然に任せず、導いている。順序はナビゲーション、お知らせのピル、数値の行と進み、各停留点は100vhのセクション、28px刻みの余白に合わせて寸法を取るので、順番が崩れることはない。製造業の読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションを自社のものにする
白紙から始める場合と比べる。ここでは枠（640x474）と100vhのセクション、28px刻みの余白がすでに決まっているので、作業は構成ではなく差し替えになる。別のブランドでも枠ごと再利用できる。
よくある質問（FAQ）
Interactive Discoveryの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは6,894文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Interactive DiscoveryはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Interactive Discoveryのモーションは何をきっかけに動きますか？
登場の動きと状態変化は1.1sの範囲に収まります、cubic-bezier(0.16,1,0.3,1)を使い、低減モーションの分岐もブリーフにあります。スクロールライブラリではなく状態変化を起点に動き、コピーを待たせることもありません。
