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

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

Portfolio Cosmicはポートフォリオページの仕様書として読める。値はページを組む前に書き出されていた。「Designing seamless digital interactions by focusing on the unique nuances which bring systems to life」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。カラースキームは黒 #000000の下地、白 #D1DAD8の文字、ブルー #4E85BFのアクセントで、ページはInterで組む。納品物はReactとTailwind CSSで、800x562で記録しているため、コードを書く前に枠が決まっている。モーションは2700msのトランジションで、コピーが主役のままになる程度に抑えている。3Dのポートフォリオページを発注するなら、この構成から始めて主題だけ差し替える。

対象

このポートフォリオページにブロックを足していく社内チームには、13pxで固定した表示サイズ、300vhのセクションを変えずに新しいブロックへ引き継ぐ必要がある。
3D・ゲーム・エンタメブランドポートフォリオページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
ポートフォリオページをモデルに指示する人は、8,253文字のプロンプトを出発点に使う。

含まれる内容

意図的に細いナビゲーション. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#4E85BFの1つだけ。いずれも独自の背景を持たずにポートフォリオページの上に載ります。リンクはワードマークより小さいサイズで組み、#4E85BFの操作だけがバーの中で重みを持つ要素です。
明記された余白の刻み. ブリーフは数値を名指ししています（13pxで固定した表示サイズ、300vhのセクション、13px刻みの余白、2700msのトランジション）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。差し替えるのは書体かコピーで、スケールではありません。
同じ重みのパネル. 構造はグリッドそのものだ。同じ大きさのパネルをInterで組み、視線が下ではなく横へ動くように並べる。どのパネルも内部の配置は同じで、グリッドは形で見渡せる。読む順序とパネルの順序を一致させる。
コピーが先、装飾は後. 800x562で構図は完成しています。コピー、メディア、操作要素はすべてブリーフで名指しされています。ページは800x562の1つの構図です。コピーが変わっても崩れないのはそのためです。ファーストビューに装飾は要りません。

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

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

アニメーションの予算は小さく、明示されている。2700ms。適用先は入場ではなく状態変化だ。ページが設計されているように読めるのは時間が短いからで、既定の遅い値ならこの構図は崩れる。イージングを変えるなら全体で変える。

途切れない横方向の動き

横方向の帯は見出しに次いで目立つ要素だ。途切れない動き、アクティブな項目の#4E85BF、そして読者に操作を求めない。アクティブな項目はサイズ変更ではなく#4E85BFで示す。

Portfolio Cosmicで最初に変えるもの

ポートフォリオページを自社のものにするのに作り直しは要らない。見出しとメディアを差し替え、スケール（13pxで固定した表示サイズ、300vhのセクション）を守れば、レイアウトは設計どおりに読める。フレームとスケールは保ち、変えるべきなのは題材のほうです。

Portfolio Cosmicで動くもの

テンプレートがすべてのセクションを登場時に動かすのに対し、これは2700msのトランジション、パララックスレイヤー、固定要素だけを動かし、あとは止める。このポートフォリオページで、動くために動く要素はない。

このポートフォリオページが正しい理由

トレードオフは情報密度。このポートフォリオページは機能訴求型のレイアウトよりファーストビューで語らない。代わりに読み順を守り、長いページなら分散させる仕事をナビゲーション、お知らせのピル、数値の行、カードグリッド、背景のクリップが引き受ける。3Dの読み手に、訴求へ至る最短の正直な道を示す。この参考は800x562で収録しました。