これはヤバすぎる… Google Stitch vs Claude デザイン論争に決着
AAI LABS
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00Geminiは他の分野で劣る部分はあっても、デザインに関してはトップモデルであり続けてきました。
00:00:05特にデザインツールのStitchは、私たちのワークフローでも何度も活用してきました。
00:00:09Stitch 2.0のアップデートで多くの新機能が追加され、さらに使い勝手が向上し、
00:00:14他をさらに引き離しました。しかし、AnthropicもOpus 4.7と
00:00:19Claude designをリリースしてデザイン分野に参入し、人々に「Figmaの終わり」と
00:00:24言わせるほどのインパクトを与えました。では、実際にはどちらが優れているのでしょうか？
00:00:30決着をつけるために複数のカテゴリーでテストを行い、最終的にどちらが
00:00:34あなたのワークフローにふさわしいかをお伝えします。Claude designとGoogle Stitchは、
00:00:39それぞれを際立たせる多くの特徴を持っています。Claude designはOpus 4.7と共にリリースされ、
00:00:45そのインタラクティブな機能により「Figmaキラー」として急速に人気を集めました。
00:00:49モデル自体のデザイン能力が向上し、ツールと相まってデザインの質が劇的に上がりました。
00:00:54一方、Google Stitchは以前からありましたが、GoogleがGemini 3を
00:00:58リリースするまでは今ひとつでした。Gemini 3は他のどのモデルよりもデザインに長けています。
00:01:04Stitchとの組み合わせで、デザインは大幅に改善されました。それでは具体的に
00:01:08各ツールの優位性を見ていきましょう。Claude designには、プレゼン資料を作成し、
00:01:13その中にスピーカーノートを書き込める機能があります。しかしStitchにそのような機能はありません。
00:01:17StitchはUI専用であり、モバイルやウェブのインターフェース以外のデザイン機能は提供していないからです。
00:01:23Claude designでは、GitHubリポジトリを接続して他のプロジェクトを参照し、
00:01:28既存のデザインスタイルを継承して新しいデザインを作成することも可能です。
00:01:32Stitchはこの処理を少し異なる方法で行います。デザインシステムを利用し、
00:01:37公開されている他サイトのリンクをStitchに入力するだけでスタイルをコピーできます。
00:01:42そこから正確なスタイルをインポートし、後のデザインで使用するシステムを構築します。
00:01:46修正に関しては、Claude designはプロンプトの再入力だけでなく、
00:01:51変更したい箇所を直接クリックして反映させることができます。
00:01:56変更したい箇所に直接コメントを残すと、変更がそのまま適用され始めます。
00:02:00複数のコメントを溜めて、一度にClaudeに送信することも可能です。
00:02:04Stitchは逆のアプローチです。テキストの変更以外は、直接的な修正はできません。
00:02:09色やフォントサイズなどを変えたい場合は、範囲を選択してコメントを追加するか、
00:02:14注釈を付けてGeminiに送信し、変更を組み込んでもらう必要があります。
00:02:19音声入力も異なります。Claude designはタイピングの代わりに音声でプロンプトを入力できます。
00:02:24しかし、この点はStitchの勝利です。Stitchの「ボイスキャンバス」機能は、
00:02:28基本的にモデルとのライブ会話です。作りたいデザインについて話すと、
00:02:33モデルがデザインに関する質問を投げ返し、対話を通じてデザインを完成させてくれます。
00:02:37Stitchには別ペインでのライブプレビュー機能もあり、デスクトップ、モバイル、
00:02:42タブレットでの見え方を確認し、デザインを直接操作することもできます。
00:02:47Claude designには独立したプレビュー機能はありません。代わりに同じペインにUIが表示され、
00:02:52別画面に移動することなく要素を直接操作できますが、
00:02:57Google Stitchのようにレスポンシブ性をチェックすることはできません。Claude designは
00:03:01チームでの作業も想定されており、編集権限や閲覧権限を個別に設定して
00:03:06プロジェクトを共有できますが、Stitchにはありません。Stitchではプロジェクトを共有すると
00:03:11権限を分けずに全員で作業することになります。
00:03:15Stitchの方が歴史のあるプロジェクトですが、最近リリースされたばかりの
00:03:20Claude designの方が、機能面では優勢だと言えるでしょう。
00:03:24Claude designは、ClaudeのPro、Max、Team、Enterpriseプランでのみ利用可能です。
00:03:30一方、Stitchはプランに関わらず無料で利用でき、クレジット制で
00:03:35使用量を管理しています。実用性の面では、Stitchの方が圧倒的に多くのクレジットを提供しています。
00:03:401日にデザインクレジットが400、再デザインクレジットが15付与されるので、
00:03:461日だけでも十分使えますし、月間クレジットはさらに多いです。通常、シンプルなデザインは
00:03:513クレジットで、複雑さや生成回数によって変動しますが、大量のデザインを作成できます。
00:03:56Claude designには1週間単位の制限があります。この制限は、
00:04:00他のClaudeの機能（Claude codeなど）の制限には干渉しないため、デザインの制限が来ても
00:04:05他の機能は自由に使えます。しかし、前回の動画でも話した通り、この制限は
00:04:10実用的ではありません。自由に試行錯誤するには少なすぎて、何か本格的なものを
00:04:15作る前に使い切ってしまいます。Proプランだと数回試しただけで制限がかかるので、
00:04:20さらに厳しい状況です。Claude designで実際に成果を出したいのであれば、
00:04:24Maxプランに切り替える必要があります。コストパフォーマンスを比較すると、Stitchが
00:04:29大差で勝利しています。少なくとも自由に実験させてくれるからです。
00:04:34ウェブサイトのスタイルや構成案について、同じプロンプトで両方のツールをテストしました。
00:04:39Claude designはいつものようにToDoリストを作成して作業を開始しました。
00:04:44Claude designが時間をかけている間に、全く同じ内容をGoogle Stitchにも投げました。
00:04:49Stitchが最初に行ったのは、色、タイポグラフィ、アイコン、ボタンに至るまでの
00:04:54デザインシステムの可視化でした。Claude designが終わる前にStitchは完成しており、
00:04:59システムに基づいたスタイルで、メインカラーとアクセントカラーのバランスが取れた
00:05:04ランディングページを構築しました。Claude designはより多くの時間を要し、終了後には
00:05:09検証ステップが始まりました。Stitchの静的なページとは異なり、各パーツはインタラクティブでした。
00:05:15最初の実行でアクセントカラーやメインテーマを選択するオプションが提示されたため、
00:05:20再プロンプトなしで微調整ができました。ただ、デザインの質のテストでは、
00:05:25Stitchの方が格段に良かったため、Google Stitchに軍配が上がります。
00:05:30Stitchはカラーパレットを創造的に使い、アプリの雰囲気に合ったスタイルを実現していましたが、
00:05:34Claude designの選択はありきたりで深みに欠けていました。またスピードの面でも、
00:05:39一回ごとに時間がかかるClaude designに対し、Stitchの勝利です。Claude designは
00:05:45画像が必要な際はSVGを生成して統合します。素材を自分で用意しない限りは、
00:05:50SVG生成に頼り切りになります。一方、Googleには独自の画像生成モデル
00:05:55Nano Bananaがあります。Stitchはこれを直接統合しており、明示的に指示しなくても
00:06:00各セクションで画像生成を活用するため、結果が大幅に良くなります。
00:06:05SVGがどれほど高品質になろうとも、画像専用モデルには敵いません。この点においても
00:06:10Google Stitchが明らかに勝っています。Stitchはデザインに特化しているため、
00:06:16アニメーションは得意ではありませんが、一応テストしてみました。いくつか試みては
00:06:21くれましたが、直接は見えず別タブでの確認が必要で、さらに1つのセクションの
00:06:26スクロールアニメーションのみでした。しかしClaude designは、ヒーローセクションの下に
00:06:32マーキー（流れる文字）を表示させるなど、複数のアニメーションを追加しました。
00:06:37スクロール演出も、一部だけでなく各コンポーネントに適切に適用されていました。
00:06:43Claude designはシェーダーなどの一般的なライブラリを使いこなせるため、Stitchよりも
00:06:48マウスの動きやクリックで反応する、はるかに高度なアニメーションを作成できます。
00:06:54アニメーションに関してはClaude designの圧勝です。もしこのコンテンツを
00:06:59気に入っていただけたら、高評価ボタンをお願いします。より多くの人に届ける助けになります。
00:07:04アプリへの理解度と修正対応をテストするため、既存のアプリにサインアップと
00:07:09ログインページを追加するよう指示しました。Stitchは先に完成させ、同じデザインシステムを
00:07:14各ページに適用し、共通のヘッダーとフッターを実装しました。またプロトタイプ機能で、
00:07:19ボタンがどの画面に繋がるかといった遷移の流れも確認できました。
00:07:24Claude designの実装は、アプリのコンセプトをより深く理解しているものでした。
00:07:28ログインページを独創的に作り上げ、サインアップページではさらに一歩踏み込んで、
00:07:33複数タイプのアカウントスタイルまで実装してくれました。次に修正の反映についても比較しました。
00:07:38Claude designではコメントをまとめて送るだけで、すぐに実装が開始されました。
00:07:44Stitchでは変更したい箇所に注釈を付ける必要がありましたが、結果は意図した通りには
00:07:49なりませんでした。引用文の直後にフッターが追加されるなど、おかしな箇所がありました。
00:07:54また、Stitchは修正のたびに新しい画面を作成するため、次第に画面が乱雑になり、
00:07:59反復作業には向いていません。一方、Claude designはデザインに直接修正が反映され、
00:08:04アプリを理解しているため、スタイルを崩さずに適切に実装してくれます。非常に快適です。
00:08:09そのため、デザインの反復（イテレーション）に関しては、Claude designの方が優れています。
00:08:14どちらも独自のデザインシステムを持っています。Claude designの場合、それは
00:08:20ブランドを定義するものです。ブランドキットを作成するチーム向けであり、
00:08:25フォントやロゴなどの説明を追加することで、ブランドスタイルを網羅したシステムを構築します。
00:08:30Stitchにとってのデザインシステムはブランド定義ではなく、特定のデザインを表すファイルです。
00:08:36このファイルはStitchに限定されず、エクスポートして他のエージェントで読み込ませれば
00:08:41そのまま理解され、実装に反映されます。先ほどお伝えしたように、他サイトから
00:08:46インポートしたり自作したりも可能です。Stitchはインストールコマンドや書式を含む
00:08:52design.mdファイルをオープンソース化しています。それぞれ目的は異なりますが、
00:08:57他プラットフォームへの切り替えが容易で囲い込みのないGoogleの手法が好みです。
00:09:02さて、デザインが完成したところで、コードへの引き継ぎ（ハンドオフ）について話しましょう。
00:09:07前述の通り、Claude designは権限管理を含め、より多くのエクスポートオプションがあります。
00:09:13PDFやスライド形式のほか、Canvasに書き出してデザインを継続することもできます。
00:09:18しかし、私たちが最も利用するのはClaude codeへのハンドオフです。そこでアプリを
00:09:23開発することが多いためです。プロンプトをコピーしてClaude codeに貼り付けるだけで
00:09:28デザインを読み込み、アプリに実装してくれます。一方、Google Stitchの
00:09:33ハンドオフはより洗練されています。StitchにはMCPがあり、コーディングエージェントと
00:09:39連携させることで、エージェントからStitchへデザイン指示を送り、それを取り込んで
00:09:44実装させることができます。Claude designにはMCP統合がないため、このStitchの仕組みは
00:09:49非常に強力です。コーディングエージェントがStitch専用の言語で指示を出してくれるので、
00:09:53人間がプロンプト作成に悩む必要がありません。また、Stitchはzip形式だけでなく、
00:09:58他にも多様なエクスポートが可能です。Google AI Studioに書き出して、
00:10:04統合されたFirebaseなどのリソースを活用して開発を続けたり、
00:10:09Figmaに直接エクスポートして他のメンバーと共同作業することもできます。私たちは、
00:10:14エージェントが自動でハンドオフを処理してくれるMCP経由のエクスポートを多用しています。
00:10:19また、PRD（製品要求仕様書）として書き出して、他の人やエージェントに渡し、
00:10:25スムーズに実装を進めることも可能です。ハンドオフのスタイルでは、Stitchの圧勝です。
00:10:30今回の動画は以上です。チャンネルを支援し、このような動画制作を続けてほしいと
00:10:35思ってくださる方は、下の「スーパーサンクス」ボタンからお願いします。
00:10:40いつもご視聴ありがとうございます。それでは、また次の動画でお会いしましょう。