AIの時代、我々はどうプロダクトを創るのか？
はじめに
これはSun* Advent Calendar2024の1日目のnoteである。
Sun*は「誰もが価値創造に夢中になれる世界」をビジョンとし、Business、Tech、Creativeの人材を擁する、事業創造の0から100まで支援するデジタルクリエイティブスタジオで、これまで850以上のプロダクト開発実績がある。そんなSun*のビジネスデザイナーやデザイナー、エンジニア、PMといった様々なメンバーが今日からクリスマスまで様々な話題で連載をしていくのでぜひ期待していただきたい。
この記事では、生成AIによるアプリケーション開発の現在地を紹介しつつ、生成AIが急速に進化する中で、UI/UXデザイナー、エンジニア、PMといったプロダクト開発に関わる全ての人々が、この変化をどのように取り入れるべきかの一つの答えとして、AIと人間のプロフェッショナルが互いの強みを活かしながら、より迅速に、ユーザーにとって価値のあるプロダクトを生み出す方法論「HEART Development Flow」を提案する。
去年のSun* Advent Calendarでも1日目を担当し、かなり力を入れてnoteを書いたのだが、先日初対面の内定者の子に「遠藤さんですか！？Advent Calendarの遠藤さんの記事を読んでSun*に来ました！」と言われてすごく嬉しかったので、今年も気合いを入れて書くことにした。
この数ヶ月の成果をこれでもかと詰め込みボリューミーになってしまったが、お付き合いいただければ幸いである。
自己紹介
筆者は地方の公立高校から10年ぶりの東大合格を果たし、システムデザインを専攻して東大大学院の修士まで出て、Sun*に入社し、エンジニアをしたりビジネスデザイナーをしたりしながら新規事業など新しいものを創り出すことを生業にしている人間である。
AIは大学時代からずっと触っている。当時ChatGPTは無かったが、大学院で修士論文のためのコードを書いていたとき、コード生成AIのGithub Copilotのテクニカルプレビュー版に招待され、それがあまりに衝撃的でこの技術が世界を大きく変えることを悟ったことをよく覚えている。（そしてその時、従来のエンジニアという職業はいずれほぼ淘汰されると考えたので、ただのエンジニアとしてご飯を食べていくことは諦めた。）その衝撃の体験をしてからこれまでずっとAIと向き合い続けている。
そんなこんなで、去年はAIを使って新規事業アイディアを創出するAI*deationというサービスを立ち上げた（詳しくはこちら）。今年はこのAI*deationを自らSaaS化し、すでに様々な企業から問い合わせがくるサービスとすることができた（詳しくはこちら）。
このようにAIを使ったアプリ開発を自ら進めたり、最先端の情報をキャッチアップしてきた中で、「AIと人間はアプリ開発においてこう協業すると良さそう！」と、これまで自社で取り組んで来なかった新しい開発フローの仮説が浮かんだ。
そこで、社内でUI/UXデザイナーやPM、エンジニアの有志のメンバーを集めて「次世代開発フロー創出プロジェクト」を立ち上げた。AIを用いた開発フローを各職種（デザイナー、エンジニア、PM、ビジネスデザイナー）の異なる視点からブラッシュアップしつつ、実際にこのフローでアプリを作成した。約３ヶ月間の活動を通じて「これはイケる！」と感じたので、このnoteではAI時代の次世代開発フローについて紹介する。
その前にまずは重要な前提情報として、現在のアプリケーション開発におけるAIはどのような状況にあるかを記しておく。
AIによるアプリ生成の現在地
現在、生成AIの進化は目覚ましく、特にソフトウェア開発・コーディングの分野では、Claudeやo1といったLLM（大規模言語モデル）が驚異的な能力を発揮し世界に衝撃を与えている。
https://openai.com/index/learning-to-reason-with-llms/
そんなAIが開発の現場でどのように使われているかというと、一昔前はGithub Copilotやtabnineなど、コードエディタ内でカーソルがある位置の続きをAIに自動補完してもらいながらコーディングするという方法が主流だった。これでもコーディングが「定数倍高速化」されたものの、Copilotは文字通り副操縦士でしかなく、人間がAIを主導しながらコードを書く必要があった。
しかし現在はAIの進化に伴ってその状況が大きく変化しており、様々なツールがある中でも、大きく分けて以下2つの機能でAIは使われている。
Initial generation（「初手生成」）：テキストからアプリケーションのコード全体を生成する。
Iterative update（「反復更新」）：コードやアプリ（コードベース）に対して更新を指示するとAIが編集箇所を判断して更新する。これを繰り返すことでアプリの改善・ブラッシュアップができる。
この後紹介する開発フローにも関係するため、人間にとっての価値として2つに分けているものの、これらは本質的には変わらない。だが、AIと人間の共存する業務フローを考える上では、開発以外の他の領域だとしても「初手生成」と「反復更新」に分けて考えることが有効であると、ビジネスデザイナーとしての筆者は考えている。ビジネスの世界で「叩き台を作る人が一番偉い」とはよく言ったもので、人類は基本的に0から考えて作るよりも、あるものに対して改善点を見いだすほうが楽なのだと思う。そして「初手生成」と「反復更新」では、多くの場合走るプロンプトやアプリケーションロジックも二分されるので、技術的にもこの二つは分けて考えるのがいいとエンジニアとしての筆者も考えている。
「初手生成」の機能を持つツールは「反復更新」の機能を備えていることが殆どであり万能型である（例:v0、Replit agent、Bolt）。エンジニアでなくても扱えるため、非エンジニアによるアプリケーション開発もSNSで数多く見かけるようになった。「反復更新」の機能のみを得意とするものは減ってきたが、これはコードエディタ・IDEの延長でありエンジニアをターゲットユーザーにしているものが多い（例:Cursor Composer、Cline、Copilot Workspace、Windsurf）。どのツールを使うべきかという話は変化が早いが、この「初手生成」と「反復更新」の構造はしばらく変わらないと思うので、このnoteではこれから各ツールが進化した未来でも使える本質的な話になるよう、どのツールかというよりも「初手生成」か「反復更新」かという部分にフォーカスする。
また、非エンジニア、特にデザイナー向けの補足になるが、バックエンドだけでなくフロントエンドのコードもAIが書けるので、こういったアプリ生成AIはUIデザイン生成もできる。UIデザインの生成というとFigma AIやmotiff、Creatieなどもあるが、コードと双方向に完全対応できずコードとの二重管理になってしまい、双方向の変換の精度も100%にならないというv0等に対する相対的な欠点がある（これまでのデザインにとってはそれが当たり前だったのだが…。）。よって現状AIでのUIデザイン生成という領域は、Replit Agentやv0などのアプリ生成AIによるフロントエンドのコード生成の一要素として捉えられていることが多い。
さらに今後はAgent化が進むことが期待されている（つい先日の11/24にはCursor composerにもAgent機能がついた）。OpenAIも2025年にAgentのサービスをリリースするという噂もあり、さらにはAnthropicからModel Context Protocol(MCP)などAgentをより革新的なものにする技術も登場している。この流れが進むと、今後は、先ほどの「反復更新」で人間が指示する部分もどんどんAIに任せられるようになるだろう。2の改善サイクルが自動で回るようになれば、最初の指示さえあれば数学的帰納法のようにアプリが完成してしまうかもしれない。
これらのツールは、世界的にソフトウェア開発市場における開発費の低下や開発期間の短縮を進めることが期待されている。LLMは今後も性能向上していくためこの流れは止められないだろう。
AI時代の開発における課題認識
Replit Agentやv0によって誰でも思い描いたプロダクトをすぐに創れるようになった。（そこに多少の技術的課題はあれど、時間がすぐに解決してくれるだろう。）
そんな世界の中で、「これからの時代は『あなたは何を創りたいか？』という意志を問われることになる」といった話をよく目にするようになった。これは僕も同じ事を考えている。僕はAIで新規事業アイディア創出を支援するAI*deationというサービスを、アイディアを出すことが好きだからこそ立ち上げ、進めているが、最初のアイディアを創出し、意志をもって推進するという部分にこそ、価値創造における人間の役割の重心が移動していくと考えている。我々は幸か不幸か「さて、あなたは今何を創りたい？」と問われ続けており、答えを持っていればAIで何でも簡単に創れてすごく楽しい一方で、答えを持っていなければ生きづらい世の中を生きることになってしまうかもしれない。今後AI agentが一気に普及すればどの知的労働でもそんな状況になっていく可能性がある。今までのAIはCopilot（副操縦士）で人間がPilot（操縦士）だったのが、AIがPilotもCopilotも担うようになり、人間は飛行機で人を運ぶというビジネスをしたいと考え資金をかけて推進するという立ち位置になるだろう。
しかし本当にそれだけでいいのだろうか？人間は創りたいものを考え意志を持って推進すればそれでいいのだろうか？そして、AIで効率化・自動化すればそれでいいのだろうか？
僕はこうした議論の中にユーザー側の視点が欠けていることに違和感を感じた。創りたいアプリケーションが簡単に創れるようになった世界の中で、我々はいかにユーザーにとって本当に価値あるプロダクトを創るか？という問いが置き去りになっている気がしたのだ。これがこの次世代開発フローに取り組んだ出発点である。
僕はAIを使った開発の話にユーザー視点が置いて行かれがちになるという課題の原因として、AIで開発を高速化しながらデザイナーとAIがどう連携するかが見えていないということが大きいのではないかと感じた。そこで、AIで開発を高速化しつつ、デザイナーがユーザー視点からのインサイトを取り入れながらプロダクト改善をするという新しい開発フローを考えた。
（※注：ここで「デザイナー」と呼んでいるのは今figmaなどでUI/UXデザインをしている従来のデザイナーが中心だが、それにとどまらない。今後人間に求められる領域はより（広義の）「デザイン」や「アート」などにシフトしていき「デザイナー」という概念が変わっていき、さらにデザインに限らずスキルは民主化していくと筆者は考えており、ここで「デザイナー」と呼ぶのは従来のデザイナーのみならず、より多くの価値創造、デザインに向き合う人々が対象である。）
ということで次世代開発フロー「HEART Development Flow」について紹介していく。
次世代開発フロー「HEART Development Flow」とは？
僕の提唱する「HEART Development Flow」は、以下の3つの概念を軸に構築されている。
Human-centered by Experiential and Rapid iteration:「体験と素早い改善の反復を通じてユーザー中心のデザインを実現する」
AI-driven:「1のために、素早く形にする手段としてAIを有効に活用する」
Tangible Products and Code based:「1と2のために、プロダクト・コードをベースにコミュニケーションする」
まずこの開発フローで達成したいことはユーザーにとって価値あるプロダクトを作るということである。
そして、ユーザーにとって価値あるプロダクトを創るためにもっとも重要なことは、ユーザーに触ってもらえるプロダクトを素早く形にして実際にユーザーに使ってもらい、その体験から得られるフィードバックを基に、インサイトの解像度を素早く上げ、改善のイテレーションを行うということであると考えている。→Human-centered by Experiential and Rapid iteration
AIにより開発が高速化したことで、こうした改善のイテレーションによりプロダクトを創りあげるという進め方がよりやりやすくなった。すなわちAIの活用は目的ではなく、ユーザーに価値を届けるための有効な手段である。→AI-driven
開発でAIを有効に活用するためには、コードをAIとの共通言語として使うことが必要となる。また人間同士のコミュニケーションやUI/UXデザインに関する人間とAIの議論には実際に動くプロダクトを使う。すなわち（Figmaではなく）コードと動くプロダクトをコミュニケーションの最重要の媒体として進め、AIとデザイナーとエンジニアのスムーズな連携を実現する。→Tangible Products and Code based
そして以下の5つの要素の頭文字をとってHEART Development Flowと呼ぶことにした。
「HEART Development Flow」の流れ
HEART Developmentは大きく以下の3つのフェーズに分かれている。
サービスデザイン
MVP作成
提供価値の検証・改善
サービスデザイン
まずはユーザーリサーチ等を行い、どんなユーザーのどんな課題に対してどんな価値を提供するのかなどサービスのコンセプトについて言語化する。ここでは重要な要素を抑えながらより良い仮説が立てられるよう「バリューデザイン・シンタックス®」等を活用すると良い。すると、チームでコンセプトの共通認識を得た上で、プロダクトに必要な要求事項を洗い出すことができる（ここでもAIを活用できる）。
※注：バリューデザイン・シンタックス®については以下の書籍を参考にされたい
MVP作成
プロダクトの要求事項を洗い出すことができれば、それをアプリ生成AIに入力してアプリケーションのコード全体（=プロダクト）を一気に作成（「初手生成」）できる（僕は当初この部分のシステムをDifyで自作していたが、現在ではReplit agentやv0をはじめとする各種ツールを使えば全く問題無い）。
ここではまだ細かいスタイリングは作り込まれていない、基本的な骨格が整った動きが確認できるアプリが出来上がるが、我々はこれをマイクロアプリと呼んでいる。ステークホルダー間で実際にこのアプリを触り、この時点でアプリの要件に相当するような構造に関わる修正があれば、Cursorなどを使った「反復更新」で修正する。すなわち、要件などを細かく整理してから作るのではなく実際に動くものをAIでサクッと作ってしまって、それを見ながらすりあわせる。
次のマイルストーンは実際にユーザーとなる人間に触ってもらいフィードバック・インサイトを得ること。ユーザーに触ってもらい実際のアプリの提供価値を正しく検証するにあたっては、UI/UXをデザインするべきである（ただしここでは、完璧な製品をデザインすることよりもできる限り早い段階からユーザーのフィードバックを得ることが重要であることに注意）。
そこでデザインの「反復更新」をしていくが、まずデザイナーが改善点をGithubのIssueなどで起票する。もしエンジニアが読んで不明な内容があればそのスレッド上でコミュニケーションを取る。デザイナーの起票は基本テキストだが、必要に応じて参考画像などを貼ってももちろん構わない。そしてエンジニアがCursorやCopilot Workspaceなどにデザイナーの指示を伝えて「反復更新」していく（起票をGithubにするとCopilot Workspaceとスムーズに連携できて便利）。更新がデプロイされたらそのデプロイされたプロダクトをデザイナーが確認する。そしてさらに改善点をフィードバックする。という形のイテレーションでデザインを進める。技術的な話になるが、v0などを使っているとNext.jsになることが多いと思うので、この時Vercelを使ってGithubと連携させておく。そうすると、ブランチごとにPreview環境に自動でデプロイできて、Issueごとに別ブランチで並列的にこの「反復更新」ができるので、複数のデザイナーとエンジニアの連携がしやすく、より効率的になる。
この更新の例として単純な通帳アプリの例を紹介する。このようなUIがあったとしよう。
そこに対してデザイナーが以下のデザイン改善指示を起票したとする。
これをCursor Composerで指示をする。
当時CursorにAgent機能は無かったので現在の挙動とは異なるが、このように修正箇所を判断して実装がされる。エンジニアがそれを見てさらに修正の必要があると思えばさらに反復して修正指示をする。今回このやりとりで以下のようなUIとなった。
そしてこのブランチをpushすることでvercel上にプレビュー環境がデプロイされ、それをデザイナーが確認出来る。これを繰り返すことでUIを高速に改善していく。この例ではCursorを使ったが、Copilot Workspaceを使えばGithub上で完結でき、フロントエンド実装はデザイナーとAIだけで完結する可能性も大いにある。（今回Copilot Workspaceのテクニカルプレビュー版が使えたためこれも試したが、まだモデルの性能がよくないせいか精度がCursorに劣ったためCursor上のClaudeを使った。）
また、このフロントエンドの改善においてはIssueを細かくしすぎなくても良く、加えて構造的で抽象的な修正から行っていくと良い。ゆえにデザイナーの起票したIssueに対してエンジニアがPull Requestを行う際に複数のIssueに対して1つのブランチでまとめて修正を行ったり、より構造的な修正から行ったりといった工夫をすることが有効だ。
なおバックエンドに関しては「初手生成」された内容についてエンジニア起点でCursor等で同じように「反復更新」するが、現状Cursor上のo1-miniでも非常に高い精度で実装ができ、フロントエンドよりもAIで実装がしやすい。
データベースもReplitで自動的に作ってもらうか、Supabaseのdatabase.buildなどを活用して設計する。
またテストやドキュメントもCursorなどを使ってコードベースから生成し「反復更新」していく。
そしてユーザーに提供できるようになり次第、クローズドなテストユーザーを集めるなどして、対象となるユーザーに実際に使ってもらう。
提供価値の検証・改善
さて、ユーザーに実際に使ってもらうところまで来たが、これは終わりではなく始まりである。これまで作ってきたアプリは仮説にすぎない。ここからはユーザーのフィードバックから仮説を検証しつつさらに継続的に改善を重ねていく。ユーザーインタビューやアンケートフォーム、アナリティクスなどによる定性/定量調査によってインサイトを得て、先ほどのマイクロアプリのブラッシュアップと同様にAIが改善を重ねていく。デザイナーはこの改善サイクルを主導する役割を担い、顧客の受容性を見ながらより戦略的にアプリの目指す方向性を指し示して、ユーザーにとって価値あるプロダクトを作ることを目指していく。
Failing fast, using feedback loops, and the benefits of iterative design | by Tom Waterton | IBM Design | Medium
これがこのFlowの大まかな全容である。ここで説明しきれなかった部分も多いが、AIで開発を高速化しながらユーザーにとって価値あるプロダクトを作るという考え方とそのための進め方が少しでも伝わっていれば幸いである。
僕の目指す未来
AIの進歩によって今後はより開発の自動化が進み、自分が何を創りたいかというビジョンとアイディア発想の時代になるだろう。僕個人としては写真家活動もしていたり（本noteのカバー写真も筆者撮影）とアート思考な人間なので楽しい世界なのだが、一方でユーザー視点でプロダクトを創るというデザインの観点も忘れ去られないようにしたい。かといって我々デザインに携わる者がAIを取り入れずこれまでの方法に固執していれば、それは産業革命後の伝統工芸のように相対的に贅沢品になり、多くの人々に価値を届けられるものでは無くなってしまうだろう。ゆえにAI-drivenの効率化とユーザー視点を共存させるHEART Developmentの考え方をより多くの人に広めて、自分の理想とするプロダクトを創るだけではなく、他者の視点に立ったプロダクト創りにも夢中になれる、そんな一人ひとりの多様なCreativityに寄り添う「誰もが価値創造に夢中になれる世界」になって欲しいと心から願っている。
終わりに
最後まで読んでいただきありがとうございました。
HEART Development Flowに関して、Xなどでぜひご意見やご感想をいただけると嬉しいです。また、これを参考にアプリ開発してみたといった発信があったら泣いて喜びます。
筆者のXはこちらです。
HEART Development Flowはこれからもアップデートしていきます。また、Sun*ではここで紹介したフローでのAIとデザイナーとエンジニアの協働によるアプリケーション開発ができます。クイックにアプリを開発したいが予算が足りないなどの課題をお持ちの方がいればぜひSun*にご連絡いただけると嬉しいです（このnoteを見たと伝えるとスムーズです）。
リーフレット↓
明日の記事はYuta Ikenoさんです。お楽しみに！
※注：バリューデザイン・シンタックス®は、株式会社Sun Astariskグループの株式会社NEWhの登録商標です
いいなと思ったら応援しよう！
