【AIツールの紹介】「Make real tldraw」/ 簡単なイラストや図形からリアルなイメージやコードを自動生成する魔法のAIが登場

１. Make real tldrawとは

「Make real tldraw」は、AI（GPT-4V）技術を活用して、簡単なスケッチや図形からリアルなイメージに変換する画期的なツールです。

Make real tldrawを使えば、お絵描き感覚で、誰でも簡単にシステム開発やサイト作成などができる、画期的なAIツールです。

この開発革命に乗り遅れないよう、ぜひ情報をキャッチアップしましょう。

２. Make real tldrawの特徴

大きく分けて、5つの特徴があります。

・手書きのイラストや図形からリアルなイメージが生成

手書きのイラスト、図形のみならず、ChatGPT（DELL-E5）で生成した画像からもイメージを自動生成することができます。

・レスポンシブ対応

レスポンシブ対応がされたイメージが生成されます。

・生成されたイメージからコードをコピー可能

生成されたイメージのコードをコピー&ペーストすることができます。これによって、開発する際のコーディングする手間が大幅に削減されます。

・プロンプトや画像で入力が可能

プロンプト（指示文）の入力ができ、より細かいイメージの再現が可能です。また画像をアップロードすることも可能です。

・登録不要でOpenAIのAPIキーがあれば使用可能

特に利用する際の面倒な登録は不要です。ただOpenAIのAPIキーが必要になりますので、ChatGPT Plus（USD $20/月 ※2023年11月時点）への登録が必要です。（ChatGPT Plusへの登録をしてAPIを入力しているのにエラーが出て使えない方は、これ以降に対応方法の説明があります。）

３. 使い方

OpenAI APIキーを調べる

OpenAI APIキーが記載されているページにアクセスします。もしChatGPT Plusに登録されていない方は登録が必要になります。また、APIキーを作成していない場合は、上記画面の「Create new secret key」から新規作成を行なってください。

Make real tldrawのサイトを開く

Make real tldrawのサイトを開きます。

OpenAI APIキーを入力する

上記の画面の入力欄に、先ほど調べたOpenAI APIキーをペーストします。

図形やイラストを作成して「Make Real」ボタンを押す

作成したいラフ案を作成して、全体を選択します。その後、右上部の「Make Real」ボタンを押すと自動的にイメージが生成されます。

コードをコピーする

コードをコピー&ペーストすることもできます。

「Make Real」を押すと右下にエラーが表示される時の対応方法（OpenAIのページで5ドル以上に課金する必要）

OpenAI APIキーを正しく入力したが、上記のエラーが表示された場合は、下記の通り、対応を行なってください。

OpenAI 課金ページへアクセスします。「Credit balance」が0の場合は、先ほどのようなエラーが表示されます。そのため、「Add payment details」から課金手続きを行なってください。また最小額は5ドルとなっています。課金手続きが終えましたら、先ほどの「Make Real」をもう一度押して動作を確かめてください。

４. Make real tldrawの応用例

ここでは、Make real tldrawの活用事例を紹介します。ここは面白い活用方法があり次第、内容をアップデートしていきます。ぜひ貴方も色々と実験してみてください！

ブログサイトの作成

Also we're on product hunt: https://t.co/wE91roqa7x

— tldraw (@tldraw) November 22, 2023

円-ドル日英単位換算

tldrawとChatGPT,Figmaの組み合わせで、プログラミング初心者の自分でもウェブサービスを公開できてしまった。朝思いついて夜には完成したのがこれ。市場規模を扱う時に頭を悩ませる＜円ドルの日英表記を自動変換＞するやつ。意外とネット上にない気がして。作り方はつづく。https://t.co/sYodMcuEIu pic.twitter.com/ySCBXmKIjE

— 山根(1).zip (@yamaneke_h) November 18, 2023

iPod3

drawing our way to a working iPod 3rd gen pic.twitter.com/sFl796V5Xy

— tldraw (@tldraw) November 26, 2023

ゲーム作成

This. Is. So. Cool! @tldraw #interactive #art click click click 🐭 Try it out!https://t.co/4NS10SRuIE pic.twitter.com/8JYQVHeoqS

— Juan Maguid (@juand4v) November 23, 2023

これは便利！

tldrawで簡単なゲームも作成可能。
※僕はエンジニアでも何でもありません。

1.簡単なラフを作成
2.ラフ絵に自然言語で指示出し（英語のみ）
3.完成したサンプルから修正指示して微調整… pic.twitter.com/XdvdrqJwo3

— KEITO💻AIディレクター (@keitowebai) November 18, 2023

５. まとめ

• 「Make real tldraw」は、AI（GPT-4V）技術を活用して、簡単なスケッチや図形からリアルなイメージに変換する画期的なツール

• 手書きのイラストや図形からリアルなイメージが生成

• ノーコードで非エンジニアでもシステムやサイト開発ができる

• 作成したイメージのコードをコピー&ペースト可能（開発が爆速）

• 画面上にプロンプト（指示文）や画像入力が可能

• 登録不要。OpenAI APIキーだけあれば誰でも利用できる