Quantum CoreのAI・SaaSランディングページデザインとプロンプト

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

これはQuantum Coreのランディングページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。「Talk with the team」は、レイアウトが背負うために組まれた一行。配色は深いのブルー #080A19の下地、白 #E9E9E9の文字に絞り、書体はSuisse Intl。納品物はReactとTailwind CSSで、1920x1420で記録しているため、コードを書く前に枠が決まっている。動きは700msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地だけで完結する。書いている間は開いておく。27,320文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

このランディングページを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく12px〜72pxの可変型サイズ、20px刻みの余白を渡せ。
プロダクトマーケターで、コピーの背後に6.8sのループ映像があってもランディングページが読める状態を保ちたい。
見出しをQuantum Coreと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

操作より前に置くリンク. バーはランディングページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに1920x1420の構図の上に載るため、その下のメディアは端から端まで届きます。
刻みを名指しするブリーフ. ここに目分量はありません。仕様が12px〜72pxの可変型サイズ、20px刻みの余白、700msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージングを固定し、残りのレイアウトはその値から導かれます。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
文章ではなくグリッド. 構造はグリッドそのものだ。同じ大きさのパネルをSuisse Intlで組み、視線が下ではなく横へ動くように並べる。グリッドはパネルの順序を変えずに1列へ折れます。
文字の後ろのメディア. ミュートしたループクリップ1本が1920x1420のフレームを覆い、6.8sで再生されます。 cover指定で配置し、コピーはその上に重なります。ブリーフは動画にオーバーレイを載せないため、色は曇りません。1920x1420以上で書き出せば、coverの切り抜きはそのまま機能する。

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

見出しが自ら組み上がる

入場の動きはページを囲む枠ではなく、ページ自身のメッセージに使う。セクションはビューポートに入るたびに現れる。アニメーションは読み込み時に一度だけ実行され、スクロールのたびには走らない。読んでいる途中でページが再演することはない。この参考は1920x1420で収録しました。

スクロールライブラリなしの環境モーション

環境の動きは6.8秒の映像1本を1920x1420で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。

Quantum Coreで最初に変えるもの

最初に配色を変えるのがよくある失敗。構成に触れないまま雰囲気だけが変わり、レイアウトを支えるのは結局12px〜72pxの可変型サイズ、20px刻みの余白。コピーとメディアを先に、配色は最後にする。変えるべきなのは主題の部分だ。

Quantum Coreを仕様として読む

余白を好みと呼ぶテンプレートと比べる。ここでは同じ値に名前が付いている（12px〜72pxの可変型サイズ、20px刻みの余白、700msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）ので、編集はそれを守るか、構成を目に見えて壊すかのどちらかになる。このランディングページに、初期値任せの部分はない。

AI・SaaSプロダクトがここで得るもの

SaaSのランディングページを発注するとき難しいのは、ファーストビューが何を言わないかを決めること。 Quantum Coreはそれを先に答えている。見出しの一行と、その後ろのナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドだ。 Quantum Coreは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。この参考は1920x1420で収録しました。