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

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

Creative Portfolioは制作会社・スタジオ向けのポートフォリオページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。「I craft bold brands and modern websites with purpose」は、レイアウトが背負うために組まれた一行。配色は深いのグリーン #181B17の下地、白 #DED9CFの文字、明るいのブルー #309ADAのアクセントに絞り、書体はFigtree。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。モーションは1200msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)で、コピーが主役のままになる程度に抑えている。初見用ではなく、作り直しに耐える制作会社・スタジオのポートフォリオページのブリーフとして扱う。

対象

このポートフォリオページからは、他の何よりも先に640x468の画角と28px〜200pxの可変型サイズ、80px刻みの余白を持っていけ。
ポートフォリオページをモデルに指示する人は、5,639文字のプロンプトを出発点に使う。
見出しをCreative Portfolioと同じ長さに保ったままポートフォリオページを書き換えるコンテンツ責任者のために作った。

含まれる内容

ページのグリッドに乗るバー. バーに載るのはワードマーク、セクションのリンク、#309ADAのボタン1つだけです。28px〜200pxの可変型サイズ、80px刻みの余白で測られているため、第二のヘッダーに膨らむことはありません。リンクはワードマークより小さいサイズで組み、#309ADAの操作だけがバーの中で重みを持つ要素です。行は1行に保つ。
ブリーフに直書きされたサイズ. 寸法は収録時点のブリーフに28px〜200pxの可変型サイズ、80px刻みの余白、1200msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージングとして書かれている。再現は近似ではなく検証になる。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
1つずつ役割を持つ書体. Figtreeに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。サイズが大きくなるほど字間を詰めるため、28–200pxの範囲でディスプレイの行がまとまります。
役割を明記した色. アクセントの役割はブリーフで固定してある。操作には明るいのブルー #309ADA、画幅には深いのグリーン #181B17。#309ADAと深いのグリーン #181B17のコントラストが、小さいサイズでもアクセントを読ませる。

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

入場する要素は1つだけ

最初のフレームは意図的に未完成で、セクションはビューポートに入るたびに現れる。残りの構図はその下ですでに整っている。効果は要素ごとに1回だけ走り、ページを開いている間も繰り返さない。モーションを切って試す。この参考は640x468で収録しました。

基準はタイマーではなく位置

内容はスクロール位置に紐づく（セクションはビューポートに入るたびに現れる）。だからタイマーで動くのではなく、読者が動かす分だけ構図が変わる。スクロール挙動は一つだけなので、ページは別々の効果の連続には感じられない。この参考は640x468で収録しました。

ポートフォリオページの背後にある順序

1画面、1つのアクション、その間にナビゲーション、数値の行、背景のクリップ。ブリーフはファーストビューをセクションの積み重ねに任せず、この順序を本文で固定している。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は640x468で収録しました。

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

装飾より先に約束を決める。「I craft bold brands and modern websites with purpose」を、自分の仕事を一文で言い切る形に書き直し、仕様が使っている表示サイズでFigtreeに組む。明るいのブルー #309ADAを自社のアクセントに置き換え、ほかを触る前に深いのグリーン #181B17との対比を確認する。配色を変える前に、コピーとメディアを書き換える。