はじめに
AIにUIを作らせると、ちゃんと整っているのに、どこか「AIっぽい」画面になりがちです。今回それを消してくれたのは、すごいプロンプトではなく、生成画像からアイコンを透過で切り出すような、地道なひと手間でした。鍋のにんじんを花形に切るのに近い作業です。必要ではないけど、あると嬉しい。
土台になったのはデザインツール Pencil です。Pencilが扱う .pen ファイルは中身がただのJSONなので、AIエージェントがデザインそのものを直接読み書きできます。デザインが専門外の自分でも、ここに乗っかったらUIが最後まで作りきれました。
この記事は、勉強会 【AI業務改善】EDA Tech Talk @東京 #06 ー明日から使えるAI業務改善術ー で発表する「"いい感じにして"をAIで実現する、非デザイナーのデザイン術」の詳細版です。LT本編は10分程度であっさり流すので、聞き逃したところ・実際に投げたプロンプトの全文は、この記事に全部置いておきます。
- 書いている人: QAエンジニア2年 → 開発エンジニア半年。デザインは完全に専門外です
- 題材: 勤怠管理アプリ「KintaiHub」のUIデザイン
- 使ったもの: GPT / Pencil（VS Code拡張）/ Claude Code / Codex
先に結論を書くと、いきなり「いい感じにして」と投げても何も出てきません。でも、ある順番でAIに渡すものを渡していくと、最後は本当に「いい感じ」のUIが出てきます。要ったのはセンスではなく、決まった手順だけでした。
アプリそのものを構想からデプロイまで作った話は別記事にまとめてあります。この記事は、そのなかの**「デザイン」工程だけを取り出して、実プロンプト付きで深掘りしたもの**です。
作ったもの — KintaiHub
紙のタイムカードやExcel運用を置き換える想定の、勤怠管理Webアプリです。打刻から月次集計・CSVエクスポートまでを一本で完結させます。
デモは https://kintaihub.vercel.app で公開しています。
開発の全体工程と、この記事の範囲
構想からデプロイまで、基本すべてAIで進めました。
| 工程 | 使ったAI・ツール |
|---|---|
| 構想 | GPT |
| 設計 | GPT |
| デザイン | GPT ＋ Pencil ← この記事はここ |
| 実装 | Claude Code |
| DB連携 | Supabase |
| テスト | Playwright |
| デプロイ | Vercel |
デザイン工程は、5ステップに分解できる
「デザインする」を一発でAIに頼もうとすると失敗します。分解するとこうなりました。
| Step | 工程 | 使うAI・ツール |
|---|---|---|
| ① | 参考イメージを集める | GPT・Pinterest |
| ② | コンセプトを言語化する | GPT |
| ③ | UI画像を生成する | GPT |
| ④ | Pencilでデザイン化する | Pencil（＋Claude Code） |
| ⑤ | 透過アイコンを切り出す | Codex |
ポイントは、①〜③でひたすら「言葉」を作っていることです。いきなり絵を描かせるのではなく、参考 → ワード → コンセプト文 → 画像、と粒度を上げていきます。ここを飛ばすと、④のPencilに渡すものが何も無くなります。
以下、各ステップで実際に投げたプロンプトをそのまま載せます。
① 参考イメージを集める（GPT・Pinterest）
まず、自分が「いいな」と思う既存の画面を1枚用意して、GPTに分解させます。
［参考にしたい画面のスクリーンショットを添付］
この添付画像のデザイン要素を、1ワードであらゆる観点から書き出してください
「クリーン」「余白」「カード型」「信頼感」みたいなワードがズラズラ出てきます。このなかから、自分のイメージに合うものだけを選びます。自分は「清潔感」を選びました。
次に、選んだ1ワードで参考画像を集めます。
- Pinterestで「ウェブアプリ + 選んだワード」で検索（自分は
ウェブアプリ 清潔感） - イメージに近い画像を4枚コピーする
- GPTに貼り付ける
（Pinterestの検索結果画面はLTでは見せたのですが、他社の広告クリエイティブが大きく映り込んでいたので、記事には載せていません）
検索ワードが1ワードなので、関連画像もブレずに近いものが出てきます。画面下部の関連画像のほうが当たりだったことも多かったです。
いきなり「かっこいいデザインにして」と言っても何も出てこないのですが、この「1ワードに分解する」を挟むと、以降の指示が急に通るようになります。ここは自分でも驚きました。
② コンセプトを言語化する（GPT）
①で集めた4枚を渡して、コンセプトをテキストで具体化してもらいます。
［①で集めた参考画像4枚を添付］
この添付画像を参照して、デザインのコンセプトを詳細に設計してください
出てきたのがこれです。
-
コンセプト名:
Clear Work Flow― 見える、整う、進む。 - 方向性: 信頼感のある業務ツール × 軽やかなクラウド感 × わかりやすい見える化
-
配色: ホワイト基調 + ブルー（
#1E88D8）+ ライトブルー + ネイビー - 状態色: 出勤=青 / 退勤=グレー / 休憩=オレンジ / 未打刻=赤 / 承認=緑
- レイアウト: 余白広めのカード型
- フォント: Noto Sans JP
- モチーフ: 「流れ」（流線・円・矢印・クラウド）
ここで大事なのは、画像ではなくテキストで出させることです。テキストなら、このあと CLAUDE.md にそのまま貼れて、実装フェーズまで「デザインの正」として持ち回せます。画像だけだと、AIに毎回添付し直すことになって効きが弱いです。
③ UI画像を生成する（GPT）
固まったコンセプトと、アプリのREADMEを渡して、方向性を1枚の画像にまとめさせます。
上記のデザインテーマで、下記ウェブアプリを作りたいので、
デザインテーマ・コンセプト・フォント・アイコン・画面イメージを画像で出力してください
［READMEを丸ごと貼り付け］
出てきたのがこれです。カラーパレット・タイポグラフィ・アイコンセット・画面イメージが1枚に載った、いわゆるデザインシステムの全体図です。
これが以降ずっと「ゴール画像」になります。Pencilに渡すのも、実装のズレを直すのも、全部この1枚が基準です。
③-2 各画面のUI画像を生成する
全体像ができたら、今度は画面を1枚ずつ描かせます。画面一覧と、該当画面の詳細設計をセットで渡すのがコツです。
上記のデザインテーマで下記画面を作ろうとしています。
1のログインページ画面の画像を作成してください
［画面一覧］
［該当画面の詳細設計］
生成したのは、ログイン / 打刻ダッシュボード / 勤怠履歴 / 管理者ダッシュボード / 月次集計 の5画面です。
| 1. ログインページ | 5. 月次集計画面 |
|---|---|
 |
 |
