AI登場以前と同じ方法、つまり2年前と変わらないやり方でプロトタイピングをしているなら、残念なお知らせがあります。それはプロトタイピングではなく、ストーリーボーディングです。

誤解しないでほしいのですが、これは依然としてプロダクトデザインの不可欠な部分です。スピーディーで、コラボレーションしやすく、ステークホルダーにプロダクトを実際に見ているような感覚を与えてくれます。しかし、Figma Design で作成した静的プロトタイプは、実際の製品が実際にどのように動作するかを把握できます。 

静的プロトタイプはプロダクトデザイナーの期待に応えられていない

ほとんどのプロダクトデザインは「ハッピーパス症候群」に陥っており、完璧なシナリオ——ユーザーがAをクリックし、Bに進み、Cを完了する——を示すだけです。しかし、プロダクト開発に長く携わってきた方なら、実際のプロダクトはそのようには機能しないことをご存知でしょう。

データの読み込みが遅い場合はどうなるでしょうか？フィルターの結果がゼロになった場合は？Figmaのフレームでは想定していなかった方法で、高度な分析機能を使用した場合は？

従来のプロトタイピングツールは、ビジュアルデザインや基本的なユーザーフローの提示には優れていますが、複雑なインタラクション、状態管理、データ処理の実演という点では力不足です。このプロトタイプと現実のギャップは、開発中に高コストな修正を招くことがほとんどです。

AIが登場した

生成AIにより、動的なプロトタイピングが飛躍的に身近なものになりました。Claude、Cursor、Loveable、そしてFigma Make は、デザインの意図を素早く取り込み、動作するフロントエンドコードに変換できます。

エンジニアでなくても（またはそのスキルがなくても）、genAIツールはあなたのアイデアとインタラクティブなテストの間のギャップを埋める助けになります。 

これらのツールはデザインパターンを理解し、レスポンシブレイアウトを生成し、従来のプロトタイピングツールでモックアップするのに何時間もかかるような複雑なロジックフローにも対応できます。

新しい分析機能を設計する際、私たちはFigma Designを一切使わず、実際のデータセットを用いてコードでプロトタイプを作成します。静的なフレームだけでは価値を評価できないからです。 

私たちのプロダクトチームはAIを活用して、最終製品と同様に動作するプロトタイプを作成します。リアルなデータ処理やエッジケースの処理も完備しています。

コードベースのプロトタイピングでできること

AIを活用したコードファーストのプロトタイプに移行することで、プロダクトチームが得られるものをご紹介します：

  • シミュレーションではなく、本物をテストする。 プロトタイプが実際のデータを処理することで、製品がどのように見えるかだけでなく、どのように動作するかを確認できます。パフォーマンスのボトルネックを観察し、複雑なデータセットがユーザー体験に与える影響を理解し、実際のコンテンツがあって初めて現れる使いやすさの問題を特定することができます。
  • フィードバックループの高速化。ロジックをテストするために開発スプリントを待つ必要はありません。同じ週のうちに構築・共有・改善を行うことができます。この加速により、アイデアが新鮮でステークホルダーの関心が高いうちに、コア機能を繰り返し改善することができます。
  • ハッピーパスだけでなく、エッジケースも探索しましょう。通常とは異なる状態、フィルター、ユーザー入力をシミュレートして、何が壊れるかを確認できます。エッジケースをこの段階で早期に検出することで、開発およびQAフェーズでのコストのかかる予期せぬ問題を防ぐことができます。
  • 製品、デザイン、エンジニアリング間の連携強化。 デザイナー、プロダクトマネージャー、エンジニアが同じインタラクティブなプロトタイプを確認することで、コミュニケーションが向上します。

AIを活用したプロトタイピングを始めるには

プロトタイピングのレベルを上げる準備はできていますか？こちらがロードマップです：

  1. ツールを選ぶ。Claude、Lovable、またはFigma Makeが始めるのに最適です。それぞれに強みがあります。Claude Artifactsはシンプルなプロトタイプの素早い作成に優れ、Lovableはより高度なアプリケーションに向いており、Figma MakeはすでにFigmaのデザインがあり、それをリッチなインタラクティブ体験に変えたい場合に適しています。
  2. 小さなスライスを構築する。 インパクトの大きいフローを1つ選び、ライブプロトタイプに変換しましょう。製品全体をプロトタイプにしようとしないでください。代わりに、検証が必要なコアインタラクションに集中しましょう。ダッシュボードのフィルターシステムや、条件付きロジックを持つ複雑なフォームなどが考えられます。
  3. Figma デザインを活用し続ける。 レイアウト、ビジュアルデザイン、ハンドオフの仕上げには引き続き使用してください。既存のツールを置き換えることが目的ではなく、最も重要な場面でダイナミックなプロトタイピングを補完することが目標です。
  4. 任意: 開発者とペアを組む。AIがつまずいた場合にサポートを受けましょう。エンジニアに相談できる環境を整えておくことで、技術的な制約を乗り越え、プロトタイプが本番コードにうまく反映されるよう確保できます。

AIの時代におけるソフトウェア体験のデザイン

プロダクト開発の状況は急速に変化しています。複雑なインタラクションを迅速にプロトタイプ化・検証できるチームは、静的なモックアップのみに頼り続けるチームに対して大きな優位性を持つことになるでしょう。

コードベースのプロトタイプは、静的なデザインフレームでは答えられない疑問を解消するのに役立ちます。たとえば、このフィーチャーは10,000件のデータポイントでどのように動作するか？ユーザーが予期しない方法でフィルターを組み合わせた場合はどうなるか？低速な接続環境ではエクスペリエンスはどのように低下するか？といった疑問です。

製品開発の未来は、機能的なプロトタイプを迅速に反復し、実際のデータで仮説を検証し、デザインと開発の間のギャップを埋めることができるチームのものです。