このテンプレートについて
CodeNest Coding Platformは800x576で記録し、ギャラリー用の画像ではなく仕様として残した。配色は黒 #000000の下地、グリーン #5ED29Cのアクセントに絞り、書体はInstrument Serif。納品物はReactとTailwind CSSで、800x576で記録しているため、コードを書く前に枠が決まっている。この参考例は、作り始める前にファーストビューを固めたい教育・コミュニティブランド向け。収録したプロンプトは800x576で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、800x576の枠から最小の余白ステップまで含む。
対象
- まず50px刻みの余白から決めろ。配色は後からついてくる。このヒーローセクションを読ませているのは余白だ。
- ヒーローセクションをモデルに指示する人は、2,581文字のプロンプトを出発点に使う。
- 見出しをCodeNest Coding Platformと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 邪魔にならないナビゲーションバー. リンクは同じ文字サイズで1行に並び、#5ED29Cの操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。バーは独自の背景を持たずに800x576の構図の上に載るため、その下のメディアは端から端まで届きます。バー1つにつき操作は1つ。
- ブリーフで固定した寸法. リストは短く（50px刻みの余白）、システム全体を手作業で確認できる。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。
- 構造を作るのはカード. 構造はグリッドそのものだ。同じ大きさのパネルをInstrument Serifで組み、視線が下ではなく横へ動くように並べる。グリッドは1列に畳んでもパネルの順序を変えない。
- 1書体、2つの役割. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInstrument Serifがあり、そこから補助コピーへはっきり落とします。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。
モーションとインタラクション
インタラクティブ層はコントロール
インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。この参考は800x576で収録しました。
邪魔をしないモーション
これは800x576の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。仕様にアニメーションライブラリはなく、作り直しは小さく済む。静止も有効な選択だ。
教育・コミュニティに効くところ
既製のヒーローとこのヒーローセクションは同じ部品を使う。違うのは、ナビゲーション、見出し、数値の行、カードグリッド、背景のクリップで順序づけ、50px刻みの余白で測っている点。だから画面は入れ物ではなく順序として読める。 CodeNest Coding Platformは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
CodeNest Coding Platformの最初の読みの順序
ここでは順序そのものがデザイン。訴求が実績より先に届くようナビゲーション、見出し、数値の行、カードグリッド、背景のクリップを置き、両者の距離を50px刻みの余白が決める。教育の読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションの再配置
ここでは書体を段階的ではなくクランプで決めており（40px〜50pxのクランプ）、幅を変えても見出しのサイズが跳ねない。幅が変えるのは寸法で、読みの経路ではない。
よくある質問（FAQ）
CodeNest Coding Platformの土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。800x576のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
CodeNest Coding PlatformはReactとTailwind CSSにどこまで依存していますか？
CodeNest Coding PlatformはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
CodeNest Coding Platformの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x576で収録しました。
