MokuGraph

要約

問題：Framer Marketplaceには、AIアーキテクチャをインタラクティブに可視化するコンポーネントがありませんでした。既存のグラフコンポーネントは汎用的で、実際の本番システムの複雑さを表現できませんでした。

解決策：MokuGraph。12のAIアーキテクチャテンプレート、二つのインタラクションモード、プロパティパネルからの完全なカスタマイズを備えた力指向グラフコンポーネント。React、TypeScript、D3で構築しました。

成果：最初の提出ではFramer Marketplaceの四つの基準すべてで却下。ゼロから作り直し、汎用のグラフツールから「AI Architecture Maps」へ位置づけを変え、4週間後に承認されました。現在はMokujiro Studioのウェブサイトで稼働中です。

概要

MokuGraphは、Framer用のインタラクティブな力指向グラフコンポーネントです。実際のAIアーキテクチャをもとにした12のテンプレートを同梱しています。エージェントのオーケストレーション、RAGパイプライン、マルチエージェントチーム、MCPシステムなどです。どのテンプレートも、スライド上の見え方ではなく、本番でこれらのシステムが実際にどう組まれているかを反映しています。

私のキャリアの中で、ITでもプロダクトデザインでも、アーキテクチャ図は常に手元にありました。SaaSスタートアップのKariaでUX Leadを務める現在も、システムを図に描くことは、エンジニアリングチームや関係者との対話の一部です。2026年初頭、業界全体でAIの導入が加速すると、その必要性はさらに高まりました。新しいエージェントのワークフロー、RAGの統合、MCPの接続の一つ一つに図が必要で、静的なスライドでは、これらのシステムをめぐる会話の速さに追いつけませんでした。

その隙間と、Framer Marketplaceに同種のものがないという事実が、MokuGraphの出発点でした。

課題

市場の空白

Framer Marketplaceにはナレッジグラフのコンポーネントが一つありましたが、単純なノードとエッジの関係のために作られたものでした。AIチームが日常的に扱う多層のアーキテクチャは表現できません。18ノードのエージェントオーケストレーションを描き、インタラクティブに探索できるようにするものは、ありませんでした。

技術的な制約

Framerのコードコンポーネント環境で物理演算によるグラフを作るには、固有の制約がありました。D3の力学シミュレーションは、Framerの描画パイプラインの中で軽快に動く必要があります。レスポンシブな挙動は、設定なしでデスクトップ、タブレット、モバイルで機能しなければなりません。そして、購入者がコードを開かずにカスタマイズできるよう、あらゆる視覚的なプロパティをFramerのプロパティパネルに出す必要がありました。

最初の提出

最初のバージョンは2026年5月にFramer Marketplaceへ提出し、却下されました。審査では、Requirements、Functionality、Customizability、Originalityの四つの評価基準すべてが未達とされました。

四つのラベルに詳しいフィードバックは付いていませんでした。小手先の修正では足りないことは明らかで、プロダクトを根本から考え直す必要がありました。

アプローチ

位置づけの転換

却下は、このプロダクトが本当は何なのかを見つめ直す機会になりました。最初の提出は汎用のナレッジグラフとして位置づけていたため、既存のMarketplaceコンポーネントと正面から競合し、差別化が明確ではありませんでした。

位置づけの転換は明快でした。MokuGraphはAI Architecture Mapsのコンポーネントになる。汎用のグラフツールではなく、AIチームが実際に作っているシステムのための専用の可視化です。タグラインは技術の説明から用途の説明へ変わりました。「AI Architecture Maps for Framer」です。

この絞り込んだ位置づけは、以降のあらゆるデザイン判断も研ぎ澄ませました。テンプレートの選定、プロパティコントロール、既定のカラーモードまで、すべてを一つの問いでふるいにかけました。これは、実際のAIシステムを描いて伝える助けになるか。

技術的な作り直し

却下で指摘された技術的な問題には、体系的に対処しました。

D3の依存はCDNからの読み込みをやめ、npmパッケージとして同梱しました。実行時のネットワーク要求がなくなり、元の出品文にあった誤解を招く「依存ゼロ」という表現も削除しました。既定データとして使っていた個人のGistのURLも完全に取り除きました。

