このテンプレートについて
Radial Diagramは判断の履歴を残しており、この機能紹介セクションを生んだブリーフは5,364文字。見出しは「Our Comprehensive Branding Approach」で、機能紹介セクションの残りはその周りに配置されている。色は黒 #191919の下地、白 #EAEAEAの文字に限り、DM Sansで組んでいる。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。ブリーフはモーションの予算を0.7sのトランジションに使う。制作会社の機能紹介セクションを発注するなら、この構成から始めて主題だけ差し替える。以下に引用する値はすべてこのブリーフのもので、640x476の枠から最小の余白ステップまで含む。
対象
- 見出しをRadial Diagramと同じ長さに保ったまま機能紹介セクションを書き換えるコンテンツ責任者のために作った。
- この機能紹介セクションは、DM Sansに触れずに見出しをA/Bテストするグロース担当に向く。
- 自社書体でRadial Diagramの機能紹介セクションを描き直すなら、DM Sansの字面比率を保て。字サイズの段階が合わなくなる。
含まれる内容
- ビューポート基準の計測. リストは短く（60px刻みの余白、0.7sのトランジション）、システム全体を手作業で確認できる。余白は文字と同じ単位で書かれ、そのまま比較できる。
- 役割が明確な2書体. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのDM Sansがあり、そこから補助コピーへはっきり落とします。ブリーフが置いたサイズと字重を動かさなければ、書体の差し替えは安全だ。
- コピーが先、装飾は後. 機能紹介セクションは、コピーが何より先に届くように組まれています。階層は文字が担い、640x476のフレームが構図を保ち、補助の値は静かに留まります。ページは640x476の1つの構図です。コピーが変わっても崩れないのはそのためです。
- 表ではなく統計の一行. 数字はDM Sansで、本文よりも見出しに近いサイズで組む。アクセントは主張を担う数字だけに使い、行全体には使わない。
モーションとインタラクション
効く場所だけポインター
フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限る。密度の高い最初の画面が煩くならないのはそのためだ。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。この参考は640x476で収録しました。
時間も仕様に書く
ホバー、押下、フォーカスはいずれも0.7sで解決する。インターフェースが即座に感じられるのはそのためだ。イージングは再生時間と一緒に指定されている（0.7s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
機能紹介セクションを支える数値
スクリーンショットはページがどう見えるかを伝え、ブリーフはなぜそうなのかを伝える。60px刻みの余白、0.7sのトランジションがその間を埋める。この機能紹介セクションに、初期値任せの部分はない。
この機能紹介セクションが正しい理由
テンプレートのヒーローと比べると、違いは引かれているものにある。カードグリッドもカルーセルも第二のCTAもなく、数値の行だけが60px刻みの余白、0.7sのトランジションに合わせて寸法を取る。 Radial Diagramは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
Radial Diagramで動くもの
アニメーションの対象を数え上げると、一覧はすぐ終わる。0.7sのトランジション、ホバー状態と押下状態だけで、ほかに動く要素はない。入場演出もスクロール連動も、この一覧の外にはない。この機能紹介セクションで、動くために動く要素はない。
よくある質問（FAQ）
Radial Diagramのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは5,364文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Radial Diagramを作り直すのにReactとTailwind CSSは必要ですか？
Radial DiagramはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Radial Diagramのトランジションを残したまま、時間だけ変えることはできますか？
トランジションはスクロールのタイムラインではなく、インターフェースの状態に紐づいており、0.7sの範囲で収束します。値はブリーフに記録されているので、移植のたびに勘で合わせる必要はありません。
