見出し画像

AIと協業するデザイン実践──プロトタイピングで見えた変化

とりみずの

本記事は #IVRy_AIブログリレー の9月18日（12日目）の記事です。
昨日は、VP of Sales Strategyのmotoaki さんが「AIと一緒に創る"珠玉の提案"の可能性。AI時代の営業力の磨き方を探る」を公開しました。
リレー全体は 「IVRy AIブログリレー全記事まとめ」からご覧いただけます。

デザイナーの torimizuno です。
早いもので、IVRyに入社して今月でちょうど1年が経ちました。

「AIと協業するデザイン」と聞くと、効率化や自動化を思い浮かべる方も多いかもしれません。私自身も最初はそのイメージを持っていました。

ただ実際にプロダクト開発の現場でAIを使ってみると、効率化にとどまらず、チームの議論の仕方やアイデアの広がり方、そして文化的な変化にも影響が出てきました。


なぜ取り組んだのか

IVRyではプロジェクト制を採用しており、2025年7月から私も別プロジェクトチームへ異動し、IVR前提からAI対話前提の体験へとアップデートする取り組みを進めています。

特に重視していたのが、お客様がAI対話の設定を自分で終え、すぐにAI対話を利用開始できるオンボーディングです。

現状の受電ルール設定を分析し、それを音声認識による対話でカバーするにはどんな設定が必要か。PdMを中心にチームで議論し、仮説を立てては検証していました。

その中で、セールスが寄り添って応対するようなチャットベースのヒアリング体験というPdMの初期アイデアがありました。
私はその方向性をベースに、デザイナーとして複数の可能性を広げてみたいと考えました。

IVRyでのプロトタイピング文化

IVRyでは、PdMが脳内のイメージをAIでのプロトタイプとしてチームに共有する動きが盛んに行われています。

今回PdMがGemini Canvasで検討していた初期アイデア


理想的には Figma Make でデザインガイドラインに沿った形でのプロトタイピングを行いたいのですが、まだ検証段階。
そこで今回はまず、Gemini Canvas を使ったプロトタイピングから始めました。

Gemini Canvasでのプロトタイピング

案件概要（価値仮説や要件）をAIにインプットし、チャット以外のUIパターンを生成してもらいました。

提案された方向性は以下の4つです。

1. フローチャート（ビジュアルエディタ）
2. ステップバイステップウィザード
3. フォームベース（高度な設定）
4. テンプレート選択＋カスタマイズ

プロンプトを読ませながら進めると、数分もかからず「入力内容が反映される動くプロトタイプ」が完成。
目で見て触って確かめたい体験を、最短距離で確認できる感覚がありました。

Gemini Canvasで試していたプロトタイピングの一部

できあがったプロトタイプをチームやセールスメンバーに共有し、フィードバックをもらって反映する。
このサイクルを1日に数回、多いときには10回近く繰り返せるようになったのは、従来のFigmaデザインだけでは難しかった部分です。

さらに、プロトタイピングを全員で触ることで、PdMやデザイナー以外のメンバーも自分なりのアイデアを形にしてみる動きが生まれたのも印象的でした。

Canvasで感じた課題とGoogle AI Studioへの移行

Gemini Canvasは最初の出力は良いのですが、細かいUI調整を繰り返すと関係ない部分が変わってしまったり、エラーが増えたりして、「時間をかけるほど品質が下がる」というジレンマに陥りました。

また、共有にも課題がありました。Canvasではエクスポートしたコードを相手の環境で読み込む必要があり、再インポートすると出力が少し変わってしまうのです。

そこでチームに相談したところ、修正を重ねるなら Google AI Studio が良いとアドバイスをもらいました。
Gemini Canvasで作ったプロトタイプをAI Studioにインポートし、レビュー反映はそちらで行うことにしました。

Google AI Studioでの改善

Google AI studioで試していたプロトタイピングの一部

Google AI Studioに切り替えた結果、修正対応が安定し、指示通りのアウトプットが得やすくなりました。
リンク共有で全員が同じプロトタイプを確認できるようになったことで、フィードバックも効率的に反映できました。

当初は「チャット形式が良いだろう」と想定していましたが、実際にフォーム案を動かしてみると「フォームの方が設定を早く完了できる」という評価に逆転。
今回のオンボーディング改善では、まずフォームベースの発展形で検証できそうという着地になりました。

Slackでのやりとりの一部

全体の方向性が定まった後は、AIで作ったプロトタイプをベースに、Figmaの既存コンポーネントを利用してデザインデータ化し、アイブリーの共通デザインに落とし込みました。

副次的な効果：AI出力の再現性を試せた

今回のプロトタイピングでは、単なるUI検討だけでなく、AIが実際にどのような出力を返すかも組み込みました。

想定に近い出力が得られるかを早めに確認できたことで、生成の再現性を把握することができました。
これは設計段階での安心感につながり、次の検証フェーズに進む後押しになりました。


得られた学び（実務面）

今回の取り組みを振り返ると、実務面では次のような学びがありました。

  • 複数のアイデアを短時間で比較できた
    一案ごとに時間をかけるのではなく、初期段階から複数案を並行して試せた。

  • 検証サイクルを細かく回せた
    プロトタイプを基にした議論と改善を1日に何度も繰り返し、仮説の確からしさを早めに見極められた。

  • 生成AIの出力再現性を確認できた
    想定に近い応答がどの程度得られるかを早期に把握でき、設計段階でのリスクを減らせた。

もたらされた変化（文化面）

一方で、文化的な側面にも大きな実感がありました。
AIプロトタイピングは、単なる効率化のための手段にとどまらず、チーム全員がアイデアを出し合い、改善に参加できる環境をつくっていきました。

  • アイデアを持ち寄れる共通の土台
    言葉では伝えにくい発想もAIで素早くプロトタイプ化でき、職種を問わず「こういうのはどうか？」と提案しやすくなった。

  • 試すことへの心理的ハードルの低下
    完成度を求めずに「まずは形にしてみる」文化が根づき、失敗を前提にした実験が自然にできるようになった。

  • 改善の主体が分散したことによるスピード感
    特定の役割に依存せず、複数人が同時にアイデアを触って改善できるようになり、全員参加型でサイクルが回るようになった。

  • 生成AIとの向き合い方の共有
    実際に触ることで「AIはここまでできる」「ここはまだ難しい」という感覚をメンバー全員で持てるようになり、次の開発判断に生かせた。

今後

今回の検証ではClaudeでのプロトタイピングまでは触れられませんでした。
今後は並行処理が得意なClaudeも試しつつ、どのタイミングでどのツールを使うのが適切かを解像度高くしていきたいと考えています。

また、Design Guidelineと一致した状態でのプロトタイピングはまだこれからです。
Figma MakeやMCPでの検証も続けていく予定です。

おわりに

IVRyでは、「もっと会社について詳しく知りたい」という方に向けて、キャリア登録やカジュアル面談の機会をご用意しています。
イベントや最新ニュース、募集ポジションの情報もキャリア登録者向けに随時お届けしています。

採用情報

IVRyデザインチームに関する情報

また、IVRyデザインチームでは定期的にリレーブログを公開しています。こちらもぜひご覧ください。