また新たなオープンソース・リポジトリがClaudeのデザインをクローン
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00皆さん、GitHubに2つ目のClaude Designクローンが登場しました。そうです、また新たな
00:00:06Claude Designクローンですが、今回は実際のグラフィカル・インターフェースを備えています。
00:00:13今週初めに、市場で最初のClaude Designクローンと言える「Huashu Design」の動画を公開しました。
00:00:20あれは非常に優秀でした。標準的なClaude Designの形式とほぼ互角に渡り合いながら、
00:00:24利用制限の問題も発生しませんでした。しかし、Huashu Designの問題点の一つは、
00:00:30ターミナル内でしか動作しなかったことです。今見ているようなグラフィカル・インターフェースはありませんでした。
00:00:36この新しいオープンなデザインツールは、ほぼClaude Designを模倣しています。この2つの
00:00:43ツールを見てください。こちらが今日お話しする「Open Design」で、
00:00:48こちらが本家のClaude Designです。非常に似ています。Open Designの素晴らしい点は、
00:00:54Huashu Designをベースに構築されていることです。前回の動画でも見た通り、Huashu Designは
00:00:59非常に優れています。このリポジトリから素晴らしいコンテンツやフロントエンド・デザインが得られました。
00:01:06現在は、その上に洗練されたグラフィック層を重ねることで、多くのユーザーにとって
00:01:11格段に使いやすくなり、本家Claude Designのような磨き抜かれた操作感を実現しています。
00:01:16さらに良いことに、Open Designはあらゆるコーディングツールで使用可能です。Claude Codeに
00:01:22限定されず、GeminiやCodexも使えます。繰り返しになりますが、Claude Designで直面する
00:01:28利用制限の問題もありません。今日はOpen Designを一通り動かし、使い方やインストール方法、
00:01:34注目すべき点を紹介します。少し無駄な部分もあると思うので、本家Claude Designとの
00:01:39比較も行います。先に結論を言うと、かなり良いです。しっかりしたツールだと思います。
00:01:43Claude Designの派生ツールが次々と登場して嬉しいです。私は本家が大好きですが、
00:01:49利用制限がひどすぎますから。このようなツールが増えれば増えるほど、Anthropicも
00:01:53重い腰を上げて、この利用制限の混乱を解決してくれるでしょう。Open Designは
00:02:00Claude Designのオープンソース代替案です。Claude CodeやCodexに接続することも、
00:02:05他のハーネスやAPIを使いたい場合は、自前のAPIキーを持ち込むこともできます。
00:02:12PC内のコーディング・エージェントを自動検出し、31のスキルと72のハイレベルな
00:02:16デザインシステムが既に組み込まれています。Huashu Designをベースにしていると言ったのは
00:02:24冗談ではありません。開発者自身がそう明言しています。Huashu Design、Guzhengの
00:02:28PowerPointスキル、Open Code Design、そしてMulticaを組み合わせたようなものです。
00:02:34これらを統合した、Huashu DesignのUI版と言えるでしょう。リポジトリの残りの部分には、
00:02:40内部の仕組みや事例、デモが詳しく書かれています。知っておくべきは、これがオープンソース版
00:02:45Claude Design、あるいはそれに最も近いものであるということです。インストールに入る前に、
00:02:49今日のスポンサー、つまり私から一言お伝えさせてください。
00:02:53「Claude Codeマスタークラス」をリリースしました。未経験からAI開発者になるための
00:02:58最高の方法です。毎週更新しており、実社会でのユースケースや、
00:03:04ビジネスや事業を実際に前進させるためのツールの活用法に重点を置いています。
00:03:09「Chase AI Plus」の中で受講できます。固定コメントのリンクからぜひチェックしてください。
00:03:14インストール方法は2つあります。リポジトリに行き、ターミナルを開いてコマンドを貼り付ける方法。
00:03:18もう一つは、このリンクをコピーして（詳細は概要欄にあります）、Claude Codeや
00:03:23Codexなどに貼り付け、「新しいディレクトリにインストールして」と頼む方法です。これで
00:03:28すぐに動き出します。インストールして実行すると、ローカル開発サーバーへのリンクが
00:03:32表示されるはずです。もし出なければ、Claude Codeに「Open Designのサーバーを立てて」と
00:03:36伝えてください。そうすると、このようなページが表示され、おそらくポップアップで
00:03:42「ローカルCLI、Anthropic API、どちらのAIシステムを使いますか？」と聞かれます。
00:03:46ここでは「ローカルCLI」を選択してください。これはClaude CodeやCodex、特にOpen Codeから
00:03:51機能を呼び出すことを意味します。そうすればAPI料金を支払う必要がなく、すべて自分の
00:03:56マシン上のアカウントから処理されます。モデルはデフォルトのCLI設定で構いません。また、
00:04:01メディアプロバイダーを追加する機能もあります。後でお見せしますが、プロトタイプや
00:04:06スライド、テンプレートだけでなく、画像や動画も扱えます。このUIから生成できるのです。
00:04:13ただし、動画や画像を生成するには、それに対応したモデルのAPIキーを追加する必要があります。
00:04:18MiniMaxやOpenAI、ElevenLabsなどを追加でき、非常に便利です。これは本家の
00:04:24Claude Designにはない機能です。画面上部にはデザイン、例、デザインシステム、
00:04:30画像テンプレート、動画テンプレートがあります。デザインシステム内のテンプレートとは何でしょう？
00:04:36「awesomedesigns.md」を見たことがある人なら分かるでしょう。例えば、
00:04:40Airbnbのようなサイトを解析し、パレット、タイポグラフィ、コンポーネント、
00:04:46視覚的テーマ、雰囲気を分解したものです。Airbnbに近いスタイルのサイトを
00:04:52作りたい場合、このプロンプトを組み込めば、それに近いものが出来上がります。
00:04:58結果には個人差があるでしょう。デザインシステムのセクションは見た目は良いですが、
00:05:06実際にどれほど効果的かは分かりません。画像テンプレートも同様で、サンプル画像と
00:05:13JSONプロンプトが表示されます。私はこれらを無駄な機能だと考えています。動画テンプレートも
00:05:18同様です。見た目は面白いですが、あまり価値はありません。ここにある事例も
00:05:23一見良さそうですが、これらは単純な一行のプロンプトから生成されたものだと理解してください。
00:05:29裏で複雑な処理がされているわけではありません。プロンプトは文字通りここにあります。
00:05:35「このプロンプトを使う」を押すと、一行のプロンプトが入力されます。「Xユーザーのための
00:05:42出会い系サイト。統計やマッチング、コミュニティ掲示板を備えたダッシュボード」といった具合です。
00:05:47掲載されている事例に驚きすぎないでください。たった一行のプロンプトの結果であり、
00:05:53特別なことは何も起きていません。では、本当に注目すべき点に集中しましょう。
00:06:00それはプロトタイプやスライド、つまり本家Claude Designで作成するような標準的な
00:06:07成果物を作成することです。使い方はほぼ同じです。デモに名前を付け、
00:06:12デザインシステムを選択します。1つでも複数でも選べますし、既存のリストもあります。
00:06:16ワイヤーフレームかハイファイ（高精細）かを選び、Claude DesignのZIPファイルを
00:06:22インポートすることも可能です。例えば本家で作成したデザインシステムを、
00:06:28ZIP形式にしてここに取り込むことができます。そして「作成」を押します。
00:06:32まず、この例をお見せしましょう。Huashu Designの動画でデモしたものと同じものを依頼しました。
00:06:37「Lighthouse」という架空のSaaS製品のランディングページです。少人数のチームや
00:06:44個人創業者向けで、比較できる3つのパターンを作ってほしいと頼みました。
00:06:51クラシックな積み上げ型、エディトリアルなもの、そして少し派手で主張の強いもの。
00:06:57これらを本家Claude Designの結果と直接比較すると、多くの共通点が見て取れます。
00:07:03フォントや色使い、特に背景などは、エディトリアル風に仕上げたこともあり
00:07:11非常に似ています。左側のOpen Designの画面を見ると、本家と同じような
00:07:17Q&A形式のヒアリングが行われているのが分かります。質問を投げかけられ、
00:07:21選択ボタンが表示される。ほぼ全く同じ製品と言っていいでしょう。特筆すべき相違点として、
00:07:26Open Designは少し動作が遅かったです。本家が半分の時間で済んだのに対し、
00:07:32これには約10分かかりました。また、編集や描画といった機能が見えますが、
00:07:37これらはロードマップにはあるものの、まだ実装されていません。細かい調整をしたい場合は、
00:07:43Open Designに対して「自分で素早く変更できる調整パネルを作って」と
00:07:49直接指示する必要があります。Huashuでのやり方と非常に似ていますね。
00:07:56Open Designは少し遅く、利便性で劣る点はありますが、それ以外は本家に
00:08:01極めて近いです。次に、自前のデザインシステムを使いたい場合について。これは
00:08:06工夫が必要です。例えば、私の「Agentic Dashboard OS」のデザインシステムを使って
00:08:13スライドを作成したいとします。参考までに、これが私が目指している視覚的な美学です。
00:08:18これをOpen Designで再現するにはどうすればいいでしょうか？ウェブサイトやアセット、
00:08:24タイポグラフィなどを持ち込みたい場合、現状ではデザインシステム画面から
00:08:30直接作成するボタンはありません。代わりに、本家のZIPファイルをインポートします。
00:08:35本家で既にデザインシステムを作成済みであれば、共有メニューから「プロジェクトを
00:08:40ZIPでダウンロード」を選択します。そしてOpen Design内でそのZIPを選択して
00:08:46アップロードすれば、関連ファイルが読み込まれます。もし本家でデザインシステムを
00:08:51作っていないのであれば、そうすることをお勧めします。それが一番簡単です。あるいは、
00:08:56CodexやClaude Code内で自分で構成を再現することもできますが、少し面倒です。
00:09:01これがOpen Designの弱点の一つです。この点ではHuashu Designの方が使いやすいかもしれません。
00:09:08グラフィカル・インターフェースではなく、ターミナルで作業していれば、Claude Codeに
00:09:14「このディレクトリの中身を参考にして、同じスタイルでスライドを作って」と
00:09:20指示するだけで済みます。UIを使うことの弊害ですね。さて、プロンプトで架空のSaaS
00:09:25「Lighthouse」のスライド作成を依頼し、必要な質問をしてもらうよう伝えました。
00:09:32少し拡大して見てみましょう。質問内容はこうです。「対象は？」製品発表用だとします。
00:09:39「聞き手は？」製品担当者。「スライド枚数は？」短めに。「精度は？」ハイファイで。
00:09:45「スピーカーノートは？」不要。「トーンは？」ブリュータリズムで。「デザインシステムは？」
00:09:51Agentic OSのものを使い、ストーリー構成はAIに任せます。回答を送信すると、
00:09:55通常のClaude Codeのようにタスクリストが作成され、順次処理が始まります。
00:10:00完成した1枚目のスライドは、指定したデザインシステムのブランドに沿っており、
00:10:04かなり良い出来です。しかしお気づきの通り、スライドを切り替える機能がないか、
00:10:08あるいはすべて同じ内容になっています。そこで「1枚目しか見えない、切り替えができない」と
00:10:14伝えて修正させました。最終的に出来上がったスライドデッキを、書き出しプロセスを確認するために
00:10:20PowerPoint形式で出力してみました。ツール内では良く見えても、PowerPointに
00:10:25移すと表示が崩れることがよくあるからです。1枚目は良好、2枚目もいいですが、
00:10:29数字の部分は少し修正が必要かもしれません。3枚目は間隔の調整が必要ですね。
00:10:344枚目は良く、5枚目も良好。6枚目は少し上にずらした方がいいでしょう。7枚目は
00:10:44枠内に収めるためのフォーマット修正が必要です。とはいえ、9割方は完成しており、
00:10:515分ほど手直しすれば済むレベルです。指定したデザインシステムも再現されています。
00:11:00作成過程で見た通り、洗練された本家に比べると、まだ粗削りな部分はあります。
00:11:04今週出たばかりのツールですから、当然と言えば当然です。今後改善されていくことを
00:11:08期待しましょう。しかし、最初のバージョンとしては、Open Designは非常に
00:11:13堅実なツールです。本家Claude DesignのようなUIを使いたいけれど、利用制限に
00:11:20苦しんでいる人には最適です。UIが不要で、仕組みだけが気に入っているなら、
00:11:25Huashu Designの方が高速で柔軟なので、そちらが良いかもしれません。ですが、
00:11:29どうしてもこのインターフェースが必要だという人には、素晴らしい代替案になります。
00:11:34私は本家が大好きですが、今の利用制限はあまりに不条理です。以前も言ったように、
00:11:39明日には同様のツールが1000万個くらい登場して、Anthropicがこの問題を
00:11:43解決せざるを得なくなる状況を願っています。今日はここまでにします。非常に
00:11:52面白いツールなので、ぜひ試してみてください。設定は簡単で、様々なエージェントと
00:11:58連携可能です。感想をコメントで教えてください。マスタークラスに興味がある方は
00:12:04Chase AI Plusをチェックしてください。では、また次回。
00:12:13ここもボックス内に収めるためのフォーマットの問題が少しありますが、
00:12:18これは90%完成したソリューションと言えます。手直しに5分もかかりませんし、
00:12:24目指したデザインシステムとも一致しています。ただ、このスライドデッキが示すように、
00:12:29本家Claude Designのような洗練されたプロジェクトに比べると、まだ粗削りな部分があります。
00:12:33それはある意味、当然のことです。Open Designは文字通り今週リリースされたばかりですから。
00:12:37今後、彼らが開発を継続し、細部を調整していくことを期待しましょう。しかし全体として、
00:12:42最初のバージョンとしては、Open Designは非常に堅実なツールだと思います。
00:12:48Claude Designを使いたいけれど、グラフィカルなインターフェースが必要で、かつ
00:12:54本家の利用制限に打ちのめされている人には最適です。もしUIが不要で、
00:13:00Claude Designの仕組み自体が気に入っているなら、Huashu Designの方が動作が速く、
00:13:05ターミナルで完結するため、より柔軟に使えるかもしれません。ですが、
00:13:10「どうしてもこのインターフェースが必要だ」という方にとっては、Claude Designの
00:13:15強力な代替案になります。私は本家が大好きですが、今の利用制限はあまりに不条理です。
00:13:21先ほども言ったように、明日にはこのようなツールが1000万個くらい登場してほしいです。
00:13:26そうすればAnthropicも刺激を受けて、この利用制限の問題を解決してくれるでしょう。本当にひどいですから。
00:13:31お話ししたいことは以上です。非常にクールなツールなので、ぜひ自身でチェックしてみてください。
00:13:34セットアップも簡単で、連携できるコーディング・エージェントも非常に柔軟です。皆さんの
00:13:40感想をコメント欄で教えてください。マスタークラスに興味がある方は、
00:13:43ぜひChase AI Plusをチェックしてください。では、また次回お会いしましょう。