エージェンシー向け Open Design — 商用でも安全、コスト管理可能、クライアントへすぐ納品
エージェンシー／フリーランス向けの Open Design 実践ガイド。Apache-2.0 ライセンスがなぜクライアント案件でも安全なのか、モデルを切り替えて支出を管理する方法（強力なモデルで構造を作り、OpenRouter 経由で安価または無料のモデルで反復する）、そしてクライアント向けダッシュボードを素早く納品する方法を解説します。Dylan Michael のウォークスルーに基づいています。
クライアント向けに制作していると、クローズドな設計ツールの週ごとの上限と単一モデルでは、規模を持って作業するのが難しくなります。本ガイドはエージェンシー／フリーランスのための Open Design 実践プレイブックです。なぜ商用でも安全なのか、どうやってモデルを切り替えて支出を管理するのか、そしてクライアントの仕事をどう素早く納品するのかを扱います。Dylan Michael が彼の動画で示すウォークスルーに沿っており、現在のリリースに合わせて書き直し・更新しています。上の動画を見るか、以下のテキスト版を読み進めてください。
Open Design のワークスペース：作りたいものを記述し、モードを選べば、あとはエージェントがやってくれます。
なぜクライアント案件に向いているのか
Open Design はオープンソースでローカルファーストの設計プラットフォームで、あなたがすでに使っているコーディングエージェントの上で動作します。そしてエージェンシーにとっては、次の 3 つの特性が最も重要です。
- Apache-2.0 = 商用でも安全。 クライアントのプロジェクトで使い、作ったものを販売でき、許可を求めたりロイヤリティを払ったりする必要はありません — 制限の強いライセンスの一部のクローンとは違います。
- ローカルファースト = すべてがあなたのもの。 プロジェクトは自分のマシンに存在するので、クライアントの仕事が誰か他人のクラウドに置かれることはありません。
- どんなモデルでも = 支出を管理。 Claude、ChatGPT、Gemini、DeepSeek、あるいは無料モデル — すべてのタスクでプレミアムモデルのクレジットを燃やすよう強制されることはありません。
Dylan の率直な言い方はこうです。クローズドなツールは月に 20〜200 ドルもかかるうえ、それでも週に数点のデザインしか作れないよう制限してくることがあり、クライアントに対応しているときにはとても使い物になりません。Open Design は上限とロックインを取り払います。
ステップ 1 — インストールしてエンジンを選ぶ
エディタのエージェントにクローンとセットアップをやらせる（リポジトリの URL を貼り付けて Claude Code / Codex に実行させる）か、open-design.ai/download からデスクトップアプリを入手してください。初回起動時には、ローカルにすでにインストールされているすべてのモデル（Codex、Gemini、GitHub Copilot CLI、……）が表示されます — 追加したばかりなら rescan をクリックするか、自分のキーを持ち込みます。CLI とモデルを選んで保存してください。
ステップ 2 — クライアント向け成果物を作る
プロジェクトを作成し（Dylan はプレミアムな売上分析ダッシュボードを作ります）、high fidelity（高忠実度）を選び、プロンプトを入力します。Open Design は明確化のための質問（どの画面か、どの面か、アクセントカラー、ヒートマップ／リーダーボードが何を示すか）をし、進行に合わせて各タスクのコストを表示します — クライアント案件の予算を立てるときに便利です。配色を選ぶと、洗練されたワンショットの結果を作り上げ、あとは平易な言葉で調整していきます（「プレミアムなリフレッシュアニメーションを追加、glassmorphism に切り替え、余白を詰めて」）。
プレビューにレンダリングされた実際の生成プロトタイプ — ダークでシネマティックなエージェンシーのランディングページ。
ステップ 3 — コスト対策の一手：プロジェクトの途中でモデルを切り替える
これがエージェンシーの経済学です。Dylan のルールはこうです。強力なモデルで構造を作り（デザインの解釈が最も得意）、それから細部と修正には安価なモデルに切り替える — 左下の CLI を Claude Code から Codex/Gemini に変えて保存します。本当に低コストにしたいなら、OpenRouter を指定して低価格または無料のモデルを使います（反復用途なら、DeepSeek クラスのモデルは品質の約 90〜95% を保ちつつ、価格はほんのわずかです）。1 ドルをどこに使うかを自分で決められ、1 つのプレミアムモデルにクレジットを好き放題使わせずに済みます。
メディアプロバイダーのキー（例えば OpenAI）を追加して、生成した画像を成果物にそのまま落とし込み、そのうえでVercel にデプロイしてワンクリックでクライアントレビューに回すこともできます。
HyperFrames ギャラリー：コード駆動のモーションと映像作品で、fork してリミックスできます。
ヒント
- Apache-2.0 ライセンスを活かす — 許可もロイヤリティもなしでクライアントの仕事を納品できます。
- 強力なモデルで作り、安価なモデルで反復する — 最大のコストレバーです。
- UI に表示されるタスクごとのコストに注目して、クライアント案件の予算を立てましょう。
- 面倒な修正には OpenRouter で低価格／無料モデルを使う。
- Vercel にデプロイして、素早いクライアントレビュー用リンクを用意しましょう。
FAQ
Open Design を有償のクライアント案件に使えますか？ はい — Apache-2.0 なので、商用利用・販売・セルフホストがロイヤリティや許可なしで安全に行えます。
プロジェクト全体でコストを抑えるには？ 強力なモデルで構造を作り、反復には安価なモデル（または OpenRouter 経由の無料モデル）に切り替えます。UI は各タスクのコストまで表示してくれます。
クローズドなツールのような週ごとの上限はありますか？ いいえ — 生成は接続したエージェント／キー上で動くので、固定の週上限にぶつかるのではなく、自分で支出を管理します。
無料でオープンソースですか？ はい — Apache-2.0 です。ローカルでは無料で動かせます。支払うのは、接続したモデル／メディアの利用分だけです。
この文章版ガイドは Dylan Michael のウォークスルーに基づいています。上のフル動画を視聴し、さらなる AI 自動化ワークフローのためにDylan Michael | AI Automation を購読してください。