このテンプレートについて
ライフスタイルブランド向けにAboutページを作り直す前にOrbis Helloを読むと、構成とそれを支える仕様がここに揃っていることが分かる。配色は深いのブルー #13142Dの下地、白 #EFF4FFの文字、明るいのライム #6FFF00のアクセントで、書体はAnton。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。ライフスタイルのAboutページを発注するなら、この構成から始めて主題だけ差し替える。
対象
- このAboutページからは、他の何よりも先に640x470の画角と14px〜68pxの可変型サイズ、20px刻みの余白を持っていけ。
- ライフスタイルブランドAboutページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- Aboutページをモデルに指示する人は、5,232文字のプロンプトを出発点に使う。
含まれる内容
- ブリーフに直書きされたサイズ. リストは短く（14px〜68pxの可変型サイズ、20px刻みの余白）、システム全体を手作業で確認できる。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
- 主張の代わりに数字. 統計はタイポグラフィとして扱います。数値はディスプレイサイズ、ラベルはブリーフ最小の段階、色付きのカードではなく#6FFF00か文字色の上に置きます。数値だけが#6FFF00のアクセントを持ち、周囲は文字色に留まります。
- 残りを担うベース色. 彩度は1つの値（#6FFF00）に集中し、コピーを読まなくても次の操作が見つかる。#6FFF00と深いのブルー #13142Dのコントラストが、小さいサイズでもアクセントを読ませる。
- 語るのは大見出しのサイズ. Antonに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。サイズが大きくなるほど字間を詰めるため、14–68pxの範囲でディスプレイの行がまとまります。役割のないサイズは足さない。
モーションとインタラクション
反応するのは操作要素
ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態）。すべての要素を的にせずに、ページは反応して感じられる。モーダルを開いたりスクロールを乗っ取ったりする要素はなく、インタラクションは要素の内側にとどまる。この参考は640x470で収録しました。
静止も設計
これは640x470の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。動くのはポインターに反応する要素だけだ。
このAboutページが正しい理由
Orbis Helloが機能するのは、階層を飾りではなく判断で決めているから。ブリーフが14px〜68pxの可変型サイズ、20px刻みの余白を定めているので、新しいコピーは枠を開き直さず、その中に収まる。ライフスタイルの読み手に、訴求へ至る最短の正直な道を示す。
Aboutページを支えるタイミング
既製のアニメーションライブラリならもっと動く。このブリーフが求めるのはその逆で、ホバー状態と押下状態だけ、装飾は載せない。このAboutページで、動くために動く要素はない。この参考は640x470で収録しました。
Aboutページの再配置
ここでのレスポンシブは、尺度が変わり順序が変わらないこと。スケールは段階式ではなく可変。読み順はブリーフが置いた位置にとどまる。ビューポートに応じて変わるのは尺度で、順番は変わりません。この参考は640x470で収録しました。
よくある質問（FAQ）
Orbis Helloの土台になっているプロンプトはどれくらいの長さですか？
レイアウト、配色、タイポグラフィ、トランジションを記述したページ背後のプロンプト全文と、ブリーフを用意済みの状態でStudioへ引き継ぐワンクリックの導線です。プロンプトそのものはこのページには掲載していません。コピーするか、Studioへ送ってください。この参考は640x470で収録しました。
Orbis HelloはReactとTailwind CSSにどこまで依存していますか？
Orbis HelloはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Orbis Helloのブリーフは、自分で書くプロンプトと同じものですか？
ブリーフはそのまま使える1つの文書です。自分のツールに貼り付けてもよく、Studioに送って依頼として整えてもらうこともできます。上のセクションでは、その中の数値が何を担っているかを説明しています。この参考は640x470で収録しました。
