Personal Showcaseの制作会社・スタジオポートフォリオデザインとプロンプト

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

これはPersonal Showcaseのポートフォリオページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。配色は深いのブルー #050E13の下地、白 #EFEEE9の文字に絞り、書体はInter。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。モーションは300msのトランジション、cubic-bezier(0.76, 0, 0.24, 1)、ループする動画の下地に限っている。制作会社・スタジオのポートフォリオページを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。このページの残りは、ポートフォリオページをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。

対象

モデルに指示を出すなら、ポートフォリオから始めて1462x1080のフレームをプロンプトに保持させろ。
このポートフォリオページを引き継ぐマーケターは、16vhのセクション、28px刻みの余白で書き直しが尺度を保ったか確認する。
プロダクトマーケターで、コピーの背後に12.9sのループ映像があってもポートフォリオページが読める状態を保ちたい。

含まれる内容

背景を持たないナビゲーション. 短いリンク列と1つの操作がポートフォリオページの上に載り、寸法は16vhのセクション、28px刻みの余白で抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに1462x1080の構図の上に載るため、その下のメディアは端から端まで届きます。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
スケールがスタイルになる. タイポグラフィはInterです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。行の高さは単一の共通値ではなく、サイズの刻みに合わせる。スケールは明記されています。それを使ってください。
ビューポート基準の計測. レイアウトは固定値（16vhのセクション、28px刻みの余白、300msのトランジション、cubic-bezier(0.76, 0, 0.24, 1)のイージング）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。再現は同じ数値で検証する。
効いてくるポスターフレーム. 背景は1462x1080の12.9sループ1本だけで、coverでトリミングし、色は一切載せていません。ほかの要素はすべて上のレイヤーに浮かびます。ループは12.9sと短く、目にはタイムラインではなくテクスチャとして映ります。

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

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

アニメーションの予算は小さく、明示されている。300ms、cubic-bezier(0.76, 0, 0.24, 1)を使い。適用先は入場ではなく状態変化だ。時間が短いので、フィードバックはアニメーションではなく応答として読める。ブラウザの既定値のまま出さない。

スクロールライブラリなしの環境モーション

12.9秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。映像が短いので切れ目なくループでき、解像度よりもその点が効く。この参考は1462x1080で収録しました。

Personal Showcaseの最初の読みの順序

いまのページが機能を先頭に置いているなら、真似すべきはこの順序。ナビゲーション、数値の行、フッターを前に、補足を後ろに、距離は16vhのセクション、28px刻みの余白が決める。制作会社の読み手は、選択肢より先に訴求を受け取る。

Personal Showcaseで最初に変えるもの

再利用できるのは構成で、主題は自社のもの。16vhのセクション、28px刻みの余白を残し、言葉、メディア、ブランドマークを差し替える。色に触る前に、見出しの一行を書き換える。

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

デスクトップの構図は1462x1080を基準に解かれ、狭い幅のレイアウトは継承ではなく設計されている（セクションは16vhに固定、ナビゲーションはモバイルメニューに畳まれる、モーションに低減モーションの分岐がある）。モーションには低減モーションの分岐があり、メディアにはポスターフレームがあるので、自動再生が使えない環境でもページは内容を伝える。モバイル版は判断であり、代替ではない。