3D Portfolioの3D・ゲームポートフォリオデザインとプロンプト

このテンプレートについて

3D Portfolioは、3D・ゲーム・エンタメブランドがポートフォリオページで抱える課題を記録済みのブリーフ1本で解く。「Jack — 3D Creator」は、レイアウトが背負うために組まれた一行。配色は黒 #0C0C0Cの下地、白 #D7E2EAの文字。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。モーションの予算は200msのトランジション、ループする動画の下地。記録されたブリーフから始め、ポートフォリオページをゼロから作り直すのではなく編集する。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、ポートフォリオページを作り直すときに背後の意図を推測せずに済む。

対象

このポートフォリオページからは、他の何よりも先に1472x1080の画角と85vhのセクション、160px刻みの余白を持っていけ。
複数案件を同時に進めるスタジオ責任者は、このポートフォリオページを他ページが踏襲する型として使う。
プロダクトマーケターで、コピーの背後に6.4sのループ映像があってもポートフォリオページが読める状態を保ちたい。

含まれる内容

ドロワーを持たない一行. ナビゲーションは1行だけで、下に第2階層を持たない。バーは独自の背景を持たずに1472x1080の構図の上に載るため、その下のメディアは端から端まで届きます。ワードマークには文字が必要とする以上の幅を与えない。
ブリーフに直書きされたサイズ. レイアウトは比率ではなく絶対値で組む（85vhのセクション、160px刻みの余白、200msのトランジション）。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。ページを持ち込むときも、名指しされた値はそのまま使ってください。
文字の背後に全面配置したクリップ. 1472x1080の動画がコピーの背後で6.4sのループ再生を行います。ミュートかつインラインで、両者の間に色のレイヤーはありません。自動再生が使えないときは1472x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。書き出しは1472x1080以上にして、トリミングを正確に保ってください。
文章ではなくグリッド. 文章を流し込む場所にパネルを並べている。ポートフォリオページを見渡せるのはそのためだ。グリッドはパネルの順序を変えずに1列へ折れます。この参考は1472x1080で収録しました。

モーションとインタラクション

アニメーションの予算はこれで全部

コントロールは200msで変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。イージングを変えるなら、時間も一緒に見直す必要がある。イージングを変えるなら全体で変える。

最初の画面はキャンバスが支える

ビジュアルは静止画として読み込むのではなく実行時に生成される（主要素にかかった3Dトランスフォーム）。だから1472x1080の画枠は素材が1つ少なくて済む。静止画ではなく描画なので、中心の要素はどのサイズでも成立する。

ポートフォリオページを自社のものにする

再利用できるのは構成で、主題は自社のもの。85vhのセクション、160px刻みの余白を残し、言葉、メディア、ブランドマークを差し替える。フレームとスケールは保ち、変えるべきなのは題材のほうです。

ポートフォリオページを支える数値

85vhのセクション、160px刻みの余白、200msのトランジションにコミットすることは、柔軟性と引き換えに再現性を得る取引。同じページを別のブランドで、新たな推測なしに作るのがこの参考例の狙い。このポートフォリオページに、初期値任せの部分はない。

ポートフォリオページの再配置

狭い画面は縮めても直らない。このブリーフは代わりに書体とナビゲーションで変化を処理する。スケールは段階式ではなく可変、セクションは85vhに固定。狭い幅のレイアウトは縮小ではなく判断であり、階層もそのまま保たれます。

よくある質問（FAQ）

3D Portfolioの背後のブリーフには、実際に何が入っていますか？

収録されたブリーフは13,877文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。

手に入れた3D Portfolioのブリーフで、何ができますか？

このページに引用している内容はすべて、収録された13,877文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。

3D Portfolioのポートフォリオページを別の技術スタックで作り直せますか？

3D PortfolioはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。