Lunagraph
Lunagraph · 画像 · コーディング
Lunagraphは、デザインエンジニア向けに作られたAIデザインキャンバスだ。キャンバス上で画面を描き、状態とインタラクションを加え、描いた内容と一致するReactコードをコピーするか、そのままコーディングエージェントへ送る。UIデザインツールとReactコード生成ツールが一箇所にまとまったものだと考えればいい。ファイルを壁越しに渡すのではなく、設計と納品を一緒に進めたい人に向く。
Lunagraph について
Lunagraphとは
Lunagraphは、設計しながらコードを書くキャンバスだ。主張は単純で、あるツールで画面を描き別のツールで作り直すのではなく、画面を描けば同じ場所からReactコードが手に入る。同社はこれを、見た目と作られ方の両方を気にするデザインエンジニア向けと説明する。
狙っているのは引き継ぎの問題であり、これは今もほとんどすべてのプロダクト作業で最も遅い部分だ。多くのチームは今も、デザイナーがモックアップを仕上げ、エンジニアがそれを読み、質問し、コードで作り直すという遅いループを回している。Lunagraphは設計とコードを結び付けておくことでこれを飛ばす。すべての状態、すべてのインタラクション、そしてコード。それが全体の考え方だ。
大事な前提が一つあり、最初に知っておくべきだ。Lunagraphは、自前のサブスクリプションで動く組み込みAIを渡すわけではない。設定なしで頼れるモデルが同梱されているわけではないのだ。エージェントもサブスクリプションも自分で用意する。つまり、得られるコードの品質は接続するエージェント次第だ。また、Lunagraphは、すでに払っているであろうツールの置き換えではなく、その相棒だということも意味する。
はじめ方
- ブラウザでlunagraph.comのLunagraphを開き、サインインして新しいキャンバスを作る。1分で終わる。
- キャンバスに最初の画面を描き、レイアウトがしっくりくるまでスタイルを調整する。
- 状態、トランジション、propsを加え、各部分が静止画ではなく本物のコンポーネントのように動くようにする。ここが肝心な工程だ。
- LunagraphのチャットパネルかMCP経由で、自分のコーディングエージェントを接続し、キャンバス上で一緒に作業させる。
- Reactコードをコピーするか、完成したデザインをエージェントに送り返してコードベースに取り込む。
AIツール情報
Lunagraphの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- デザインエンジニア：週の半分をFigma流の描画に、残りをReactの記述に費やす人にとって、Lunagraphはその両方を一つのキャンバスで済ませられる。すでにエージェントのサブスクリプションがあるほど効果が大きい。
- フロントエンド開発者：フローを下書きし、そこから本物のコンポーネントコードを取り出せる。返ってきたものを確認するとき、Reactの慣れがあると助かる。
- 小さなプロダクトチーム：見た目と構築を一人が担うとき、引き継ぎ工程は純粋な手間でしかない。Lunagraphはそれを消す。
タスク
- モックアップを作動するコンポーネントに変える：状態とpropsを描き、手で作り直す代わりにReactを書き出す。そのほうが速い。
- インタラクティブなフローを試作する：画面をつなぎ、トランジションを加え、リンクを共有してコードレビューの前に触ってもらう。
- デザインで本物のコンポーネントを使い回す：MCP経由でリポジトリからコンポーネントを取り出し、描き直したコピーではなく実物で設計する。
シーン
- 別のデザインファイルを持ちたくない個人開発者が副業を仕上げる場面：キャンバスとコードが同じ場所にとどまる。
- 金曜にアイデアを探り、月曜に自分自身へコードを渡すデザインエンジニア：ツール間で何も失われない。
- フィードバックで反復する場面：フローを図として広げ、コメントを集め、画面を作り直さずに調整する。
主な機能
デザインからコードへのキャンバス
Lunagraphの中核は、画面を描いてそれに合うコードを取り出すフルキャンバスだ。同社は全体の流れを順番に走る三つの工程として示す。画面を設計し、コンポーネントとしてつなぎ、コードとして届ける。レイアウトを描き、状態とインタラクションを加え、良ければReactをコピーするかエージェントに送る。コードは実際に設計した内容を反映するので、作り直しの工程はそのまま消える。
自分のエージェントを持ち込む
Lunagraphのチャットパネルは、自分のエージェントをキャンバス上に直接置く。ボタン、行、フレームを選べば、エージェントは何を指しているか分かる。細かな変更は、漠然としたどこかではなく、指した場所に落ちる。既存のエージェントのサブスクリプションはそのまま使う。これで費用は今払っている額に近づくが、Lunagraph自身が重い作業を担うわけではないという意味でもある。
MCP接続
MCP経由で、すでに使っているツールにLunagraphをつなげられる。話していたアイデアを持ち込み、リポジトリからコンポーネントを引き出し、完成したデザインをコードとして送り返す。ワークフローがすでにエージェントとMCPサーバーを通っているなら、ほとんど設定なしで収まる。
状態を持つインタラクティブなコンポーネント
キャンバス上のコンポーネントは実際に動かせる。トランジションとpropsを加えると、静止したフレームが振る舞いを持つものに変わる。ホバー状態をSlackでエンジニアに説明しようとしたことはないか。状態を成果物に直接埋め込めることが、ここでの本当の利点だ。インタラクションがメッセージのやり取りの注記ではなく、ファイルの一部になるからだ。
フローの試作と共有
フローを描き、チャットに試作を頼み、チームにリンクを送れる。レビューする人は何もインストールせずに全体を触って回れる。人が触ってフィードバックを残し、自分は反復する。すべて同じキャンバス上だ。プロトタイピングツールとしては、画像を書き出して画面のつながりを文章で説明するより優れている。
ライブUIを取得するChrome拡張
ドキュメントには、ライブUIを取得するChrome拡張が挙げられている。作り直したいものがすでにブラウザ上にあるときに役立つ。あるものをそのまま取るほうが、一から描き直すよりいい。ほんの少し手を加えるためだけにページを1ピクセルずつ作り直した経験があるなら、この近道のありがたみが分かるはずだ。
メリットとデメリット
メリット
- コードとデザインが同居するので、別途維持すべき引き継ぎ資料がない。何も失われない。
- 新しいものに縛り付けるのではなく、既存のエージェントとサブスクリプションで動く。
- MCP対応なので、すでに使っているリポジトリやツールとやり取りできる。
- キャンバスが状態とインタラクションを扱うので、試作品は静的ではなくクリックできる。
デメリット
- 実際の価値を得るには、自分のエージェントとサブスクリプションが要る。なければコード側は限られ、代わりになる組み込みAIもない。
- 出力はReactコードだ。スタックがVue、Svelteなど別のものなら、届いたコードをそのままきれいには組み込めない。
- サイトから現在の料金を確認できなかった。数字を前提に計画する前に公式ページを確認してほしい。
よくある質問
作業しながらReactコードを生み出すデザインキャンバスだ。画面を描き、状態とインタラクションを加え、コードをコピーするかコーディングエージェントへ送る。画面を設計することと作ることの間の隔たりをなくすのが狙いだ。
関連コンテンツ
Lunagraphに関連するツール、スキル、記事を探す。
Lunagraphの代替ツール
X Ray Interpreter
X-ray Interpreter · 画像X Ray Interpreter は、X 線、CT、MRI、超音波、PET の画像を平易な言葉のレポートに変えるウェブベースの AI 放射線ツールだ。スキャン画像をアップロードすると、X 線の予備的な読影結果がすぐに返ってくる。説明が必要な箇所があれば、その後で追加の質問もできる。位置づけはセカンドオピニオンと学習の補助であり、医療診断ではない。
Aieasypic
AIEasyPic · 画像AIEasyPicは、単純なテキストプロンプトを数秒で完成したアート作品に変えるAI画像生成ツールだ。自分の写真でカスタムモデルを訓練したり、既存の画像の顔を交換したり、テキストから短い動画クリップを作ったりもできる。すべてブラウザだけで完結する。手早くビジュアルが欲しい気軽なクリエイターにも、コードを一切触らずに個人モデルを作りたい趣味の人にも向く。
Chargen
Chargen · 画像ChargenはDungeons & Dragonsやその他のテーブルトークRPG向けに作られたAIキャラクター生成ツール兼ワールドビルディングツールキットだ。一行のアイデアを描き上げたキャラクター肖像に変え、同じセッションでNPC、モンスター、マップ、遭遇を生み出し、すべてのクリーチャーの詳細を手元に置く。テーブルトークRPGアートの部分はGoldと呼ばれるクレジット制で動き、テキスト生成ツールは誰でも無料のまま使える。