Make Real
Active
〜とは何ですか？ Make Real?
Make Real は tldraw キャンバス上の手描き UI ワイヤーフレームを、動作する HTML プロトタイプに変換します。描画を選択して Make Real をクリックすると、GPT-4 Vision が Tailwind CSS と JavaScript を含む単一のレスポンシブ HTML を生成し、キャンバス上の iframe で表示します。結果に注釈を加えて再生成で反復できます。OpenAI API キーは各自で用意します。
使い方 Make Real?
1. GPT-4 Vision にアクセスできる OpenAI 開発者 API キーを取得。2. makereal.tldraw.com にアクセス。3. 画面下部の入力欄に API キーを貼り付け。4. キャンバスに UI を描画。5. 描画を選択。6. 青い Make Real ボタンをクリック。7. 数秒でサイトがキャンバスに表示されます。移動・リサイズしたり、上に描き足して再度 Make Real で改善できます。
Make Real 主な機能
01
スケッチから動く HTML へ
描画の選択範囲をキャプチャし GPT-4 Vision に送り、Tailwind CSS と JavaScript を含む単一の自己完結型 HTML を生成。
02
キャンバス上の iframe プレビュー
生成されたプロトタイプは tldraw キャンバスの iframe で表示され、操作やリサイズによるブレークポイント確認、複数案の並列配置が可能。
03
反復デザインループ
生成サイトの上に注釈を描き、領域を選択して再度 Make Real を実行し、メモに基づいてプロトタイプを更新。
04
HTML をコピー
プレビューメニューから生成 HTML をコピーし、キャンバス外でも利用可能。
05
オープンソースのスターター
GitHub の make-real-starter をフォークし、tldraw SDK で独自の Make Real 風アプリを構築。
Make Real ユースケース
低忠実度ワイヤーをクリック可能な UI プロトタイプに変換
生成サイトをリサイズしてレスポンシブレイアウトを検証
描画と生成を繰り返してプロダクトアイデアを練る
計算機やミニゲームなど簡単な対話アプリを手描きから素早く試作
Make Real よくある質問
OpenAI API キーは必要ですか？
Make Real は何を生成しますか？
結果を反復改善するには？
Make Real は無料ですか？
Make Real 製品の背景と公式リンク
Make Real サポート用メールアドレス、カスタマーサービス連絡先、返金対応先など
Make Real サポートメール： hello@tldraw.com
詳細なお問い合わせは、以下をご覧ください 紹介ページ(https://tldraw.dev/blog/product/make-real-the-story-so-far/)
Make Real 会社情報
Make Real 会社名： tldraw
Make Real 会社住所： London, GB
詳細情報 Make Real, 以下をご覧ください： 紹介ページ(https://tldraw.dev/blog/product/make-real-the-story-so-far/)
Make Real Twitter
Make Real Twitterリンク： https://x.com/tldraw
Make Real LinkedIn
Make Real LinkedInリンク： https://www.linkedin.com/company/tldraw
Make Real GitHub
Make Real GitHubリンク： https://github.com/tldraw/make-real
Make Real の料金プラン
Free
無料無料
- makereal.tldraw.com で Make Real を無料利用
- OpenAI API キーは各自で用意
- OpenAI API の従量課金は OpenAI に直接請求
- GitHub でオープンソース公開