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

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

Mindloop Landingは判断の履歴を残しており、このランディングページを生んだブリーフは7,242文字。配色は深いのブルー #010713の下地に絞り、書体はInter。納品物はReactとTailwind CSSで、455x800で記録しているため、コードを書く前に枠が決まっている。 SaaSのランディングページを発注するなら、この構成から始めて主題だけ差し替える。収録したプロンプトは455x800で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、455x800の枠から最小の余白ステップまで含む。

対象

このランディングページを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく100px刻みの余白を渡せ。
AI・SaaSプロダクトランディングページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
見出しをMindloop Landingと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

ページのグリッドに乗るバー. 細いバーをランディングページの上に重ね、左にワードマーク、リンクはInterで組みます。そのため構図はコンテンツが先、装飾は後に読めます。バーは独自の背景を持たずに455x800の構図の上に載るため、その下のメディアは端から端まで届きます。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
文字と画幅で1つの尺度. ブリーフの寸法はすべて、測り直せる数値だ（100px刻みの余白）。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。
根拠を置く位置に数値. 数値はカードではなく文字として組みます。ディスプレイサイズのInterに、1段下のラベルを添えます。アクセントは主張を担う数字だけに使い、行全体には使わない。1つの数値に段落が要るなら、それは数値ではありません。
順序を決めるグリッド. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。どのパネルも内部の配置は同じで、グリッドは形で見渡せる。パネルの順序がそのまま読み順です。

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

ページがスクロールに応える

固定配置が仕様にある唯一のスクロール挙動で、だからページは別々の効果の連続には見えない。効果が及ぶのはブリーフで名指しされた要素だけで、ページ全体ではない。この参考は455x800で収録しました。

ホバーは控えめに

状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（すべてのカードではなくボタンとリンクのホバー状態、固定された要素が位置を保ち、その下を内容が流れる）。モーダルを開いたりスクロールを乗っ取ったりする要素はなく、インタラクションは要素の内側にとどまる。この参考は455x800で収録しました。

ランディングページを自社のものにする

再利用できるのは構成で、主題は自社のもの。100px刻みの余白を残し、言葉、メディア、ブランドマークを差し替える。新しい要素が提供内容や次の操作の説明に寄与しないなら、ファーストビューの下に置くのが正解です。

Mindloop Landingの最初の読みの順序

ここでは順序そのものがデザイン。訴求が実績より先に届くようナビゲーション、見出し、数値の行、カードグリッド、背景のクリップを置き、両者の距離を100px刻みの余白が決める。 SaaSの読み手は、選択肢より先に訴求を受け取る。

SaaSのブリーフが効く理由

このページの約束は1つだけで、それを支えているのが100px刻みの余白。折り返しより下の要素には、同じ訴求を二度背負わせていない。 Mindloop Landingは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。

よくある質問（FAQ）

Mindloop Landingの背後のブリーフには、実際に何が入っていますか？

収録されたブリーフは7,242文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。

Mindloop Landingを作り直すのにReactとTailwind CSSは必要ですか？

Mindloop LandingはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

Mindloop Landingのデザインはどこから来たものですか？

ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は455x800で収録しました。