メむンコンテンツぞスキップ
芋出し画像

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デザむンチヌムでは定期的にリレヌブログを公開しおいたす。こちらもぜひご芧ください。


     
     
    ふらっず旅するデザむナヌです。最近は山に登っおいたす。365日寿叞を食べたい。

    あなたぞのおすすめ