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

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

これはImmersive Oceanのヒーローセクションを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。ページ自身の見出しは「Shaping visual narratives, one pixel at a time」で、構図はその言葉をそのまま中心に組まれている。配色は深いのブルー #000410の下地、グレー #C2CFCAの文字、ティール #0E4154のアクセントで、書体はGeist。納品物はReactとTailwind CSSで、640x478で記録しているため、コードを書く前に枠が決まっている。動きはcubic-bezier(0.16,1,0.3,1)だけで完結する。書いている間は開いておく。4,030文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

このヒーローセクションは、レイアウトの中で100vhのセクション、80px刻みの余白が何を決めているのかを知りたい実装者に答える。
見出しをImmersive Oceanと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
長い見出しを収める必要があるコンテンツ責任者は、文字数ではなくGeistの行数を上限に使う。

含まれる内容

1つの幅で折りたたむリンク. バーに載るのはワードマーク、セクションのリンク、#0E4154のボタン1つだけです。100vhのセクション、80px刻みの余白で測られているため、第二のヘッダーに膨らむことはありません。リンクはワードマークより小さいサイズで組み、#0E4154の操作だけがバーの中で重みを持つ要素です。背景を付ける前に、自社の素材の上でバーを試す。
トーンを担うタイポグラフィ. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのGeist、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。書体の差し替えは可能ですが、比率がその差し替えに耐える必要があります。
明記された余白の刻み. レイアウトは固定値（100vhのセクション、80px刻みの余白、cubic-bezier(0.16,1,0.3,1)のイージング）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。リストは短く、確認者は要素ごとに突き合わせられる。ページを持ち込むときも、名指しされた値はそのまま使ってください。
ファーストビュー上部のバッジ. お知らせは見出しの上の#0E4154のピルで、補助コピーより小さいサイズにします。第二のタイトルではなくラベルとして読ませるためです。バッジが#0E4154を持ち、見出しは文字色に留まります。

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

時間はブリーフ由来

コントロールは0で変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。同じ再生時間を複数の操作要素で使い回しており、インタラクションが一つの仕組みとして揃って感じられる。この参考は640x478で収録しました。

インタラクションは局所に

ページが反応するのは操作できる場所だけ。すべてのカードではなくボタンとリンクのホバー状態。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。この参考は640x478で収録しました。

ヒーローセクションの再配置

セクションを隠して済ませるモバイル用レイアウトと比べる。これは隠さず、形を変える。セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる。中身は減らさない。モバイル版は判断であり、代替ではない。

Immersive Oceanで最初に変えるもの

変える順番はコピーとメディアが先、色が次、レイアウトが最後である。640x478のフレームとGeistのスケールがページを支えているので、それらを貫くのではなく、その周りで差し替える。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。

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

このページには意図された順番がある。ナビゲーションはプロダクトを提示し、再訪した読者に見慣れた導線を与える。見出しが表示サイズを取り、支える一行が提供内容を説明し、ティール #0E4154のアクセントが主操作を示すので、次の一手が分からなくなることはない。ほかに競合するものはない。最初の判断より前にカードのグリッドは置かれず、それによって制作会社の案件でもヒーローセクションが重く感じられない。制作会社の読み手は、選択肢より先に訴求を受け取る。