Make Real

Make Real とは？

Make Real（リポジトリ: tldraw/make-real）は、tldraw SDK に関連するオープンソースプロジェクトです。主な目的は、「UIを描いて実体化する」ことを可能にし、デザインしたUIをアプリケーションで機能的にするスターターとサポートコードを提供することです。

リポジトリは2026年2月20日時点で所有者によりアーカイブされており、読み取り専用です。ページではライブデモと、プロジェクト版の構築やブログ投稿による学習リソースが紹介されています。

主な機能

• tldraw SDK を使用して構築され、描画ベースのUIワークフローの基盤を提供。
• スターターリポジトリ形式：リポジトリをクローンして独自のMake Real版を構築。
• リポジトリのREADMEから参照されるデモ体験（makereal.tldraw.com）を含む。
• TypeScript/Next.js コードベースとして構成（next.config.js、TypeScript/TSファイル、package.jsonの存在）。
• コード品質とスタイリングのためのサポートファイルを含む（例: ESLint/Prettier、Tailwind設定ファイル）。

Make Real の使い方

1. makereal.tldraw.com のライブデモを使って「UIを描いて実体化する」フローを理解。
2. GitHub（tldraw/make-real）からスターターリポジトリをクローンして独自版を構築。
3. プロジェクトのREADMEやリンク先リソース（参照ブログ投稿を含む）を参照し、デモの仕組みと適応方法を理解。
4. リポジトリページで言及されたリンクのDiscordコミュニティで構築物を共有。

ユースケース

• UIインタラクションフローのプロトタイピング： tldraw SDKベースのアプローチでUIを視覚的にデザインし、アプリ動作に接続。
• カスタム「UIキャンバス」アプリケーションの構築： リポジトリを起点に独自の描画・レンダリングワークフローを実装。
• 描画インターフェースがロジックを駆動する方法の探求： コード構造から、描画環境のUI要素が機能的なアプリ動作に変換される仕組みを学習。
• 製品インタラクションの教育・ドキュメント化： デモと基盤プロジェクトを使って、デザインUIを実行可能体験に変える方法を説明。
• TypeScript/Next.jsでのUI-to-appパイプラインの実験： 既存のNext.js + TypeScriptセットアップを関連プロトタイプのテンプレートとして活用。

FAQ

• このリポジトリは積極的にメンテナンスされていますか？ いいえ。2026年2月20日に所有者によりアーカイブされ、現在読み取り専用です。

• オンラインでプロジェクトを試せますか？ リポジトリページで makereal.tldraw.com のデモが紹介されています。

• 独自版を構築する場合、何をクローンすればいいですか？ ページでは提供スターターリポをクローンして独自のMake Real版を構築可能と記載。

• どのような技術で構築されていますか？ リポジトリ内容から tldraw SDK で構築され、TypeScript コードベースに Next.js 設定を使用。

代替案

• tldrawで独自UIプロトタイピング環境を構築： このアーカイブリポを直接使わず、tldraw SDKの概念から描画要素をアプリ動作にマッピングする独自実装を。
• 汎用プロトタイピング-to-コードアプローチを使用： 「UIデザインを作動画面に変換」が目的なら、UI動作生成・配線に特化した他のワークフローを使用し、デザイン-to-ロジック変換を自力で。
• エディタ駆動UIシステムを作成： 類似「描画駆動」ワークフローが欲しい場合、このプロジェクト構造ではなくUIを編集可能状態として扱う代替（例: 状態駆動UIビルダー）を検討。
• ダイアグラム/キャンバス編集ベースのアクティブメンテナンスUIビルダーを探す： このリポがアーカイブのため、「キャンバスエディタがアプリ動作を駆動」カテゴリの新ツールが長期プロジェクトに適する可能性あり（ニーズによる）。