オープンデザイン：40,000人の開発者がClaude Designを離れた理由
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00これはOpenDesign。Claude Designのオープンソース代替ツールで、あらゆるエージェントや
00:00:05モデルを使って、ウェブプロトタイプやモバイルアプリ、さらにはスライド
00:00:11デッキをHTMLで作成できます。72種類の本格的なデザインシステムを内蔵し、すべてのプロジェクトがローカル環境で完結するため
00:00:17クラウドにデータは送られません。しかし、Claude Opus 4.7がフロントエンド
00:00:23デザインに非常に優れていることは周知の事実です。では、ユーザーが好きなモデルを選べるようにするのは
00:00:27デザインが苦手なモデルも多いはずですが、登録して確かめてみましょう。
00:00:33AnthropicのClaude Designは先月リリースされ、瞬く間にヒットしました。人々は
00:00:38印象的なモデルを使って非常に美しいデザインを作成できるようになり、
00:00:43lovable vZeroや類似ツールに代わる選択肢を得ました。しかし、これはクラウド専用のプロプライエタリなツールで、
00:00:49単一のモデルに固定され、月額20ドルの利用料がかかります。つまり、誰にでも使えるわけではありません。
00:00:54そこで11日後、TomとNexaチームがオープンソースの代替ツールを公開し、大きな注目を集めました。
00:01:00Claude codeからOpenCodeが登場したのと似ており、今回はClaude
00:01:05DesignからOpenDesignが登場したというわけです。次にAnthropicが作るものは何で、誰がその前に「Open」を付けるのでしょうか。
00:01:09では、このオープンソースツールはどのようにしてClaude Designと同等のデザインを作成できるのでしょうか？
00:01:14それは2つの要素が連携しているからです。1つ目はデザインシステムです。OpenDesignには多くの
00:01:18ブランドスペック、タイポグラフィ、スペーシング、カラートークンが含まれており、Linearや
00:01:24Stripe、Spotifyといったブランドからインスピレーションを得ています。2つ目はスキルです。あらゆる出力形式に対応する膨大なスキルが用意されています。例えばダッシュボード
00:01:30スキルはチャートのレイアウト方法を知っており、デッキスキルはスライドの構成方法を知っています。さらに、AI特有の欠点を防ぐ
00:01:35チェックリストがすべてのプロンプトに組み込まれており、生成前にターゲットオーディエンス、
00:01:41トーン、ブランドコンテンツについて質問されます。私のImpeccableに関する動画を見た方にはおなじみかもしれませんが、
00:01:45違いがあります。その違いについては、この動画の後半で詳しく説明します。まずは
00:01:49簡単なデモを見ていきましょう。始めるには、OpenDesignをmacOSまたはWindowsにダウンロードするか、
00:01:54リポジトリをクローンしてDockerでインストールするか、ソースから実行します。私は今回はソースから実行することにしました。
00:01:59プロジェクトが起動したら、ブラウザで指定のポートにアクセスします。するとこのUIが表示されます。
00:02:04Claude Designに慣れていない人には圧倒的に見えるかもしれませんが、順を追って見ていきましょう。
00:02:08下のボタンをクリックすると、インストール済みのエージェントハーネスが認識されているのがわかります。
00:02:13Claude Code、Codex、OpenCodeですね。Claude Codeをクリックして下にスクロールすると、
00:02:17モデルを選択できます。デフォルトではCLIで選択されているモデルが選ばれますが、ここで別のモデルを
00:02:21指定可能です。Codexも同様ですが、Codexの場合は推論の難易度を調整できるので
00:02:26便利な機能です。ここではOpenCodeを選びます。下にスクロールして、
00:02:31モデルをGLM 5.1に変更します。ここでも、各プロンプトに追加される指示であるメモリーや、
00:02:36メディアプロバイダーを選択できます。デフォルトでは私のOpenAIキーが認識されており、
00:02:41GPT Image 2を使って画像を生成する設定になっています。11 labsのAPIキーを接続すれば、
00:02:46テキスト読み上げやウェブサイトのアニメーション用の効果音を追加できます。次に
00:02:50こちらでは、利用可能なすべてのスキルやデザインシステムを表示できます。
00:02:54後ほど詳しく見ていきましょう。Codexのようにペットを選ぶこともできます。
00:02:58オプションは非常に多いですが、閉じてデザインを開始します。プロジェクトに名前を付け、
00:03:03デザインシステムを選択します。これらのデザインシステムが何か全くわからない場合は、
00:03:08デザインシステムタブをクリックしてすべて確認できます。数は非常に多いです。
00:03:13収録前に確認したところ、Miroのシステムが気に入りました。このような見た目で、
00:03:17デザインのMDファイルに詳細なトークン情報がまとめられています。
00:03:22現在はプロトタイプタブにいますが、データ変更に応じて更新が必要なアイテムのためのライブアーティファクトや、
00:03:27HTMLベースのスライドを生成するスライドデッキ、またはテンプレートから作成する機能もあります。
00:03:33テンプレートタブをクリックして好きなものを選べます。今回は
00:03:38プロトタイプのまま作成をクリックします。プロンプトを入力する画面へ遷移します。
00:03:42少しユニークなことを試してみます。今、自分のYouTubeチャンネル
00:03:47検索アプリを動かしていますが、これをもっと見栄えの良いバージョンに作り変えたいのです。
00:03:52このURLを渡して、GLMがタブや入力項目を読み取って
00:03:57デザインに活用できるか見てみます。YouTubeチャンネル検索用のシンプルでデザイン性の高いサイトを
00:04:02作成してほしいと指示します。エージェントブラウザなどのツールを使って
00:04:07サイトを訪問できるようリンクも教えます。こうすれば入力を確認して全ページを巡回できるはずです。
00:04:12では何が起きるか見てみましょう。視覚的なトーン、
00:04:15ブランドの文脈などについていくつか質問が来ました。これに答えて、
00:04:20デザインプロセスを続けます。これを見てください。curlコマンドを実行して
00:04:24Chromeでサイトを開いています。今、エージェントブラウザを使って接続中です。
00:04:29私は何も操作していませんが、ブラウザ内でサイトを巡回しています。エージェントブラウザの
00:04:34動作コマンドがいくつか見えます。よし、まだ動いています。
00:04:38完了までもう少しですが、方向性は良い感じです。
00:04:43下の高度なフィルター付きの検索ページもいいですね。動画タイトルとチャンネル名で
00:04:48検索を切り替えられます。検索結果は非常に印象的で、実際の
00:04:52ウェブサイトのデータが使われています。どうやったのかはわかりませんが、
00:04:57サムネイル以外は実際のデータです。お気に入りページもあります。
00:05:01誰かをここでお気に入り登録すればリストに保存され、メールを送信したり
00:05:06削除したりできます。隠しページも存在します。例えば、
00:05:11Xキーを押すと、その人がこのページに飛びます。20分ほどかかりましたが、
00:05:17GLM 5.1は最速のモデルではありませんが、ようやく完了しました。結果を
00:05:23見てみましょう。作成された5つのファイルを教えてくれました。すべて一時
00:05:28場所にエクスポートされたようです。ここで別のプロンプトを追加することもできます。例えばダークモードを追加するなど、
00:05:33ですが、デザインパッケージのファイナライズをクリックして、
00:05:37すべてを1つのデザインMDファイルに統合することも可能です。トランスクリプト、デザインシステム、生成された
00:05:42アーティファクトであるこれら5ページがまとめられます。共有ボタンで異なる形式でエクスポートもできます。
00:05:48スタンドアロンのHTMLとして書き出し、Claude Codeに渡して実際のプロジェクトに実装したり、
00:05:53VercelやCloudflare Pagesにデプロイできるのはとても良い機能です。
00:05:57OpenDesignの簡単な紹介でした。使う価値はあるでしょうか？既にコーディング
00:06:02エージェントを導入しており、VanClaudeをサブスクリプション契約しているなら、
00:06:07迷わず試すべきです。デザインシステムとスキルの組み合わせにより、
00:06:12使用するハーネスやモデルに関わらず、かなりまともな成果物が作れます。しかし、Impeccableとはどう違うのでしょうか？
00:06:16個人的には、Impeccableの計画の立て方が好きです。最初にすべてを尋ねて、
00:06:22画像モデルを使って複数のモックアップを提案してくれるので、そこから選んで反復できます。
00:06:27ですから、スタート時点でデザインのイメージが全くなくても、
00:06:32かなり良いものに仕上げられます。対してOpenDesignは、
00:06:37ある程度デザインの知識がないと難しいかもしれません。開始前に使用するデザインシステムを聞かれるのも、
00:06:42ある程度の知識があるユーザーを想定しているからでしょう。しかし、Open DesignのUIは素晴らしいです。
00:06:48レスポンシブ表示、どこへでも書き出せるエクスポート機能、スキル、MCPツール、
00:06:53さらにはペット機能まで、CodexやClaudeデスクトップアプリのユーザーにとっては馴染みやすいUIです。
00:06:58そして、GLM 5.1というデザインには最適とは言えないモデルでも、
00:07:04アプリデザインを非常に上手くこなしました。
00:07:10何かを素早くデザインしたい場合、方向性のアイデアが少しでもあるなら、
00:07:15ぜひOpen Designを試してみてください。もし
00:07:19多少のコストを気にしないなら、Claude Designも非常に良いです。
00:07:22全く同じプロンプトで何ができたか見てください。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video