Transcript
00:00:00Claude Designは、私がこれまで使った中で最高のツールでしょう。
00:00:02実際には、まったく使い物になりません。
00:00:05Anthropicに「20xプラン」で月額200ドルも払っているのに。
00:00:10Claude Designの週間の利用制限を1時間以内に使い切ってしまうんです。
00:00:14これにはもううんざりですが、幸いなことに、
00:00:17素晴らしい新しいオープンソースのリポジトリが公開されたので、
00:00:22希望が見えてきました。
00:00:23それは実質的にClaude Designをクローンし、スキルとして使えるようにするものです。
00:00:28Huashu Designという名前で、Claude Designが使っている
00:00:32システムプロンプトと全く同じシステムを基盤としています。
00:00:33今日は、このツールが実際に時間を割く価値があるのかどうか、
00:00:37Claude Designと真っ向勝負させて検証します。
00:00:41もし価値があるなら、Claude Designの利用制限という牢獄から抜け出せるかもしれません。
00:00:45Huashu Designは、Claude Designが素晴らしいツールでありながら、
00:00:50利用制限のせいで1時間も使えないという問題を
00:00:54解決してくれます。
00:00:55彼らはClaude Designのシステムプロンプトとデザイン哲学をすべて取り出し、
00:00:58オープンソースのGitHubリポジトリに変えました。
00:01:02これは実質的に、Claude CodeやCodex、あるいは
00:01:07Claude Designのように、どんなコーディングエージェントにも読み込める一つのスキルです。
00:01:10ウェブアプリやモバイルアプリのインタラクティブなプロトタイプを作成できます。
00:01:13スライドデッキ、モーションデザイン、インフォグラフィックなども作成可能です。
00:01:17単一のスキルでこれらすべてを実現できるのは、その内部で
00:01:21多くの処理が動いているからです。例えば、
00:01:24スライドデッキや様々なデザインスタイル、アニメーションのベストプラクティスを解説する
00:01:2820もの詳細なMarkdownファイルにアクセスできます。
00:01:31表面上は一つのスキルですが、
00:01:33実質的には20個のミニスキルを扱えるようなものです。
00:01:35また、設計時に利用できる多数のコンポーネントやメディア、
00:01:40アセットにもアクセス可能です。
00:01:42さらに、完全な実行ツールチェーンも備えています。
00:01:44HTMLファイルをMP4に変換したり、
00:01:50Playwrightを使って、設計したものが実際に
00:01:53機能するかを検証したりできます。Claude Designと同様に、
00:01:56異なるバリエーションを確認でき、完全な調整システムもあります。
00:02:00そして何より、これがスキルであるおかげで、Claude Codeの中であれば、
00:02:055xプランであれ20xプランであれ、
00:02:08あのClaude Designの不可解な
00:02:13利用制限に縛られることはありません。では、実際にテストしてみましょう。
00:02:16今回は、このスキルがゼロからランディングページを
00:02:18デザインするのにどれだけ機能するかを検証します。
00:02:22次に、Claude Designのデザインシステムと同様に、
00:02:24アセットを与えた場合にどうなるかを見ていきます。
00:02:29そして最後に、スライドデッキ作成の能力を比較します。
00:02:33比較を通じて、Claude Designと真っ向から勝負させます。
00:02:36これに価値があるか判断できるはずです。その前に、
00:02:39私のお気に入りのスポンサーである、私自身からの短い宣伝です。先月、
00:02:43「Claude Codeマスタークラス」を公開しました。これは、
00:02:46特に技術的な背景がない方にとって、AI開発者になるための最高の道です。
00:02:51このコースは毎週アップデートしています。
00:02:53そして、Claude Codeのエージェント型iOSモジュールをリリースしました。
00:02:56このツールを最大限に活用したいという方は、
00:03:01ぜひチェックしてください。Chase AIで手に入れることができます。
00:03:04ピン留めされたコメントにリンクがあります。では、始めましょう。
00:03:08Claude Codeに与えるプロンプトは、
00:03:09最後までこのHuashu Designスキルを使用します。プロンプトは
00:03:13「デザインスキルを使って、架空のSaaS製品Lighthouseのランディングページを作成して」
00:03:17「始める前に必要な質問があれば何でも聞いて」です。さて、
00:03:21この全く同じプロンプトをClaude Designにも与えました。
00:03:24Huashuは、Lighthouseの用途やターゲット層、
00:03:29雰囲気、必要なセクション、バリエーションなどについて6つの質問をしてきました。
00:03:34そして、「架空のコンテンツを作るか、こちらでコピー（文章）を用意するか」なども聞いてきました。
00:03:37Claude Designも似たような質問をしてきますが、
00:03:40グラフィックに特化した性質上、
00:03:44視覚的な方向性に関して、実際に選択できるような素材をいくつか提示してくれます。
00:03:48そこでHuashuに対しては、「分析的なアプローチで、個人開発者向けに」と伝えました。
00:03:50（続き）
00:03:54「バリエーションを比較できるように、複数の雰囲気やスタイルを見せてほしい」と伝え、
00:03:57「コピーも独自に考えて」と指示しました。Claude Designにも、
00:03:59（続き）
00:04:02ほぼ同じ指示を出し、比較のために3つのバリエーションを見せてほしいと伝えました。
00:04:05（続き）
00:04:06Claude DesignとHuashuがそれぞれ何を作り出したかを見てみましょう。
00:04:11カメラをオフにして、より詳しく見ていこうと思います。
00:04:16まずHuashuが作成したものを見てみましょう。すべてを1ページにまとめてくれました。
00:04:193つ別々のページにすることもできましたが、
00:04:22これなら一度にすべてを確認できます。あ、失礼、
00:04:25右上に3つすべてを切り替えて表示する機能がありました。
00:04:29これがこのスキルで得られた結果です。
00:04:31この「Ledger」という案は、かなり良さそうですね。
00:04:35ウェブページ全体を構築してくれています。「Terminal」バリエーションもあります。
00:04:40「Paper」バージョンも同様ですね。
00:04:443つを一度に見比べることができて、正直、最初の印象はかなり良いです。
00:04:49Claude Code単体で使うより、はるかに優れています。
00:04:52フロントエンドのデザインスキルを使えば、これほど素晴らしい
00:04:553つのバリエーションが出せるのです。次にClaude Designを見てみましょう。
00:04:59Claude Designは最初から「Tweaks（調整）」を提示してくれました。
00:05:03今はこれを見ませんが、こちらが「Terminal」バージョンです。
00:05:07全体を構築してくれます。「Editorial」というのも、
00:05:11向こうのEditorial案とかなり似ていますね。
00:05:15空間的な配置も非常に似ています。
00:05:19これは……ひどいですね。典型的なAIっぽい
00:05:24空虚な雰囲気が出ています。グラデーションのせいかもしれません。
00:05:283つを比較できます。今、皆さんに考えてほしいのは、
00:05:32単にどちらが優れているかではなく、
00:05:34このスキルがDesignツールとどれだけ肉薄しているかという点です。
00:05:37非常に似ていて、Huashuのスキルにとっては大きなプラス評価です。
00:05:42（続き）
00:05:46マクロなバリエーションを見た後は、
00:05:51一つを選んで微調整を始めるのが好きです。
00:05:54比較をしやすくするために、
00:05:59Designの方ではEditorialという案を選択し、
00:06:03スキル側ではLedgerという案で進めます。
00:06:06どれだけうまく微調整できるかを見てみましょう。Claude Designでは、
00:06:09調整機能がすでにあります。Editorialに関しては、
00:06:11ライトモードとダークモードの切り替え、アクセントカラーの変更が可能です。
00:06:15思いつく限りのどんな色にも変えられるのは、かなりクールですね。
00:06:18見出しの変更も可能です。
00:06:21そして、Spatial（空間的）とGlobal（全体的）で設定が分かれています。
00:06:25調整を展開して、Editorialだけに適用するように指示します。
00:06:29その間に、
00:06:31Claude Codeで「Ledger案を選択し、過激なほど微調整して」と指示します。
00:06:33（続き）
00:06:36これで比較できるようになります。
00:06:38Claude Designが調整を終えました。注目すべきは、
00:06:42この動画の現時点までで、
00:06:44私はすでにClaude Designの利用枠を約15%消費しました。一方、
00:06:49スキルの側では、
00:06:491つのセッションのコンテキストウィンドウのわずか13%しか使っていません。
00:06:54つまり130Kトークン、週間の利用量の1%にも満たないということです。
00:06:5920xプランであることは考慮すべきですが、この違いは驚異的です。
00:07:03なお、あちらはまだ微調整を処理中です。
00:07:05そのため少し遅く、Claude Designの調整の方がスムーズに進んでいます。
00:07:10正直なところ、この微調整機能は、
00:07:12Claude Designにおける私のお気に入りの一つです。
00:07:16Claude Designの真の力は、デザインの質自体というよりも、
00:07:20（質ももちろん非常に高いですが）
00:07:22（誤解しないでくださいね）
00:07:24様々な要素を素早く確認し、
00:07:28高速でイテレーションを繰り返せる点にあると思います。
00:07:31ここで留意すべき点は、Claude Designの
00:07:36仕組み上、
00:07:36このように特定の要素をクリックして、
00:07:40タイポグラフィを操作したり、コメントを残したりできることです。
00:07:43これはデザインスキル上では簡単にできることではありません。
00:07:47デザインスキルに対して「これを見て」「これを左に動かして」
00:07:51「少し右に動かして」といった指示を、画面に直接描画して行うことはできません。
00:07:54（続き）
00:07:57そういった操作にはグラフィックインターフェースが必要であり、
00:07:58ここでClaude Designが優位に立つのは明らかです。
00:08:01では、Huashu Designの微調整と比較してみましょう。
00:08:05注目すべき点として、
00:08:07微調整機能はページそのもののスタイルに合わせています。
00:08:10プリセットを変更でき、
00:08:13フォントファミリーやダークモードの微調整も可能です。
00:08:18アクセントカラーや、様々な要素を変更できます。
00:08:22レイアウト密度やトラストストリップ（信頼性表示）などですね。
00:08:26「トラストストリップを消して」などの操作も可能で、十分に比較に耐えうるものです。
00:08:30Claude Designと同じくらいの調整数があるかといえば、そうではありません。
00:08:32しかし、プロンプト一つでさらに多くの調整を求めることができます。
00:08:34結論として、このスキルを搭載したClaude Codeは、
00:08:38Claude Designがネイティブで提供する機能と十分に張り合えます。
00:08:42トータルでのトークン使用量はわずか170K。週間の制限は
00:08:47ほぼ消費していません。それに対してClaude Designは15%も使いました。今回の例では、
00:08:51事前のデザインシステムもアセットもなしに、
00:08:56自由にプロンプトを投げてこの結果なら、素晴らしい出来だと言えます。
00:08:59では、次のデモに移りましょう。このスキルが、
00:09:02デザインシステムやデザイン例を実際に与えた場合、
00:09:06どれだけ真価を発揮できるかを見ていきます。
00:09:10Claude Designがこれに強いことは分かっていますからね。
00:09:13Claude Designのデザインシステムは、
00:09:16こちらが与えたものを何でもうまく吸収する優れた能力を持っています。
00:09:19コードベースなどから、
00:09:23間隔、コンポーネント、ゲージ、ボタン、ヒーローセクションなど、膨大な情報を汲み取ります。
00:09:27ですので、このデザインシステムをClaude Designに読み込ませれば、
00:09:31様々な出力物全体で一貫性を維持できると分かっています。
00:09:34例えば、
00:09:36この「エージェント型OS」のデザインは、私がデザインシステム化したものです。
00:09:39Claude Designの中ではダッシュボードとして見えますが、
00:09:42このデザインテーマを再現するのは非常に簡単です。
00:09:45例えば、スライドデッキを見ると、
00:09:47すべてが同じ場所から来たもののように見えます。Claude Designのデザインシステムの
00:09:50威力は強力です。欠点は、このようなシステムを作るだけで、
00:09:55週間の利用枠の30%を消費してしまうことです。
00:10:00（続き）
00:10:00さて、Claude Designに対しては、このエージェント型OSのダッシュボードを使い、
00:10:04Lighthouseのランディングページを再作成するように伝えました。
00:10:07Claude Codeに対してもほぼ同じ指示を出し、
00:10:11あのダッシュボードにマッチする美学とデザインシステムを使うように指示しました。
00:10:14さらに、その情報が参照ディレクトリのどこにあるかも伝えました。
00:10:18これが、インスピレーションと美学として使っているベースです。
00:10:22（続き）
00:10:25さて、スプライト（キャラクター）が少し崩れていますが、
00:10:28全体としては、まあ、筋は通っていますね。
00:10:33こちらでもダッシュボードを再現してくれました。
00:10:37元のデザインと非常に似ていて、かなり良い感じだと思います。
00:10:41フォントや色に関しても、
00:10:44意図通りに再現されています。
00:10:47唯一の不満は、このキャラクターだけですね。
00:10:52何が起きているのか分かりませんが、
00:10:54おそらく比較的小さな修正で直るでしょう。
00:10:56では、Huashu Designスキルがどうなったか見てみましょう。参考までに、
00:10:59このスキルは11分かかり、約7万トークンを消費しました。Claude Designは
00:11:043分ほどでしたが、週間の利用制限の10%を使いました。
00:11:08こちらが結果です。見やすくするためカメラをオフにします。
00:11:10小さなClaudeのような、
00:11:15アイコンロゴのキャラクターがいますね。
00:11:18このロゴは上のスプライトとは少し違いますが、
00:11:22まあ、合っています。色やフォントは一見すると正しいように見えます。
00:11:26Lighthouseの横にスプライトもちゃんといますね。
00:11:30おっ、これはなかなかクールですね。小さなティッカーのようです。
00:11:35デザイン全般で見ると、ダッシュボードから見覚えのある要素ばかりです。
00:11:40ただ、ここが少し違和感がありますね。
00:11:43このターミナルセクションを、左側に表示されているものと
00:11:47中央揃えにしてほしいところですが、簡単に直せます。全体としては、
00:11:51かなり良い出来です。Claudeのデザインの方が少し気に入っていますが、
00:11:56特に独自のダッシュボードを作成して、そこに放り込んでくれた点は素晴らしいです。
00:12:00でも、デザイン関連のタスクはしっかりこなしてくれましたよね？
00:12:04同じフォント、同じ色を使っています。
00:12:06間違いなく同じデザインファミリーから生まれたものだと感じさせます。今回のテストでは、
00:12:11このスキルにとって大きな勝利だと思います。大満足ですね。ええ。
00:12:14少し時間がかかったでしょうか？確かに。
00:12:15ですが、本質的には自前でデザインシステムを一から構築していたようなものです。
00:12:18プリロードされたものは何もありませんでしたから。デザインとして最高かというと、うーん、そうではないかもしれません。
00:12:22ですが、かなり近いですし、コストは圧倒的に安いです。ですから、非常に、
00:12:27非常に感銘を受けました。では最後のテストとして、スライドデッキを見ていきましょう。
00:12:29Claudeにデザインを依頼済みです。
00:12:31今、その第一弾をご覧いただいています。
00:12:33同じデザインシステムを使っていて、架空のSaaSプロダクトについて語っています。
00:12:37デザインの一貫性を保つという点では、
00:12:41明らかにかなり良い仕事をしてくれましたし、これらすべてが
00:12:46見栄えも良いです。唯一の不満点は、上部にある小さなスプライトが少し引き伸ばされていることくらいですね。
00:12:50ですが繰り返しになりますが、これは修正が難しいことではありません。
00:12:52本当に私が懸念しているのは、クールに見えるかどうかです。少しクールですよね。
00:12:56Claudeのデザインという点ではデザインシステムと一致していません。ですが、
00:13:00わずか数分でこれを実現できました。使用量は6%です。
00:13:04では、Claude Codeがこのスキルを使ってどうなるか見てみましょう。
00:13:07結果がこちらです。まず、ウェブサイトと非常によく似ていますね。
00:13:11すぐに作成できて、上部には同じスプライトが表示されています。
00:13:15そのまま上に移動していますね。
00:13:16そして右側にはClaude Codeのロゴがあります。
00:13:20これが表紙です。2ページ目、
00:13:23テキストの一部が重なっているようですが、大きな問題ではありません。
00:13:273ページ目は良い感じです。4枚目のスライド。ここが少し切れていますが、
00:13:32これもデザイン上の決定と言えるかもしれません。
00:13:34スクロールするテキストが入っていて良い感じです。最後のスライドでも、
00:13:38また少し重なりがありますが、
00:13:40これらも一度のプロンプトで簡単に直せる小さな問題です。
00:13:44というわけで全体として、デザインとこのスキルを使って得られた結果を比較すると、
00:13:49やはり非常に似ています。
00:13:50これで3回連続で、このスキルがデザインの出力に
00:13:54対抗できることが確認できました。
00:13:56これがこの動画の最大の収穫だと思います。
00:13:58私たちは今や、厳しい利用制限に縛られることなく
00:14:03Claudeのデザイン出力を得る選択肢を手に入れました。これは一般的なユーザーにとって素晴らしいことです。
00:14:07さて、純粋に考えてClaudeのデザインの方が優れているかといえば、もちろんです。
00:14:12このスキルは単にClaudeのデザインがすることすべてを模倣しているだけですから。
00:14:15Claudeのデザインには、描画、編集、コメントなど、特定の長所がありますし、
00:14:19チーム全員で利用できるという利点もあります。
00:14:21そのグラフィカルなインターフェースの性質上、
00:14:24このスキルには決してできないことができるのです。しかし、多くの人にとっては、
00:14:29今見た内容で十分すぎるほどです。例えば、フロントエンドのデザインスキルなどを使うのと比べると、巨大な進歩です。
00:14:34それに覚えておいてください。
00:14:37このスキルはウェブページやスライドデッキ以上のことができます。
00:14:40モーションデザインやインフォグラフィックスなど、あらゆる種類のことができます。
00:14:43ですから、ぜひこれを試してみてください。失うものは何もありません。
00:14:46今日のところはこの辺で終わりにします。この動画を通して、
00:14:50皆さんの絶えず拡張し続けるツールボックスに、新しいツールを一つ追加できれば幸いです。いつも通り、
00:14:54感想を聞かせてください。
00:14:55Claudeのマスタークラスを手に入れたい方は、ぜひChase AI Plusをチェックしてください。
00:14:58またお会いしましょう。