00:00:00アップデートは止まることがありません。
00:00:02Anthropicが「Claude Design」をリリースしました。
00:00:05これによってウェブアプリや
00:00:09ウェブサイト、その他自分たちが望むものを
00:00:11Claudeのインターフェース経由で作れるようになりました。
00:00:13これはGoogleの「Stitch」に対する彼らなりの回答です。
00:00:16デモビデオを見ればわかる通り、
00:00:18マクロからミクロまで、あらゆる要素を
00:00:21デザインを通じて微調整できるようになっています。
00:00:23ウェブアプリだけでなく、
00:00:25モバイルデザインにも対応しています。
00:00:27面白いのは、これまでAnthropicや
00:00:28Claude Codeについて語る際、
00:00:30最大の弱点の一つがフロントエンドのデザインだったことです。
00:00:32ですから、その弱点を補うための
00:00:34本格的なアプリケーションが登場したというのは、
00:00:36非常に素晴らしいことです。
00:00:39今回のビデオでは、その仕組みを紹介します。
00:00:41クイックデモを行いますので、
00:00:42ぜひ皆さんも試してみてください。
00:00:43Claude DesignはOpus 4.7を想定して作成されており、
00:00:46Pro MaxからEnterpriseまでの
00:00:49プランを利用していれば使えます。
00:00:51プロトタイプからモックアップ、
00:00:53PowerPointのプレゼン資料まで何でも作れます。
00:00:54また、作成したものは
00:00:57PowerPoint形式で書き出したり、Canvaに送ったりもできます。
00:00:59特に魅力的な機能の一つが、ブランドデザインです。
00:01:01例えば、自分のウェブサイトの
00:01:03コードベースを読み込ませると、
00:01:05サイトからすべてのブランド資産を抽出してくれます。
00:01:09そのため、配色やタイポグラフィを
00:01:11制作中のデザインに合わせることが可能です。
00:01:12始めるには、claude.ai/design にアクセスするだけで、
00:01:15このようなページが表示されます。
00:01:18左側には、プロトタイプ、スライド、
00:01:20テンプレート、その他といった選択肢があります。
00:01:23先ほどお話ししたように、画面下部には
00:01:25デザインシステムを作成する機能があります。
00:01:27「Set up design system」へ行くと、
00:01:29会社名などを入力し、
00:01:33デザインシステムの例を提示できます。
00:01:36これは必須ではありませんが、
00:01:38既存のデザインに合わせたい場合には
00:01:40非常に役立ちます。
00:01:41GitHubのリンクを指定したり、
00:01:43フォルダを直接ドラッグしたりできます。
00:01:45PCにコードベースがあるなら、
00:01:48ここにドラッグするだけでOKです。
00:01:49フォントやロゴ、アセットを追加し、
00:01:51メモを添えることもできます。
00:01:52私は自分のPCから、ウェブサイトのアセットが入った
00:01:55フォルダを選択しました。
00:01:57そして、「Continue to generation」を押します。
00:01:59大規模なコードベースの場合、まず、
00:02:01すべてのコードがアップロードされるわけではありません。
00:02:03どのファイルが必要かを自動で判断します。
00:02:05次に、「全ファイルを処理するのに
00:02:0715分から20分かかる場合があります」という
00:02:09ポップアップが表示されます。
00:02:11もちろん、ゼロから作成することも可能です。
00:02:12やってみましょう。
00:02:13新しいプロトタイプを作成します。
00:02:16名前は「Chase demo」にします。
00:02:172つの選択肢があります。
00:02:18ラフなワイヤーフレームか、
00:02:20いきなり高精度のモックアップを作るかです。
00:02:23今回はモックアップを選びます。
00:02:25すると、このページに移動します。
00:02:26Stitchに近い雰囲気を感じますね。
00:02:28指示を出してみます。
00:02:29「都市間で文化がどのように流れるかを示す、
00:02:31インタラクティブなダークテーマのグラフィックをデザインして。
00:02:33光るパスで結ばれた都市を持つ、回転する地球儀で。」
00:02:35これは彼らがデモで見せたものと同じですが、
00:02:37ここで得られる結果が、
00:02:40ビデオのアセットと本当に一致するのか、
00:02:43どんな違いがあるのか見てみたいと思います。
00:02:45広告ではどれくらい誇張されていたのでしょうか？
00:02:47送信してみましょう。
00:02:48ちなみに、ここで
00:02:50モデルを選択することも可能です。
00:02:52ファイルを添付したり、
00:02:53ボイス入力を使ったり、好きなものをインポートできます。
00:02:55すぐに質問を返してくれましたが、
00:02:57この形式はとてもいいですね。
00:02:58Claude Codeのプランモード（plan mode）に似ています。
00:03:02どんな「文化」を想定していますか？
00:03:04「Mixed globe style（混合地球儀スタイル）」にします。
00:03:07「Flow path（フローパス）」のスタイルは
00:03:13これにしましょう。かっこいいですね。
00:03:14カラーパレットはどうしますか？
00:03:16「Multi-hue（マルチカラー）」にします。
00:03:18こうしてプロンプト形式で
00:03:20質問されるのは非常にありがたいです。
00:03:21Stitchでは、あまりこういう体験はありません。
00:03:24他のツールでも、ここまで親切ではないでしょう。
00:03:26Claude Codeの最も強力な点の一つは、
00:03:29他のウェブデザインのレッスンでも話しましたが、
00:03:31対話を通じて
00:03:33計画の盲点を見つけ出せることです。
00:03:37これほど多くの質問をしてくれるのは大きな利点です。
00:03:39かなりの数を聞いてきますね。
00:03:40通常のClaude Codeのプランモードでも3つ程度です。
00:03:43「ドラッグで回転」できるようにします。
00:03:45どの都市を特集しますか？
00:03:47「上位10都市」にします。
00:03:49UIの量は？
00:03:50「Full dashboard（フルダッシュボード）」にしましょう。
00:03:53全体の雰囲気は？
00:03:54「Editorial（エディトリアル風）」にします。
00:03:58そのまま進めます。
00:04:00何を調整可能にしますか？
00:04:02「フローのカラーパレット」にします。
00:04:073つほど項目を作ってもらいましょう。
00:04:08続行します。
00:04:09質問に答えると、左側に
00:04:11進捗状況が表示されます。
00:04:12これも、Claude Codeでプランモードを
00:04:15実行した時と同じような見栄えです。
00:04:17当然ですが、この作業は
00:04:19ウェブアプリ上で行う必要があります。
00:04:22グラフィカルな性質上、ターミナルで
00:04:24完結するものではありません。
00:04:27私が知る限り、
00:04:29これがデスクトップアプリに実装されるかは不明ですが、
00:04:30いつか実装されるかもしれません。
00:04:33現時点では、Claude.ai経由で使う必要があります。
00:04:35構築している間に、
00:04:36皆さんが抱きそうな疑問について話しましょう。
00:04:38「チャットウィンドウにプロンプトを投げるのと
00:04:39何が違うのか？」
00:04:41あるいは「Claude Codeを立ち上げて
00:04:43『インタラクティブなものを作って』と
00:04:45頼むのと何が違うのか？」
00:04:47という疑問です。
00:04:48そこからウェブアプリを作らせる場合と比べて、
00:04:50極論を言えば、大きな違いはありません。
00:04:54結局、コードを書いているだけですからね。
00:04:55結果は同じになるでしょう。
00:04:56しかし、違いはここにあります。
00:04:58少しでもフロントエンドのデザインを経験したことがあれば、
00:05:00単純なランディングページであっても、
00:05:02視覚的に確認しながら
00:05:04比較検討できることの強力さがわかるはずです。
00:05:05Google Stitchが優れている理由は、
00:05:08単にデザイン哲学が素晴らしいからではなく、
00:05:09（それも良いとは思いますが）
00:05:11UI上で
00:05:12多くのオプションを視覚的に確認し、
00:05:13その場で編集できるからです。
00:05:15そして気に入ったものをコードに落とし込めます。
00:05:17デザインにおいて「コードファースト」で
00:05:18すべてを行うのは至難の業です。
00:05:20どうしても不自然な形になりがちです。
00:05:22視覚的なメディアを
00:05:23自然言語に変換し、
00:05:26それをコードに変え、
00:05:28さらに視覚的なものに戻して完成度を高めるのは、
00:05:29特に初期段階では困難です。
00:05:32まずは目で見て確認する必要があります。
00:05:33少なくとも私には、選択肢を視覚化することが不可欠です。
00:05:34だからこそ、このツールの登場は画期的です。
00:05:36AnthropicとClaude Codeにとって、
00:05:38弱点だった部分を克服する大きな一歩です。
00:05:41Pencilのようなアプリが
00:05:42これほど人気があるのも、
00:05:45こうした要素を扱うための
00:05:46視覚的な媒体を提供してくれるからです。
00:05:48また、補足ですが、ご覧の通り、
00:05:49これは本格的なアプリケーションです。
00:05:51本質的にはプロトタイピング・ツールです。
00:05:53APIなどを組み込むことも可能です。
00:05:55これを単なる「Canvaのようなデザインツール」と
00:05:58捉えるのではなく、
00:06:00「Google AI Studio」のようなものとして
00:06:03考えたほうがいいでしょう。
00:06:04さて、結果が戻ってきました。
00:06:05エディトリアル・スタイルになっていますね。
00:06:07ここに地球儀が見えます。
00:06:08マウスでドラッグできます。
00:06:10回転速度や、光の強さ、
00:06:12パレットの変更も可能です。
00:06:14なかなかいいですね。
00:06:18横には解説テキストも添えられています。
00:06:19次に、編集機能について見てみましょう。
00:06:21まず、上部に「Tweaks（微調整）」項目があります。
00:06:25ここでは回転速度などを
00:06:27調整できます。
00:06:30コメントを残したり、編集したり、描画したりもできます。
00:06:33フルスクリーン表示で
00:06:34実際の見栄えを確認することも可能です。
00:06:37フルスクリーンにすると面白いですね。
00:06:39こちらのほうがずっと良く見えます。
00:06:41しかし、これを修正したい場合はどうすればいいでしょうか。
00:06:42もちろん、プロンプトウィンドウに戻って
00:06:44指示を出すこともできますが、
00:06:46「Edit（編集）」モードを使えば、より細かく指定できます。
00:06:49これはCursorのエディタや、
00:06:50Lovableのような操作感を思い出させます。
00:06:55個別の都市を選択することも可能です。
00:06:58地球儀全体を選択すれば、メニューが表示されます。
00:06:59色を変更したりもできます。
00:07:04（この色はひどいですが）高さなども変えられます。
00:07:07変更したい箇所を
00:07:11非常に具体的に指定できるのが強みです。
00:07:14言葉で「サイズを変えて」と言うよりも、
00:07:16直接選択して編集するほうがずっと効率的です。
00:07:18また、コメント機能もあります。
00:07:19特定の場所をクリックして、
00:07:21編集モードのように数値をいじる代わりに、
00:07:24地球儀をクリックしてコメントを残せます。
00:07:25例えば「地球儀をもっと大きくできますか？」と書いて、
00:07:27Claudeに送信します。
00:07:29コメントはキュー（待ち行列）として作成されます。
00:07:31すぐに送りたくない場合は溜めておいて、
00:07:34好きなタイミングで送信すれば
00:07:37Claudeが作業を開始します。
00:07:40さらに、描画も可能です。
00:07:41「ここに月が欲しいな」と思ったら、
00:07:43月を描き込んで、
00:07:45「このあたりを飛んでいるアルテミス2世が見たい」
00:07:46といった指示ができます。
00:07:48また、デザインファイルの確認もできます。
00:07:50内部のコードを
00:07:52直接覗くことが可能です。
00:07:53最後に、書き出しと共有についてです。
00:07:56「Export」をクリックすると、ZIP形式でダウンロードしたり、
00:07:56PDF、PowerPoint形式、またはCanvaへ書き出せます。
00:07:58さらに素晴らしいのは、これを
00:08:00Claude Codeに引き継げる点です。
00:08:02Claude Code内に取り込むための
00:08:04コマンドが表示されます。これは便利ですね。
00:08:05今日はこのあたりにしておきます。
00:08:07駆け足でしたが、
00:08:11使いかたや可能性の断片を
00:08:13お見せできたかと思います。
00:08:14近日中に、この機能を最大限に活用するための
00:08:15徹底解説動画を出す予定です。
00:08:17ぜひ感想を聞かせてください。
00:08:18Chase AIマスタークラスに興味がある方は、
00:08:19固定コメントのリンクをチェックしてください。ではまた！
00:08:21操作方法と、どのようなことが可能なのかを解説しました。
00:08:23数日中には、さらに詳細な活用方法を紹介する
00:08:26ディープダイブ動画を公開する予定ですので、ご期待ください。
00:08:29いつものように、皆さんの感想をぜひ教えてください。
00:08:31「Chase AI Masterclass」に興味がある方は、
00:08:33固定コメントのリンクをチェックしてみてください。それではまた！