このテンプレートについて
Blog Showcaseは書き下ろされたブリーフ1本から組んだ制作会社のブログセクションで、このページはそのブリーフを記録している。色は白 #FCFCFCの下地、赤 #7D1A4Aの文字に限り、Outfitで組んでいる。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。動きは0.5sのトランジション、cubic-bezier(0.33, 1, 0.68, 1)だけで完結する。主題ではなく構造を借りる。ブログセクションとその数値は、そのまま自社ブランドに移せる。収録したプロンプトは640x478で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、640x478の枠から最小の余白ステップまで含む。
対象
- 制作会社・スタジオブログセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- ブログセクションをモデルに指示する人は、4,151文字のプロンプトを出発点に使う。
- 見出しをBlog Showcaseと同じ長さに保ったままブログセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 目分量ではなく実測. 寸法は収録時点のブリーフに20px刻みの余白、0.5sのトランジション、cubic-bezier(0.33, 1, 0.68, 1)のイージングとして書かれている。再現は近似ではなく検証になる。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。レイアウトと一緒に数値も持っていく。
- 役割が明確な2書体. 大見出しはOutfitで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。ブリーフが置いたサイズと字重を動かさなければ、書体の差し替えは安全だ。スケールはグレースケールで確認する。
- ブランドを担うフッター. リンクは列にまとめ、ワードマークは独立したブロックに置きます。長いフッターが単なる一覧にならず、読める状態に保たれます。アクセントは帯全体ではなく、フッターの操作1つにだけ再利用します。この参考は640x478で収録しました。
- 同じ重みのパネル. 構造はグリッドそのものだ。同じ大きさのパネルをOutfitで組み、視線が下ではなく横へ動くように並べる。パネル内の見出しは、ページ見出しの1段下ではなく、自分の本文の1段上に置く。
モーションとインタラクション
状態変化にも時間を与える
モーションはミリ秒単位で測る。0.5s、cubic-bezier(0.33, 1, 0.68, 1)を使い。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。イージングは再生時間と一緒に指定されている（0.5s）ので、作り直しの際に別の感触へ黙って差し替わることはない。イージングを変えるなら全体で変える。
ホバーは控えめに
ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。この参考は640x478で収録しました。
制作会社・スタジオがここで得るもの
4,151文字のブリーフが、余分のない1画面を生む。値は明示されており（20px刻みの余白、0.5sのトランジション）、言葉が変わっても構成が読めるのはそのため。 Blog Showcaseは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
Blog Showcaseの最初の読みの順序
いまのページが機能を先頭に置いているなら、真似すべきはこの順序。見出し、お知らせのピル、カードグリッド、背景のクリップ、フッターを前に、補足を後ろに、距離は20px刻みの余白、0.5sのトランジションが決める。制作会社の読み手は、選択肢より先に訴求を受け取る。
ブログセクションの再配置
セクションを隠して済ませるモバイル用レイアウトと比べる。これは隠さず、形を変える。スケールは段階式ではなく可変。中身は減らさない。どちらの状態も同じブリーフに書かれている。この参考は640x478で収録しました。
よくある質問（FAQ）
Blog Showcaseの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは4,151文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Blog ShowcaseはReactとTailwind CSSにどこまで依存していますか？
Blog ShowcaseはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Blog Showcaseにはどこまでアニメーションが入っていますか？
トランジションはスクロールのタイムラインではなく、インターフェースの状態に紐づいており、0.5sの範囲で収束します、cubic-bezier(0.33, 1, 0.68, 1)を使い。値はブリーフに記録されているので、移植のたびに勘で合わせる必要はありません。
