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

Paradiso CTAは書き下ろされたブリーフ1本から組んだ旅行のCTAブロックで、このページはそのブリーフを記録している。ページ自身の見出しは「Enter your email address」で、構図はその言葉をそのまま中心に組まれている。配色は白 #EFF3F4の下地、深いのライム #1B200Bの文字。納品物は自己完結したHTMLファイル1つ。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。ページはモーションをループする動画の下地にとどめる。記録されたブリーフから始め、CTAブロックをゼロから作り直すのではなく編集する。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、CTAブロックを作り直すときに背後の意図を推測せずに済む。

対象

• 旅行ブランドCTAブロックの外観を差し替えるグロース担当は、訴求コピーを変えても2522x1858の画角を保ちたい。
• このCTAブロックは、レイアウトの中で15px刻みの余白が何を決めているのかを知りたい実装者に答える。
• このCTAブロックは、自己完結したHTMLファイル1つの実装をエンジニアへ渡し、モーションを文章で残したいデザイナーに応える。

含まれる内容

• ブリーフに直書きされたサイズ. レイアウトは固定値（15px刻みの余白）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。
• パネルではなく背景の動画. 4.6sの素材1つがファーストビュー全体を支え、同期させる2つ目のメディア要素はない。自動再生が使えないときは2522x1858のポスター画像が構図を保つため、レイアウトが崩れることはありません。書き出しは2522x1858以上にして、トリミングを正確に保ってください。
• 順序を決めるグリッド. 文章を流し込む場所にパネルを並べている。 CTAブロックを見渡せるのはそのためだ。グリッドはパネルの順序を変えずに1列へ折れます。この参考は2522x1858で収録しました。
• 構図そのものがコンテンツ. ファーストビュー内の要素は、どれも置かれるべき理由があります。ブリーフはコピー、2522x1858のフレーム、文字サイズを名指しし、それらと競う装飾は残していません。ページは2522x1858の1つの構図です。コピーが変わっても崩れないのはそのためです。

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

よくある質問（FAQ）