このテンプレートについて
これはTech-Noir AboutのAboutページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。配色は赤 #C40010の下地、明るいの赤 #FF0000のアクセントに絞り、書体はManrope。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。記録されたブリーフから始め、Aboutページをゼロから作り直すのではなく編集する。
対象
- このAboutページは、キックオフに同席していない相手へ640x470のフレームを説明する必要があるチームに応える。
- このAboutページにブロックを足していく社内チームには、16px〜120pxの可変型サイズ、100px刻みの余白を変えずに新しいブロックへ引き継ぐ必要がある。
- AI・SaaSプロダクトAboutページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- 明記された寸法. 寸法は収録時点のブリーフに16px〜120pxの可変型サイズ、100px刻みの余白として書かれている。再現は近似ではなく検証になる。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
- アクセントの節度. #FF0000は操作系だけに使い、他では使わない。彩度の高い色が赤 #C40010の上に載っても主張しすぎないためだ。ほかはすべて赤 #C40010の上にあり、彩度の高い配色でも読めるのはそのためです。ブランドの差し替えで触る値は1つで済ませる。
- 1画面に収まる構造. ファーストビュー内の要素は、どれも置かれるべき理由があります。ブリーフはコピー、640x470のフレーム、文字サイズを名指しし、それらと競う装飾は残していません。ページは640x470の1つの構図です。コピーが変わっても崩れないのはそのためです。
- 規律をもって使う1書体. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのManrope、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。サイズが大きくなるほど字間を詰めるため、16–120pxの範囲でディスプレイの行がまとまります。
モーションとインタラクション
静止も設計
仕様はアニメーションを省き、640x470のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。動きは操作要素にとどめる。
モーションはほぼない
仕様はアニメーションを省き、640x470のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。
Tech-Noir Aboutの最初の読みの順序
1本の読みの経路を選ぶことは、他の経路を閉じること。ブリーフはそれを受け入れ、背景のクリップを固定し、16px〜120pxの可変型サイズ、100px刻みの余白を経路の明快さに使う。 SaaSの読み手は、選択肢より先に訴求を受け取る。
Aboutページの再配置
狭い幅のレイアウトは継承ではなく設計している。スケールは段階式ではなく可変。幅ごとに決まっているので、階層は再配置を越えて残る。操作部はタップできる大きさを保ち、コピーはどの幅でも読む順番を維持します。この参考は640x470で収録しました。
Tech-Noir Aboutを仕様として読む
この参考が再利用できる理由はここにある。16px〜120pxの可変型サイズ、100px刻みの余白。どこも初期値に委ねられていないので、これらの数値を保つ差し替えなら構図もそのまま残る。このAboutページに、初期値任せの部分はない。
よくある質問（FAQ）
Tech-Noir Aboutのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは3,555文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Tech-Noir Aboutのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された3,555文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Tech-Noir AboutはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
