このテンプレートについて
Synth ModeはECブランド向けの実用的な参考だ。ランディングページはすでに配置され、寸法も測られ、いつでも作り直せる。ページ自身の見出しは「LGPSM — Future Forward Fashion」で、構図はその言葉をそのまま中心に組まれている。カラースキームは白 #EBEBEDの下地、くすんだのブルー #64748Bのアクセントで、ページはPlus Jakarta Sansで組む。納品物はReactとTailwind CSSで、1920x1396で記録しているため、コードを書く前に枠が決まっている。モーションの予算は3sのトランジション、ループする動画の下地。 ECブランドのランディングページを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。
対象
- ランディングページをモデルに指示する人は、10,533文字のプロンプトを出発点に使う。
- 見出しをSynth Modeと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
- ECの参考を比べるデザイン責任者は、白 #EBEBEDとくすんだのブルー #64748Bを判断の決め手に使う。
含まれる内容
- 邪魔にならないナビゲーションバー. ワードマーク、リンク、#64748Bの操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#64748Bの操作だけがバーの中で重みを持つ要素です。
- 既定値に頼らない構成. ブリーフは3sのトランジションを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
- パネルに分割した内容. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのPlus Jakarta Sansで組むことで構造が見えたままになります。どのパネルも内部の配置は同じで、グリッドは形で見渡せる。パネル数はコピーに合わせて決める。
- コピーが先、装飾は後. ファーストビュー内の要素は、どれも置かれるべき理由があります。ブリーフはコピー、1920x1396のフレーム、文字サイズを名指しし、それらと競う装飾は残していません。ページは1920x1396の1つの構図です。コピーが変わっても崩れないのはそのためです。
モーションとインタラクション
反応はコントロールに返す
状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（すべてのカードではなくボタンとリンクのホバー状態）。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。タッチ端末で状態を確認する。この参考は1920x1396で収録しました。
スクロールライブラリなしの環境モーション
7.3秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。1920x1396以上で撮影または書き出す。
ランディングページの背後にある順序
このページには意図された順番がある。ナビゲーションはプロダクトを提示し、再訪した読者に見慣れた導線を与える。見出しが表示サイズを取り、支える一行が提供内容を説明し、くすんだのブルー #64748Bのアクセントが主操作を示すので、次の一手が分からなくなることはない。ほかに競合するものはない。最初の判断より前にカードのグリッドは置かれず、それによってECの案件でもランディングページが重く感じられない。 ECの読み手は、選択肢より先に訴求を受け取る。
Synth Modeを仕様として読む
2人で作り直すとき、構成を目分量で合わせることはできない。ブリーフは議論を消す。3sのトランジションを一度だけ明記している。このランディングページに、初期値任せの部分はない。
Synth Modeで動くもの
短いモーション予算は、最初の画面の劇性を犠牲にする。代わりに可読性を買い、3sのトランジション、7.3sのメディアループ、パララックスレイヤーをライブラリなしで移植できるようにする。このランディングページで、動くために動く要素はない。
よくある質問（FAQ）
Synth Modeのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。1920x1396のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Synth Modeのランディングページを別の技術スタックで作り直せますか？
Synth ModeはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Synth Modeの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1920x1396で収録しました。
