このテンプレートについて

Travel Journalは旅行ブランドに、完成したファーストビューと、それを生んだ数値を渡す。配色は深いのブルー #1A1A1Eの下地、くすんだのティール #77A0B0のアクセントで、書体はInter。納品物はReactとTailwind CSSで、1470x1080で記録しているため、コードを書く前に枠が決まっている。ページはモーションを150msのトランジション、ループする動画の下地にとどめる。新しいセクションを足す前にブログセクションの順序を決めたいときに使う。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、ブログセクションを作り直すときに背後の意図を推測せずに済む。収録したプロンプトは1470x1080で記録したので、このページで引用する値はすべてそこにたどれる。

対象

• 1回ごとの精算で進め、初回の前に角丸52px、10px刻みの余白を合意しておきたい制作会社のために作った。
• ブログのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
• このブログセクションを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。

含まれる内容

• 一行に収めたナビゲーション. この行はコントラストを#77A0B0の操作1か所だけに使い、ワードマークとリンクは文字色に退く。リンクはワードマークより小さいサイズで組み、#77A0B0の操作だけがバーの中で重みを持つ要素です。
• 検証できる数値. 値そのものが仕様です。角丸52px、10px刻みの余白、150msのトランジションは1470x1080での収録値で、スクリーンショットから推測したものではありません。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。根拠がなさそうに見える値こそ残す。
• 規律をもって使う1書体. 書体には混ぜるのではなく役割を割り当てています。 Interがディスプレイとインターフェースの両方を担います。書体の差し替えは可能ですが、比率がその差し替えに耐える必要があります。
• ブリーフで固定した寸法. 値そのものが仕様です。角丸52px、10px刻みの余白、150msのトランジションは1470x1080での収録値で、スクリーンショットから推測したものではありません。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。レイアウトと一緒に数値も持っていく。

モーションとインタラクション

よくある質問（FAQ）