このテンプレートについて
これはAurelion Blogのブログセクションを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。ページ全体は白 #F3F4F4の下地、黒 #1A1A1Aの文字、イエロー #F3DE58のアクセントでできている。納品形式はReactとTailwind CSSなので、ブログセクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。ページはモーションを700msのトランジション、ループする動画の下地にとどめる。 AI・SaaSのブログセクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。このページの残りは、ブログセクションをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。
対象
- ブログセクションの構造はまるごと借り、1400x1080のフレームに照らして行ごとにコピーを差し替えろ。
- プロダクトマーケターで、コピーの背後に6.5sのループ映像があってもブログセクションが読める状態を保ちたい。
- 複数案件を同時に進めるスタジオ責任者は、このブログセクションを他ページが踏襲する型として使う。
含まれる内容
- 1つの幅で折りたたむリンク. ワードマーク、リンク、#F3DE58の操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#F3DE58の操作だけがバーの中で重みを持つ要素です。
- ビューポート基準の計測. サイズは継承ではなく明記されています（30px刻みの余白、700msのトランジション）。書体やコピーを差し替えても、この関係は保たれます。余白は文字と同じ単位で書かれ、そのまま比較できる。調整の前に測る。
- ループが背景になる. 1400x1080の画幅は1本のループで埋まる。コピーの後ろで再生し、操作系を必要としない。1400x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
- 静かな下地に置くアクセント. アクセントはイエロー #F3DE58の1色だけで、白 #F3F4F4と対になります。残りの仕事は第二の色ではなく文字が担います。ほかはすべて白 #F3F4F4の上にあり、彩度の高い配色でも読めるのはそのためです。公開前にベース色との組み合わせを確認してください。
モーションとインタラクション
ループが環境演出を担う
環境の動きはスクロール演出ではなく6.5秒の1400x1080ループから生まれる。だからページは落ち着き、文字は読める。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。
効く場所だけポインター
フィードバックはすべてのカードではなくボタンとリンクのホバー状態、必要なときに内容を送るスライダーに限る。密度の高い最初の画面が煩くならないのはそのためだ。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。この参考は1400x1080で収録しました。
ブログセクションを支えるタイミング
値ではなくパターンを真似たい。700msのトランジション、6.5sのメディアループ、一語ずつ現れる見出しの組み立ては保ち、持続時間だけ自社ブランドの数値に置き換える。このブログセクションで、動くために動く要素はない。
Aurelion Blogで最初に変えるもの
多くの人はアクセントカラーから始める。代わりに訴求から始める。見出しの一行を書き換え、イエロー #F3DE58を自社のメディアで検証し直す。別のブランドでも枠ごと再利用できる。
ブログセクションの再配置
広い幅では構成は密度が高い。狭い幅ではスケールは段階式ではなく可変。どちらの状態も同じ1本のブリーフに書かれており、後から足したものではない。幅が変えるのは寸法で、読みの経路ではない。この参考は1400x1080で収録しました。
よくある質問（FAQ）
Aurelion Blogのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは5,024文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Aurelion Blogのプロンプトはなぜここに掲載されていないのですか？
このページに引用している内容はすべて、収録された5,024文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Aurelion BlogはReactとTailwind CSSにどこまで依存していますか？
Aurelion BlogはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
