AIデザインとバイブコーディングの相性の良さ

現在、個人開発でブログキュレーションアプリを開発中です。

UIデザインについて、v0などのAIデザインツールを使う際に、
バイブコーディングが役立ったので共有します。

前提

以下の前提で話そうかと思います。

• 作りたい機能があるが、デザインは決まっていない
• デザイナー不在で、一人デザイン

個人開発はモバイルアプリですが、Webアプリでも含まれる話かと思います。

いきなりAIデザインを使わない

作りたい機能があるなら、AIデザインでプロンプトを工夫してデザインを生成して貰えます。
すごくカッコ良いデザインや、斬新的なデザインなど驚くデザインを見ることができます。
見る分には良いのですが、以下の疑問点がありました。

• 実現可能なのか？
  • さまざまなデータ・機能を用意することができるのか
• "見る"と"使う"は全然違う
  • "使ってみる"と、思ったより使いにくい

とくに後者の "使う" というのは大事で、画面上（想像上）の体験と 物理上の体験はかなり外れている ことがあります。
利用者の状況・感情などを踏まえた上で体験すると、親切に考えていた機能や動線がむしろ余計になることがあります。

バイブコーディングと体験

そこで、バイブコーディングの出番です。
私の場合、モバイルアプリで体験したい必要最低限の機能を、2日程度で完成しました。
最低限の画面構成と、画面に欲しいコンテンツだけは決めておいて、画面内の情報整理はせずにAIに見た目を実装してもらいます。
コード詳細は読まずに、ノールックでマージします。笑

動く形になったら、私のスマホに開発したモバイルアプリをインストールして体験してみます。
自然に使いたいので、使いたい時にアプリを使いますし、通知をもらってアプリを開くこともあります。

• 朝食中なら時間に余裕がないので、記事リストのタイトルをぼーっと眺める
• お風呂上り後なら自由な時間なので、購読したブログの記事を1つずつ読む

実際に体験することで、想像していた体験と実体験との差分 が分かってきます。
想像していた機能があまり使われなかったり、
ニッチな機能の利用頻度が異常に高かったりするのがわかってきました。
私の場合は、新着記事（から過去記事）の縦無限スクロールによるザッピングが一番触っていました。(笑)

スクショとAIデザイン

体験することで、何が欲しいのかと具体的な言葉を使って説明できるようになります。
また、最低限の機能は完成しています。
例えば、通知機能やブログ記事データのデータ構造などは解決済みで、
ブログ記事の集計系ソート（購読者数が多い順や更新頻度が高い順など）のパフォーマンス問題も解決見込みです。

ただ見た目だけは、とても残念になっています。
AI に雑に作らせていたので、見た目は破茶滅茶です。
余白設計はバラバラですし、レイアウトに規則性がありません。
コピーライティングも、プログラム変数名が出ていたりします。

そこで AIデザインツールの出番 です。
私の場合は、Google Stitch を使っています。（なんでも良いです）

デザインツールに、開発した画面スクショを貼り付けて、そのデザインをまずそのまま生成してもらいます。
といっても、だいたいのデザインツールは気を利かせて、良い悪いさまざまデザインを変えて生成してきます。
あーだこーだプロンプトを伝えても不毛 なので、気にしません。

その後、実際に触ってみて感じた違和感を適宜言語化して、デザイン案を出してもらうのです。
解決案は一切書かずにテキスト指示することで、自分の想像する角度と異なるデザイン案をもらうことができます。

• 『記事を読むのにタップ数が多いので、1タップ以内で読めるようにして』
  • 前後の日付移動は1タップ、年月移動は2タップ以内 など
• 『画面下部に頻繁にアクセスするxやyを置いて』
  • 逆にあまり使わないけど必要な機能は、上部に置いて
• 『記事を、日付や購読ブログなどのファセットで絞り込めるようにして』
  • 未読・既読や、過去の記事を見分けれるようにしたい

それぞれの指示から生成されたデザインを見て、『このデザイン良いな』と思うものを見つけるのです。
全部OK は基本ないので、良さそうなアイデアを貰う、というスタンスです。
（無料枠内まで）何度も繰り返して、納得いく画面を作っていきます。

このUIデザインは、冒頭の"いきなりAIデザイン" よりも "より現実的な体験" に近しいものになっています。
作ってみて『あれ、なんか違う』を潰せているため、以前よりも手戻りリスクは小さくなっているはずです。

終わりに

とりあえず動くものをバイブコーディングでサクッと作り、
実際に手元で動かしながらUIデザインを練っていく、
というサイクルが短時間で実現できるようになるのは、AI のおかげだなと思います。
ぜひご参考ください。

-

読者になる

|

シェアする

|

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

関連する記事

タグ「AI」の記事

パソコン苦手両親のAIへの信頼感

お葬式関連で、実家に帰省した際の話です。 家族みんなで夕食を頂く際に『AIがあるJ:COMのインターネットを契約しようと思ってるんや』という父からの話がありました。 どうやら AI というワードに魅力を感じ、『なんか知らないけど、なんでもや

2026年04月16日

雑談

AI

AIエージェント、マルチよりシングルの方が効率良いのでは

私は、AI エージェントのマルチタスクをしたことがない人です。 そのため、この記事はただの偏見です。 定量的なデータも示さないため、ふわふわとしたポエムです。 マルチタスク 複数のタスクを並列で進めるとします。 Web開発者であれば、AI

2026年03月19日

AI

雑談

仕事

AIが書いた重厚なプルリク説明文、読んでますか？

Claude Code や Codex 等の AI にプルリク（以下、PR）を書かせて効率化することができます。 けれど、その書かれたプルリク説明文、ちゃんと全部読んでいますか？ レビュワーの負担になっていませんか？ ノイズが多い プルリク

2026年03月06日

AI

仕事

← ブログ一覧へ