tldrawとは？注目されている背景やできること、具体的な活用例など
昨今大きな注目を集めている生成AIですが、実用化に向けて確実に進化し続けています。
本記事では、作成した画像・図形からHTMLコードを自動で生成できる、tldrawの「makereal」というツールについて紹介していきます。
一読いただけると特徴やできることが理解できるような内容になっておりますので、ぜひ最後までご覧ください。
tldrawとは
tldrawとは、基本的に無料で利用することができるホワイトボードのようなツールです。
手書きでのスケッチや図形を活用することができ、Webページ制作などのたたき台（ワイヤーフレーム）の作成などに使われています。
類似した利用用途のツールだと、Figmaのようなものに近いと思います。
PowerPointやGoogleスライドのように、図形を拡大・縮小・回転などの編集をすることもできます。
昨今tldrawが大きな注目を集めている背景として、スケッチや図形からHTMLコードをものの数秒で生成できる点があります。
仕組みとしては、tldrawそのものにAIを搭載しているのではなく、ChatGPTで有名なOpenAIのAPIを利活用していることも大きな点です。
GPT-4Vで、OpenAIがテキストだけではなく図やイラストを読み込むことが大きなきっかけとなっていそうです。
もしGPT-4Vについて、より詳しい内容が気になる方に関しては、以下の記事でまとめておりますので、チェックしてみてください。
あわせて読みたい：GPT-4Vとは？ChatGPTの新機能GPT-4Vでできることや利用用途について
tldrawの注目アプリ「makereal」とは
「tldrawとは」と検索すると同じくらい「makereal」という単語を目にしすると思いますが、makerealとはtldrawのアプリであり、こちらを利用することで描画した図形やイラストのHTMLコードを生成することができます。
HTMLコードの生成については、上述したようにOpenAIのGPT-4VのAPI（有料）を利用することが必須なので、その点だけ注意が必要です。
一方で、月額費用ではなく従量課金制（使った分だけ）の仕組みなので、比較的安価に試せるところが特徴でもあります。
tldrawとmakerealについて、もう少し詳しく見ていきましょう。
tldrawとmakerealが注目されている背景
tldrawとmakerealが注目されている背景として、大きく次の3つのことが挙げられます。
誰でも簡単に手書きのイラストや図形から画像生成が可能
1つ目は、誰でも簡単に手書きのイラストや図形から画像生成が可能なことです。
使ってみた感じだと、デザインツールの「Figma」と少し似ているUIかと思います。
日本語表記も実装されており、使いやすさも十分のように感じます。
また、ツールそのものを利用する分には無料で使えるところも嬉しい点ですね。
作成された画像のHTMLコードを自動生成可能
2つ目は、作成された画像のHTMLコードを自動生成可能な点です。
何回か既に記載していますが、「tldrawといえば」と多くの方が口を揃えて言うくらい、非常に大きな特徴だと思います。
アイディアやイメージをデザインに起こすデザイナーと、プログラムをコーディングして実装するエンジニアの2人分の工数が必要なところを1人分に集約できるので、会社勤めの方はもちろん、個人事業主のような方からしても非常に心強いサービスといえます。
OpenAIのAPIキーが使用されていること
3つ目は、OpenAIのAPIキーが使用されていることです。
世界的に有名なChatGPTの開発元であるOpenAI社のAIを活用していますので、信頼性やその話題性は他のAIと比較をしても一歩抜きんでています。
また、OpenAI社のAIについては今後のアップデートも期待されるところなので、AIが進化することでtldraw側のできることもどんどん増えていくと予見されているところも注目ポイントになっていると思います。
続いて、tldrawとmakerealを体験してみたい方向けに、簡単に使い方を記載していきます。
tldraw「makereal」の使い方
tldraw「makereal」の使い方ですが、GitHub上でソースコードを取得して動かす方法 or 公式サイト上から使用するの2つの方法があります。
今回は、より簡潔な方である公式サイト上からの使用をメインに紹介します。
tldraw「makereal」を使うまでのステップ
まずは使うまでに必要な作業について記載します。
【STEP1】公式サイトにアクセス
「tldraw makereal」と記載しても、GitHubのページが出てきたりとなかなか公式サイトに辿り着けなかったので、こちらのURL（https://makereal.tldraw.com/）をクリックしてみましょう。
【STEP2】OpenAIのAPIキーを入力
無事にアクセスできると、画面中央下部に「Your OpenAI API Key」と書かれたスペースがあると思いますので、そちらにAPIキーを入力してみましょう。
※APIキーを取得していない方については、以下に取得・課金の方法を記載しておりますので合わせてご確認ください。
【番外編1】APIキーの取得方法
1．まずはOpenAIのサイト（platform.openai.com）にアクセスして、アカウントを作成しましょう。
2．無事にアカウントが作成できたら、画面左部分の鍵マーク（API keys）のボタンをクリックしてください。
3．すると、画面の中段くらいに「+Create new secret key」というボタンが表示され、そちらをクリックすると、次のようなポップアップが出てきますので、名前をつけて「Create secret key」を押しましょう。
4．成功すると、「+Create new secret key」ボタンの上部に「SECRET KEY」という項目と一緒に、ランダムに組まれた文字列が表示されますが、その文字列自体のことをAPIキーと呼びます。
【番外編2】API利用に際してのチャージ方法
次に、APIキーを有効化するためにOpenAIのアカウントに料金をチャージします。
PASMOやSuicaに現金をチャージするようなイメージです。
1．左側メニューバーの歯車（Settings）ボタンをクリックした後に、Billingボタンをクリックしてください。
2．すると、クレジットカード情報を入力し、料金がチャージできるようになりますので、任意の金額をチャージしてください。
※日本円ではなく、米ドルで換金されますのでその点だけご注意ください。
ここまで完了すれば、準備は完了です。
次に、簡単な操作方法について見ていきましょう。
スケッチしてみる
まずは、デザインの基となるアイディアをスケッチしていきましょう。
手書きは勿論、画像をアップロードしたりtldraw上にある図形を使って描画してみるのも良いと思います。
Make Realボタンを押して、HTMLコードを出力する
スケッチができたら、HTMLコードを生成したい画像を範囲選択して、右上のMake Realボタンを押します。
そうすると、実際にHTMLで実装された場合のイメージ画像が生成されるので、すぐ右側のメニューバーの中にある「Copy HTML」を選択すれば、コードのコピーまで完了です。
他にも、細かな修正点をテキストで修正したりなどの機能も実装されていますが、今回はあくまでも簡単な使い方がメインとなりますので、それらを含めたより詳細な使い方については、別の記事でお伝え致します。
ここまでが概要の部分となりますが、実際にはどのような活用方法があるのかといった例をいくつか紹介していきます。
tldraw「makereal」の活用例
ワイヤーフレーム作成作業の効率化
まず1つ目は、ワイヤーフレーム作成作業の効率化です。
ボタン1つでHTML上での画面イメージを生成できるので、最終的なアウトプットをイメージした上でデザインを考えることができるという点は、Webデザイナーのような職種の方にとっては特に嬉しい点ではないでしょうか。
Webページ制作作業での活用
2つ目は、Webページ制作作業での活用です。
構成されたデザインをWeb上で実装するためには、これまで1からコードを書く必要がありましたが、tldraw「makereal」を活用すればボタン1つでコードを生成可能です。
革新的な業務効率化に繋がりそうという予感がしますね。
ゲーム作成での活用
3つ目は、ゲーム作成での活用です。
ゲーム画面のインタフェース作成もそうですが、実際にこのtldraw「makereal」を使って、パックマンのようなコンピューターゲームを作られた方もいました。
tldraw「makereal」をはじめとしたAIを使いなこなせるかどうかというのは、人類にとって今後大きな分かれ目になりそうです。
最後に、利用料金と注意点についてお伝えします。
tldrawとmakerealの利用料金
冒頭でもお伝えしましたように、tldrawの利用自体は無料です。
一方で、makerealについてはOpenAIのAPIキーを利用している関係で、課金をすることが必須となります。
自動引き落としではなく、都度チャージになりますので使いすぎるということは無いかと思いますが、その点は念頭に置いてください。
（2024年2月時点では）OpenAIのAPI利用料が1回あたり0.01＄～0.03＄とのことなので、比較的安価に利用はできそうです。
tldraw「makereal」を活用する上での注意点
特筆して大きな注意点はありませんが、上述したようにHTMLコードの生成には料金が必要であるということは忘れないようにしてください。
APIキーの作成と、料金のチャージは別物なので「APIキーを作ったけど、動かない！」というときは、大体チャージし忘れであることが多いです。
より細かいAPIについてのQ&Aは、tldrawにも記載がありますので、困った際にはぜひご確認ください。
API Keys Q&A
まとめ
tldrawとmakerealの特徴やできることについて紹介しました。
本記事が、tldrawやmakerealを利用をしていく上での一助になりましたら幸いです。
さいごまでお読みいただきありがとうございました。
おすすめ記事
