Transcript
00:00:00「Claude Design」が登場し、デザインは一変したと言われていますが、実際には
00:00:04世間で思われているほど大げさなものではありません。
00:00:05そして、X（旧Twitter）で見かける情報がすべてではない理由は、まさにここにあります。
00:00:09もし「Claude Design」が画期的なことをしているとか、ネットに溢れる
00:00:13驚異的なデモを見て乗り換えるべきだと考えているなら、それは間違いです。
00:00:17あの美しいデザインはツール自体の力によるものではなく、人々が
00:00:21その使い方において、まだ気づいていない落とし穴にはまっているのです。
00:00:25「Claude Design」はリリースされた瞬間、デザイン業界に革命を起こす製品として
00:00:29売り出されました。
00:00:30「Figmaキラー」や「デザイナーの終焉」とまで呼ばれ、Figmaの株価が下落し
00:00:34評価額が打撃を受けるほどの影響力を見せました。
00:00:38これは、リアルなプロトタイプやワイヤーフレーム、デザイン、ピッチデッキなど
00:00:43様々な種類のデザインを作成するためのツールです。
00:00:44しかし実際には、ほとんどが誇大広告に過ぎません。
00:00:47これは文字通り「Claude Code」を別のツールとして再パッケージ化したものに過ぎません。なぜなら
00:00:52「Claude Code」でも同じこと、あるいはそれ以上のことが可能だからです。
00:00:54「Claude Design」には編集機能やコメント機能がありますが、適切なツールを与えれば
00:00:58「Claude Code」にできないことは何もありません。
00:01:01「再パッケージ化」と言い切るのには理由があります。実際に検証したからです。
00:01:05コミュニティサイトを作ってほしいという簡単なプロンプトを入力し、
00:01:09投げかけられる質問に答えました。
00:01:10「Claude Design」は印象的なデザインを2つ生成しました。以前の「Claude」が
00:01:14ランディングページを生成していた方法よりは遥かに優れていますが、まだ多くの問題がありました。
00:01:181つのバージョンでは料金セクションで途切れ、フッターも存在しませんでした。そこで
00:01:23「Claude Code」が同じプロンプトでどう機能するかをテストしました。
00:01:25比較のためにOpus 4.7をハイエフォート（高負荷）設定で使用したところ、生成されたデザインは
00:01:30「Claude Design」の機能と同等の性能を発揮しました。
00:01:32サインアップボタンのフォントカラーの選択ミスなど、いくつかの問題はありましたが
00:01:37全体として、非常にうまく構築されたデザインでした。
00:01:39これは、「Claude Design」に組み込まれているデザインハーネスや特別なプロンプトを
00:01:43一切使わず、こちらからほぼ何も提供していない状況での結果です。
00:01:48しかし、世間で目にするデモは確かに印象的です。その裏には何か隠された
00:01:52秘密があるようです。
00:01:53SNSで拡散されているものは、ツール自体の実力というよりも
00:01:57誇大広告に基づいています。
00:01:58人々は詳細なワークフローをこなした上でデザインを生成し、あたかも「Claude
00:02:03Design」が一度で全てを構築したかのように見せかけているのです。
00:02:05しかし、同じワークフローは「Claude Design」を必要とせず
00:02:09「Claude Code」で直接実行可能です。
00:02:10この製品はデザイナー向けに作られていますが、デザイナーは「Claude Design」ではなく
00:02:14「Claude Code」を使うべきです。その方が、さまざまなバリエーションを試し
00:02:19実験を重ね、「Claude Design」と同等、あるいはそれ以上の結果を得られるからです。
00:02:22「Claude Code」なら、デザインが形になりかけた途中で中断されることなく
00:02:26何度も繰り返して試行錯誤できます。
00:02:28毎回やり直すのではなく、既存のサイトの上に構築していくことで
00:02:32デザインの方向性をより細かくコントロールできます。
00:02:35しかも「Claude Code」が生成するのは本物のコードなので、最終的に出来上がるのは
00:02:39使い捨てのプロトタイプではなく、後で誰かが作り直す必要のない
00:02:43そのまま製品としてリリースできる品質のものです。
00:02:45さらに、「Claude Design」にはコストの問題もあります。
00:02:48「Claude Code」は同じことをより安価に行える一方、「Claude Design」は別個に構築され
00:02:53週ごとの制限にカウントされます。これは他のClaudeアプリの制限とは別枠ですが
00:02:57他のモデルを使用する場合に比べ、遥かに速いペースで利用枠を消費してしまいます。
00:03:02これがデザイナーにとって最も過酷な問題であり、クォータ（利用枠）が少なすぎるため
00:03:03必要な実験ができず、わずか数回のデザイン修正で上限に達してしまいます。
00:03:08そして、これこそが多くのユーザーが不満を抱いている点です。
00:03:12あるユーザーは、最高額のプランを利用しているにもかかわらず
00:03:15わずか20回程度のデザイン修正で上限に達してしまったと報告しています。
00:03:19また、わずか1時間で制限に達したにもかかわらず、生成されたのは「Claude Code」なら
00:03:23一度の試行で簡単に実装できる程度の単純なデザインだったという声も非常に多いです。
00:03:27つまり、ワークフローを完了させる前に上限に達してしまい、実際には使い物にならないのです。
00:03:31「Claude Code」の制限と比較すると、遥かに劣悪な状況と言えます。
00:03:35「Claude Design」の成果物が印象的に見える理由は、ツール自体の力ではなく
00:03:39Opus 4.7モデルの登場によるものです。
00:03:40Opus 4.7は驚異的な能力を持つ最新鋭のモデルであり、あらゆる
00:03:45ベンチマークで優れたパフォーマンスを示しています。
00:03:46しかし、ここで重要な進化は「視覚認識（ビジョン）」機能の向上です。
00:03:50このモデルは視覚能力が大幅に向上しており、以前よりもはるかに高い解像度で
00:03:52画像を分析できるようになりました。
00:03:54Claude Opus 4.6は1.15メガピクセルの解像度で画像を分析できましたが
00:03:594.7は3.75メガピクセルまで分析可能です。
00:04:00つまり、リファレンスとなるデザインを以前よりも深く理解できるということです。
00:04:07リファレンスデザインを渡せば、以前は見落としていた細部まで
00:04:10遥かに鮮明に把握します。
00:04:14このモデルのアップグレードにより、AnthropicはClaudeモデルの唯一の弱点であった
00:04:18フロントエンドデザインという課題を克服しました。
00:04:20このモデルはタスクを完遂する際のセンスや創造性に富んでおり、それ自体で
00:04:25高品質なインターフェースやデザインを生成します。
00:04:27つまり「Claude Design」がリリースされた際、その素晴らしいデザインに注目が集まったのは
00:04:31実際にはモデルが進化していたからに過ぎません。
00:04:34ツール自体が劇的に良くなったから、あの素晴らしい見た目が実現したわけではないのです。
00:04:38「Claude Design」は、Anthropicが誇大広告を作り出し、何かを売るための
00:04:41賢い手段の一つに過ぎなかったのです。
00:04:45今では「Claude Code」や、それ以上のツールを使って
00:04:46「Claude Design」で得られるのと同じ、あるいはそれ以上のメリットを享受できます。
00:04:50「Claude Code」で簡単な「スキル」を作成すれば、「Claude Design」のような質問の流れを再現できます。
00:04:55「Claude Design」でプロジェクトを作成すると、プロンプトを入力した後に
00:04:56デザインの方向性を正確に把握するために多くの質問が投げかけられます。
00:05:00「Claude Code」の計画モードよりも遥かに多くの質問が行われますが、スキルを使えば同じことが可能です。
00:05:04このスキルには、質問セッションを実行するための命令が含まれており、
00:05:07「Claude Design」のようにプロンプトから生じるギャップを埋めるために質問を重ねます。
00:05:11フォローアップの質問をいつトリガーすべきか、フローをどう動かすかを定義します。
00:05:16セッションを実行するための質問例や質問ライブラリ、さらにはサイトの
00:05:21ASCIIレイアウトまで含まれており、ランディングページ上の要素の配置を決定できます。
00:05:25プロンプトを渡すと、このスキルを使って「Claude Design」のように
00:05:30特定された不足情報に関連する質問が投げかけられます。
00:05:34さまざまな分野で複数の質問を行い、実装に必要な情報が揃った時点で
00:05:35構築を開始します。
00:05:39最大の利点は、直接コードを出力するため「デザインからコードへの引き継ぎ」が不要な点です。
00:05:41このアプローチをとれば、わずか1時間で制限に達することを恐れることなく
00:05:45何度でも反復して試行できます。
00:05:47同じようなプロンプトと質問フローを使用した「Claude Code」のUI生成結果は
00:05:51「Claude Design」とほぼ同等でした。
00:05:55唯一の違いは、「Claude Design」は小さなアニメーションを追加して
00:05:57より没入感があり魅力的なサイトにする点では一日の長があったことです。
00:06:01その前に、スポンサーの「HeyGen」をご紹介します。
00:06:05AI動画生成ツールを試したことはありますか？
00:06:0920分も経つと、タイムラインの操作に追われ、ナレーションを再録し、
00:06:13酷い吹き替えのようなリップシンクと格闘することになります。
00:06:16HeyGenなら、そんな手間は一切不要です。
00:06:18HeyGenは新しいCLIを搭載したAI動画生成ツールで、たった一つのコマンドで
00:06:19デジタルツインのアバター動画を完全に生成できます。
00:06:24タイムラインもカメラも、撮影クルーすら必要ありません。
00:06:25デジタルツインを一度録画すれば、HeyGenを使って再撮影なしで継続的にコンテンツを発信でき、
00:06:26ニュースレターやPDF、PowerPointを動画に変換できます。
00:06:31動画エージェントを使って1つのプロンプトから完全に編集されたマルチシーン動画を生成し、
00:06:34完璧なリップシンクでグローバルな視聴者向けに翻訳しましょう。
00:06:36アバター、音声、動画エージェント、翻訳機能を備えた開発環境は developers.heygen.com で。
00:06:40デジタルツインの使用には本人確認の同意が必要です。
00:06:44コンテンツがパブリックモデルの学習に使われることはなく、プラットフォーム全体が
00:06:48エンタープライズグレードのセキュリティで設計されています。
00:06:51カメラを触ることなく、スタジオ品質の動画制作を始めましょう。
00:06:56固定コメントのリンクから、今すぐHeyGenを試してみてください。
00:06:59Xで「Claude Design」として見かけたスクロールインタラクションデザインのほとんどは
00:07:03背景動画を使用したサイトで、それによって実際以上に
00:07:04プレミアムで、印象的なものに見せているだけです。
00:07:07デモの多くは、すぐに使えるプロンプトテンプレートを提供するサイトから
00:07:11プロンプトをコピーしただけのものです。
00:07:15そのプロンプトには、背景として使用すべき動画へのリンクと
00:07:20実装方法の詳細なガイドラインが含まれています。
00:07:24そのため、同様のプロンプトさえ与えられれば「Claude Design」だけでなく
00:07:28どんなエージェントでもこのようなサイトを実装可能です。
00:07:29しかし、これらはあくまでショーケース用のサンプルプロンプトに過ぎません。
00:07:33実際の実務レベルのアプリケーションでは、Lenisのようなライブラリが
00:07:36多くの商用アプリで使用されており、GSAPも非常に人気があります。
00:07:40これらを使えば、ウェブサイトの体験を以前よりも遥かに没入感のあるものにする
00:07:42スムーズなアニメーションを実装できます。
00:07:45実際にテストするため、動画をダウンロードして、「Claude Code」へのプロンプトで
00:07:49その動画をヒーローセクションとして使用し、希望するカラーテーマを指定しました。すると、
00:07:54サイトの残りの部分を自力で実装してくれました。
00:07:59動画の内容について一度修正を加える必要はありましたが、
00:08:00ランディングページに完璧にスタイルを組み込み、以前のバージョンよりも優れたものになりました。
00:08:04プロンプトは非常にシンプルだったにもかかわらず、実装されたサイトは非常に強力で
00:08:08多様なアニメーションやインタラクションが含まれており、従来のClaudeの能力よりも
00:08:10サイトの一部が遥かに強力でインタラクティブになっていました。
00:08:14今では「Claude Code」なら、「Claude Design」よりも簡単にツールを補完できます。
00:08:18なぜなら「Claude Code」は技術的な能力が高く、物事をよりシームレスに実装できるからです。
00:08:19「Scrollytelling」のようなオープンソースのスキルを使えば、スクロールに応じて
00:08:23ストーリーを語るようなアニメーションをプロジェクトに組み込めます。
00:08:28このスキルを使えば、Claudeは単純なプロンプトからマルチレベルのストーリーテリングを実装でき
00:08:32「Claude Design」が単体で行うよりもはるかに深いアニメーションを作成できます。
00:08:36また、コンテンツを楽しんでいただけたら「高評価（Hypeボタン）」を押してください。
00:08:42皆さんの応援が、より多くのコンテンツを作成する力になります。
00:08:46「Claude Design」ではなく「Claude Code」を使うとUIの実装が容易になります。なぜなら
00:08:48「Claude Code」では、shadcn、Aceternity、Hero UIなどのコンポーネントを取り入れることで
00:08:53構築済みのデザインシステムを簡単に統合できるからです。
00:08:57これにより、モデルが各コンポーネントの見た目や挙動をいちいち考える必要がなくなり
00:08:59デザイン全体の改善に集中できるようになります。
00:09:03そのため、「Claude Design」をデフォルトで使用するよりも出力結果を出しやすくなります。
00:09:07プロジェクトの現状を分析するスキル作成ツールを使って、プロジェクトに合わせた
00:09:11フロントエンド設計スキルや特殊なスキルを活用することも可能です。
00:09:16これは時間を無駄にせず、より効果的に機能を実装するのに役立ちます。
00:09:22「Claude Code」はMCPサーバーに接続できるため、より柔軟性が高いのも特徴です。
00:09:27例えば、shadcn MCPサーバーを使えば、人間がどこに何を使うか指示しなくても
00:09:30エージェントが適切なコンポーネントを自力でインストールできます。
00:09:35同様に、純粋に生成されたデザインに頼るのではなく、UIをより効果的に構築する
00:09:39さまざまなMCPを活用できます。
00:09:43Opus 4.7のようなモデルや「Claude Design」のようなツールを使っても、生成されたままのデザインは
00:09:47似たようなパターンを辿るため、モデルが作成したものだとすぐに分かってしまいます。
00:09:51しかし、確立されたライブラリを使うことでその問題を軽減し、出力結果をより自然で
00:09:56予測不可能なものにできます。
00:09:59「Claude Design」ではなく「Claude Code」を使う最大の利点は、Gitと接続できることです。
00:10:04「Claude Design」もGitHubに接続可能ですが、両者の仕組みには大きな違いがあります。
00:10:06「Claude Design」のGit統合は非常に基礎的なものです。
00:10:11主に接続されたGitHubリポジトリからファイルをフェッチし、デザインを理解するために
00:10:16参照することに主眼が置かれています。
00:10:20リポジトリに対して実際に変更を加えることはほとんどありません。
00:10:22一方で「Claude Code」は全く別物です。
00:10:26コミット、ブランチ作成など、Gitの完全な操作を実行できます。
00:10:27そのため、実装中に問題が発生したり、変更後に以前のバージョンの方が良かったと
00:10:30感じた場合でも、Gitを使って簡単に前のバージョンへ戻せます。
00:10:31これは「Claude Design」の使用中にはできないことであり、「Claude Code」の方が
00:10:34遥かに強力なアプローチと言えます。
00:10:38プロトタイプを設計する際、「Claude Design」やFigmaに行くよりも
00:10:39HTMLで直接モックアップを作成する方が効果的です。
00:10:42さまざまなバリエーションを試すには、並列エージェントとワーキングツリーを活用し
00:10:45タスクを分割するのがおすすめです。「Claude Design」のようにデザインを探索できますが
00:10:47Gitで管理されるため、ベストなバージョンを残し、残りを簡単に破棄できます。
00:10:51プロンプトでサブエージェントを個別のワーキングツリーで使用するよう指示し、
00:10:55各エージェントに同じデザインの異なるバリエーションを実装させることができます。
00:10:59そうすることで、Claudeが個別のワークスペースでエージェントを生成します。
00:11:02並列エージェントの使用は、複数の方向性を同時に探索し、時間と労力を節約するのに役立ちます。
00:11:04各エージェントの作業が完了すると、複数のバリエーションを入手できるので
00:11:09いつでもレビューし、ニーズに最適なものを選択できます。
00:11:12そこから変更を加え、最も気に入ったスタイルに基づいてアプリの構築を続けられます。
00:11:16「Claude Design」が生成したものでなくても、生成された各デザインは
00:11:21コードによって完全に作成されたSVGによる美的外観と、より優れた
00:11:24全体的なバランスを保っています。
00:11:29あとは好みのバージョンをmainブランチにマージし、気に入らなかったデザインが含まれる
00:11:31ワーキングツリーを削除するだけです。
00:11:35ここで使用したスキルやその他のリソースは、AI Labs Proで公開されています。
00:11:39この動画や以前の動画の素材をダウンロードして、自分のプロジェクトに活用してください。
00:11:40私たちの活動に価値を感じ、チャンネルを支援したいと思っていただけたなら
00:11:44それが最高の支援方法です。
00:11:47リンクは概要欄にあります。
00:11:51以上が今回の動画の全てです。
00:11:52もしチャンネルを応援し、このような動画制作を支援いただける場合は
00:11:57下の「スーパーサンクス」ボタンからお願いします。
00:12:02いつもご視聴ありがとうございます。また次の動画でお会いしましょう。
00:12:04あとは好みのバージョンをmainブランチにマージし、不要なデザインが含まれる
00:12:08ワーキングツリーを削除するだけです。
00:12:09ここで使用したスキルやその他のリソースは、AI Labs Proで公開されています。
00:12:15この動画や以前の動画の素材をダウンロードして、自分のプロジェクトに活用してください。
00:12:19私たちの活動に価値を感じ、チャンネルを支援したいと思っていただけたなら
00:12:23それが最高の支援方法です。
00:12:24リンクは概要欄にあります。
00:12:25以上が今回の動画の全てです。
00:12:26もしチャンネルを応援し、このような動画制作を支援いただける場合は
00:12:30下の「スーパーサンクス」ボタンからお願いします。
00:12:33いつもご視聴ありがとうございます。また次の動画でお会いしましょう。