product-proof-saas

プロダクトの価値を示す SaaS

広範な主張をする前に、プロダクトの仕組みを示します。インターフェースを装飾ではなく、証拠として使います。

ストーリーを構成する

1. ユーザーの課題を一文で示します。
2. 実際のワークフロー、決定論的なワークフロー、またはサンプルであることを明記したワークフローをヒーローに配置します。
3. 仕組みを入力、処理、下書き、編集、承認、公開の各状態として説明します。
4. ユーザーの成果と対象者を軸に機能を整理します。
5. 料金の制限事項と懸念点を、一連の判断フローにまとめます。

元のブランド、出力、顧客、指標、価格、スクリーンショット、主張を差し替えます。生成速度や出力品質を偽ってはいけません。

ビジュアルシステムを構築する

• 白から淡い青への背景、ほぼ黒のテキスト、柔らかなグレーのグリッド線、ひとつの寒色系のアクセントカラーを使います。
• x ハイトの高いグロテスク体と、コンパクトなモノスペースのラベルを組み合わせます。
• 12 列のプロダクトグリッド、12～16px の角丸、細い境界線、実態に即した UI スクリーンショットを使います。
• プロダクトパネルは、周囲のマーケティングコピーより情報密度を高く保ちます。
• プライマリアクションには黒を使い、アクセントカラーはアクティブ状態、進行状況、選択、フォーカスに限って使います。
• 装飾的な AI の粒子、常時浮遊する要素、曖昧に発光する球体は避けます。

ページを構成する

• ヘッダー：プロダクトの各ページへの導線をコンパクトにし、トライアルまたはデモの主要アクションをわかりやすくします。
• ヒーロー：価値提案と、ひとつの成果を最初から最後まで実演するプロダクト画面を組み合わせます。
• 課題の実証：ビフォー・アフター、所要時間の内訳、または具体的なワークフロー上の制約を示します。
• 機能モジュール：小さなアイコンと、実際の機能に焦点を当てたコピーを使います。
• ワークフロー：魔法のようなワンクリックの約束ではなく、状態の変化と人による制御を説明します。
• 対象者タブ：コンテンツを DOM に保持し、役立つ場合はディープリンクに対応します。
• 実績：検証済みの例、顧客の証拠、またはサンプルであることを明記した内容を使います。
• 料金：比較可能な制限、利用単位、注記の位置を揃えます。
• FAQ：比較表から曖昧なプラン用語の説明へディープリンクします。
• フッター：淡い青のグラデーションに、信頼性、ドキュメント、法的情報へのリンクを配置します。

プロンプトから出力までのストーリーを実装する

• 入力、処理、下書き、編集、承認、公開を明示的な状態としてモデル化します。
• 実際のアプリケーション状態を利用できる場合はそれを使い、利用できない場合は Sample workflow と表示します。
• 編集、送信、キャンセル、再試行、コピー、バージョン履歴、読み込み、利用上限、モデレーション、ネットワーク、エラーの各状態に対応します。
• 決定論的な再生機能とテキストのトランスクリプトを用意します。
• 動きを抑える設定が有効な場合は、自動入力と大きな状態変化のアニメーションを無効にします。
• JavaScript やアニメーションが利用できない場合でも、ワークフローを理解できるようにします。

料金と FAQ を実装する

• 比較表またはリストはセマンティックに記述し、共通の機能の位置を揃えます。
• 利用単位、制限、超過料金、請求周期を平易な言葉で説明します。
• 請求周期、プラン選択、CTA の読み込み中、無効、エラー、復旧の各状態を維持します。
• 曖昧な用語は、ディープリンク付きの FAQ 回答につなげます。
• ブラウザーの「戻る」で、直前の比較表示を復元します。

モーションのデフォルト

• 操作へのフィードバックには 160～220ms、インターフェースの状態変化には 420～700ms を使います。
• カードは 45～70ms ずつずらして表示し、受け渡しのアニメーションは一度にひとつだけ実行します。
• 雲や背景の動きはゆっくり、任意とし、画面外では一時停止します。
• 偽の入力速度、常に浮遊するカード、装飾的な生成ループは避けます。
• 動きを抑える設定が有効な場合は、落ち着いた UI 状態をすぐに描画します。

検証する

• キーボードによる編集、送信、キャンセル、再試行、コピー、比較操作をテストします。
• 利用上限、モデレーション、ネットワーク、空、読み込み中、エラーの各状態を確認します。
• すべての出力が実際のもの、決定論的なサンプル、またはデモであることを明示したものになっていることを確認します。
• フォーカス、コントラスト、200％ズーム、モバイルでの折り返し、履歴、動きを抑える設定を検証します。
• 架空の顧客、成果、セキュリティに関する主張、可用性、パフォーマンス指標を削除します。

避けること

• 状態の変化を自ら説明できないマーケティング用モックアップ。
• 偽のダッシュボード、偽のタイピング表示、ラベルのないサンプル出力。
• 中心となるワークフローと関係のない機能一覧。
• 隠された料金制限や、関連性のない FAQ の回答。
• ありきたりな AI のパーティクル、浮遊するガラス風カード、絶え間ない動き。