Veyra Electricの製造・産業ランディングページデザインとプロンプト

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

Veyra Electricは製造・産業企業向けのランディングページの作り方を一つ示し、それを生んだ手順も公開している。色はくすんだのブルー #6B879Dの下地、白 #FFFFFFの文字に限り、Space Groteskで組んでいる。この参考例はReact、Viteで組んであり、レイアウトの判断はそれとは独立に書かれている。ページはモーションをループする動画の下地にとどめる。新しいセクションを足す前にランディングページの順序を決めたいときに使う。このページの残りは、ランディングページをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、ランディングページを作り直すときに背後の意図を推測せずに済む。

対象

参考がただの出発点なら、デザイナーは1920x1412のフレームを残し、ランディングページの残りを組み直せる。
製造・産業企業ランディングページを提案する制作会社が、12px刻みの余白を提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
このランディングページは、製造業のコピーが6.3sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。

含まれる内容

背景を持たないナビゲーション. バーはランディングページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに1920x1412の構図の上に載るため、その下のメディアは端から端まで届きます。リンクは4〜5本に抑えてください。その本数に合わせて行のサイズが決まっています。
刻みを名指しするブリーフ. レイアウトに勘で決める部分はない。ブリーフが12px刻みの余白を明記し、実装はその値に合わせる。リストの最小値と最大値が、構図の可動範囲を決める。
トーンを担うタイポグラフィ. タイポグラフィはSpace Groteskです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。 UIテキストは1つの書体に固定し、同じサイズで2つの声が混ざらない。役割のないサイズは足さない。
イラストではなくクリップ. 動画は1920x1412の構図の最下層にあり、文字はその上に配置され、間に何も挟まない。ループは6.3sと短く、目にはタイムラインではなくテクスチャとして映ります。書き出しは1920x1412以上にして、トリミングを正確に保ってください。

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

静止画ではなくシーン

ここでの設計判断は実行時レンダリング（WebGLのキャンバス）で、レイアウトはそれに場所を空けるように組んである。レンダリングには予算を割く。低スペック端末で最もフレームを食いやすい要素だから。この参考は1920x1412で収録しました。

ホバーは意味のある場所だけに

ページが反応するのは操作できる場所だけ。すべてのカードではなくボタンとリンクのホバー状態。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。長い効果のリストより、確実な状態をいくつか。この参考は1920x1412で収録しました。

Veyra Electricを仕様として読む

2人で作り直すとき、構成を目分量で合わせることはできない。ブリーフは議論を消す。12px刻みの余白を一度だけ明記している。このランディングページに、初期値任せの部分はない。

Veyra Electricの最初の読みの順序

注意は散らばらず、導かれる。視線はまず表示サイズの一行に落ち、次に支えるコピー、最後に操作へ向かう。実績は、載る場合でもお客様の声の壁ではなく帯か1行に留まる。その順番が設計そのものである。製造業の読み手は、選択肢より先に訴求を受け取る。この参考は1920x1412で収録しました。

このランディングページが立てる主張

いまのファーストビューが3つのことを説明しているなら、これは1つだけを説明する版。ナビゲーション、数値の行、フォーム、カウントダウン、背景のクリップを読み順に並べ、12px刻みの余白がリズムを決める。 Veyra Electricは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。