このテンプレートについて
Digital Directorは制作会社・スタジオ向けのポートフォリオページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。ページ自身の見出しは「Adam Roberts - Design & Engineering」で、構図はその言葉をそのまま中心に組まれている。色は黒 #000000の下地、白 #FFFFFFの文字に限り、Interで組んでいる。納品形式はReactとTailwind CSSなので、ポートフォリオページ全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。ページはモーションを400msのトランジション、cubic-bezier(0.16,1,0.3,1)、ループする動画の下地にとどめる。新しいセクションを足す前にポートフォリオページの順序を決めたいときに使う。
対象
- このポートフォリオページを引き継ぐ外部チームには、最初のコミット前に1472x1080のフレームをリポジトリへ固定する必要がある。
- ポートフォリオのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
- このポートフォリオページを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。
含まれる内容
- 1つの幅で折りたたむリンク. バーは1行のテキストと1つの操作だけで、10px刻みの余白、400msのトランジションとして測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに1472x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
- 雰囲気を担うメディア1つ. 7sの素材1つがファーストビュー全体を支え、同期させる2つ目のメディア要素はない。ループは7sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 役割が明確な2書体. Interに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。行の高さは単一の共通値ではなく、サイズの刻みに合わせる。刻みは残し、書体だけ差し替える。
- 実装まで持ち込む数値. レイアウトは比率ではなく絶対値で組む（10px刻みの余白、400msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージング）。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
モーションとインタラクション
短く揃えた時間
ブリーフはトランジションの値を400msに固定しているので、作り直すときに遅い既定値で代用できない。時間が短いので、フィードバックはアニメーションではなく応答として読める。
スクロールライブラリなしの環境モーション
背景の映像は7秒、1472x1080でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。映像はミュートかつインラインなので、操作なしで最初のフレームが出る。
ポートフォリオページの背後にある順序
ブリーフは8,947文字で、読み順を明示している。ナビゲーション、見出し、数値の行、機能リスト、背景のクリップをこの順に並べ、その間の距離を10px刻みの余白、400msのトランジションで決めている。順序を入れ替えれば、この距離も意味を失う。制作会社の読み手は、選択肢より先に訴求を受け取る。
Digital Directorで最初に変えるもの
色ではなくコピーから始める。「Adam Roberts - Design & Engineering」を自社製品についての1文に書き換え、ブリーフのサイズでInterに組む。別のブランドでも枠ごと再利用できる。
ポートフォリオページの再配置
設計された狭い幅のレイアウトは、詰め込みより多くの判断を要する。ブリーフはその分を先に払っている。ナビゲーションはモバイルメニューに畳まれる。実装時に発見するのではなく、明示されている。どちらの状態も同じブリーフに書かれている。この参考は1472x1080で収録しました。
よくある質問（FAQ）
Digital Directorの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは8,947文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Digital Directorのプロンプトはなぜここに掲載されていないのですか？
このページに引用している内容はすべて、収録された8,947文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Digital Directorのポートフォリオページを別の技術スタックで作り直せますか？
Digital DirectorはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
