はじめに
記事なら、プロンプトも手順もハマった話も、好きなだけズラズラ書けます。でもLTの持ち時間は約10分。さすがに全部は話せません。
ということで、2026年8月22日に開催された「【AI業務改善】EDA Tech Talk @東京 #06 ー明日から使えるAI業務改善術ー」で、**「“いい感じにして”をAIで実現する、非デザイナーのデザイン術」**というLTをしてきました！
この記事は、発表内容をもう一度最初から説明する記事ではありません。長めのQiita記事を10分のLTにするときに何を残したか、実際に人前で話してみて何を感じたかをまとめる登壇レポートです。
発表内容の詳細と、題材にしたアプリ開発の全体像はこちらにまとめています。
- 発表の詳細版: AI製UIの「AIっぽさ」を消すのは、地道なひと手間でした ── 非デザイナーがGPTとPencilでUIを作りきるまで
- 開発の全体版: 初めてのAI駆動開発。「コードは1行も書かない」縛りで勤怠管理アプリを1ヶ月で本番公開した全8ステップ
EDA Tech Talk @東京 #06について
今回のテーマは「明日から使えるAI業務改善術」。東京都・日本橋の会場に、実務でAIを使っている人たちが集まって、それぞれの活用ネタを持ち寄るLT会でした。
タイムテーブルに並んでいた発表は次の3本です。
- AI駆動開発はじめました。そしてハッカソンで優勝しました。
- “いい感じにして”をAIで実現する、非デザイナーのデザイン術
- 「で、このプロジェクト何やってるの？」を10分で把握するAI活用術
タイトルだけでも、かなりAI活用ネタの欲張りセットです。
自分はその中で、ツールの機能紹介ではなく、デザインが専門外の自分がWebアプリのUIをどうにか最後まで作りきった話を持っていきました。
発表したのは「いい感じ」を手順に変える話
題材にしたのは、AI駆動開発の練習で作った勤怠管理アプリ「KintaiHub」です。
自分はQAエンジニアを2年経験したあと、開発エンジニアに移って半年。デザインは完全に専門外です。「余白は何pxが正解なんですか」と聞きたくなる側の人間です。
それでもGPT、Pencil、Claude Code、Codexを組み合わせたら、アプリの構想からデザイン、実装、テスト、デプロイまで進められました。
そのなかから今回のLTで切り出したのが、「いい感じのUI」を作る工程です。
やったことを分解すると、次の順番になります。
- 参考イメージを集める
- デザインの方向性を言葉にする
- GPTでUI画像を作る
- Pencilで編集できるデザインにする
- アイコンなどの細部を仕上げる
最初から「いい感じにして」と丸投げしても、AIもたぶん困ります。そこで、参考画像から「清潔感」のような1ワードを取り出して、コンセプト文、UI画像、編集可能なデザインへと少しずつ具体化しました。
自分が一番伝えたかったのは、必要だったのはデザインセンスよりも、AIに渡す情報の順番だったということです。
記事には全部書ける。でもLTでは全部話せない
このテーマの詳細版をQiitaにしたら、実際に使ったプロンプト、画面ごとの作り方、PencilのNodeIDを使った修正、透過アイコンの切り出しまで、なかなかの情報量になりました。
これを約10分で最初から最後まで話すのは、普通に無理です。全部入れたら、早口でスライドをめくるだけの時間になっちゃいます。
なので細かい操作はいったんQiitaに逃がして、LTでは次の流れだけでも持ち帰ってもらうことにしました。
参考画像 → 言葉 → コンセプト → UI画像 → Pencilで編集できるデザイン
プロンプト全文や細かいハマりどころはQiitaに置く。発表では「なぜこの順番なのか」と、画面がどう変わったかを見せる。LTは入口、記事はあとで読める手順書という役割分担です。
記事を書いているときは「せっかくだから、これも載せよう」ができます。LTは逆で、「これは大事だけど今回は削ろう」を何度もやります。
同じ内容でも、読む人向けと聞く人向けでは作り方が全然違う。実際に発表する側になって、ここが一番勉強になりました。
AI駆動開発の全体から、デザインだけを切り出してよかった
KintaiHubの開発全体には、構想、設計、デザイン、実装、DB連携、テスト、デプロイがあります。全部話したくなるのですが、それをやると「AIでアプリを作りました！」で10分が終わります。
今回はデザインだけに絞ったことで、次のような具体的な話まで入れられました。
- 「いい感じ」のような曖昧な言葉を、AIが扱える情報に変える
- 画像で終わらせず、Pencilで編集可能なデザインにする
- デザインと実装を同じリポジトリで管理する
- 透過アイコンのような地道なひと手間で、AI製UIの違和感を減らす
特に最後の細部調整は、アプリを動かすだけなら後回しでも困らない部分です。でも、ここをやると画面の印象がちゃんと変わる。発表テーマとして工程を振り返ったことで、自分がどこで「AIっぽいな」と感じ、何を直していたのかも言葉にできました。
登壇してみて得たもの
今回やってみて意外だったのが、発表用に内容を整理すると、AIに作ってもらった工程を自分でもう一度勉強し直すことになる点です。
AI駆動開発では、成果物が動くところまでかなりの勢いで進められます。「おお、動いた！」でそのまま次へ行けちゃいます。そのぶん、「なんでこの順番にしたんだっけ」「どこで見た目が良くなったんだっけ」を振り返らないまま進みがちです。
登壇準備では、そこでいったん立ち止まることになりました。
- 何をしたか
- なぜそうしたか
- どこが再現できるポイントか
- 10分後に一つだけ覚えてもらうなら何か
この4つを考えていくと、単なる作業ログだったものが、だんだん人に渡せる手順に変わっていきます。
発表するというと「自分が知っていることを人に教える場」のイメージがありました。でも実際には、自分のやったことを自分でもう一度理解する作業でした。話す側のほうが勉強になっている気もします。
まとめ
- EDA Tech Talk @東京 #06で、非デザイナーがGPTとPencilを使ってUIを作る流れを発表した
- 約10分のLTでは詳細を詰め込まず、「いい感じ」を段階的に具体化する順番に絞った
- プロンプトや細かい手順はQiitaに置き、LTを入口、記事を持ち帰れる手順書として分けた
- 発表用に工程を整理すると、AIに作ってもらったものを自分の言葉で理解し直せる
開発中は、とにかく「動いた！」が嬉しくて、そのままどんどん先へ進んでいました。今回LTにしたことで、作ったものだけでなく、そこまでの考え方も人に渡せる形に整理できました。
発表で見せきれなかったプロンプトやPencilの具体的な使い方は、発表の詳細版に全部置いてあります。「いい感じにして」から先へ進めなくなったときに、そのまま真似してもらえたら嬉しいです。