このテンプレートについて
Orbit Floraは判断の履歴を残しており、このランディングページを生んだブリーフは9,402文字。配色は#161616の下地、#FFFFFFの文字、マゼンタ #FD86DBのアクセントで、書体はInter。納品物は単一のコンポーネントで、1454x1080で記録しているため、コードを書く前に枠が決まっている。モーションは620msのトランジション、cubic-bezier(.16, 1.3, 1)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。最初の画面で意図が伝わる必要があるライフスタイルブランドのランディングページには、この参考が適している。収録したプロンプトは1454x1080で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- 参考がただの出発点なら、デザイナーはcubic-bezier(.16, 1.3, 1)のイージングを残し、ランディングページの残りを組み直せる。
- ライフスタイルの案件を提案し、クライアントへの初回返信に単一のコンポーネントを載せる必要がある制作会社のためのものだ。
- AIビルダーを使う人で、モデルに任せるのではなく900pxのブレイクポイントが最初から入った仕様を求めている。
含まれる内容
- 操作より前に置くリンク. リンクは同じ文字サイズで1行に並び、#FD86DBの操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。900px以下では、リンクは2行目に折り返さず折りたたむ。バーの要素はわずか数個なので、コンポーネントライブラリなしで組み直せます。
- 文字の後ろのメディア. 1454x1080の動画がコピーの背後で8.2sのループ再生を行います。ミュートかつインラインで、両者の間に色のレイヤーはありません。1454x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
- 幅ごとに定義された挙動. ブリーフは見出しに57px〜34pxのクランプを使っています。長い行が不格好に折れないのはそのためです。モバイルメニューも同じブリーフに含まれているため、畳んだ状態も設計済みです。
- 規律をもって使う1書体. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInter、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。
モーションとインタラクション
静止画ではなくシーン
1454x1080の画枠で視覚を担っているのはWebGLのキャンバスで、文字はその上か横に組む。仕様に画像の差し替えはなく、情景は最初の描画に含まれている。
状態変化にも時間を与える
コントロールの動きは短く、繰り返しに耐える。状態が変わるたびに620ms。値は短く、アニメーションではなくフィードバックとして読める長さだ。
Orbit Floraの最初の読みの順序
このページの上部と、よくあるライフスタイルのランディング画面を比べる。どちらも見出しとアクションを持つが、ここではナビゲーション、お知らせのピル、数値の行が同じ強さで競合せず、固定の順序に収まる。ライフスタイルの読み手は、選択肢より先に訴求を受け取る。この参考は1454x1080で収録しました。
ランディングページを自社のものにする
多くの人はアクセントカラーから始める。代わりに訴求から始める。見出しの一行を書き換え、マゼンタ #FD86DBを自社のメディアで検証し直す。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。
このランディングページが立てる主張
テンプレートがファーストビューをモジュールで埋めるのに対し、このランディングページはナビゲーション、お知らせのピル、数値の行で止める。差は55vhのセクション、34px刻みの余白に出る。空白を埋めるための余白はない。ライフスタイルの読み手に、訴求へ至る最短の正直な道を示す。
よくある質問（FAQ）
Orbit Floraを作り直すのに単一のコンポーネントは必要ですか？
Orbit Floraは単一のコンポーネントで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Orbit Floraのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。1454x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Orbit Floraの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1454x1080で収録しました。
