CASE STUDY 01
デザイナーのための、
AIデザインツール。
Claude Codeという強力なAIエンジンの上に、
デザイナーが本当に必要とする機能を設計した。
API切替、Skill、コスト透明性——既存ツールにない柔軟性を。
01 — 課題の発見
AIツールへのアクセス格差を縮小する——それもまた、インクルーシブデザインの一形態だ。
AIは民主化された。
でもUIは
まだエンジニアのものだった。
2025年末、Claude Codeという強力なAIコーディングツールが登場した。私はUI/UXデザイナーとして「これを使えば、デザイナーでも実装できるかもしれない」と感じた。
しかし現実は違った。ターミナル、コマンド、エラーログ——すべてがデザイナーの言語ではなかった。
Claude Code のターミナル画面 vs Lumos
02 — 競合分析
既存ツールでは解決できない、6つの課題。
Stitch、v0、Bolt、Lovableなど、AIによるUI生成ツールは急速に進化している。しかし、デザイナーが実務で使いこなすには、いくつかの根本的な制約が残されている。
API自由切替
既存ツールは自社モデルに固定されている。LumosはAPI変換プロトコルを内蔵し、Claude Codeが認識可能なすべてのAIサービスに対応する。DeepSeek・Claude・GPT・Qwen・Gemini・GLMをはじめ、今後登場するサービスも追加設定のみで利用可能。
データのローカル保存
既存ツールはクラウドSaaSであり、プロジェクトデータはサービス提供者のサーバーに保存される。Lumosはプロジェクトデータをユーザー指定のローカルフォルダに、アプリ設定をLumosのローカルディレクトリに保存し、完全なデータ所有権を保証する。
Skillシステム
ユーザーが生成ルールやデザイン規範をカスタム定義し、AIに自分の基準で出力させることができる。既存ツールにはこのようなカスタマイズ性はない。
コスト透明性
生成ごとのトークン消費量と費用（CNY/USD）をリアルタイムで表示。既存ツールは月額サブスクリプション制で、1回の操作にいくらかかっているか不透明。
オープンな生成パイプライン
既存ツールはブラックボックスであり、生成過程に介入できない。LumosはClaude Codeサブプロセスを通じて実行され、リアルタイムログで各ステップを確認でき、生成過程が透明かつ制御可能。
モデルルーティング
既存ツールは1つのモデルで全タスクを処理する。Lumosはチャット・コード生成・画像認識の3つのタスクタイプごとに最適なモデルを個別に割り当てられる。たとえば、チャットにはDeepSeek、コード生成にはClaude、画像認識にはGeminiといった構成が可能。
03 — ユーザー定義
私自身が、ターゲットユーザーだった。
プログラミング経験のないUI/UXデザイナー。アイデアはあるが、コードにできない。エンジニアへの依頼は時間がかかる。AIツールは存在するが、使うためにまたAIの知識が必要になる——この矛盾に気づいたとき、自分が解決すべき相手だとわかった。
PAIN POINT 01
アイデアがあっても、コードにできない
PAIN POINT 02
エンジニアへの依頼は時間と調整コストがかかる
PAIN POINT 03
AIツールを使うために、またAIの知識が必要になる
04 — 設計の意思決定
なぜそう作ったか。
DECISION 01 — キャンバス設計
タブではなく、無限キャンバス。
複数の画面を管理する方法として、タブ切り替えは一般的だ。しかしデザイナーは「空間的に考える」習慣がある。Figmaがそうであるように、画面を並べて俯瞰できる環境が、デザイン判断の質を上げる。
→ タブは文脈を殺す。キャンバスは文脈を生かす。
DECISION 02 — エラー処理
エラーログを見せない。
AIの生成が失敗したとき、エラーメッセージをそのまま表示する選択肢があった。しかしターゲットユーザーはエラーログを読めない。読めないものを見せることはUXの失敗だ。
→ 見せるべきは「次にできること」だけ。
DECISION 03 — Skill システム
指示を分離する。
プロンプトが長すぎるとAIの品質が下がることがわかった。Figmaのスタイルガイドと同じ発想で、デザインルールを「Skill」として本体から分離し、必要に応じて有効化できる設計にした。
→ シンプルな指示が、良いアウトプットを生む。
05 — システムアーキテクチャ
6層のレイヤーが、ひとつのツールになる。
システム全体構成図 — 入力からデータ保存まで、6層のレイヤー構造
06 — インターフェース詳細
設計思想を、すべてのディテールに。
画像認識 — ドラッグ＆ドロップで画像を入力し、マルチモーダル分析を実行
Skillシステム — ユーザー定義の生成ルールでAI出力を制御
コスト追跡 — トークン消費量と費用をCNY/USDでリアルタイム表示
モデルルーティング — チャット・コード・画像の3タスクに最適モデルを割り当て
マインドマップパネル — 生成内容を自動的に構造化して可視化
デザイン変数 — 生成UIからカラー・フォント・スペーシングを自動抽出
ステータスバー＋ログパネル — 生成過程の各ステップをリアルタイムで可視化
07 — 成果
プロンプトを入力する。
待つ。
デザインが生まれる。
それだけでいい。
08 — 振り返りと限界
まだ解決できていないこと。
生成時間は2〜3分かかる。待機中のユーザー体験は改善の余地がある。
Figmaへのエクスポートは完全ではない。グラデーションと固定要素に課題が残る。
私自身がターゲットユーザーであることは強みでもあり、バイアスでもある。複数のデザイナーによる検証が次のステップだ。
09 — プロジェクト詳細
FEATURES
∙ 無限キャンバス + マルチフレーム
∙ リアルタイムプレビュー
∙ マインドマップ / アウトライン / チャート
∙ モデル自由切替（DeepSeek / Claude / Qwen）
∙ Skill システム（デザインルール分離）
∙ インタラクティブモード
∙ PNG / PDF / コードエクスポート
∙ Figma エクスポート
∙ トークン消費トラッキング
∙ 5言語対応（i18n）
BUILT WITH
∙ Electron
∙ React + TypeScript
∙ Tailwind CSS v3
∙ Vite
∙ Claude Code
∙ Claude API / DeepSeek API
∙ ECharts
∙ Mind Elixir
∙ Figma（UI設計）
TIMELINE
WEEK 01
基盤構築。Canvas、フレーム管理、Claude Code 接続。
WEEK 02
モデルルーティング、エクスポート、右側パネル。
WEEK 03
生成品質改善、Skill システム、i18n 対応。
NEXT STEP