【tldraw makereal】手書きの図から5秒で本格サイトを自動作成してくれるAIを使ってみた
WEELメディア事業部LLMリサーチャーの藤崎です。
ブラウザ上で描いたワイヤーフレームから自動でHTMLのコードを出力することができる、tldrawのmakerealをご存知でしょうか？
makerealのGitHubでのスターはなんと10,000を超えていて、その注目度の高さが伺えますよね。
今までのコーディング作業が自動化されるとなると、使ってみたい！と思う人も多いはず。。。
実際、動かしてみたのですが本当にびっくりしました！
サッと描いたイラストから自動で実際に動作するコードを生成するなんて、まるで映画『アイアンマン』において、トニー・スタークが自宅の研究所で直感的なインターフェースを操作しているかのようです。
あとは空間上にホログラム化できれば完璧なのですが・・・！
この記事ではmakerealの導入方法や使い方、どこまでできるのかの検証を行いますのでぜひ最後までご覧ください。
特に、コーディングがもっと楽になれば・・・と考えているHTMLコーダーの方、必見です！
なお弊社では、生成AIの社内活用について1時間無料相談を承っています。こちらからお気軽にご相談ください。
→無料相談で話を聞いてみる
makereal（draw-a-ui）の概要
makerealはブラウザ上で描いたワイヤーフレームからHTMLのコードを自動で出力することができるツールです。
GPT-4のAPIとNext.jsを使っており、ローカルで動作します。
ローカルで環境構築を行う生成AIだとGPUが必要だったりとそこそこ高いマシンスペックが要求されますが、makerealはノートPCでも動かすことができました。
makereal（draw-a-ui）の料金体系
makerealはMIT licenseとなっていますので、無料で利用することができます。
ただ、gpt4-vison APIを使うので別途OpenAI APIの費用が必要ですのでご注意ください。
なお、ノーコード開発について詳しく知りたい方は、下記の記事を合わせてご確認ください。
→【生成AI×ノーコード】AI時代のノーコード開発をAIエンジニアが解説
makereal（draw-a-ui）の使い方
では早速、makerealを使ってみましょう！
まずGitからソースコードを任意のフォルダにダウンロードします。
git clone https://github.com/SawyerHood/draw-a-ui次に、生成された「draw-a-ui」というフォルダに移動します。
cd draw-a-uiそして、draw-a-uiのフォルダ内にOpenAI APIの設定ファイルを作成します。
「OpenAIKEYを入力」の箇所は各自のKEYを入力してくださいね。
echo "OPENAI_API_KEY=OpenAIKEYを入力" > .env.local最後にinstallコマンドでdraw-a-uiをインストールして完了です！
npm installdraw-a-uiを起動するには下記のコマンドを実行します。
npm run dev「Ready」の表示がでたらブラウザで「http://localhost:3000」にアクセスしてください。
真っ白なキャンバスの、お絵描きツールのような画面が表示されればmakerealを使うことができます！
makereal（draw-a-ui）を実際に使ってみた
makerealのインターフェースはかなり直感的なので、説明を読むこともなく使えましたよ〜。
出力したいものを描いて、右下の「Make Real」を押すだけ！
簡単すぎる・・・。
ちょっとやってみましょう！
サクッと、ウェブサイトによくあるグローバルナビゲーションっぽいボタンを描いてみます。
四角のツールと、テキストツールでHOMEのボタンを作ってから、cmd+Cとcmd+Vでコピペまでできました。
そして、「Make Real」を押します！
出力結果がこちら！！
・・・すごくないですか？？
ちゃんとマウスカーソルを合わせると色が薄くなるホバー時の動作まで完璧でした！
Previewタブで動作のプレビューが、Codeタブをクリックするとソースコードが表示されます。
なお、生成されたコードをローカル環境で実際に動かしてみてもプレビュー通りの動きをしていました！
/+記事内バナー_資料請求
makereal （draw-a-ui）の推しポイントであるイラストからHTMLが出力できるのは本当なのか？
先ほどのボタンの出力でmakerealの実力が垣間見えましたが、どこまで作りこむことができるのか試して見たいと思います。
お題はこちら！
弊社WEELのウェブサイトを少し簡略化したワイヤーフレームです。
左サイドバーのネストされているリストや画像と説明文のカラムなど、どこまで再現してくれるのでしょうか。
生成結果がこちらになります。
パッと見たところそれっぽいサイトが出来上がりました！
ですが、グローバルメニューやサイドバーの要素などワイヤーフレームと異なる部分が多いですね。
そしてなにより英語ばっかり・・・。さすがに日本語は難しいのでしょうか？
そこで、何度か再生成を行ってみましたのでその結果も合わせてご覧ください。
例えば、要素はあっているけど中身が抜けているものが生成されたり。
日本語は表示されたけれど、レイアウトが崩れていたり。
正直なところ、サイト全体のワイヤーフレームをコーディングするのは厳しいかなと感じました。
なので、次はパーツを個別に生成してみます！
まずは左サイドバーの部分だけを試してみましょう。
生成結果はこちら！
日本語の表記はやはり怪しいですね。
ただ、ネストされているリストはワイヤーフレーム通りの仕上がりになりました！
次はこちら、右サイドバーです。
少し余計な装飾を入れてしまっているのですがどうなるのでしょうか・・・？
生成結果はこちらです！
完璧とは言えないですが、ソーシャルボタンや画像と概要の要素があったりと使えそうなパーツが出力されました。
やはりサイト全体のコーディングには向いておらず、個別パーツを出力する程度であれば使える・・・かも？という感じですね。
なお、ローコード開発について詳しく知りたい方は、下記の記事を合わせてご確認ください。
→生成AI時代のローコード開発でできること、将来性、おすすめツールを解説
まとめ
ワイヤーフレームからHTMLを出力できるというmakerealですが、サイト全体のコーディングや難しい動きがあるパーツなどはなかなか予想通りには生成できませんでした。
それでも、簡単なパーツであれば生成したものをそのまま利用できるレベルのソースコードを吐き出してくれるので、うまく使えば業務の負担を減らしてくれるのではないでしょうか？
最近の技術の進歩は本当にすごく早いので、イラストから細かい動きまで再現できるHTMLを吐き出す生成AIが登場するのもそう遠くない未来かもしれませんね。
最後に
いかがだったでしょうか？
弊社では
・マーケティングやエンジニアリングなどの専門知識を学習させたAI社員の開発
・要件定義・業務フロー作成を80%自動化できる自律型AIエージェントの開発
・生成AIとRPAを組み合わせた業務自動化ツールの開発
・社内人事業務を99%自動化できるAIツールの開発
・ハルシネーション対策AIツールの開発
・自社専用のAIチャットボットの開発
などの開発実績がございます。
まずは、「1時間の無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。
➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。
「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。
セミナー内容や料金については、ご相談ください。
また、弊社紹介資料もご用意しておりますので、併せてご確認ください。
