tldrawで手書きからUIを生成する方法

TL;DR

手書きのラフを選択してMake Realを実行すると、AIが操作可能なUIとHTMLコードを生成する。OpenAIのAPIキーを設定すれば、自然言語や矢印、注釈を使った修正もでき、ワイヤーフレームや画面遷移、グラフなどの試作に活用できる。

Transcript

はいこんにちはケトです今回はTLドロー と言われるラフの絵からAIがUI デザインを生成してくれるというツールを 紹介していきたいと思いますはいえここ 最近のAI系のデザインツールの中では 1番可能性あるんじゃないかなって思って ます僕みたいなえディレクターをやって るって方やえまプロジェクトマネージャー さんやデザイナーさんえUIとかUXとか を考えるっていう立場の方はえ是非ですね 今回紹介するTLドローの使い方とま可能 性みたいなところを知ってもらえればと 思ってますえちなみに私のチャンネルは AIやWEBに関する便利なツールや情報 を共有しているチャンネルですチャンネル 登録が済みでない方はチャンネル登録度お 願いいたしますそれでは本題に入っていき ますはいえということでTRドローの管... Read More

Key Insights

• ・Make Realは手書きのラフを解析し、見た目だけでなく入力やクリックが可能なUIとHTMLコードを生成する機能である。生成コードは画面右上のコードアイコンからコピーできる。
• ・利用準備はOpenAIの秘密APIキーを作成し、tldraw画面下部の入力欄へ貼り付ける手順である。API利用には従量課金が伴うため、キーを第三者へ公開せず管理する必要がある。
• ・基本的な生成手順は、画面構成を手書きし、対象の図形や文字をすべて選択してMake Realを押すことである。AIは選択されたラフの内容を読み取り、対応するUIを作成する。
• ・自然言語、注釈、矢印は各領域の役割や期待する動作をAIへ伝える手段である。生成後のUIに対しても、背景や文字の変更、動作やエフェクトの追加を文章で指示できる。
• ・登録フォームの作例は、名前、メールアドレス、パスワードを入力でき、登録ボタンから認証コード入力画面へ遷移する。静止したデザイン案ではなく、操作可能な試作品として生成された。
• ・ゲームの作例は、落下する要素をクリックで消し、開始と停止のボタンで動作を制御できた。一方、指定した果物や切断表現は意図どおりにならず、写真や別のAppleが現れる誤差もあった。
• ・グラフの作例は、画像生成AIで作ったデザインを基にUI化され、カーソルを重ねると数値を表示できた。ただし、一部の棒が数秒ごとに増えるなど、指示していない挙動も確認された。
• ・Make Realは初期のワイヤーフレーム作成と関係者間の共有を速める用途が想定される。話者は完成度が十分でない箇所も認めており、最終成果物ではなく反復可能な試作として評価している。

Questions & Answers

Q: tldrawのMake Realで手書きからUIを生成する方法は？

tldraw上に作りたい画面のラフを手書きし、図形や文字を含む対象全体を選択して、右上のMake Realをクリックする。AIが選択範囲を解析し、対応するUIを生成する。各領域の意味や必要な動作を文章、注釈、矢印で補足すると、意図をより具体的に伝えられる。

Q: tldrawのMake Realを使う前に何を設定する必要がありますか？

OpenAIのAPIキーページで新しい秘密APIキーを作成し、表示された文字列をコピーしてtldraw画面下部の入力欄へ貼り付ける必要がある。動画では、キーに適当な名前を付けて作成する手順が紹介されている。設定は貼り付けまで完了すれば、UI生成を開始できる。

Q: OpenAIのAPIキーを扱うときの注意点は？

APIキーは第三者に見せず、漏えいしない場所で管理する必要がある。このキーでGPTを動かすたびに従量課金が発生するため、公開すると意図しない利用につながる可能性がある。動画では説明のためキーを表示しているが、撮影終了後に削除すると明言している。

Q: Make Realが生成したHTMLコードを取得する方法は？

生成されたUIの右上に表示されるコードのマークをクリックすると、HTMLコードをコピーできる。動画ではコピーした内容をメモ帳へ貼り付け、実際にコードが書き出されていることを確認している。ラフから見た目とコードをまとめて用意できるため、初期試作に利用できる。

Q: 生成されたUIを自然言語で修正する方法は？

完成したUIに対して、変えたい見た目や追加したい動作を文章で指示する。背景や文字のデザイン変更に加え、クリック時のエフェクトなども依頼できる。手書きのアイコンや注釈を加え、それを使うよう指定する方法もあるが、結果が意図と異なる場合は指示を追加して調整する必要がある。

Q: Make RealではどのようなUIの試作品を作れますか？

動画では、登録フォーム、認証コード入力画面、カレンダー、グラフ、Xの投稿風画面、果物をクリックして消すゲームが作成されている。フォームは文字入力と画面遷移、グラフはカーソルを重ねた際の数値表示、投稿風UIはハートボタンの操作まで確認されている。

Q: スクリーンショットや画像からUIを作る方法は？

参考にしたいスクリーンショットや画像をtldraw上へ置き、同じ雰囲気のUIを作るよう自然言語で指示する。動画ではXの画面を基に投稿ボックスが生成され、ハートボタンも操作できた。また、画像生成AIで作ったグラフのデザインから、数値を確認できるUIへの変換も行われた。

Q: Make Realで作ったUIにはどのような制限がありますか？

生成結果は必ずしも指示どおりにはならず、追加の修正が必要になる。動画では、指定した果物が写真になったり、Appleがパソコンとして表示されたり、カレンダーに予定閲覧機能がなかったりした。グラフでも棒が数秒ごとに増える意図しない挙動があり、完成品として使う前の確認が欠かせない。

Q: Make RealはUI設計の業務にどう活用できますか？

ディレクターやデザイナーが考えた画面をラフから操作可能な試作品へ変換し、関係者へ共有する用途に活用できる。見た目だけでなく入力、クリック、画面遷移を示せるため、想定する体験を具体化しやすい。話者は、開発初期の簡易UIやワイヤーフレーム作成に適すると評価している。

Q: Make Realで狙いに近いUIを作るコツは？

頭の中の構成をラフとして描くだけでなく、各エリアが何を表すのかを自然言語や注釈で明示する。テキストから対象のボタンへ矢印を引けば、その要素の役割を関連付けて伝えられる。最初の生成で細部が違う場合は、完成物に追加指示を重ねて段階的に調整する。

Summary & Key Takeaways

• 利用準備では、OpenAIのAPIキーページで新しい秘密鍵を作成し、その文字列をtldrawの入力欄へ貼り付ける。APIキーはGPTを動かすたびに従量課金が発生するため、第三者へ見せず安全に管理する必要がある。動画内で公開したキーは撮影後に削除すると説明されている。

• 基本操作は、tldraw上に画面構成を手書きし、対象全体を選択して右上のMake Realを押す流れである。AIがラフを解析してUIを生成し、生成物は実際に入力やクリックができる。右上のコードアイコンからHTMLコードをコピーでき、完成後も自然言語による追加指示で見た目や動作を修正できる。

• 作例には、果物をクリックして消すゲーム、認証コード画面へ遷移する登録フォーム、予定を追加できるカレンダー、数値表示に対応したグラフ、Xの投稿を模したUIがある。一方で、果物が意図と異なる写真になったり、カレンダーで予定を閲覧できなかったりするため、初期試作や共有用途を中心に反復修正する使い方が適している。