|
「全画面まとめて作って」ではなく1画面ずつにしたほうが、テーマがブレませんでした。GPTの分岐機能で並行して走らせて、最後に1スレッドに集約しています。
④ Pencilとは？
ここからが本題です。③まででできたのはただの画像なので、これを編集可能なデザインに落とします。使ったのが Pencil です。
見た目は普通のデザインツールで、画面を並べて編集できます。
そして**中身はテキスト（JSON）**です。.pen という拡張子のファイルに、フレーム・テキスト・色が全部JSONで書かれています。
つまり、
- AIが直接読み書きできる（Claude CodeがFigmaを触るのと違い、ただのファイル操作）
- リポジトリに置いてGit管理できる（デザインの差分がdiffで見える）
というのが効きます。ざっくり言うと**「AIが使えるFigma」**です。VS Code / Cursor の拡張として動き、MCP経由でエージェントが .pen を操作します。
Pencilを入れる（VS Code拡張）
VS Codeの拡張機能から pen.dev を検索してインストールするだけです。
④-1 penファイルを作る（Claude Code）
いきなりファイルを作らせず、先に「Pencilで何を扱うか」を決めて CLAUDE.md に書かせます。ここを飛ばすと、AIが毎回違う範囲のものを作り始めます。
ペンシルファイルで扱うものはデザインテーマ（テーマカラー、フォント、アイコン、画像）、
各画面のデザインと画面間の遷移状態なので、
デザインディレクトリの CLAUDE.md に追記してください
範囲が決まったら、penファイル本体を作らせます。
以下のパスに、添付画像のデザインテーマを参考にしてペンシルファイルを作成してください
［design ディレクトリのパス］
［③で作ったデザインテーマ画像のパス］
④-2 デザインテーマをpen上に作る
次に、③のゴール画像をpen上に実体化させます。色・文字・アイコンを、編集可能なオブジェクトとして置く工程です。
このデザインテーマの「デザインテーマ」「タイポグラフィ」「アイコンセット」「画面イメージ想定」を
kintaihub.pen 上に作ってください
［デザインテーマ画像のパス］
［アイコン画像のパス］
④-3 各画面をpen上に作成する
画面を作らせるときは、「設計書 ＋ デザインテーマ ＋ 画面イメージ」の3点セットで指示します。どれか1つでも欠けると、色が違ったり項目が抜けたりしました。
ペンシルファイルの中に打刻（ダッシュボード）画面を作成してください。
［設計書のパス］
［デザインテーマのNodeID］
［該当画面の画像パス］
.pen の中の要素にはそれぞれ NodeID が振られているので、「このテーマを参照して」をIDで指定できます。ここがテキストフォーマットの一番おいしいところでした。
Before / After がこれです。左がGPTが生成した「絵」、右がPencil上で作り込んだ「編集できる画面」です。
| Before：GPTが生成したUIイメージ | After：Pencilで作り込んだ実画面 |
|---|---|
 |
 |
