以前1週間かかっていたプロトタイプを30分で作った

タイトルは誇張ではありません。30分です。トランジション、実際のマイクロコピー、状態バリエーション付きの4画面の完全なオンボーディングフロー。以前はFigmaで半日、さらに細部の仕上げに半日かかっていたものが、その何分の一かの時間で実現します。

変わったのは私が速くなったことではなく、プロトタイピングのプロセスが根本的に変わったことです。

プロトタイプはもうFigmaから始まらない

以前のプロセスはFigmaを開き、フレームを作成し、各画面をデザインし、フローを接続して、リアルに感じるものを見せることでした。今はClaudeから始めます。必要なフロー、ユーザーコンテキスト、プロジェクトの制約を説明し、HTMLとCSSで機能するプロトタイプのコードを生成するよう頼みます。

数分でブラウザで開ける、実際のアプリのように見える、基本的なインタラクションが動くものができます。ピクセルパーフェクトではなく、その必要もありません。開発に渡すためではなくコンセプトを検証するためのプロトタイプです。

そのマインドセットの転換が最も難しい部分でした。デザイナーとして、自分の手から出るものはすべて完璧に見えるよう訓練されてきました。しかしプロトタイプは成果物ではなく、ビジュアルな質問です。その質問をより速くできれば、前進するために必要な答えをより速く得られます。

今は1時間で同じフローの3〜4つのバリエーションを生成します。以前はうまくいって1日で1つのバリエーションでした。つまり、構築する時間がなかったために考えもしなかった道を探求できるということです。

2つのことに使います。1つ目は内部バリデーション。高忠実度のデザインに時間を投資する前に、AI生成のプロトタイプをプロダクトチームやクライアントに見せて方向性が正しいか確認します。うまくいかなければ、3日ではなく30分を失っただけです。

2つ目はクイックテスティング。ユーザーがフローを理解できるか見るだけのインフォーマルなユーザビリティテストには、AI生成のプロトタイプで十分です。きれいである必要はなく、機能的で明確であればいいのです。

Figmaは依然として最終デザインが生きる場所であり、コンポーネントが文書化される場所であり、開発へのハンドオフが行われる場所です。しかしプロトタイピングの起点ではなくなりました。Figmaは探索ステップではなくリファインメントステップになりました。

それは解放的です。明確な方向性を持ってFigmaに到達でき、すでに検証されたコンセプトがあり、高忠実度でデザインするものはすでに低忠実度で実際のユーザーにテストされたという確信があるからです。

スピードがポイントではありません。ポイントはより速く考えることです。そしてプロトタイピングは常に手で考えることでした。