このテンプレートについて
Mostar Guideは書き下ろされたブリーフ1本から組んだ旅行のランディングページで、このページはそのブリーフを記録している。見出しは「A cinematic three-screen scroll story for Mostar city」で、ランディングページの残りはその周りに配置されている。配色は#111411の下地、ティント #FDF1E1の文字、ブルー #7FB4D4のアクセントで、書体はInter。この項目は、ページを生んだ技術スタック（vanilla JS）を隠さずに書いている。ブリーフはモーションの予算を640msのトランジション、cubic-bezier(0.22, 1, 0.36, 1)、ループする動画の下地に使う。最初の画面で意図が伝わる必要がある旅行ブランドのランディングページには、この参考が適している。
対象
- このランディングページは、798x584の画角をクライアントの3回の修正に耐えさせたい制作会社のために作った。
- このランディングページを引き継ぐマーケターは、12px〜24pxの可変型サイズ、19vhのセクションで書き直しが尺度を保ったか確認する。
- プロダクトマーケターで、コピーの背後に7.4sのループ映像があってもランディングページが読める状態を保ちたい。
含まれる内容
- 上段はワードマーク、リンク、操作1つ. リンクは同じ文字サイズで1行に並び、#7FB4D4の操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。ラベルは560pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。主張の強いファーストビューでも耐えるナビゲーションが必要なときに、このパターンをそのまま使ってください。
- 文字の後ろのメディア. ファーストビューは798x584のクリップ1本で、ほかの要素はすべてその上に配置されます。ループは7.4sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 文字と画幅で1つの尺度. ブリーフは12px〜24pxの可変型サイズ、19vhのセクション、2カラムのグリッド、角丸24pxを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。調整の前に測る。
- 語るのは大見出しのサイズ. タイポグラフィはInterです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。サイズが大きくなるほど字間を詰めるため、12–24pxの範囲でディスプレイの行がまとまります。
モーションとインタラクション
意図を感じる速さ
仕様では状態変化ごとに時間が指定されている。トランジションは640ms、cubic-bezier(0.22, 1, 0.36, 1)で前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。値は短く、アニメーションではなくフィードバックとして読める長さだ。
インタラクションは局所に
状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（固定された要素が位置を保ち、その下を内容が流れる、必要なときに内容を送るスライダー）。状態の色はコンポーネントの既定値ではなく、ページ自身の配色から取る。この参考は798x584で収録しました。
Mostar Guideで最初に変えるもの
装飾より先に約束を決める。「A cinematic three-screen scroll story for Mostar city」を、自分の仕事を一文で言い切る形に書き直し、仕様が使っている表示サイズでInterに組む。ブルー #7FB4D4を自社のアクセントに置き換え、ほかを触る前に#111411との対比を確認する。別のブランドでも枠ごと再利用できる。
ランディングページの再配置
このランディングページを798x584とスマートフォン幅で見比べる。順序は同じまま保たれ、文字サイズは12px〜24pxで可変、レイアウトは560pxで切り替わる、セクションは19vhに固定。変わるのは寸法だけだ。操作部はタップできる大きさを保ち、コピーはどの幅でも読む順番を維持します。
Mostar Guideの最初の読みの順序
順番どおりに読んでみる。ナビゲーション、お知らせのピル、数値の行、カードグリッド、機能リスト。各要素は役割を一つだけ持ち、ブルー #7FB4D4のアクセントは押してほしい要素にしか使われていない。旅行の読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Mostar Guideのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された27,876文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Mostar Guideの背後のブリーフには、実際に何が入っていますか？
気分を書いた説明ではなく、制作のための仕様です。798x584のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
この項目にvanilla JSが書かれているのはなぜですか？
Mostar Guideはvanilla JSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
