ChatGPTの新機能「Advanced Data Analysis(旧Code Interpreter)」にアパレル店舗の売上分析をお願いしたらデータサイエンティストが不要になった
tsukasa
Ainova
手書きのイラストからサイトを生成するtldrawの「makereal」とは？料金や始め方・使い方などを徹底解説！
tsukasa
記事内に広告を含む場合があります
Webデザインとフロントエンド開発の分野では、効率化と革新が常に重要な要素となっています。
この記事では、そうした要求に応えるための革新的ツール「tldraw」とその関連サービス「makereal」に焦点を当て、その特徴から実用的な使用方法までを詳細に解説します。
makerealは、tldrawで描かれたラフなデザインを素早くHTMLに変換する驚くべき能力を持っており、プログラミングやデザインの専門知識がない方でも、直感的にWebページをデザインし、実際に動作するHTMLコードを生成することが可能です
この記事を通じて、tldrawとmakerealがWeb開発のプロセスをどのように変えるのか、その全体像をお届けします。
目次
【PR】
tldrawとmakerealとは
引用：https://github.com/tldraw/tldraw?tab=readme-ov-file
tldrawは、Reactライブラリを使用してホワイトボードや他のキャンバスを作成するツールです。
このライブラリを利用することで、アプリケーションに拡張可能なホワイトボードを組み込むことができます。
tldrawに関連するサービスの中で特に注目されているのが、「makereal」というアプリです。
このアプリを使うと、tldraw上で描いた手書きのスケッチやラフなデザインを実際のUIデザインに自動的に変換できます。
この機能により、デザインやプログラミングの知識がなくても、手書きのイラストを描くだけで、希望する機能を作成することが可能になります。
makerealの機能
1 .手書きのスケッチやデザインからHTMLコードを生成
引用：https://github.com/tldraw/make-real
makerealのメイン機能で、tldrawの画面上にある「makereal」ボタンをクリックするだけで、作成したワイヤーフレームからHTMLコードを自動生成できます。
HTMLコードは、コピー＆ペーストで簡単にファイルへ保存でき、Webブラウザですぐに表示できるレベルのものです。
HTMLの知識がなくても、自分で作ったワイヤーフレームから、簡単にWebの画面が作成できるので、最初はそのスピード感に驚かされるかもしれません。
2. 自然言語での指示
tldrawでmakerealを利用してワイヤーフレームからHTMLコードを生成する際、時にはレイアウトが思い通りにならないことがあります。
そのような場合、ボード上で直接自然言語を用いて指示を出すことで、デザインの修正を行うことができます。
この方法により、デザイナーに具体的な修正を依頼するかのように、より詳細な要望や細かい調整が可能になります。
tldrawとmakerealの利用料金
tldrawとmakerealはどちらも無料で使うことが可能です。
ただし、makerealで画像からHTMLコードを自動生成するためには、OpenAIのAPIを利用するため、APIの利用料金がかかります。
tldrawとmakerealの始め方・使い方
それでは、早速tldrawを使ってみましょう。
tldrawを使用するには以下の2種類の方法があります。
- 公式のホスティングサービスにアクセスして利用するやり方です。
- Gitからソースを取得して、ローカル環境で動かす方法です。
まず簡単に試したい方は、公式のホスティングサービスへアクセスして使う方法が適しています。
本記事では、より手軽に使い始めることのできる、公式のホスティングサービスにアクセスする方法を紹介します。
1. OpenAI の APIキーを取得
先に、OpenAI の APIキーを取得しておきましょう。
アカウントを持っていない人はアカウント作成・ログインが必要です。
なお、OpenAIのAPIを初めて使用する場合は、最低5ドルの課金が必要になります。（課金の方法については後ほど説明します）
OpenAIのアカウントを持っていない場合は、先にアカウントの作成とログインを済ませてから、以下のURLにアクセスしてください。
上記の画面中ほどにある「Create new secret key」をクリックすると、好きな名前でAPIキーを作成・取得できます。
取得した API キーは、忘れないようにメモしていておいてください。
また、このAPIキーは、絶対に他の人に見られないようにご注意ください。
2. tldrawの公式サイトにアクセス
次に、公式のホスティングサービス「https://makereal.tldraw.com/」へアクセスしましょう。
画面中央下の入力領域に、OpenAI の APIキーを入力する場所があります。
そこに先ほどのAPIキーを貼り付けてください。
これだけで、tldrawを利用できる環境が整いました。
3. makerealで簡単な図形からコードを生成
早速、適当なデザインから、画面のHTMLコードを生成してみましょう。
以下のように、tldraw上でお絵描きをして、シンプルな構造のワイヤーフレームを作成します。
次に、作成したワイヤーフレームを選択状態にしてください。
選択すると、以下のようにラインが青くなります。
この状態で、右上に表示されている「makereal」ボタンをクリックしましょう。
すると、お絵描きしたワイヤーフレームから、HTML画面が生成されます。
生成されたHTML画面の右上にあるアイコンをクリックするとメニューが表示されるため、上から2番目の「Copy HTML」を選択しましょう。
すると、以下のメッセージが画面の右下に表示されます。
この状態で、テキストエディタなどにHTMLコードを貼り付け、HTMLファイルとして保存してください。
以下は、無料で利用できるIDE（統合開発環境）のVSCode（Visual Studio Code）のエディタに、生成されたHTMLデータを貼り付けた状態です。
保存したHTMLファイルを、Webブラウザで開いてみましょう。
すると、以下のようなダイアログが表示され、文字も入力できます。
ここまで、一切HTMLのコードを自力で打つ必要は全くありません。
4. 自然言語による修正指示
では、凝ったデザインのワイヤーフレームを読み込ませると、どこまで正確に意図したHTMLコードを生成できるでしょうか？
無料のワイヤーフレームの画像を利用して、複雑な構造のHTMLを出力してみました。
利用した無料のワイヤーフレームは以下です。
出典：https://www.edrawsoft.com/jp/website-wireframe-templates.html
tldrawに画像を貼り付けて、先ほどと同じように「makereal」ボタンをクリックしてみましょう。
すると、画像などをはめ込まれた状態で、提示したワイヤーフレームに近いHTMLが生成されました。
ここまで複雑だと完全再現は難しいようで、期待したレイアウトの画面にはなっていませんね。
しかし、ここからさらに、自然言語で指示を与えて修正を加えることも可能な点が、tldrawのすごい点です。
上記の生成HTMLをWebブラウザで表示すると、以下のようになりました。
画面右上のNavigateの部分が、Socialの右側に来てしまっています。
気になるので、言葉で指示を入れて修正を試みましょう。
デザインの一部手直しを上記のようにコメントに入れて、再生成してみました。
すると、Navigateの部分がきちんと指定の場所に移動したことがわかります。
5. グラフの作成も楽々
tldrawは、グラフのHTMLも手軽に生成してくれます。
試しに、こちらのサイトの無料画像のグラフから、HTMLを生成してみました。
生成した直後の画面は表示領域が狭くてわかりにくいですが、HTMLファイルにして表示してみると、かなりきれいなグラフが出来上がっていることがわかります。
データ分析した結果をWebサイトに掲載する際にもとても便利ではないでしょうか。
tldrawでmakerealを使う際の注意点
ここまでご紹介した手順でtldrawを使用開始すると、makerealボタンを押したときに、画面右下に以下のエラーが出て先に進めないことがあります。
この原因の多くは、OpenAIのAPIを利用するための料金をチャージしていないためです。
tldrawは無料で使用できますが、makerealを使用するには先述した通り、OpenAIのAPI利用料金として最低限5米ドルを入金する必要があります。
料金をチャージするには、こちらのURLにアクセスし、「Add Payment detailes」ボタンをクリックし、支払いに使用するクレジットカードを登録します。
ちなみに、デビットカードの登録・チャージも可能でした。
料金のチャージが完了すると、以下のようにチャージした金額が表示されます。
ちなみに、今回、シンプルなダイアログ1画面と複雑なワイヤーフレーム1画面のHTMLを出力しましたが、かかった料金は0.09ドルでした。
tldrawでmakerealを業務で使う際の作業フロー
tldrawを使用する際の一般的な作業フローは以下の通りです。
1.アイデアのスケッチ
tldrawを開き、新しいドキュメントを作成してください。
まずは、アイデアを自由にスケッチします。
2.UI要素の追加とカスタマイズ
スケッチしたアイデアに基づいて、ボタン、テキストボックス、画像などのUI要素を追加しましょう。
3.コード出力
デザインが完成したら、makerealを実行してHTMLやCSSのコードを生成します。
コード生成の際は、画面全体をいきなり出力すると、一部レイアウトが崩れる可能性が高まります。
そのためコード出力をする際は、ヘッダー・ボディ・フッター・メニューなどに分割して生成するようにしましょう。
ある程度分かりやすい単位でコードの自動生成を行うことで、思い通りのレイアウトに近づけることができます。
4.修正して完成に近づける
修正したい場合は、デザインに対して自然言語（今のところ英語がいいようです）にて修正の指示を出して生成を繰り返しましょう。
このようにして、デザインを手軽にHTMLへ置き換え、Webページやアプリケーションに統合できるようになります。
5.必要に応じてコードを書く
JavaScriptなどの知識がある方は、「Open in CodeSandbox」というメニューを選んでコードエディタを開き、コーディングを続きで行うことも可能です。
[補足]tldrawでのUI生成に必要な要素
tldrawで効果的なUIを生成するためには、いくつかの基本的な要素が必要です。
| 要素 | 役割 |
| ボタン | ユーザーのアクションを促すためのインタラクティブな要素 |
| テキストボックス | ユーザーからの入力を受け取るためのフィールド |
| 画像 | 視覚的な要素としての画像やアイコン |
| レイアウトコンテナ | ページのセクションやカードなど、コンテンツを整理するためのコンテナ |
| ナビゲーション要素 | ユーザーがサイト内を移動するためのメニューやタブ |
これらの要素を、tldraw上の画面デザインに書き込んで追加し、必要に応じてカスタマイズしましょう。
tldrawとCursorを組み合わせるとより便利に
tldrawと、今話題のCursorエディタを組み合わせると、かなり効率的なフロントエンド開発さえも実現できます。
そこで、Cursorエディタの簡単な説明と、tldrawと組み合わせたフロントエンド開発環境の構築方法についてまとめました。
Cursorエディタとは
Cursorは、Visual Studio Code（VSCode）をベースに開発されたAI搭載のコードエディタです。
このツールのメイン機能は、AIによるコードの自動生成、質問応答、エラーの自動修正で、これにより開発者は効率的に作業を進めることができます。
Cursor はtldrawと連携できるため、tldraw上でワイヤーフレームを作成してHTMLコードを自動生成し、Cursorで自動コーディングまでをスムーズに行えます。
Cursorは無料でも利用できますので、さっそくフロントエンド開発環境の構築手順について見ていきましょう。
合わせて読みたい
AIコードエディタ『Cursor』を徹底解説！料金や始め方・使い方、無料トライアルの条件やGithub Copilotとの比較も
フロントエンド開発環境の構築手順
Cursorの公式サイトにアクセスし、Cursorをインストールしましょう。
Cursorをインストールして画面を立ち上げたら、拡張機能をインストールします。
画面のメニュー近くにある以下の拡張機能のアイコンをクリックしましょう。
すると、拡張機能を検索できるようになるので、「tldraw」で検索してみましょう。
いくつかの拡張機能がヒットしますが、ここでは「UI Sketcher」をインストールしてください。
インストール後、Cursorエディタ右上に小さく表示されている歯車アイコンをクリックします。
設定画面が表示されるため、ここでOpenAIのAPIキーをコピー＆ペーストし、入力欄右側の「→」をクリックしましょう。
ここまでで、Cursorとtldrawの連携が完了しました。
他に入れておくといい拡張機能は、日本語化パックや、HTMLのプレビューができるHTML PreviewやLive Serverです。
構築した環境を使ってみる
では、構築した環境を早速使ってみましょう。
まず、画面上部の入力領域をクリックします。
すると、以下のようにメニューが表示されるため、「コマンドの表示と実行」を選びましょう。
そして、「UI」と入力して、表示された「UI Sketcher:Open drawing board」を選択します。
すると、デザインできるホワイトボードがCursor内で開きます。
次に、同じようにUIと入力すると表示される「UI Sketcher:Set OpenAI API Token」を選んで、UI SketcherにもAPIキーを設定しましょう。
後は、ホワイドボードに画面のワイヤーフレームを描き、右上の「Make Real」ボタンをクリックするだけです。
すると、Cursorエディタで、画面のコードが自動生成されます。
自動生成されたコードをHTMLファイルとして保存した後、そのHTMLファイルをCursorエディタ上で右クリックして「Open Preview」または「Open with LiveServer」を選んでみてください。
Webブラウザ上で、デザインした画面が表示されます。
後は、自動生成されたコードのCSSなどを修正し、求めているデザインに近づけていきます。
コードをそのまま追加しても動作するので、このままフロンドエンド開発に進むことも可能です。
tldrawとmakerealを使ってWebのデザインや開発を効率化！
tldrawは、その使いやすさと高度なコード生成機能で、Webデザインや開発の効率化に大きく貢献してくれるツールです。
tldrawを使用してWebサイトやアプリのモックアップを迅速に作成し、デザインのアイデアを素早く形にすることで、チームでのアイデアの共有や議論もスムーズにいくでしょう。
WebデザイナーやWebエンジニアにとって、tldrawはプロジェクトの質を高め、作業の効率を向上するうえで強力なサポーターとなり得ます。
Tldrawに興味を持たれたら、ぜひ一度使ってみてくださいね。
