Planetary Pulseの教育・コミュニティヒーローセクションデザインとプロンプト

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

Planetary Pulseは教育・コミュニティブランド向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。色はグレー #C2CCD3の下地に限り、Helvetica, Arialで組んでいる。実装はTailwindと素のJavaScriptだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。ブリーフはモーションの予算を300msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に使う。初見用ではなく、作り直しに耐える教育・コミュニティブランドのヒーローセクションのブリーフとして扱う。以下に引用する値はすべてこのブリーフのもので、1826x1080の枠から最小の余白ステップまで含む。

対象

Tailwindと素のJavaScriptで運用中のプロジェクトに途中参加し、コピーの差し替えだけを担うデザイナーのために作った。
教育・コミュニティブランドヒーローセクションを制作するチームが、見積もりを出す前に280pxのブレイクポイントを記録に残したい。
このヒーローセクションは、Tailwindと素のJavaScriptの実装をエンジニアへ渡し、モーションを文章で残したいデザイナーに応える。

含まれる内容

ページのグリッドに乗るバー. バーは1行のテキストと1つの操作だけで、100vhのセクション、14px刻みの余白として測ってある。太い帯ではなく細い一行として読ませるためだ。ラベルは280pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
パネルではなく背景の動画. 雰囲気を作るのは1826x1080の5.9sクリップです。ブリーフはトリミングを固定し、その上の文字には手を加えていません。ループは5.9sと短く、目にはタイムラインではなくテクスチャとして映ります。
トーンを担うタイポグラフィ. タイポグラフィはHelvetica, Arialです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。数字はUI書体を共有し、統計もラベルも同じシステムに属する。
文字と画幅で1つの尺度. 寸法は収録時点のブリーフに100vhのセクション、角丸9999px、14px刻みの余白、300msのトランジションとして書かれている。再現は近似ではなく検証になる。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。根拠がなさそうに見える値こそ残す。

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

ループが環境演出を担う

5.9秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。この参考は1826x1080で収録しました。

意図を感じる速さ

ホバー、押下、フォーカスはいずれも300msで解決する。インターフェースが即座に感じられるのはそのためだ。ページが設計されているように読めるのは時間が短いからで、既定の遅い値ならこの構図は崩れる。時間は仕上げではなくデザインの一部だ。

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

機能訴求型のレイアウトは製品の機能を並べる。これは読み手を1つの判断へ導く。その経路はナビゲーション、数値の行、カードグリッド、機能リスト、背景のクリップと、100vhのセクション、角丸9999pxの取り方に表れる。教育の読み手は、選択肢より先に訴求を受け取る。

Planetary Pulseで動くもの

モーションは300msのトランジション、5.9sのメディアループ、行ごとのマスク表示だけに限っている。このヒーローセクションで、ブリーフの許容を超えて動く要素は一つもない。このヒーローセクションで、動くために動く要素はない。

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

ここでのレスポンシブは尺度が変わるという意味であり、階層は変わらない（レイアウトは280pxで切り替わる、セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる）。テキストはファーストビュー内に残り、操作部はタップできる大きさを保ち、低減モーションも尊重されている。狭い幅でも重要な要素は削られない。