|
④-4 ズレを潰して仕上げる
一発では合いません。色が違う、位置がずれる、共通パーツだけ古いまま、みたいなズレが必ず残ります。これをNodeIDで場所を指定して、1つずつ直させます。
［修正箇所のNodeID］が添付画像と違うので、修正してください。
修正した内容は CLAUDE.md に記載してください
［該当画面の画像を添付］
この後半の一文、「修正した内容は CLAUDE.md に記載してください」が地味に効きます。同じズレを何度も直す羽目になるのを防げますし、あとの実装フェーズでClaude Codeが勝手に色を変えてくることも減りました。
⑤ 透過アイコンを切り出す（Codex）
最後に細かいですが、効果が大きかったやつです。③で生成した画像のなかから、アイコンやロゴだけを透過PNGで切り出します。
この画像から〇〇のアイコンだけを切り出して、
背景を透過したPNGで出力し、asetts/ に保存してください
生成画像から切り出したままだと背景の白がうっすら残って、画面に置いたとき妙に浮きます。透過にすると一気に「AIっぽくない」質感になりました。冒頭に書いた「鍋のにんじんの花形切り」はこれのことです。やらなくてもアプリは動くけど、やると画面の印象が明らかに変わる。切り出したアイコンを asetts/ に置いておくと、Pencilが各画面を作るときに自動で参照してくれます。
（asetts は assets のタイプミスなのですが、そのまま運用してしまったので実際のパス通りに載せています）
完成したデザイン
①〜⑤をなぞるだけで、ここまでできました。
| 打刻ダッシュボード | 管理者ダッシュボード |
|---|---|
 |
 |
このあと、この .pen ファイルのパスをClaude Codeに渡して実装させると、デザイン通りの画面がそのまま出てきます。デザインと実装が同じリポジトリの中で完結するのが、Pencilを使ってよかった一番の点でした。
なお、Pencil（MCP）の接続で 32000 エラーにハマった話は前回の記事に書いています。デスクトップ版からVS Code拡張版に切り替えたときに、~/.claude.json と ~/.claude/.mcp.json で設定が食い違っていたのが原因でした。
まとめ
- デザインを「一発でAIに頼む」のはうまくいかない。①参考 → ②コンセプト → ③画像 → ④Pencil → ⑤アイコンに分解する
- ①〜③はひたすら言葉を作る工程。特に「1ワードに分解させる」と、以降の指示が通るようになる
- コンセプトは画像ではなくテキストで出させる。
CLAUDE.mdに置けば最後まで効き続ける - Pencilは中身がJSONなので、AIがNodeID指定でピンポイントに直せる
- 修正内容は毎回
CLAUDE.mdに書かせる
大事なのはセンスではなく、手順でした。同じ順番でなぞれば、非デザイナーでもここまで作れます。
LT会場で聞き逃したところがあれば、この記事のプロンプトをそのままコピーして試してみてください。