白い画面にマウスで画面のラフ（枠と文字）を描くと、それをAIが読み取ってWebページのHTMLに変換する仕組みです。描いた絵をそのまま画像としてAIに渡し、その内容を再現したページを作らせています。作者自身が「これは実演用の見本であって、本格的な利用を想定していない」と明記しています。
#UI生成#モック
ミロンドが自分で確かめたこと
- 2026年8月23日「配布元を見る」の行き先が、今も開けることを確認しました。
- 2026年8月14日利用ルールの原文（LICENSE）を読みました。特別な条件は書かれていませんでした。
- 2026年7月30日公式の説明を読んで、開発が止まったというサインが無いことを確認しました。
ミロンドは掲載しているすべての行き先を定期的に開いて、今も使えるかを確かめています。 利用ルールは名前だけで判断せず、原文を読んで確認しています。
「画像生成」208本の中での位置
- 作ったものを仕事に使ってよいと確認できているこの分野で75本
- 黒い画面（ターミナル）の操作が要りますそうでないものが178本 →
- APIキーの用意が要りますそうでないものが193本 →
- 入れた内容は公開元に送られますそうでないものが34本 →
この数字は、ミロンドが掲載している道具を1本ずつ同じ基準で調べた結果から数えています。
これは何？黒い画面（ターミナル）で動かすツール
できること
キャンバスへの手描き／描いた内容からのHTML生成／Tailwindを使った体裁／自分のパソコンでの実行
誰に効く？
手描きから画面を起こす仕組みを試したい人。作りを学びたい開発者
用意するもの
コマンド入力とNode（プログラムの土台）が必要です。使うAIの鍵（OpenAI）も要ります。
時間のめやす
15〜30分(AIに聞きながらコピペ)
使うとこうなる
- 1OpenAI APIキーを.env.localに入れる→AI呼び出しの準備ができる
- 2npm install後にnpm run devする→ローカルで画面が開く
- 3ワイヤーフレームを描く→HTML画面案として生成される
作れるもの・できることの例
手描きラフからのHTMLモック、Tailwind付き画面案、デモ用UIプロトタイプ
使えるようになるまでの手順をひらく
- 「」という文字だけの画面を使います（Windowsなら PowerShell）
- GitHubページの「Installation」に書かれたコマンドを順番に実行
- つまずいたら、いつも使っているAIチャットに「(ツール名)のインストールを手伝って」と聞くのがおすすめ
こんな人には向かないかも
- 黒い画面（ターミナル）にまだ抵抗がある人
- 登録やAPIキーの設定を一切やりたくない人
🔑 必要な鍵（APIキー）
OpenAI（ChatGPT） の発行ページ↗発行は無料。APIはChatGPT Plus（月額）とは別勘定で、使った分だけの課金。※Codex等の一部公式ツールは、キーの代わりにChatGPTの月額プランでログインして使える
鍵は「合鍵」の文字列。発行→コピー→ツールの設定に貼り付け、の3手です。迷ったらAIチャットに「画面つきで教えて」と。
迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って 「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。
むずかしそう？ 同じジャンルで、もっと始めやすいのはこちら
注意点
作者が明確に警告しています。「これは実演用で、本番利用向けではない。利用者の確認の仕組みが無いので、そのままインターネットに公開すると（誰でも使えてしまい）破産する」。必ず自分のパソコンの中だけで動かしてください。また、作者は「この企画の後継はTerragon Labs」と案内しており、更新は2025年7月で止まっています。仕組みを学ぶ目的なら今も有用です。はMITです。
ひとことメモ
として公開されています。内容は公式ページでもご確認ください。
draw-a-uiについてよくある質問
- draw-a-uiは無料で使えますか？
- draw-a-ui自体は無料で使えますが、動かすのに外部AIのAPIキーが必要です。そのAI側の利用料は別にかかります（無料枠があるものもあります）。
- draw-a-uiを使うのに、インストールや専門知識は必要ですか？
- コマンド入力（黒い画面）での操作が必要です。手順どおりに文字を打ち込む作業に慣れていないと、導入でつまずきやすいツールです。
- draw-a-uiはスマホでも使えますか？
- スマホには対応していません。パソコンが必要です。
- draw-a-uiは仕事（商用）で使えますか？
- ライセンスは MIT で、商用利用も認められています。ただし著作権表示を残すなどの条件が付くので、配布物に含める場合はライセンス本文を確認してください。
似ている道具との違い
同じ用途の道具と、使う前に効いてくる条件を並べました。
| 道具 | 黒い画面 | APIキー | 外部送信 | スマホ | 仕事に使える | 最終更新 |
|---|---|---|---|---|---|---|
| draw-a-ui（このページ） | 要る | 要る | あり | むずかしい | 可 | 2025年7月 |
| Stable Diffusion web UI | 要る | いらない | なし | むずかしい | 可 | 2026年3月 |
| Deep-Live-Cam | 要る | いらない | あり | むずかしい | 可 | 2026年8月 |
| Fooocus | 要る | いらない | なし | むずかしい | 可 | 2025年12月 |
「外部送信あり」は、入力した内容がどこかのサーバーに送られることを指します。 社外に出せない資料を扱うときは「なし」を選んでください。
画像生成のほかのツール
draw-a-uiが合わなかったときの、同じ用途の候補です。
Stable Diffusion web UI
定番の画像生成Web画面
はじめやすい・黒い画面（ターミナル）が要る
Deep-Live-Cam
写真1枚で、ビデオ通話中の自分の顔を別人に差し替えるソフト
はじめやすい・黒い画面（ターミナル）が要る
Fooocus
設定いらずで使いやすい画像生成
はじめやすい・黒い画面（ターミナル）が要る
Diffusers
画像生成AIの標準部品ライブラリ
はじめやすい・黒い画面（ターミナル）が要る
InvokeAI
仕事でも使いやすい画像生成スタジオ
はじめやすい・黒い画面（ターミナル）が要る
roomGPT
部屋の写真を撮ると別の内装案にしてくれる（旧版）
上級者向け・黒い画面（ターミナル）が要る