Kova Mobile AppのAI・SaaSオンボーディングフローデザインとプロンプト

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

Kova Mobile AppはAI・SaaSプロダクト向けのオンボーディングフローの作り方を一つ示し、それを生んだ手順も公開している。「Turn your ideas into cinematic scenes」は、レイアウトが背負うために組まれた一行。カラースキームは白 #FFFFFFの下地、黒 #000000の文字、インディゴ #2E1065のアクセントで、ページはHelvetica Neueで組む。納品形式は単一のコンポーネントなので、オンボーディングフロー全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。動きは800msのトランジション、ループする動画の下地だけで完結する。記録されたブリーフから始め、オンボーディングフローをゼロから作り直すのではなく編集する。

対象

このオンボーディングフローを引き継ぐ外部チームには、最初のコミット前に単一のコンポーネントをリポジトリへ固定する必要がある。
このオンボーディングフローは、単一のコンポーネントをすでに理解し、1252x864のフレームを文章にできれば足りるチームを対象にしている。
このオンボーディングフローは、単一のコンポーネントの実装をエンジニアへ渡し、モーションを文章で残したいデザイナーに応える。

含まれる内容

ドロワーを持たない一行. 上段に載るのはワードマーク、4〜5本のリンク、#2E1065に染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。リンクはワードマークより小さいサイズで組み、#2E1065の操作だけがバーの中で重みを持つ要素です。背景を付ける前に、自社の素材の上でバーを試す。
検証できる数値. サイズは継承ではなく明記されています（100vhのセクション、24px刻みの余白、800msのトランジション）。書体やコピーを差し替えても、この関係は保たれます。リストの最小値と最大値が、構図の可動範囲を決める。ブリーフが触れていない箇所は、意図的に触れていません。
文字の後ろのメディア. メディアは8sのクリップ1本で、1252x864の画幅にcoverで切り抜く。どの幅でも黒帯が出ない。1252x864以上で書き出せば、coverの切り抜きはそのまま機能する。
1つずつ役割を持つ書体. Helvetica Neueに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。数字はUI書体を共有し、統計もラベルも同じシステムに属する。

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

ビジュアルはシーンが担う

中心となる要素は画像ではなくライブで描画される（WebGLのキャンバス）。だから1252x864の構図は背景に敷かれるのではなく、ビューポートに反応する。シーンがリアルタイムなので、レイアウトのサイズを変えても別の素材を用意しなくて済む。

時間はブリーフ由来

モーションはミリ秒単位で測る。800ms。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。ページが設計されているように読めるのは時間が短いからで、既定の遅い値ならこの構図は崩れる。

Kova Mobile Appの最初の読みの順序

自社のコピーをこのオンボーディングフローに入れても順序は保たれる。要素が交換可能ではないからだ。ナビゲーション、見出し、数値の行、背景のクリップはそれぞれ1つの役割を担う。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1252x864で収録しました。

SaaSのブリーフが効く理由

主張は見出しサイズで一度だけ出す。ページは「Turn your ideas into cinematic scenes」と明言している。オンボーディングフローの残りはすべてその一行を軸に並ぶ。ナビゲーション、見出し、数値の行、背景のクリップが続き、最初の読みで競合する第二の約束はない。 Kova Mobile Appは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。