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

ClarionAIはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。「The intelligence layer \n for clear decisions」は、レイアウトが背負うために組まれた一行。配色は黒 #000000の下地。納品形式はReactとTailwind CSSなので、ランディングページ全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。モーションの予算は1000msのトランジション、ループする動画の下地。 AI・SaaSプロダクトのランディングページを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。収録したプロンプトは1952x1440で記録したので、このページで引用する値はすべてそこにたどれる。

対象

• このランディングページは、レイアウトの中で16pxで固定した表示サイズ、20px刻みの余白が何を決めているのかを知りたい実装者に答える。
• 複数案件を同時に進めるスタジオ責任者は、このランディングページを他ページが踏襲する型として使う。
• ランディングページのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。

含まれる内容

• ドロワーを持たない一行. 短いリンク列と1つの操作がランディングページの上に載り、寸法は16pxで固定した表示サイズ、20px刻みの余白で抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに1952x1440の構図の上に載るため、その下のメディアは端から端まで届きます。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
• 検証できる数値. リストは短く（16pxで固定した表示サイズ、20px刻みの余白、1000msのトランジション）、システム全体を手作業で確認できる。リストは短く、確認者は要素ごとに突き合わせられる。
• 文字の後ろのメディア. ファーストビューは1952x1440のクリップ1本で、ほかの要素はすべてその上に配置されます。自動再生が使えないときは1952x1440のポスター画像が構図を保つため、レイアウトが崩れることはありません。
• 新しい1つだけを示すピル. 見出しの上に小さなピルを1つだけ置いて、1件のお知らせを伝えます。ページ上部を掲示板にせず、動きだけを知らせることが目的だからです。ピルはブリーフ最小の段階に置くため、第二のタイトルではなくラベルとして読めます。バッジは1つ、メッセージも1つ。この参考は1952x1440で収録しました。

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

よくある質問（FAQ）