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

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

Pixel Grid Hoverは制作会社・スタジオに、完成したファーストビューと、それを生んだ数値を渡す。見出しは「Brand Strategy & Product Design」で、ポートフォリオページの残りはその周りに配置されている。カラースキームは白 #EBEBEBの下地、黒 #1A1819の文字で、ページはDM Sansで組む。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。モーションは0.7sのトランジション、cubic-bezier(0.22,1,0.36,1)で、コピーが主役のままになる程度に抑えている。最初の画面で意図が伝わる必要がある制作会社・スタジオのポートフォリオページには、この参考が適している。

対象

低速回線でもこのポートフォリオページを成立させたいエンジニアは、640x472とタイプスケールを重さの予算に使う。
このポートフォリオページを引き継ぐマーケターは、12px〜14pxの可変型サイズ、12px刻みの余白で書き直しが尺度を保ったか確認する。
ポートフォリオページをモデルに指示する人は、8,672文字のプロンプトを出発点に使う。

含まれる内容

刻みを名指しするブリーフ. 値そのものが仕様です。12px〜14pxの可変型サイズ、12px刻みの余白、0.7sのトランジション、cubic-bezier(0.22,1,0.36,1)のイージングは640x472での収録値で、スクリーンショットから推測したものではありません。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。
お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にDM Sansの最小段階で置き、その位置を争う要素はほかにありません。見出しが構図の中心を保つ位置に置きます。
ブリーフに直書きされたサイズ. 値そのものが仕様です。12px〜14pxの可変型サイズ、12px刻みの余白、0.7sのトランジション、cubic-bezier(0.22,1,0.36,1)のイージングは640x472での収録値で、スクリーンショットから推測したものではありません。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。ブリーフが触れていない箇所は、意図的に触れていません。
1行にまとめた根拠. 数字はDM Sansで、本文よりも見出しに近いサイズで組む。数字は1つの字重で組み、行の中で統計に序列を付けない。

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

スクロールでセクションが届く

ここではスクロールが演出を担う（背景のレイヤーが前景と違う速度で動く）。下の静的なレイアウトは変わらない。位置に紐づいているので、どの訪問でも同じ結果になる。この参考は640x472で収録しました。

反応はコントロールに返す

状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（すべてのカードではなくボタンとリンクのホバー状態）。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。この参考は640x472で収録しました。

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

流動的なスケールのコストは、正確なサイズを制御しにくいこと。代わりに得るのは比率の保たれた見出しで、ブリーフに12px〜14pxのクランプがあるのはそのため。幅が変えるのは寸法で、読みの経路ではない。

制作会社のブリーフが効く理由

メディアに色の膜をかぶせるのが簡単な解決だったはず。ブリーフはそれを外している。メディアは640x472の静止画だ。それでもコピーが保つのは、12px〜14pxの可変型サイズ、12px刻みの余白が画面を静かに保つから。 Pixel Grid Hoverは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。