If you're thinking, “The UI of apps made with AI is kind of iffy, isn't it?”

AI で作ったアプリ UI 微妙だよね。 って思っているあなたへ
Pencil で実現する Describable な Vibe Design Process。

Transcript

1. AI で作ったアプリ UI 微妙だよね。 って思っているあなたへ Pencil で実現する Describable な Vibe Design Process。 近藤もとや @mtyk_15
2. V0で一発でアプリが作れる時代に !
3. けど、なんとなく微妙なこと多くない? どれも同じような見た目してるし ...。
4. 早くなったけど...。 その代わり、こんなこと言われませんか。 なんか見た目がなぁ...。 AI 頼みだと、自身の UI に関するディレクションが不十分にな りバイブコーディングツールのテンプレート化されたデザイン システム頼みになってしまう。 なんか動線がなぁ ...。 「こういうことをやりたい」という考えをもとにユーザーに当 てながら何度も検証し、それを UX という形に言語化していく コストを削減してしまってる。 それで結局。何ができるの ? ソリューションだけを考えてしまい、本当にユーザーは何を求 めていているかを考え抜くことが疎かになる。加えて Hi-Fi な 動くものがすぐに見えてしまい、ソリューションの本質的な価 値が見えづらくなる。
5. v0で失ったもの Design process が Black box 化 事業 戦略 ユーザー 調査 課題定義 solution 検討 UX 言語化 UI議論 PM / Designer が価値の言語化 & 可視化 PM やデザイナーが開発前に時間をかけて「誰の何を解決する のか」の言語化や、それを UIUX に落とし込む作業をしてい た。 Rapid な Vibe Design 中間の作業をごっそりスキップできるようになってしまった。 PM / デザイナーがやっていた作業をスキップできるようになっ てしまった。 ユーザー 調査 Design process の Black box 化 課題定義 solution 検討 🤖 UX議論 UI議論 事業 戦略
6. 失ったなんて言わせない Black box にさせない。Describable な Vibe Design Process。 ユー ザー 調査 課題 定義 soluti on 検討 🤖 UX議 論 UI議 論 事業 戦略 Agent とPM / デザイナーの仕事を一緒にやる それが Pencil ユーザー 調査 課題定義 🤖 solution 検討 UX議論 UI議論 事業 戦略
7. Pencil とは Figma + Claude のような AI Agent を活用して対話的に UI を作れるツール https://youtu.be/mduKhXvmsyA ※ 現在は無料ですが将来有償になる可能性があります
8. Pencil とは Pencil で Design Process はどう変わるか Claude がデザインできる デザイン作成も Claude を通してシームレスに行えるので、 より AI Agent の頭脳や情報処理能力を活用しやすくなっ た。コンテキスト管理の責務をClaudeに移譲できるので、 デザインツールの性能に引っ張られることも無くなった。 プロセスを共有可能に プロフェッショナルの仕事の進め方を AI Agent が読める形の ドキュメントに落としていくことで、利用者がそのスキルを得 ることができる。 利用者 情報収集 prompt eng i nee ri ng 設計されたプロセス の参照 UI得意 情報整理得意 情報収集 言語化 / 可視化 プロセスの整理 言語化 / 可視化 PM得意 作業はやい 情報整理得意 UI得意 Agent の力を借りる 人が Agent っぽく動く
9. Pencil でできること Claude がデザインできる 事業 戦略 ユーザー 調査 課題 定義 🤖 solution 検討 UX議論 UI議論 議論 ←> 可視化を MCP でシームレスに Pencil は MCP を公開しており、この MCP で基本的なデザイ ン作業がカバーされている。これにより、MCP ツールチェイン の中の 1 つとして利用することが可能に。 ニュアンスを伝える。 これまでは Context は文字か画像が主流。会議の議事録を渡すにも 別の Agent で整理してから渡すことが必要だった。
 Pencil では、実際のサイトや実装をそのまま渡したり、生の情報を 扱えるようになった。
10. Pencil でできること Agent の力を借りて PM ができる 情報をそのまま渡してワイヤーフレームを複 数案作ってもらう なんかこの体験いいかも ! の言語化を手伝っても らう 今回のドメイン https://... のサイトにすごく似ているから、そこをみ てどんな情報設計が存在しているか言語化してほしい。特に〇〇の部 分が良かったので、何がいいのか言語化した上で僕らの体験のブラッ シュアップ案を一緒に考えてワイヤー案に起こして欲しい。 Claude Code |Notion の https://notion.so/... に議事録があるのでこれを参考に しつつ、ユーザーヒアリングした MTG の議事録が Meet の https://... にあるのでこれをベースにどんな UX パターンを検証す るといいか考えて欲しい。
 またその案に従って、いくつか UI の案を考えてもらえる?
 あと Slack で代表からのコメントもあったのでそのスレッドも確 認して。 Claude Code
11. Pencil でできること プロセスを共有可能に 事業 戦略 ユーザー 調査 課題定 義 🤖 solution 検討 UX議論 UI議論 Claude code の機能をそのまま活用 Claude code の skills 等も活用できます。
 自社の skills や MCP を育てることで、より自社らしい UIUX の作り方をすることができます。 自社ではこうしたい ! が再現可能に npm package 等でこうした skills を共有することで、一連のデ ザインフローを共有することができます。 またこれにより、デザイナーはより上流のデザイン設計に フォーカスすることができます。
12. Pencil でできること 既存ツールで作成したアプリ (陶器のD2Cサイト) 6,000行 のPRD 職人にフォーカスして 購入者をつなげたい !
13. Pencil でできること Pencil で作ったアプリ (陶器のD2Cサイト) 職人にフォーカスして 購入者をつなげたい !
14. Pencil で改善可能な Design プロセスを手に入れませんか Pencil それだけでなく、 ありがとうございました ! 今日話したのはPencilのほんの一側面です。