ナレッジ・ノウハウ

AIに乗り遅れていたデザイナーが、バイブコーディングに挑戦してiOSアプリをリリースした話

こんにちは。グッドパッチのUI/UXデザイナー、KCです。

最近はデザイナー界隈でも、生成AIの話題で持ちきりです。MCP、AIエージェント、バイブコーディング──日々新しい単語が飛び交う昨今、正直に言うと、僕はAIの進化に全くついていけていませんでした。

トレンドについていかなきゃ、新しい知識をインプットしなきゃ……という気持ちはもちろんあったのですが、日々の忙しさを言い訳に勉強はなかなか進まず。申し訳程度にChatGPTに仕事の相談をしたり、壁打ち相手になってもらったりはしていましたが、「生成AIをちゃんと使いこなせている」という実感はありませんでした。

そうこうしているうちに、SNSのブックマークには「生成AIで○○が効率化!」といった内容などの、生成AI関連の投稿や記事が溜まっていくばかり。これはそろそろまずいのでは──そんな焦りが込み上げてきた矢先、グッドパッチへの入社が決まり、一念発起して生成AI周りのインプットを改めて進めることにしたのです。

この記事は、生成AIの波に乗り遅れていた、コードが書けないデザイナーが、バイブコーディングでアプリ開発に挑戦した記録です。自分の経験談がこれからAIを学ぼうとしている方の助けになれば幸いです。

期間は1カ月、ゴールを「iOSアプリのリリース」にした理由

勉強を決意したのはちょうどクリスマスの時期。お正月に向けてダラダラするには1年で最も適した時期ですが、僕には時間がありません。入社までの約1カ月で、iOSアプリをリリースすることをゴールに定めました。ゴールを「知識を得ること」ではなく「iOSアプリを作ること」に設定した理由は3つあります。

まずは、「作る過程」こそが最大の学びになると考えたからです。思えば、SNSのブックマークが山積みになってしまったのも、インプット過多で消化不良になってしまっていたから。アウトプットを前提にすることで、必要な知識を定着させられると考えました。

最近のAIツールの進化を見ていると、コードが書けないデザイナーでも、アイデアを形にできる土壌が整いつつあると感じていました。「自分でも作れるかも」という手応えがあったのが理由の2つ目です。

そしてちょうど、学生時代に技術力が足りずに作りかけで終わってしまったアプリのアイデアがありました。このアプリを再開発するいい機会です。生成AIの力を借りてリベンジしてみたいと考えました。こうしてiOSアプリの開発が始まったのです。

「AI初心者」におすすめの知識インプット方法

まずはアプリをリリースするまでの大まかなロードマップをAIと一緒に作り、そのロードマップを軸に、AIの仕組みから最新ツールの使い方まで、必要そうな知識を少しずつインプットしました。

先ほども書いたように、とにかく大事なのは「実践」です。知識については、最初から完ぺきに理解しようとはせず、「分かることを増やしていこう」くらいの気持ちで進めました。具体的に行ったことは、以下の通りです。

  • XでAIについて発信している方のポストを読む
  • 記事を読む(分からない単語はその都度調べる)
  • YouTubeで解説動画を見る
  • 触れそうなAIサービスはとりあえず触ってみる
  • AIを使い倒している友人に相談する

特に初めて学ぶ方におすすめなのはYouTubeの解説動画です。時間は15分程度の比較的短いものから、60分を超えるような重厚なものまでさまざまなものがあり、時間に合わせて視聴できます。個人的にざっくり全体像をつかむのに役立った動画を紹介します!

カテゴリを分けて、学ぶ順番などを考えたわけではなく、とりあえずさまざまな情報や知識に触れ、後で点と点がつながればいい、くらいの感覚でとにかく量を意識しました。インプットを毎日少しずつ続け、1週間ほどで全体像が何となく見えてきました。

たとえ理解が浅いままでも、とにかくアプリを作り始める

勉強を始めて1週間、まだ分からないことだらけでしたが、とりあえずアプリを作り始めました。作りながら学んだ方が早いと考えたからです。使ったツールは下記の通りシンプルです。どのツールを使うかは、インプットした内容やAIに相談した内容を参考に決めました。

※2026年1月初旬時点でのツール選定です。AIの進化が激しい昨今なので、今はもっと良い選択肢が出ている可能性もあります。あらかじめご了承ください。

  • Layermate:UIの初期発散
  • Figma/Figma Make:画面設計とプロトタイプ
  • Cursor:要件整理と実装

開発に使ったツール一覧

 

基本的には、全工程でCursorに相談しながら進めました。手順が進むタイミングで報告や相談をして「次どうすればいいか」を聞いたり、画面のスクショを貼って、うまくいかないところをそのまま見せて相談したり。

ただし、すべてをAIに丸投げはせず、出力結果は全て自分でも読むようにしました。目的はあくまで「アプリを完成させること」だけでなく、AIについて学んで、一定の再現性をもった知識を身につけること。そこを見失っては本末転倒です。

つまずきから学んだ「AIとの向き合い方」

アプリの開発は全体的にスムーズに進みましたが、やはりうまく行かないこともありました。つまずきから学んだ点は大きく3つです。

