無料の Claude Design 代替?Open Design AI を実際に試してみた

これは、デザイナーを名乗らないもののウェブサイトの構築・運営を生業とする人物による、台本なしのリアルな Open Design テストです。Dan Davies は Claude Design が登場したときに気に入っていましたが、その後すぐに利用制限の低さという壁にぶつかり——自分の AI サブスクリプションを接続できるオープンソースの代替品を探し始めました。彼のライブウォークスルーで配信全体を視聴するか、以下の文章版をお読みください。

Open Design ワークスペース：欲しいものを説明し、モードを選べば、あとはすでに契約しているコーディングエージェントが作業してくれます。

Open Design とは?

Open Design はオープンソースでローカルファーストなデザインプラットフォームであり、Claude Design や Figma に対するエージェントネイティブな代替品です。特定ベンダーのモデルと固定のクレジットプールに縛り付ける代わりに、あなたがすでに使っているコーディングエージェントの上で動作します。

• オープンソース、Apache-2.0——クローンして、セルフホストして、すべてのコードを読んで、あるいは単にデスクトップアプリをダウンロードするだけでも構いません。
• ローカルファースト——あなたのプロジェクトは、他人のクラウドではなく、自分のマシン上の自分のフォルダに存在します。
• 自分の key だけでなく自分のエージェントを持ち込む——Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode、Hermes などを接続でき、接続した CLI が生成を駆動します。
• プロトタイプ以上のもの——ブランドガイドライン、マーケティング用グラフィック、スライド風レイアウト、そして完全な Web デザインまで、すべて一つのワークスペースから。

Claude Design を使ったことがある人なら、その感触は即座に馴染み深いはずです。Dan が動画で言うように、"これは文字通り Claude Design だ——レイアウトも同じで、動き方も同じ。"違うのは、その下に何が動いているか、そして誰が代金を払うかです。

Open Design が解決する利用制限の問題

Dan のストーリーは多くの人が共感できるものでしょう。彼は Claude Design の登場時に本当に感心していました——出来上がったものが気に入っていました——しかし「利用制限がとても低くて、使い続けるのが持続可能ではなかった」のです。実際のプロジェクトに取り組み、反復を始めると、すぐに上限に達し、勢いがついたまさにそのときにツールが黙り込んでしまいます。

この一つの苛立ちが彼を探索へと向かわせ、それこそがまさに Open Design が埋めるギャップです。Open Design はオープンソースであり、あなたにモデルアクセスを再販することがないため、あなたの作業の上に別個のデザインツール用クレジットメーターが乗ることはありません。自分のエージェントを持ち込み、その利用量はデザインツールが課す上限ではなく、そのエージェントとすでに結んでいるプランに従います。

WordPress の代理店とコミュニティで WordPress を教えている開発者である Dan にとって、これは計算をまるごと変えてしまいます。デザインは従量課金の贅沢品ではなくなり、一日中反復できるものになります。

自分のエージェントを持ち込む、自分の請求書ではなく

これは Dan が何度も立ち返る機能であり、はっきり理解しておく価値があります。Open Design は自前のモデルを提供しません。設定画面で、マシンにすでにインストールされているコーディングエージェント CLI を検出し、それらを切り替えられるようにします。

Dan の環境では二つが見つかりました：コマンドラインの Claude Code と、彼が ChatGPT サブスクリプションで動かしている Hermes agent です。「基本的に何でも接続できる」と彼は述べます——「モデルだけじゃなく、エージェントを。」自分の Claude サブスクリプションを使いたければ使えるし、Codex プランでも、生の API key でも構いません。

彼が引く区別は重要です：従量課金の生の API key はあえて避けているといいます。従量課金のクレジットは、反復的なデザイン作業では実際のお金を急速に消費するからです。すでに支払っているサブスクリプション——Claude Code のプラン、あるいは Hermes 経由の ChatGPT——に Open Design を接続すれば、二つ目の請求を積み上げずに済みます。何よりもこの点が、彼が独自の制限を持つホスト型デザインツールよりもこちらを好む理由です。

