このテンプレートについて
Digital Experiencesは判断の履歴を残しており、このランディングページを生んだブリーフは8,994文字。見出しは「Crafted Digital Experiences Built to Outlast Trends」で、ランディングページの残りはその周りに配置されている。配色は黒 #0D0D0Cの下地で、書体はInstrument Serif。納品物はReactとTailwind CSSで、640x458で記録しているため、コードを書く前に枠が決まっている。動きは500msのトランジションだけで完結する。書いている間は開いておく。8,994文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは640x458で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- 見出しをDigital Experiencesと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
- 書体がInstrument Serifでないなら、フロントエンド開発者は見出しを再計測してから入場のタイミングを組み直せ。
- この構成は、見出しを差し替えてもInstrument Serifのウェイトで同じリズムを保ちたいコンテンツチームに応える。
含まれる内容
- 操作より前に置くリンク. 細いバーをランディングページの上に重ね、左にワードマーク、リンクはInstrument Serifで組みます。そのため構図はコンテンツが先、装飾は後に読めます。バーは独自の背景を持たずに640x458の構図の上に載るため、その下のメディアは端から端まで届きます。
- 明記された寸法. ここに目分量はありません。仕様が10px刻みの余白、500msのトランジションを固定し、残りのレイアウトはその値から導かれます。リストは短く、確認者は要素ごとに突き合わせられる。
- 1つずつ役割を持つ書体. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInstrument Serifがあり、そこから補助コピーへはっきり落とします。大見出し用の書体は1つのサイズでのみ使い、それ自体と競合しない。刻みは残し、書体だけ差し替える。
- カードの壁ではなくリスト. 機能はカードの壁ではなくInstrument Serifのリストとして組みます。項目はサイズもマーカーも共通なので、長いリストでも拾い読みできます。可能な限り1項目1行で。
モーションとインタラクション
ミリ秒で書かれた時間
状態変化は500msと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。同じ再生時間を複数の操作要素で使い回しており、インタラクションが一つの仕組みとして揃って感じられる。
文字が分割して現れる
ページの入場は一語ずつの入場だけなので、維持すべき動きのアイデアは1つで済む。この手法を外しても内容は残り、レイアウトもずれない。この参考は640x458で収録しました。
ランディングページの背後にある順序
このページの上部と、よくある制作会社のランディング画面を比べる。どちらも見出しとアクションを持つが、ここではナビゲーション、見出し、お知らせのピル、数値の行、クライアントの行が同じ強さで競合せず、固定の順序に収まる。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は640x458で収録しました。
ランディングページを支えるタイミング
ここまで動きを抑えると、ページは書体と枠に頼ることになる。500msのトランジション、一語ずつ現れる見出し、スクロール連動の表示演出を完全に外しても構成は成り立つ。このランディングページで、動くために動く要素はない。
ランディングページを支える数値
この参考が再利用できる理由はここにある。10px刻みの余白、500msのトランジション。どこも初期値に委ねられていないので、これらの数値を保つ差し替えなら構図もそのまま残る。このランディングページに、初期値任せの部分はない。
よくある質問（FAQ）
Digital Experiencesのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。640x458のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Digital ExperiencesはReactとTailwind CSSにどこまで依存していますか？
Digital ExperiencesはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Digital Experiencesはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は640x458で収録しました。
