このテンプレートについて
DesignPro Academyは教育・コミュニティブランド向けの実用的な参考だ。ヒーローセクションはすでに配置され、寸法も測られ、いつでも作り直せる。カラースキームは黒 #000000の下地、白 #FFFFFFの文字、ティール #64CEFBのアクセントで、ページはInterで組む。納品物はReactとTailwind CSSで、800x569で記録しているため、コードを書く前に枠が決まっている。最初の画面で意図が伝わる必要がある教育・コミュニティブランドのヒーローセクションには、この参考が適している。収録したプロンプトは800x569で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、800x569の枠から最小の余白ステップまで含む。
対象
- 教育・コミュニティブランドヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- ヒーローセクションをモデルに指示する人は、3,038文字のプロンプトを出発点に使う。
- 見出しをDesignPro Academyと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- ページのグリッドに乗るバー. この行はコントラストを#64CEFBの操作1か所だけに使い、ワードマークとリンクは文字色に退く。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#64CEFBの操作だけがバーの中で重みを持つ要素です。
- スタイルを決めるタイポグラフィ. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInter、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。大見出し用の書体は1つのサイズでのみ使い、それ自体と競合しない。スケールはグレースケールで確認する。
- ファーストビュー上部のバッジ. お知らせは見出しの上の#64CEFBのピルで、補助コピーより小さいサイズにします。第二のタイトルではなくラベルとして読ませるためです。バッジが#64CEFBを持ち、見出しは文字色に留まります。
- 役割を明記した色. #64CEFB以外はすべて黒 #000000の上に載る。アクセントが装飾ではなく信号として読めるのはそのためだ。#64CEFBと黒 #000000のコントラストが、小さいサイズでもアクセントを読ませる。公開前に色の数を数える。
モーションとインタラクション
反応するのは操作要素
インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。この参考は800x569で収録しました。
モーションはほぼない
これは800x569の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。動くのはポインターに反応する要素だけだ。
このヒーローセクションが正しい理由
トレードオフは情報密度。このヒーローセクションは機能訴求型のレイアウトよりファーストビューで語らない。代わりに読み順を守り、長いページなら分散させる仕事をナビゲーション、お知らせのピル、背景のクリップが引き受ける。教育の読み手に、訴求へ至る最短の正直な道を示す。この参考は800x569で収録しました。
ヒーローセクションの背後にある順序
注意は偶然に任せず、導いている。順序はナビゲーション、お知らせのピル、背景のクリップと進み、各停留点は800x569のフレームに合わせて寸法を取るので、順番が崩れることはない。教育の読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションを支える数値
開発者に渡すなら、役に立つ成果物はブリーフだ。800x569のフレームを明記しており、2人の間で解釈する余地を残さない。このヒーローセクションに、初期値任せの部分はない。
よくある質問（FAQ）
DesignPro Academyの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは3,038文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
DesignPro Academyを作り直すのにReactとTailwind CSSは必要ですか？
DesignPro AcademyはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
DesignPro Academyの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x569で収録しました。