テンプレートとスキルのライブラリ——Figma からの移行や React・Next.js へのエクスポートといった機能も含まれており、白紙のキャンバスから始めずに済みます。

彼はまた、拡張の余地も早々に見つけます：実際のコミュニティ動画にリンクするチュートリアルセクション、ホバーでアニメーションする既製テンプレートで満ちたプラグインエリア、そしてFigma migration、export to React、export to Next.js といったスキルです。彼はまだ全機能を探索し切れていないと明言していますが——これは初めての実践ですから——構造は明らかにすでに存在しています。

テスト1:大まかなアイデアからブランドガイドラインを作る

Dan の最初の本格的なタスクは、通常はプロのデザイナーの時間が必要となる類のものです：自分の WP Odyssey スクールコミュニティのためのブランドガイドライン文書。ロゴ、アイコン、フォント、色についての明確なドキュメントを持っていなかったため、Open Design に作成を依頼しました。

結果は彼を感心させました。それはブランドを、きちんとしたガイドラインシートとして捉えていました——ロゴの使い方、彼が生徒を導く学びの旅を象徴するトライデントの「アイデンティティマーク」、余白のルール、誤用例、パープルの階調からほぼ黒に近い「インク」色までの範囲、そして彼が望んでいたフォント。それは彼が既存のフラットなパープルよりも気に入った、パープルのグラデーションまで導入し、コースを通した旅のための「パス」モチーフをレイアウトしました。

彼の語り口から際立つ点が二つあります。まず、Open Design は構造化されたアウトプットを生み出しました——雑然としたアセットの山ではなく、一貫した考え方を持つ提示可能な文書です。次に、彼はそれを生きた成果物として扱いました:「これを改善するために引き続き作業を続けます。」それこそが意図された流れです——本物のブランドから強力な最初のバージョンを生成し、それから磨きをかける。

すべてが完璧だったわけではありません。もっと簡素な、ほぼブリーフなしでクライアントの資産運用サイトを「改善」させようとした早い段階のテストは、彼自身の言葉を借りれば、ありきたりな「AI スロップ」のように見える結果になりました。彼自身の見立ては公正で有用です:「問題は常にツール側にあるわけじゃない」と彼は言います。「プロンプトの出し方の問題なんだ。」

テスト2:クエストタイルのデザイン

目玉は本当に細かいデザイン課題です。Dan のコミュニティには 1 行に 3 枚ずつ並ぶ 14 枚の「クエスト」タイルがあり、standard、premium、VIP のティアに分かれています。彼は、ティアが上がるにつれてパープルが濃くなること、破線の「ジャーニー」ラインが各行を貫いてタイル間で揃うこと、そして各タイルが少し個性を保つことを望んでいました。

前日に彼は ChatGPT（Hermes agent 経由）でこれを試し、うまくいきませんでした——色が違う、線が壊れる、タイルがどれも似たり寄ったりで、あるときはブランド仕様から完全に逸脱し、指摘されて初めてそれを認めました。そこで配信では彼はクリーンなプロジェクトを新規に立ち上げ、エージェントをClaude Codeに切り替え、しっかりとした入力を与えました:エクスポートしたブランドガイドライン PDF、現在のクラスルームのスクリーンショット、そしてページ全体ではなくタイルだけを再デザインさせるためのサンプルタイル一枚です。

今回、エージェントは的確なディスカバリー質問を投げてきました——最終的なアセットサイズ、アスペクト比、パープルをどう濃くするか（ティアごとに段階的なグラデーション）、1 行に何枚か——そして強力な最初のパスを生成しました。Dan の評価は率直でした:「昨日 ChatGPT がやったものより百万倍良い。」タイルは正しい色を使っており、決定的なのは、ジャーニーラインがタイル間で自動的に揃ったことです——彼は手作業で直す覚悟をしていた部分でした。