シミュレーションの性能を調整しました。アルファ減衰を0.001から0.02に変え、ティック数はおよそ6,000から300に減らしました。グラフの初回読み込み時や、ユーザーがノードをドラッグしたときの収束が目に見えて速くなりました。

プロパティパネルは、最小限のコントロールから完全なカスタマイズへ作り直しました。カラーモード（VividまたはUniform）、リンクの距離、斥力の強さ、結合の強さ、ノードサイズの倍率、ラベルの表示切り替え、ドロワーの幅、ドロワーの位置、フォントファミリー、フォントの太さ。購入者がソースコードに触れずに、プロパティパネルだけでコンポーネントを丸ごと作り変えられることを狙いました。

テンプレートの構成

テンプレートは、組み込みのデータセット一つから12のアーキテクチャに増やし、複雑さに応じて四つの階層に整理しました。

第1階層の主要テンプレートは、AI Agent Architecture（18ノード）、Multi-Agent Team（12ノード）、RAG Pipeline（10ノード）です。教科書的に単純化した図ではなく実際の本番システムをもとにしており、AIインフラの分野で働く人なら誰でもすぐに見覚えがあるように設計しています。

第2階層から第4階層は、より焦点を絞った用途を扱います。カスタマーサポートのエージェント、営業向けコパイロット、MCPアーキテクチャ、メモリシステム、リサーチのワークフロー、コーディングアシスタント、そして汎用のグラフ構造です。

購入者が自分のアーキテクチャのデータをプロパティパネルに直接貼り付けられるよう、Custom JSONのプロパティを追加しました。MokuGraphには、すべてのテンプレートのJSONをコピーできるInstructionsコンポーネントも同梱し、白紙のキャンバスではなく現実的な出発点を提供しています。

インタラクションデザイン

二つのインタラクションモードが、異なる用途に応えます。

アンビエントモードでは、力学シミュレーションを動かし、ホバーでハイライトしますが、ドロワーは開きません。グラフが情報源ではなく視覚要素として働く、ヒーローセクションや動く背景に向いています。

インタラクティブモードでは、クリックで開く詳細ドロワーが加わり、タイトル、説明、カテゴリータグ、関連ノードを表示します。関連ノードはそれぞれクリックでき、ドロワーはグラフに戻らずにアーキテクチャの中を移動するためのナビゲーションになります。ユーザーの注意を一つのノードとその直接のつながりに絞ることで、複雑なシステムを探索する認知的な負担を減らします。

デスクトップではドロワーがすりガラス調の見た目で横から滑り込み、モバイルではボトムシートになります。レイアウトの切り替えはコンポーネント自身のブレークポイント検出で行われるので、購入者側でレスポンシブの設定を追加する必要はありません。

成果

Marketplaceでの承認

MokuGraphは最初の却下から4週間後の2026年6月2日にFramer Marketplaceへ再提出し、承認されました。

再提出したプロダクトは根本から別物でした。テンプレートは一つから12に、プロパティコントロールは五つから30以上に。D3はCDNからの読み込みではなく同梱に。市場での位置づけは、汎用のグラフツールから、AIアーキテクチャを可視化する専用コンポーネントへ変わりました。

却下から学んだこと

作り直しを通じて分かったのは、Marketplaceの却下は、詳しいフィードバックがなくても生産的な制約になりうるということです。最初の試みが実際の基準に照らして不足と判定されたからこそ、二回目の提出ではすべての判断が鋭くなりました。テンプレートの階層構造、物理演算の調整、カスタムJSONの入力はどれも、最初のバージョンが何を届けられなかったのかを問うことから生まれました。

本番での稼働

MokuGraphはすでにMokujiro Studioのウェブサイトで稼働しています。ホームページのヒーローセクションではインタラクティブモードで使い、スタジオの専門領域と能力をグラフに描き、訪問者はノードとドロワーをクリックして探索できます。一つの実装で、想定した両方の用途を示しています。グラフはランディングページに奥行きを加える視覚要素として働き、同時に、操作を通じて構造化されたコンテンツを引き出すナビゲーションとしても働きます。

今後の展開

MokuGraphは、今後のリリースでMokuPhotoのアーキテクチャ可視化の土台とする予定です。単一用途のツールではなく、テンプレート駆動でJSONから設定できるシステムとして作ったため、中核のコンポーネントを作り直さずに新しい文脈へ適用できます。