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

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

Bold Studioは640x474で記録し、ギャラリー用の画像ではなく仕様として残した。ページ自身の見出しは「FSP DEMO - PODIUM Sharp 4.11」で、構図はその言葉をそのまま中心に組まれている。色は赤 #A60D29の下地、白 #F6E9EBの文字に限り、Interで組んでいる。納品物はReactとTailwind CSSで、640x474で記録しているため、コードを書く前に枠が決まっている。モーションは100msのトランジションに限っている。書いている間は開いておく。6,067文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは640x474で記録したので、このページで引用する値はすべてそこにたどれる。

対象

見出しをBold Studioと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
このヒーローセクションは、Interに触れずに見出しをA/Bテストするグロース担当に向く。
長い見出しを収める必要があるコンテンツ責任者は、文字数ではなくInterの行数を上限に使う。

含まれる内容

操作1つだけの上段. 短いリンク列と1つの操作がヒーローセクションの上に載り、寸法は30px刻みの余白、100msのトランジションで抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに640x474の構図の上に載るため、その下のメディアは端から端まで届きます。
大きくなるほど詰まる字間. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInterがあり、そこから補助コピーへはっきり落とします。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。
既定値に頼らない構成. 寸法は収録時点のブリーフに30px刻みの余白、100msのトランジションとして書かれている。再現は近似ではなく検証になる。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
必要な箇所だけ可変. ブリーフは見出しに11px〜30pxのクランプを使っています。長い行が不格好に折れないのはそのためです。モバイルメニューも同じブリーフに含まれているため、畳んだ状態も設計済みです。

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

状態変化にも時間を与える

トランジションの指定は100ms。コントロールはこの時間に縛られる。値が短いので、作り直しでこれを遅くすればすぐに分かる。

反応するのは操作要素

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限る。密度の高い最初の画面が煩くならないのはそのためだ。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。状態は絞り、そのぶん書き切る。この参考は640x474で収録しました。

ヒーローセクションの背後にある順序

トレードオフは我慢を強いること。走査しやすいグリッドなら即座に渡す詳細を、このページは保留する。代わりに得るのは、ナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップが読み違えられないファーストビュー。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は640x474で収録しました。

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

既製のヒーローとこのヒーローセクションは同じ部品を使う。違うのは、ナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップで順序づけ、30px刻みの余白、100msのトランジションで測っている点。だから画面は入れ物ではなく順序として読める。制作会社の読み手に、訴求へ至る最短の正直な道を示す。