UXデザイナーがAIアプリビルダーを活用する方法
AIが多くの業界（特にソフトウェア開発）を破壊し続ける中、従来のプロセスを変え、より効率的にし、より多くの人にチャンスを与える新しいツールの最新情報を入手し続けることは非常に重要です。
UXデザイナーはこれまで、ユーザーテストや開発者への引き継ぎのために、忠実度の高いワイヤーフレームや限定的なプロトタイプを作成することに制約されてきました。しかし今では、バイブコーディングを使用して、デザインのコード化されたバージョンを生成することまで、デザイナーのスキルセットを拡大するチャンスがあります。
バイブ・コーディングは、Andrej Karpathy 氏による造語*1で、新しい技術的な流行語となっています。バイブコーディングでは、AIプロンプトに欲しいものを記述し、LLM（大規模言語モデル）に送信するだけです。開発者にとって、バイブコーディングは手作業の一部を省き、改良の出発点として使うことができます。デザイナーにとって、バイブコーディングは、開発者のリソースを使うことなく、素早く実用的なコードを生成するための扉を開きます。
UX デザインとバイブコーディングをより深く理解するために、UX デザイナーのためのバイブコーディング、バイブコーディングのベストプラクティス、そして Anima でのバイブコーディングのデモを紹介します。
UXデザイナーのためのバイブコーディング
雑談に入る前に、バイブコーディングは確かにテスト標準を満たすコードを生成しません。UXデザイナーがバイブコーディングを使って、ターゲット環境にプッシュできるコードを作成できるとは言いません（QAやセキュリティエンジニアはそのダメージに愕然とするでしょう）。
その代わりに、UXデザイナーはバイブコーディングを使って、ユーザーテスト用のプロトタイプを作成したり、特定のインタラクションがどのように機能すべきかを関係者や開発者に示すことができます。デザイナーは、プロトタイプの作成がいかに大変で時間がかかるかを知っています。それでも、プロトタイプは（ドラッグ＆ドロップのような）インタラクションを完全に反映していないかもしれませんし、ただ挙動がおかしいだけかもしれません。
バイブコーディングがどのように機能するのかを見てみましょう。次に、UXデザイナーにとってのバイブコーディングの利点と限界について確認します。
バイブコーディングの仕組み
バイブコーディングでは、自然言語を使ってアイデアやアプリをプロンプトで記述し、AIがあなたの代わりにコードを構築します。開発者は、ChatGPTやClaudeなどのLLMツールを使ってバイブコーディングを行うことができます。そして、「大学生向けの健康管理アプリのダッシュボードを作成し、カラフルでモダンな色とフォントを使用してください」といった簡単なプロンプトを挿入します。AIが生成した最初のコードを入手した後、開発者はそれを自分たちの基準に合うように改良し、テストします。
しかし、UXデザイナーにとっては、コードのきれいさや機能性はあまり気になりません。ChatGPTのようなLLMを使ってコードを生成する代わりに、デザイナーはAIアプリビルダーを使うことができます。
バイブ・コーディング・ツールを使うには、BubbleやReplitのようなツールでプロンプトから始めるか、Anima PlaygroundやLovableのようなツールでFigmaのデザインから始めるかの2つの方法があります（Figmaと統合されたツールについては後で説明します）。
利点と制限
UX デザイナーとして、「私はコードの書き方を知らないので、バイブコーディングはどのように役立つのだろう？」と思うかもしれません。基本的な HTML や CSS を読める人もいれば、デザインから直接コードを書ける人もいます。いずれにせよ、デザイナーはバイブコーディングをUXプロセスの強化に役立てることができます。
UXデザイナーがバイブコーディングをどのように使うべきかを完全に把握するために、その両方を検証してみましょう。
バイブコーディングのメリット
- より速いイテレーション： デザイナーはUXのアイデアを素早く視覚化し、対話することができます。これにより、製品チームやターゲットユーザーとの初期コンセプトの検証を迅速に行うことができます。
- 依存性の低減： ユーザーとテストするための完全な機能のデモを得るには、デザイナーは開発を待つ必要があります。バイブコーディングでは、この障壁を飛び越えて、デザイナー自身がデモを作成することができます。
- 探索性の向上： バイブコーディングでは、ライブコンセプトを簡単かつ迅速に作成できるため、デザイナーは関係者やユーザーとより多くのアイデアを検討でき、最適なデザインの方向性を確保できます。
バイブコーディングの限界点
- 複雑さ ： たとえば、デザイナーがFigmaから複数のページをアップロードして、AIエージェントにページ間のインタラクションを作成させることはできません（しかし、いつかはできるかもしれません...）。
- コンテキストの欠如： あなたのデザインのコードを生成するAIエージェントは、あなたが持っているすべてのコンテキストを持っているわけではありません。
- コードの品質： このようなAIエージェントによって生成されたコードには、通常バグやエラーが含まれており、プログラミングを深く理解している人が修正する必要があります。
バイブコーディングのベストプラクティス
バイブコーディングが普及し、AIアプリビルダーをUXワークフローに取り入れるようになると、AIエージェントから有用で最適化されたアウトプットを確実に得るために、バイブコーディングのベストプラクティスを知ることが重要になります。
1. 具体的でシンプルなプロンプトを使用
- プロンプトの長さは1～2文程度にしましょう。
- より予測可能な結果を得るために、文脈に応じた言語を使用します。
- ターゲットオーディエンスや全体的な目標など、特定の情報に優先順位を付けます。
2. （できれば）Figmaで始めましょう。
- AnimaやBuilder.ioなどのFigmaプラグインを使用します。
- 任意のレベルの忠実度のUIデザインをFigmaからAIエージェントにインポートして参照します。
- 最初の UI デザインから、意図されたインタラクションと残りのアプリを構築します。
3. 複雑なタスクの分割
- AIエージェントが完了するための基本的なリクエストから開始します。
- デザインと機能に対する期待に応えるために、アウトプットを絞り込みます。
- AIエージェントが構築するための追加の基準を追加します（まだシンプルさを考慮しています）。
4. AIエージェントを共同作業パートナーとして使用
- あなたが望むアウトプットを得るために何度も試すので、忍耐強くなってください。
- AIエージェントは会話をするように設計されています。
- 参考になる例（画像、スクリプトなど）があればAIエージェントに渡してください。
Animaでのバイブコーディングのデモ
世の中には多くのAIアプリビルダーツールがありますが、UXデザイナーに適したものもあれば、そうでないものもあります。ほとんどのデザイナーは、AIエージェント用のプロンプトからゼロから始めるのではなく、Figmaで構築したデザインから始めたいと考えています。Anima、Lovable、Framerのようなツールは、それぞれFigmaと統合されているので、このようなことが可能です。
Lovableは、Builder.ioのFigmaプラグインを使ってLovableにインポートする必要があるので、私はLovableよりAnimaの方が好きです。一方、Animaは、Figmaから直接Anima Playgroundツールに取り込むことができます（さらに、無料プランでも十分な機能を利用できます！）。
Anima Playgroundツールでどのようにバイブ・コードができるか見てみましょう。
1. FigmaデザインをAnima Playgroundにインポート
Animaにインポートするには、2つの方法があります：
- Figmaのリンクを Animaのデスクトップ・サイトに貼り付けます。
ここで、URL テキスト・フィールドの下にあるドロップダウンを使用して、フレームワーク、UI ライブラリ、言語、およびスタイリングをカスタマイズできます(私はデフォルトの選択にしておきました)。
II.AnimaのFigmaプラグインを使用
プラグインで、紫色のボタン名 「Prompt in Playground 」を選択すると、Figmaのデザインが自動的にAnima Playgroundにインポートされます。
2. 作業中のデザインのライブ・プレビューを確認し、改良します。
Anima Playgroundでは、コード、プレビュー、Figmaデザインを切り替えることができます。作業アプリの最初のドラフトを操作し始めると、ボタンのホバー状態、カラーパレット、アプリの応答性など、変更したい項目があることに気づくでしょう。
Anima Playgroundのチャットを使用して、デザインとコードの変更をリクエストします。
コード化されたデザインの最初のプレビューを取得した後、私がチャットで尋ねた2つのプロンプトです：
- 画面サイズの変化に対応できるデザインにしてください。
- 「サインインして追加」 を選択したら、ログインモーダルを追加してください。
自然な会話形式でAIエージェントにリクエストすることができます。
3. Animaでライブアプリやウェブサイトを公開
デザインのライブプレビューに満足したら、Animaデスクトップサイトの右上にある 「Publish 」ボタンを使って、ライブアプリやウェブサイトを公開することができます。
これにより、テストセッション用のユーザーや、ハンドオフ用の開発者にライブアプリのリンクを共有することができます。
Animaプロジェクトを公開すると、ライブバージョンへのURLリンクが表示されます。
注：コードをダウンロードしてGitHubにプッシュすることもできますが、これらの機能を利用するには有料プランにアップグレードする必要があります。
AIは、私たちのUXプロセスを改善し、破壊し続けるでしょう。幸いなことに、Animaのような特定のAIツールによって、デザイナーは通常時間がかかり面倒なデザインプロセスのコード編集ステップを簡略化することができます。
エンジニアのリソースを待つ代わりに、UXデザイナーは自分のアイデアを自分の手で実現し、関係者に見せたり、ターゲットユーザーにテストしたりするためのフル機能のデモを作成することができます。
Vibe コーディングは、プログラミングの経験に関係なく、デザイナーが実際に動作するデモを作成し、探求、反復、テスト（そして繰り返し）を行う機会を広げます。
*1:原ポスト邦訳：《最近「バイブコーディング」とでも呼びたくなる新しいコーディングの形がある。完全に“ノリ”に身を任せて、指数関数的な発展を受け入れ、コードの存在すら忘れるようなスタイル。これはLLM（例：Cursor Composer + Sonnet）があまりに優秀になってきたから可能になった。自分はSuperWhisperを使ってComposerと話してるので、キーボードはほとんど触らない。「サイドバーのパディングを半分にして」みたいな超どうでもいいことを頼んでる。自分で場所探すのが面倒くさいから。「すべて承認」は常に押すし、差分ももう読まない。エラーが出たら、そのままコピペして送る。たいていそれで直る。コードは自分の理解の範囲を超えてどんどん成長していく。ちゃんと読もうと思ったらかなり時間がかかるレベル。たまにバグを直せないこともあるけど、回避策を試すか、適当に変更をお願いしてなんとなく消えるのを待つ。週末の使い捨てプロジェクトとしてはまあ悪くないし、なかなか面白い。プロジェクトやWebアプリを作ってるんだけど、もはや「コーディングしてる」とは言えない。ただ「見て、言って、動かして、コピペしてる」だけで、だいたい動く。》