AIへの「デザイン」の伝え方

プロンプトの内容があいまいだと、出力結果も当然あいまいになります。それは分かってはいるのですが、特にデザインについての依頼は、言葉で説明を尽くしても、どうしても伝わりにくいことがありました。

デザインを大きく変更する場合や細かい調整に関しては、Figmaでデザインファイルを作成してそのスクショとともに変更依頼をしたり、リファレンスのスクショとともに変更依頼をすると、意図通りに実装できたことが多かったです。

Cursorにスクショとともに変更依頼をしている画面

ちなみに、実装を先行して作成した画面のFigmaファイルを生成する際には、実装した画面のスクショをFigma Makeに投げて、「このスクショのUIを正確に再現して」と依頼するとFigmaファイルを用意する手間が省けて効率的です。

AIに意図が伝わらないときは、自分の伝え方が悪い

意図通りになかなか進まなかったり、初めてのアプリ開発で、意味不明なエラーが何度も出たりして、心が折れかけたことは少なくありません。正直、なかなかエラーが解決しないときもあり、AIとケンカしかけたこともありました……。

AIとのやりとりの一例

もし、うまくいかないループにハマりそうになったら「AIは自分の指示に沿って動いてくれているので、AIは悪くないはずだ」と落ち着くところから始めましょう。

「自分の伝え方が良くないんだ」と内省することも多々あり、自分で解決策を考えることもありましたが、AIへの相談もよくしていました。意図通りに実装を指示できない状況についてAIに相談し、その解決策を出してもらうというのも状況を打開する立派な方法です。

AIがくれるのは「選択肢」。方向性や結論を決めるのは自分

どの機能を実装し、何を削るか。AIは選択肢を提示してくれますが、ディレクションをしたり、最後に意思決定をしたりするのは人間です。僕はこれまでプレイヤーとして動くことが多く、機能の最終決定をするような機会は比較的少なかったこともあり、慣れないアクションをすることに戸惑うこともありました。

「ディレクション力」や「意思決定力」を伸ばすのは一朝一夕では難しいと思います。しかし、逆に考えると、AIと向き合うことで、普段の業務では経験しにくい意思決定のトレーニングができる、という捉え方もできるでしょう。ぶつかった壁を前向きに捉えることで面白さも感じつつ、さまざまな決断をしていきました。

開発初日でアプリが「動いた」瞬間の感動

開発を経て画面も進化

見切り発車気味に始めたアプリ開発でしたが、AIと相談しながら何とか進めていくと、デザインは全然うまく実装できていないものの、開発初日でシミュレーター上に「動く画面」が表示されました。

Figmaで作ったプロトタイプではなく、本物のコードで動くアプリとして、自分のデザインしたUIが表示される。その画面をタップし、実際に数字がカウントされた瞬間は感動しました。

AIとやりとりをしていると、期待以上の出力結果が返ってくるときがたまにあるのですが、その際は「ありがとう!ラッキー!」とか思いながら進めることもありました。自分の手でつくり、動かし、直す。このような体験を通して「モノづくりってやっぱり楽しい」という純粋な気持ちを思い出しました。

そして、開発を始めて約1カ月、途中でiOSストアへの申請でつまずいたりもしましたが、グッドパッチに入社する直前に(!)何とかアプリをリリースすることができたのです。

AIでつくって気付いた「デザイナーの価値」 手を動かすほど、AIは楽しくなる

イマドキのAIは、UIや機能をすぐに形にしてくれます。ただ、その出来が本当に良いかどうかを判断できるのは、あくまで人間です。使いやすいか、迷わないか、気持ちよく操作できるか──この「体験の質」を細かい部分まで見極めて調整できることが、デザイナーの強みだと感じました。

サクっと形にするのはAIが強力に補助してくれるからこそ、デザイナーは「どんな体験であるべきか」の判断に集中できると良さそうだなと思いました。また、デザインファイルを直接編集しながら「ここをこうしたい」を具体的に指示できるのも、デザイナーの武器だと思います。

勉強をする前は「AIについていけない」と焦っていた僕ですが、一歩踏み出して手を動かしてみると、AIは恐ろしい存在ではなく、頼もしい「チームメイト」に変わりました。

また、AIを最初から完ぺきに使いこなそうとしなくても大丈夫なことにも気付けました。少し雑でもいいので、まず投げてみる、聞いてみる。その一歩を自分から出すことが大事なのだと思います。AIの力を借りることで、大学生のころは一人では到底できなかったアプリ開発が、自分一人でも形にできるようになりました。この変化は純粋にすごいですし、技術の進歩に素直に感動しました。

今回はiOSアプリをリリースすることができましたが、知らないことや使っていない機能はまだまだ多いです。これからも生成AIの進化を追いかけながら、業務を楽にするツールや、チームで使える社内ツールも作っていけたらと思っています。

ちなみに、今回リリースしたアプリは「Flex Counter」という数をカウントするシンプルなカウンターアプリです。特徴は、数をカウントするエリアを柔軟にカスタマイズできる点です。良かったらぜひダウンロードしてみてください!

Flex Counter – カウントエリアをカスタマイズ – App Store

UIデザイナー募集。中途メンバー積極採用中!募集要項はこちら