このテンプレートについて
Digital Epochは制作会社・スタジオ向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。配色は白 #F9FAFBの下地、深いのブルー #0A152Dの文字、深いのブルー #0A1B33のアクセントに絞り、書体はInter。納品物はReactとTailwind CSSで、800x589で記録しているため、コードを書く前に枠が決まっている。書いている間は開いておく。4,594文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは800x589で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、800x589の枠から最小の余白ステップまで含む。
対象
- まず数値が要るデザイナー。12px〜56pxの可変型サイズ、12px刻みの余白、すべて仕様からの引用である。
- 見出しをDigital Epochと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- このヒーローセクションは、商談の場でブランド責任者へ#0A1B33の選択を説明するマーケターに応える。
含まれる内容
- 意図的に細いナビゲーション. ワードマーク、リンク、#0A1B33の操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#0A1B33の操作だけがバーの中で重みを持つ要素です。バーの要素はわずか数個なので、コンポーネントライブラリなしで組み直せます。
- 明記された余白の刻み. 寸法は800x589のレンダリングから読み取った（12px〜56pxの可変型サイズ、12px刻みの余白）。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。差し替えるのは書体かコピーで、スケールではありません。
- 順序を決めるグリッド. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。パネルの高さはコピーに従い、行が長くなっても列の揃いが崩れない。パネル数はコピーに合わせて決める。
- 残りを担うベース色. アクセントは深いのブルー #0A1B33の1色だけで、白 #F9FAFBと対になります。残りの仕事は第二の色ではなく文字が担います。#0A1B33と白 #F9FAFBのコントラストが、小さいサイズでもアクセントを読ませる。
モーションとインタラクション
途切れない横方向の動き
マーキーが構図を横切って無限にループする。書体はInterで、スクロールで動くものがなくてもページに動きが残る。アクティブな項目はサイズ変更ではなく#0A1B33で示す。
ホバーは意味のある場所だけに
インタラクティブな層は意図的に小さい（すべてのカードではなくボタンとリンクのホバー状態）。状態が単純なので、どんなコンポーネント体系にも移植できる。ホバーでレイアウトにアニメーションを付けない。この参考は800x589で収録しました。
制作会社のブリーフが効く理由
Digital Epochは制作会社・スタジオ向けのヒーローセクション参考であり、この対象読者が実際に抱える課題に答えている。配色は白 #F9FAFBと深いのブルー #0A1B33の2色に絞られ、書体はInterで組まれているので、借り物の流行に寄りかかる要素がない。制作を依頼するとき写すべきなのはこの部分である。表示サイズで約束を一つだけ置き、支える情報はすべてその下に収める。制作会社の読み手に、訴求へ至る最短の正直な道を示す。
ヒーローセクションを自社のものにする
多くの人はアクセントカラーから始める。代わりに訴求から始める。見出しの一行を書き換え、深いのブルー #0A1B33を自社のメディアで検証し直す。変えるべきなのは主題の部分だ。
Digital Epochを仕様として読む
具体的な数値は古びる。800x589に合う値が自社の枠に合うとは限らない。それでもブリーフが12px〜56pxの可変型サイズ、12px刻みの余白を書くのは、明示された値のほうが明示されていない値より変更しやすいから。このヒーローセクションに、初期値任せの部分はない。
よくある質問（FAQ）
Digital Epochのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。800x589のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Digital EpochはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Digital Epochから作り直したページを、クレジット表記なしで公開してもよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x589で収録しました。
