![見出し画像](https://assets.st-note.com/production/uploads/images/122809468/rectangle_large_type_2_614a37379d19b330fbf8e3aa7d5d64e0.png?width=1200)
【AIツールの紹介】「Make real tldraw」/ 簡単なイラストや図形からリアルなイメージやコードを自動生成する魔法のAIが登場
1. Make real tldrawとは
![](https://assets.st-note.com/img/1701042102872-TM0atbNcZq.png?width=1200)
「Make real tldraw」は、AI(GPT-4V)技術を活用して、簡単なスケッチや図形からリアルなイメージに変換する画期的なツールです。
Make real tldrawを使えば、お絵描き感覚で、誰でも簡単にシステム開発やサイト作成などができる、画期的なAIツールです。
この開発革命に乗り遅れないよう、ぜひ情報をキャッチアップしましょう。
2. Make real tldrawの特徴
大きく分けて、5つの特徴があります。
・手書きのイラストや図形からリアルなイメージが生成
手書きのイラスト、図形のみならず、ChatGPT(DELL-E5)で生成した画像からもイメージを自動生成することができます。
・レスポンシブ対応
レスポンシブ対応がされたイメージが生成されます。
・生成されたイメージからコードをコピー可能
生成されたイメージのコードをコピー&ペーストすることができます。これによって、開発する際のコーディングする手間が大幅に削減されます。
・プロンプトや画像で入力が可能
プロンプト(指示文)の入力ができ、より細かいイメージの再現が可能です。また画像をアップロードすることも可能です。
・登録不要でOpenAIのAPIキーがあれば使用可能
特に利用する際の面倒な登録は不要です。ただOpenAIのAPIキーが必要になりますので、ChatGPT Plus(USD $20/月 ※2023年11月時点)への登録が必要です。(ChatGPT Plusへの登録をしてAPIを入力しているのにエラーが出て使えない方は、これ以降に対応方法の説明があります。)
3. 使い方
OpenAI APIキーを調べる
![](https://assets.st-note.com/img/1700995891247-0dxYdS5oiU.png?width=1200)
OpenAI APIキーが記載されているページにアクセスします。もしChatGPT Plusに登録されていない方は登録が必要になります。また、APIキーを作成していない場合は、上記画面の「Create new secret key」から新規作成を行なってください。
Make real tldrawのサイトを開く
![](https://assets.st-note.com/img/1700996393723-RbUq6OcHy2.png?width=1200)
Make real tldrawのサイトを開きます。
OpenAI APIキーを入力する
![](https://assets.st-note.com/img/1700996703467-pfr7xB6U2h.png?width=1200)
上記の画面の入力欄に、先ほど調べたOpenAI APIキーをペーストします。
図形やイラストを作成して「Make Real」ボタンを押す
![](https://assets.st-note.com/img/1700997820624-MfYez7fY8E.png?width=1200)
![](https://assets.st-note.com/img/1700998159301-1D80il25S8.png?width=1200)
作成したいラフ案を作成して、全体を選択します。その後、右上部の「Make Real」ボタンを押すと自動的にイメージが生成されます。
コードをコピーする
![](https://assets.st-note.com/img/1701040128441-qRR807EbeW.png?width=1200)
コードをコピー&ペーストすることもできます。
「Make Real」を押すと右下にエラーが表示される時の対応方法(OpenAIのページで5ドル以上に課金する必要)
![](https://assets.st-note.com/img/1700998764602-du3VmGfW2V.png)
OpenAI APIキーを正しく入力したが、上記のエラーが表示された場合は、下記の通り、対応を行なってください。
![](https://assets.st-note.com/img/1700999057990-0MXoIHgYAd.png?width=1200)
OpenAI 課金ページへアクセスします。「Credit balance」が0の場合は、先ほどのようなエラーが表示されます。そのため、「Add payment details」から課金手続きを行なってください。また最小額は5ドルとなっています。課金手続きが終えましたら、先ほどの「Make Real」をもう一度押して動作を確かめてください。
4. 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
これは便利!
— KEITO💻AIディレクター (@keitowebai) November 18, 2023
tldrawで簡単なゲームも作成可能。
※僕はエンジニアでも何でもありません。
1.簡単なラフを作成
2.ラフ絵に自然言語で指示出し(英語のみ)
3.完成したサンプルから修正指示して微調整… pic.twitter.com/XdvdrqJwo3
5. まとめ
「Make real tldraw」は、AI(GPT-4V)技術を活用して、簡単なスケッチや図形からリアルなイメージに変換する画期的なツール
手書きのイラストや図形からリアルなイメージが生成
ノーコードで非エンジニアでもシステムやサイト開発ができる
作成したイメージのコードをコピー&ペースト可能(開発が爆速)
画面上にプロンプト(指示文)や画像入力が可能
登録不要。OpenAI APIキーだけあれば誰でも利用できる
いいなと思ったら応援しよう!
![【AIニュースマガジン】生成AI情報を分かりやすく発信 / 株式会社アイベジ](https://assets.st-note.com/production/uploads/images/123202549/profile_2d76ef3519fe6c9eae1313aca74d4c65.png?width=600&crop=1:1,smart)