LaunchEx Aboutの制作会社・スタジオAboutページデザインとプロンプト

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

LaunchEx Aboutは制作会社・スタジオ向けのAboutページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。色は白 #F0F5F7の下地、ティール #154359の文字、ティール #4BBDF0のアクセントに限り、Interで組んでいる。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。制作会社・スタジオのAboutページが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。

対象

制作会社・スタジオAboutページの外観を差し替えるグロース担当は、訴求コピーを変えても640x464の画角を保ちたい。
このAboutページは、レイアウトの中で14px〜54pxの可変型サイズ、100vhのセクションが何を決めているのかを知りたい実装者に答える。
Aboutページをモデルに指示する人は、6,908文字のプロンプトを出発点に使う。

含まれる内容

明記された余白の刻み. サイズは継承ではなく明記されています（14px〜54pxの可変型サイズ、100vhのセクション、14px刻みの余白）。書体やコピーを差し替えても、この関係は保たれます。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
表ではなく統計の一行. 数値の行をファーストビューの中に置き、Interのスケール最大で組みます。#4BBDF0は主張を担う数値だけに残します。数値だけが#4BBDF0のアクセントを持ち、周囲は文字色に留まります。ラベルのサイズはキャプションの段階に合わせてください。
書体が決める階層. 書体はサイズと一緒に書いてある（Inter、14–54px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、14–54pxの範囲でディスプレイの行がまとまります。
段落ではなくパネル. 構造はグリッドそのものだ。同じ大きさのパネルをInterで組み、視線が下ではなく横へ動くように並べる。各パネルは1つの考えとアイコンを組み合わせるため、視線の流れは横方向に保たれます。パネルの順序がそのまま読み順です。

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

見せ場は到達の順序

行ごとのマスク表示が最初の画面を担う。その下の構図は静止したままなので、動きは装飾ではなくページが組み上がっていく過程として読める。効果は要素ごとに1回だけ走り、ページを開いている間も繰り返さない。この参考は640x464で収録しました。

インタラクションは局所に

ページが反応するのは操作できる場所だけ。すべてのカードではなくボタンとリンクのホバー状態。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。この参考は640x464で収録しました。

LaunchEx Aboutの最初の読みの順序

制作会社の読み手は、1画面に着くと読む前に走査する。このレイアウトはそれに応える。数値の行、カードグリッドは走査される寸法で置き、14px〜54pxの可変型サイズ、100vhのセクションが各停留点を区別する。制作会社の読み手は、選択肢より先に訴求を受け取る。

LaunchEx Aboutを仕様として読む

ブリーフは仕様書であって、雰囲気の覚書ではない。14px〜54pxの可変型サイズ、100vhのセクション、14px刻みの余白を明記し、周りを設計する前に640x464のメディア枠を決めている。このAboutページに、初期値任せの部分はない。

Aboutページを自社のものにする

再利用できるのは構図のほうで、題材は自分のものである。見出しを入れ替え、タイプスケール（14px〜54pxの可変型サイズ）は維持し、#4BBDF0のアクセントを自社のメディアの上で測り直す。新しい要素が提供内容や次の操作の説明に寄与しないなら、それはファーストビューの下に置く。新しい要素が提供内容や次の操作の説明に寄与しないなら、ファーストビューの下に置くのが正解です。