このテンプレートについて
Portfolio Aboutは制作会社・スタジオ向けのAboutページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。配色は黒 #0C0C0Cの下地、白 #D7E2EAの文字で、書体はKanit。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。動きは200msのトランジションだけで完結する。主題ではなく構造を借りる。 Aboutページとその数値は、そのまま自社ブランドに移せる。
対象
- 制作会社・スタジオAboutページの外観を差し替えるグロース担当は、訴求コピーを変えても640x468の画角を保ちたい。
- 複数案件を同時に進めるスタジオ責任者は、このAboutページを他ページが踏襲する型として使う。
- 制作会社・スタジオAboutページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- 実装まで持ち込む数値. 寸法は収録時点のブリーフに160px刻みの余白、200msのトランジションとして書かれている。再現は近似ではなく検証になる。リストの最小値と最大値が、構図の可動範囲を決める。
- お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にKanitの最小段階で置き、その位置を争う要素はほかにありません。ピルはブリーフ最小の段階に置くため、第二のタイトルではなくラベルとして読めます。
- 数字の下に置くラベル. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。 Aboutページが機能リストに変わるのを防ぐためです。数字は1つの字重で組み、行の中で統計に序列を付けない。この参考は640x468で収録しました。
- 文字として組む機能リスト. 機能はカードの壁ではなくKanitのリストとして組みます。項目はサイズもマーカーも共通なので、長いリストでも拾い読みできます。
モーションとインタラクション
コントロールは共通の時間
ホバー、押下、フォーカスはいずれも200msで解決する。インターフェースが即座に感じられるのはそのためだ。コントロール間で同じ値を再利用するので、時間がばらけようがない。
スクロールでセクションが届く
最初の画面はスクロール前から完成していて、固定された要素が位置を保ち、その下を内容が流れるはそれを置き換えずに足す。この効果は装飾なので、切っても階層は成立する。この参考は640x468で収録しました。
Aboutページを自社のものにする
白紙から始める場合と比べる。ここでは枠（640x468）と160px刻みの余白、200msのトランジションがすでに決まっているので、作業は構成ではなく差し替えになる。新しい要素が提供内容や次の操作の説明に寄与しないなら、ファーストビューの下に置くのが正解です。
Portfolio Aboutの最初の読みの順序
このAboutページには明示された読みの経路がある。そこから視線はお知らせのピル、数値の行、機能リストを順にたどる。1画面が箇条書きに見えないのはそのため。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は640x468で収録しました。
このAboutページが立てる主張
このAboutページの判断を数え上げると、すべて1つの文書に行き着く。640x468の枠、書体、リズムを記した5,431文字だ。制作会社の読み手に、訴求へ至る最短の正直な道を示す。
よくある質問（FAQ）
Portfolio Aboutの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは5,431文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
手に入れたPortfolio Aboutのブリーフで、何ができますか？
このページに引用している内容はすべて、収録された5,431文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Portfolio AboutはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
