AI Designer Portfolioの制作会社・スタジオヒーローセクションデザインとプロンプト

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

AI Designer Portfolioは判断の履歴を残しており、このヒーローセクションを生んだブリーフは11,458文字。配色は白 #F6FCFFの下地、深いのティール #051A24の文字に絞り、書体はNeue Montreal。納品物はReactとTailwind CSSで、604x476で記録しているため、コードを書く前に枠が決まっている。モーションの予算は0.1sのトランジション、cubic-bezier(0.4, 0, 0.2, 1)、ループする動画の下地。書いている間は開いておく。11,458文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、604x476の枠から最小の余白ステップまで含む。

対象

1回ごとの精算で進め、初回の前に22px〜80pxの可変型サイズ、40px刻みの余白を合意しておきたい制作会社のために作った。
このヒーローセクションは、制作会社のコピーが17.2sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
見出しをAI Designer Portfolioと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

操作より前に置くリンク. ナビゲーションは1行だけで、下に第2階層を持たない。バーは独自の背景を持たずに604x476の構図の上に載るため、その下のメディアは端から端まで届きます。
実装まで持ち込む数値. ブリーフは数値を名指ししています（22px〜80pxの可変型サイズ、40px刻みの余白、0.1sのトランジション、cubic-bezier(0.4, 0, 0.2, 1)のイージング）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。
順序を決めるグリッド. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのNeue Montrealで組むことで構造が見えたままになります。パネルの高さはコピーに従い、行が長くなっても列の揃いが崩れない。パネルの見出しはページのスケールに合わせる。
文字の背後に全面配置したクリップ. クリップは604x476で17.2s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。604x476以上で書き出せば、coverの切り抜きはそのまま機能する。書き出しは604x476以上にして、トリミングを正確に保ってください。

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

反応するのは操作要素

インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態、必要なときに内容を送るスライダー）。状態が予測できるのはそのため。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。インタラクティブな層は小さく保つ。この参考は604x476で収録しました。

読み込み時にページが組み上がる

見出しは一括でフェードインしない。セクションはビューポートに入るたびに現れる。文字が現れる順序そのものが語りを担うため、静止画との差はここで生まれる。効果は要素ごとに1回だけ走り、ページを開いている間も繰り返さない。この参考は604x476で収録しました。

AI Designer Portfolioで動くもの

ここのトランジションにはすべて数値が付いている。0.1sのトランジション、17.2sのメディアループ、スクロール連動の表示演出を勘で調整し直すのではなく、値ごと移植できるのはそのため。このヒーローセクションで、動くために動く要素はない。

このヒーローセクションが正しい理由

1画面は読み手にとって1つの判断を意味し、それがこのレイアウトのコスト。残りはすべて折り返しの下へ移る。ブリーフが22px〜80pxの可変型サイズ、40px刻みの余白、0.1sのトランジション、cubic-bezier(0.4, 0, 0.2, 1)のイージングを明記しているので、下のセクションも同じリズムを保つ。 AI Designer Portfolioは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。