Open Design は生成された作業を、雑然としたファイルの束としてではなく、本物の構造化された成果物として提示する傾向があります——ここではプレビューにフルレンダリングされたデザインが表示されています。

完璧ではありませんでした——standard ティアのパープルは彼が望んだより濃く仕上がり、バリエーションが欲しいところでロゴが繰り返し使われていました——しかしそれらはまさに次のプロンプトでフィードバックすべき点です。彼はまた、正直なコストのデータポイントも一つ挙げました:そのタイルのバッチを生成するのに、20 ドルの Claude プランの利用量の約 50% を使ったというものです。デザインの反復はモデルコストがゼロというわけではありません。ただ、二つ目のデザインツールの請求がないだけです。

接続するモデルが重要な理由

Dan のセッションから得られる最も明確な結論は、アウトプットの質は接続するエージェントに連動するということです。同一のタスクが、同じツールの中で、あるエージェントでは混乱した仕上がりになり、より強力なエージェントではクリーンな初稿になりました。Open Design はワークスペースと構造を提供し、モデルはエンジンです。

彼はまた、普通の画像生成ツールとの良い比較も示します:似たようなタスクを一般的な画像生成ツールで試したところ「苦戦していた」のに対し、Open Design は「与えてくれるものにもう少し構造がある感じがする」と。グラフィックを求めると、それを表示・ダウンロードするための小さな Web ページを構築しました——生の出力だけでなく、提示可能な成果物として。

ここからの彼の計画は、このツールが実際のワークフローのどこに収まるかを物語っています:タイルを引き続き改良し、次にウェブサイトのホームページの構築に進み、結果を右上隅から VS Code に引き渡し、最終的には編集可能な WordPress テンプレートを生成して、クライアントが本物の CMS の恩恵を引き続き受けられるようにする。それが、フルタイムのデザイナーを抱えない技術チームにとって、オープンでエージェントを差し替え可能なデザインツールが到達可能にする実践的な道筋です——マーケティング素材から出荷可能なサイトまで。

FAQ

Open Design は本当に無料ですか? このソフトウェアは Apache-2.0 ライセンスのもとでオープンソースであり、ローカルで無料で実行できます。Open Design 自体には一切支払う必要はありません。あなたが接続するコーディングエージェントの利用分のみを支払います——そして、すでに持っているサブスクリプション(Claude Code のプランなど)を接続すれば、追加のデザインツール請求は発生しません。

Claude Design とはどう違いますか? 同じ馴染み深い感触ながら、オープンソースでローカルファースト、エージェントを差し替え可能です。固定の低いクレジットプールを持つ単一のホスト型モデルの代わりに、自分のエージェントを持ち込み、利用量は既存のプランに従います。Dan のセッションが示すように、これにより Claude Design を重い反復作業では維持しづらくしていた利用制限の壁が取り除かれます。

API key を使わなければなりませんか? いいえ——それが Dan が最も強調する点です。Open Design はマシン上のエージェント CLI を検出し、従量課金の API クレジットではなくサブスクリプションを使えるようにします。彼は前者が反復作業では急速にお金を消費することに気づきました。

どのエージェントを接続すべきですか? 自分のタスクに最良の結果をもたらすものを——アウトプットの質はモデルに連動します。動画では、同じタイルデザインの仕事が、あるエージェントでは混乱した結果になり、Claude Code に切り替えた後にはクリーンな初稿になりました。結果が重要な場面では、能力の高いエージェントを選びましょう。

非デザイナーでも実際に良い結果を得られますか? はい、適切な入力さえあれば。Dan はデザイナーではなく開発者ですが、使えるブランドガイドラインとクラスルームタイルを手に入れました——ただし彼自身が学んだ教訓は、薄いプロンプトは「AI スロップ」を生むということです。本物のブランド仕様、参考画像、明確な制約を与え、それから反復してください。

---

この文章ガイドは、Dan Davies による Open Design の実践的なライブテストをもとにしています。上の動画をご覧になり、WordPress や AI ツールに関するさらなる実践的な配信のためにDan Davies を購読してください。