00:00:00Claude Designは最高です
00:00:01スキルが登場して以来、フロントエンド開発において最も革命的です。
00:00:05ですが、使い方がわからなければ、
00:00:06ランディングページを完成させる前に
00:00:09全利用枠を使い切ってしまうでしょう。
00:00:11しかし、このClaude Designマスタークラスなら
00:00:12その問題を解決できます。
00:00:14本当に時間をかける価値のある機能を厳選して紹介します。
00:00:17さらに、通常のClaude Codeと
00:00:19Claude Designを徹底比較します。
00:00:22また、単純なランディングページ制作を超えた
00:00:25興味深い活用事例についても話します。
00:00:27これは素晴らしいツールです。内容が盛りだくさんなので、
00:00:30早速始めましょう。
00:00:31Claude Designは、Googleの「Stitch」に対するAnthropicの回答です。
00:00:35Claude Codeでは利用できません
00:00:37ウェブアプリ、モバイルアプリ、
00:00:40さらにはスライドデッキの視覚的なモックアップを
00:00:43作成することができます。Claude Designを使うにはウェブアプリ版が必要です。
00:00:45claud.ai/designにアクセスしてください。
00:00:47Claude Codeでは利用できず、
00:00:48デスクトップアプリでも利用できません。
00:00:51制限の話が出たところで、
00:00:52真っ先に指摘しておかなければならない大きな制限があります。
00:00:54それは利用上限です。
00:00:56週ごとの制限があり、これはPro、
00:00:59Max 5、20Xといったプランに関わらず共通です。
00:01:02このツールはリソースを非常に消費します。
00:01:05特に、動画の後半で紹介する
00:01:08ある機能を使う場合は要注意です。
00:01:10それでも、そういった制限を差し引いても、
00:01:11Claude DesignはClaudeを使った
00:01:14フロントエンドデザインにおいて大きな飛躍です。
00:01:17Tweak（調整）システムを使えば、変更が
00:01:20ウェブアプリ全体の雰囲気にどう影響するか
00:01:23一目で確認できます。
00:01:23Edit（編集）機能を使えば、テキストプロンプトに頼ることなく、
00:01:28非常に細かな部分を
00:01:30手早く変更できます。
00:01:31もしコメントシステムに慣れているなら、
00:01:33それも使えます。
00:01:34実際にコメントボタンがあり、
00:01:35ウェブアプリの個々の部分を選択して、
00:01:39Claude Codeに直接指示を送ったり、
00:01:42チームメンバーのコメントキューに追加したりして、
00:01:46非常に協力的な開発が可能です。
00:01:48デザインを他の人と共有して、
00:01:50離れた場所にいても同じものに取り組めます。
00:01:53アプリ上に描画して、変更したい箇所を示すこともできます。
00:01:56プレゼンテーションをフルスクリーンで見るのも簡単です。
00:02:00そして何より重要なのが、
00:02:02Claude Codeへのエクスポートが非常に容易な点です。
00:02:05このビジュアル先行のデザイン環境によって、
00:02:09望み通りのフロントエンド出力を得ることが、
00:02:11Claude Code内だけに閉じこもって、
00:02:13開発サーバーを何度も更新するような、
00:02:18これまで長年行ってきた手法よりも遥かに簡単になります。
00:02:19ですが、このツールを最大限に活用するには、
00:02:21いくつか知っておくべきことがあります。
00:02:22まずは多くの人が求めている、
00:02:25ウェブアプリのフロントエンドデザイン作業から始めましょう。
00:02:29Claude Codeならどんな出力になったか、
00:02:33Claude Designと比較して、
00:02:34何が得られるのか、
00:02:37そして価値があるのかを見極めていきます。
00:02:38その前に、スポンサーである私からのお知らせです。
00:02:42先日、「Chase AI Plus」で
00:02:44「Claude Codeマスタークラス」をリリースしました。
00:02:45これは、技術的背景がない方でも、
00:02:48ゼロからAI開発者を目指すための最高のルートです。
00:02:51最近は、マスタークラス内で
00:02:54「エージェント型OSシステム」に注力しています。
00:02:55Claude Codeをエンジンとして使い、
00:02:58Obsidianをメモリとして、
00:03:00GWSを使ってGoogleスイート全体を連携させます。
00:03:03この基盤の上に、
00:03:05目的に合わせてカスタマイズしたスキルパックを
00:03:09自由に追加していくことができます。
00:03:12これらすべてをパッケージ化して、
00:03:14クライアントに販売する方法まで解説しています。
00:03:15もし興味があれば、
00:03:17ぜひチェックしてみてください。
00:03:18「Chase AI Plus」の中にあります。
00:03:19ピン留めされたコメントにリンクを貼っておきます。
00:03:21では、Claude Designとウェブアプリの話に戻りましょう。
00:03:24プロンプトを打ち始める前に、
00:03:26いくつか決めておくべきことがあります。
00:03:28この動画では画面をあちこち切り替えますので、
00:03:31ついてきてください。
00:03:32最初の自問自答すべき質問は、
00:03:35「デザインシステムを使うかどうか」です。
00:03:38私の画面では「なし」と
00:03:40「Agentic OSデザインシステム」が表示されています。
00:03:42最初は「なし」になっているはずです。
00:03:44デザインシステムを作成したい場合は、
00:03:47上部の
00:03:48デザインシステムへ移動します。
00:03:50おそらく何も表示されていないので、
00:03:52作成ボタンを押してください。
00:03:53デザインシステムとは何か？
00:03:56簡単に言うと、今後作成するあらゆるプロジェクトに
00:04:00適用できる視覚的なテンプレートのようなものです。
00:04:03特定のフォントやロゴ、
00:04:07あるいは全体的なムードなど、
00:04:10共通のデザイン要素がある場合に、
00:04:11ここで設定しておけます。
00:04:12プロジェクトごとに何度も設定を
00:04:13繰り返す必要はありません。
00:04:15視覚的観点において
00:04:17統一感を出したい場合に非常に有効です。
00:04:20会社名を入力して、
00:04:21例となる資産を提供します。
00:04:23例としてコードを使うことも可能です。
00:04:25GitHubのリポジトリをリンクしたり、
00:04:27フォルダをドラッグ＆ドロップしたり、
00:04:29ファイルをアップロードすることもできます。
00:04:30フォントやその他の資産も追加可能です。
00:04:33ここでブランドの定義を行うのです。
00:04:36ただし、注意点があります。
00:04:39先ほどリソースを食うと言ったのはこのことです。
00:04:42リソースを食うというのは、デザインシステムを動かすと
00:04:45A. すべてのデータを読み込むのに5分から15分ほどかかる（サイズ次第ですが）
00:04:47ということです。
00:04:50そしてB. 最初の段階で週の利用枠の約20%から25%を
00:04:55消費してしまいます。
00:04:56ですから、最初に
00:04:575つも6つもデザインシステムを作ろうなんて考えないでください。
00:04:58絶対にやめておきましょう。
00:05:00絶対にです。
00:05:02やりたいことが明確な場合に1つだけ作り、
00:05:05セットアップがどのようなものかを
00:05:07ここでお見せします。
00:05:08それ以上は作らないでください。
00:05:09将来的に制限が緩和されるまでは、
00:05:11今はまだその時ではありません。
00:05:12本当にリソースを食うので、
00:05:16無駄遣いして痛い目を見ないようにしてください。
00:05:17もし作成したい場合は、
00:05:19必要な情報をすべて入力して、
00:05:20「生成へ進む」を押せば、
00:05:21「5分から15分ほどかかります」という
00:05:24ポップアップボックスが表示されます。
00:05:26すべての資産の取り込みが完了すると、
00:05:29このように
00:05:30ドラフトデザインシステムの確認を求める画面が
00:05:33表示されます。
00:05:34私が読み込ませたのは、先ほど見せた
00:05:38Agentic OSダッシュボードのコードです。
00:05:40Claudeのカラーテーマを使っています。
00:05:43特定のフォントやデザインを採用しています。
00:05:45私が読み込ませたのは
00:05:46このようなビジュアルイメージです。
00:05:48そして、これが生成された結果です。
00:05:49見た目はいいですね。
00:05:53とても良いです。
00:05:53見てください、このマスコット。
00:05:54どこかで見覚えがありませんか？
00:05:55なかなか良い仕上がりです。
00:05:57カラーパレットもすべて網羅しています。
00:05:59細かな部分まで作り込まれていて、
00:06:03どの色を使うか、
00:06:06カードの見た目をどうするか、
00:06:07非常に具体的です。
00:06:08本当に素晴らしい。
00:06:09Stitchを彷彿とさせますね。
00:06:11まさにそのような感じです。
00:06:14私はすべて承認しました。
00:06:16ブランドフォントが不足していると表示されていますね。
00:06:17もし常に使いたい特定のフォントがあるなら、
00:06:20それもアップロードできます。
00:06:21いつでもここに戻ってきて、
00:06:23コンポーネントごとの詳細を確認したり、
00:06:26必要に応じて編集したりできます。
00:06:30この後、実際のランディングページやスライドデッキで
00:06:31お見せするように、
00:06:33これをチームと共有したり、
00:06:36エクスポートしたりもできます。
00:06:39PowerPointやPDF、Canva、HTML、
00:06:42Claude Codeなどへ、ワンクリックで送れます。
00:06:44実際のデザインファイルも手に入ります。
00:06:46中を確認して、何が起きているのか、
00:06:50実際のHTMLファイルの中身まで見ることができます。
00:06:52カスタマイズできる範囲は非常に広いです。
00:06:55「Claude Designがうまくやってくれていることを願うしかない」といった、
00:06:57ブラックボックスではありません。
00:06:59裏側で何が起きているか誰にもわからない、ということはありません。
00:07:01すべて見通せます。
00:07:03すべてコードなのです。
00:07:04AIによるコード生成として非常に優れており、
00:07:06いつでも手元のローカルマシンに
00:07:09そのコードを持っていくことができます。
00:07:10ここに縛られることはありません。
00:07:11Claude Designとウェブアプリの話に戻ると、
00:07:13これが最初に取り組むべき質問です。
00:07:15デザインシステムを使うか？
00:07:16これは過去に行ったものと同じ視覚的な流れに沿うものか？
00:07:18そして何より重要なこととして、
00:07:19そもそもデザインシステムを作成したか？
00:07:20週のトークン利用枠の20%を
00:07:22Anthropicに捧げてまで、この機能を使う準備ができているか？
00:07:25Anthropicの神々に週のトークンの20%を捧げて、すでにその選択肢を持っていますか？
00:07:28今回のデモでは、「なし」のまま進めます。
00:07:30皆と同じ認識で進めたいですからね。
00:07:32次の疑問は、「さて、
00:07:33ワイヤーフレームにするか、高精細にするか？」という点です。
00:07:37おそらく高精細（ハイファイ）でやりたいと思うでしょう。
00:07:39実際にどんな見た目になるかを確認できるからです。
00:07:41でも、繰り返しますが、もしワイヤーフレームでやりたければ、
00:07:43いつでも行き来できます。
00:07:44どちらか一方でなければならない、ということはありません。
00:07:45ですが、ここでは高精細で行きます。
00:07:47そこで、これを「CD demo」と名付けて作成します。
00:07:50次にここへ移動して、コンテキスト（背景情報）を求められます。
00:07:53デザインシステムやスクリーンショットがあるか、
00:07:56あるいはコードベースやFigmaファイルがあるか、ということです。
00:07:58いずれにせよ、ゼロから始める場合でも、
00:08:01あるいは既存のコードベースがある場合でも、
00:08:03理想を言えば、何らかの情報を読み込ませるべきです。
00:08:05前述の通りコードベースがあるなら、
00:08:07すでに作業中のアプリがあるはずなので、それを渡してください。
00:08:09Clod Designに渡すのです。
00:08:10その方がうまく動作します。
00:08:12しかし、そうではなくゼロから始める場合でも、
00:08:14少なくとも最低限、
00:08:16世の中に出ているものから、
00:08:18自分が気に入ったインスピレーションを見つけてくることを強くお勧めします。
00:08:20Dribbbleでも、Awwwardsでも、Godly Websitesでも、何でもいいです。
00:08:23何でもいいんですよ。
00:08:25真っ白な状態から始めて、Clod Designに
00:08:27すべての面倒な作業を期待するなんて、
00:08:28あなたのプロンプトがひどいものになるのは目に見えていますから。
00:08:30コンテキスト（情報）を減らすほど、
00:08:33平均への回帰が起こる可能性が高まるということを理解してください。
00:08:35そのつもりで臨んでください。
00:08:36スケッチ機能があります。
00:08:38つまり、実際にここに描くことができるんです。
00:08:40「よし、ここに画像を置いて、
00:08:44こっちにテキストを配置して、
00:08:48そしてここにヒーロー画像を、
00:08:53ヒーロー画像を配置する」といった感じで。
00:08:59そして、スクロールバナーを作りましょう。
00:09:10何かを与えてみましょう。
00:09:12たとえ、このような素晴らしい芸術作品であったとしても。
00:09:15そして、単にそれ以上のこともできます。
00:09:16ペンを切り替えることもできます。
00:09:18テキストを入れることもできます。
00:09:19付箋を追加したり、いろいろなことができます。
00:09:21ここにはやれることがたくさんあります。
00:09:25そしてここから、AIにプロンプトを送るだけです。
00:09:28モデルを切り替えることもできます。
00:09:30Opus 4.7をお勧めします。
00:09:33なぜなら、スクリーンショットのようなものを追加する場合、
00:09:35Opus 4.7は最高の忠実度を持ち、
00:09:37スクリーンショットに対して最高の解像度を持っているからです。
00:09:40Opus 4.6で得られるものの3倍です。
00:09:42では、プロンプトを与えてみましょう。
00:09:44「Argusのためのランディングページを作成する」と伝えます。
00:09:46これはソーシャルメディアのインテリジェンスプラットフォームで、
00:09:48クリエイターがトレンドになるトピックを、
00:09:49爆発的に流行る前に自分のニッチで見つけられるよう支援するものです。
00:09:51それがレイアウトです。ここに書いたものと、
00:09:53ほとんど同じものを反映しています。
00:09:55これ以上ないほど単純なプロンプトです。
00:09:58基本的なSaaSサイトのようなものです。
00:10:00では、どんなものが出来上がるか見てみましょう。
00:10:02これがClaw Designが作成したものです。
00:10:03非常に最小限のプロンプトで、ページに走り書きした
00:10:06以外のコンテキストはありません。
00:10:08そして、これが完成しました。最初の試作としては悪くないと思います。
00:10:13使用量については、4%という警告が出ました。
00:10:16このランディングページを生成するのに、
00:10:18週間の全使用量の4%を消費しました。
00:10:20そしてこれが、全く同じプロンプトを使用して、
00:10:21フロントエンドデザインスキルを使って
00:10:22Claude Codeが提供してくれたものです。
00:10:25悪くありません。
00:10:26もちろん、すぐに指摘できる細かい点はあります。
00:10:28たとえば、テキストがここで切れているといった点です。
00:10:32これに関しては、それほど間違いはありません。
00:10:35テキストがここで少し重なっています。
00:10:39ここには「rising now」と表示されていますが、
00:10:41それも少し重なっていますね。ですが、かなり近いです。
00:10:45正直なところ、
00:10:46デザインに関しては、少しこちらの方が好きですね。
00:10:47ですが、他の人がこちらのデザインを少し
00:10:49気に入るということも十分にあり得ます。
00:10:50つまり、最初の段階では大きな違いはありません。
00:10:52では、なぜClaw Designを使うのでしょうか？
00:10:54どこが優れているのでしょうか？
00:10:55それは、バリエーションや
00:10:56反復（イテレーション）の能力について
00:10:59語り始めた時に、その強みが発揮されます。
00:11:00微調整を行うことで、それがすぐにわかります。
00:11:03私にとって、これができるというのは大きなことです。
00:11:07見出しを非常に素早く変更したり、
00:11:10ティッカー（銘柄情報のようなもの）を確認したりできます。
00:11:13これをさらに拡張することもできます。
00:11:16そこで「微調整の量を積極的に増やせ」と書きました。
00:11:18できる限りこれを使って遊びたいからです。
00:11:20では、何が返ってくるか見てみましょう。
00:11:22よし、これで微調整できる箇所がずっと増えたのが分かりますね。
00:11:26いじれる部分が増えました。
00:11:27使用率はどうなったでしょうか？
00:11:30これらすべての微調整を追加したことで、7%増えました。
00:11:32ご覧の通り、ランディングページを追加して、
00:11:3614箇所の微調整を行っただけで、すでに、
00:11:39全体のおよそ11%を消費してしまいました。
00:11:40今、微調整は重要だと言いました。
00:11:43冒頭で話しましたが、
00:11:44Claw Designにおいて実際に注目したい
00:11:47機能は何でしょうか？
00:11:48一度だけの生成（ワンショット）では、
00:11:49フロントエンドデザインスキルで得たものと、
00:11:51それほど劇的には変わらなかったからです。
00:11:52しかし、こうした微調整や、
00:11:55これらすべてを素早くいじることができる能力、
00:11:59そう、これこそが本当にClaw Designのパワーなのです。
00:12:02少しズームアウトしますね。
00:12:03そうすれば微調整が実際に機能している様子がよく見えます。
00:12:05カラーパレットからアクセント、
00:12:10角の丸み（コーナー半径）、背景グリッドの有無、
00:12:14フォント、強調の仕方、見出しの違い、レイアウトの切り替え、すべて可能です。
00:12:19これがパワーなのです。
00:12:21強みは「一瞬でUIデザインを作成できる」とか、
00:12:23「いきなり完璧なUIができる」といったことではありません。
00:12:25そうではなく、実際に非常に素早く反復できるということです。
00:12:29非常に素早く。どれだけ私が速くやっているか、
00:12:33そしてClaude Codeでこれらすべてを
00:12:34実行するのにどれだけ時間がかかるか考えてみてください。
00:12:36さらに、この画像の中で
00:12:39どのソーシャルメディア的な要素を見ているか、
00:12:41そのニッチな分野をAI技術からゲーム、金融まで変更することさえできます。
00:12:46ティッカーの速度を調整できるのはありがたいですね。
00:12:47速すぎて飛ぶようだったので。ええ、これは素晴らしいです。
00:12:52これがパート1です。いくつかポイントがあると思います。
00:12:54まあ、実際にはもっとありますが、
00:12:56微調整こそがDesignから得られる最大の価値だと思います。
00:12:59視覚的な反復がすべてですから。
00:13:01そして私の考えでは、Claw Designの
00:13:042番目にインパクトのある機能は、ウェブページのバリエーションです。
00:13:07微調整は非常にミクロな話ですよね？
00:13:09色やアクセント、
00:13:11フォントの話をしていますが、ランディングページ全体の
00:13:14バリエーションが欲しい場合はどうでしょう。大胆にやってみましょう。
00:13:18フォントが違うという話ではありません。
00:13:19全く異なるデザインのページで、
00:13:21それらが積み重なっている状態を確認したいのです。
00:13:23Stitchでできるのと同じように、
00:13:25これができるようにしたいのです。
00:13:26それならClaude Design内で本当に簡単に
00:13:28できます。
00:13:29まさにそれをやるようにプロンプトを送るだけです。
00:13:32そこで、デザインに対して次のようにプロンプトを出しました。
00:13:33「このランディングページのバリエーションをあと2つ作って」
00:13:36「クリックして切り替えられる、全く異なるスタイルのものにして」
00:13:39「まずは異なるバリエーションのスタイルを提案して」と。
00:13:42そうしたら、6つの異なるオプションが返ってきました。
00:13:44ターミナル、Bloombergターミナルスタイル、
00:13:48ハイパーマキシマル、エディトリアル、ブルータリスト、シンセウェーブ、ソフトパステル、
00:13:53あるいは印刷新聞風などができます。
00:13:56よし、1と2のような感じでいきましょう。
00:13:59なので、「1と2でやって」と伝えます。
00:14:03もちろん、現在のレイアウトも保持したままです。
00:14:08Claude Designがバリエーションの作成を終えました。
00:14:10こちらがエディトリアル版、私たちが始めたものです。
00:14:13次にターミナルのオプションがあります。
00:14:18さらにエディトリアル・マキシマル・オプションもあります。
00:14:21これはこれで興味深く、また違った良さがあります。
00:14:24しかし、指示しない限り、
00:14:25元のデザインに対する微調整しか行われません。
00:14:28ですので、こうしたバリエーションを作る時は、
00:14:30一般的なワークフローとしては、
00:14:33まずバリエーションから始めるべきだと思います。
00:14:35マクロレベルで、よし、この方向性で行こう、と考えるのです。
00:14:37そして、これらのマクロの中から一つを選んだら、
00:14:39気に入ったものを維持することにして、
00:14:42それから非常にアグレッシブな微調整段階に進みます。
00:14:44そうすればすべてを確認できて、
00:14:47自分の望むものを細部まで追求できます。
00:14:49なぜなら、現在の使用量の設定のままだと、
00:14:51マクロなレベルで、「選択肢は3つじゃ足りない」
00:14:54「4つ、5つとバリエーションが欲しい、それにすべてに微調整も欲しい」などと言うと、
00:14:56あっという間に使用量を使い果たしてしまいます。
00:14:57これら2つのバリエーション、「マキシマル」と「ターミナル」
00:15:00を追加しただけで、5%余分に消費しました。
00:15:02つまり、これだけで合計17%になりました。
00:15:04ランディングページ、その2つのバリエーション、プラス微調整。
00:15:05繰り返し使用量の話をしますが、
00:15:07多くの人にとって、これは大きな問題であり、
00:15:11そうあるべきです。
00:15:13そのうち、この使用量の仕組みも
00:15:14変わっていくでしょうが、覚えておいてください。
00:15:16この2つの要素を並行して使うことで、
00:15:17「バリエーションと微調整」ですね。
00:15:18それによって、80%、90%の解決策に到達できるのです。
00:15:19さらに深く集中することも可能です。
00:15:20最初に見せたように、上に上がって
00:15:23編集を行うこともできます。
00:15:26上部のヘッダーをクリックして、
00:15:31透明度、幅、色など、すべてを変更できるのです。
00:15:35最初に見せたように、ここまで戻ることができます。
00:15:37編集ができるんです。
00:15:39例えばこのトップヘッダーをクリックして、
00:15:42不透明度を変えたり、
00:15:43幅や色など、あらゆるものを変更できます。
00:15:45必要であれば、非常に細かく指定することも可能です。
00:15:47しかし本当のパワーは、90%の完成度を目指すことにあります。
00:15:50「よし、最初の編集案がいいな」となって、
00:15:54「このマークを強調しているのがいい」とか、
00:15:55「あのリングはひどいな、やっぱりマークにしよう」とか、
00:15:59この小見出しや見出しがいい、といった感じで、
00:16:04「よし、これで行こう」と決めるんです。
00:16:05調整が済んだら、
00:16:06次はランディングページの残りの部分を完成させましょう。
00:16:09これはまだヒーローセクションだけですから。
00:16:11そして、これをClaude Codeにエクスポートします。
00:16:14Claude Codeに引き渡すんです。
00:16:15ここをクリックすると、いくつかの選択肢が出てきます。
00:16:17ZIPをダウンロードするか、コマンドをコピーして
00:16:20Claude Code内に持っていくことができます。
00:16:22このワークフローは、
00:16:25全く同じプロンプトを入力してClaude Codeが生成したものを
00:16:28その場で修正するよりも、圧倒的に速いと思います。
00:16:29例えば「Claude Code、色をいじって」とか、
00:16:32「色を変えてみよう」と言ったり、
00:16:35「いくつかバリエーションを作って」とか、
00:16:36「見出しを変えていくつかパターンを出して」と指示するのは、
00:16:39何時間もかかりますが、この方法なら数分です。
00:16:44少なくとも私の場合、実際に見てみないと、
00:16:47そして色々な選択肢を見てみないと、
00:16:48自分が何を気に入るのか分からないんです。
00:16:50それに、一度何かを見れば、
00:16:53さらに変えたくなるかもしれません。
00:16:54正直なところ、これを見ていると、
00:16:54すごく縦長のレイアウトもいいな、と思ったりします。
00:16:56ここに何かアイコンを置いたりするかもしれません。
00:16:58とにかく繰り返し試行錯誤したいんです。
00:17:00色々なものを見てみたいですから。
00:17:02これがウェブアプリ開発において、私が提示できる
00:17:05最大かつ最高のベストプラクティスです。
00:17:08マクロ的に言えば、バリエーションを求めること。
00:17:11そしてミクロ的に言えば、微調整を求めることです。
00:17:13ここで一つやらなかったことがありますが、
00:17:15スライドデッキなどの作成時に詳しく説明します。
00:17:18それは「プランモード」を実行させることです。
00:17:19本来はプロンプトを入力した瞬間に生成が始まりますが、
00:17:22生成前にプランモードを有効にできます。
00:17:24それが今回の出力です。
00:17:25そうではなく、最初にこう言います。
00:17:26「プランモードでやり取りしたいんだ。」
00:17:28「私にたくさん質問してくれ。」
00:17:30すると、
00:17:325つ、8つ、あるいは10個もの
00:17:33重要な質問をしてくれます。
00:17:35「ここには何を置きたい？」
00:17:36「そこには何が必要？」
00:17:37「あそこはどうする？」といった具合です。
00:17:38そうすれば修正回数を減らせますし、
00:17:40結果的に使用量も節約できます。
00:17:42私も同じような手順を踏みました。
00:17:44エージェントOSダッシュボードの
00:17:46フロントエンドを作成した時です。
00:17:47ここに表示されているのが、
00:17:48私が最初に始めた時の状態です。
00:17:51そこから色々な選択肢を試して、
00:17:52最終的にこのコックピット型に落ち着きました。
00:17:53クールなスプライトを使った案も考えたんですけどね。
00:17:56結局、このバージョンをClaude Codeに戻して、
00:17:58余白を少し微調整して、
00:18:01実際に動くようにしました。
00:18:03これでちゃんとしたウェブアプリになったわけです。
00:18:04さて、次はClaude Designとスライドデッキです。
00:18:06ウェブアプリで学んだ基本原則の多くが
00:18:08スライドデッキにも当てはまるので、
00:18:09少しテンポよく進めます。
00:18:13なので、同じポイントを繰り返すことはしません。
00:18:16今回は、実際に動いているデザインシステムをお見せします。
00:18:17そのシステムは、先ほどのエージェントOSの
00:18:21ビジュアルに基づいています。
00:18:24では「作成」を押してみましょう。
00:18:26以前と同じ画面が出ます。
00:18:27スクリーンショット、コードベース、Figmaファイルなど、
00:18:28コンテキストを提供するように求められます。
00:18:30今回与える唯一のコンテキストは、
00:18:32あらかじめ用意されたデザインシステムだけです。
00:18:35そして、こんなプロンプトを添えます。
00:18:37「Claude DesignとGoogle Stitchの違いについての
00:18:39スライドデッキを作ってほしい。」
00:18:41別のウィンドウでClaude Codeを使ったOpus 4.7に、
00:18:45ウェブ検索をさせてプロンプトを考えさせました。
00:18:48「両者の違いはこういうことだ」とね。
00:18:53そして最後にこう付け加えました。
00:18:54「何かを作成する前に、質問があれば何でも聞いてくれ。」
00:18:55認識を合わせるためです。
00:18:57ある意味、強制的にプランモードを
00:19:01実行させているようなものです。
00:19:02このように画面に質問が表示されていきます。
00:19:05繰り返しになりますが、ウェブアプリを作る時でも
00:19:07最初のプロンプトに入れておけば、
00:19:08必ずこのプランモードが発生します。
00:19:10「このデッキは誰向け？」
00:19:12「公開トーク向けだ」としましょう。
00:19:14簡潔にまとめます。
00:19:166ページで、5分で話す想定にします。
00:19:18全5枚のスライドでいきます。
00:19:20少し主張の強いタイトルスタイル、中央配置で。
00:19:242×2のポジショニングマップだけ入れます。
00:19:28価格表は「はい」と答えて、
00:19:30残りの項目も答えていきます。
00:19:34ノートはなし。
00:19:37合計で14個もの質問をしてくれました。
00:19:39それに加えて、下の方に自由記述欄もあり、
00:19:43これは本当にありがたいです。
00:19:44Claude Codeのプランモードは、
00:19:47多くても4つずつの質問が2回程度ですから、
00:19:52これは素晴らしいですね。
00:19:56これが完成したスライドデッキです。
00:19:58フルスクリーンにしてみましょう。
00:20:00参考までに、これにかかった使用量は5%です。
00:20:03つまりスライド1枚あたり1%程度ですね。
00:20:05タイトルページと、
00:20:06Claude Designによって生成されたというフッターがあります。
00:20:07ポジショニングも表現できています。
00:20:10コストの面でどこに位置するかを示す
00:20:12グラフも作られました。
00:20:15タイトルページと、スライドの小さなフットノートを
00:20:19Claude Designが作成しました。
00:20:22数値がどこに収まるかといった内容も
00:20:26コスト面でどこに位置するかの
00:20:30グラフを表示しています。
00:20:31当然ですが、Claude Designの方が圧倒的に高コストです。
00:20:34現場報告ですね。
00:20:37そして、こんな感じで
00:20:38どの用途にどれを使うべきかを示す
00:20:40チャートも提示してくれます。
00:20:43率直に言って、このスライドはかなりかっこいいと思います。
00:20:45本当ですよ。
00:20:46それ以上に重要なのは
00:20:48デザインシステムを忠実に守っている点です。
00:20:49このデザインシステム全体が構築されたAgentic OSが
00:20:53スライドにもしっかりと反映されています。
00:20:55これら二つは同じ場所から生まれたように見えます。
00:20:59そしてWebアプリと同じように
00:21:00同じワークフローをたどることができます。
00:21:03これが最初に出力されたものですが
00:21:05マクロなバリエーションを求めてこう言えます。
00:21:07「よし、本当にデザインシステムを
00:21:09維持したままでいいのか？」
00:21:11「それとも全く違う方向に進むべきか？」
00:21:13すると、2つ、3つ、4つの異なるバリエーションが見れます。
00:21:16いいですね、一つに絞りましょう。
00:21:17では、微調整を加えて
00:21:19さらに完成度を高めていきましょう。
00:21:20スライド作成に対しても、
00:21:22このようにアプローチすべきだと思います。
00:21:23Webアプリへのアプローチと同じですね。
00:21:24参考までに、これがClaude Codeが
00:21:27作成してくれたスライドです。
00:21:29全く同じプロンプトを与えて
00:21:31同じディレクトリから作成しました。
00:21:34Agentic OSシステムの実環境ですね。
00:21:36つまり、同じデザインシステムに
00:21:38完全にアクセスできたということです。
00:21:39さらに、私に質問するように頼みましたが
00:21:427つしか質問してきませんでした。
00:21:43そして正直なところ、質問の質もそれほど高くありません。
00:21:46スライドの枚数など、
00:21:47かなり表面的な内容でした。
00:21:49デザインで見たものと比べて
00:21:51アスペクト比はどうするか、といったことでした。
00:21:52全体として、その点が
00:21:55かなり平凡な出力に反映されていると思います。
00:21:57デザイン側がくれたものと比較して
00:22:00ビジュアルスタイルがこれほど違うとは少し驚きです。
00:22:02まあ、悪くはないんですが。
00:22:05色やテキストは近いのですが、
00:22:07本音を言うと
00:22:10こっちの方が圧倒的に優れています。
00:22:12正直に言って。
00:22:13最後に、モバイルアプリのデザインについて話しましょう。
00:22:15方法は2つあります。
00:22:17一つは、最初からモバイル向けに作ること。
00:22:19Webアプリの作業はしません。
00:22:21非常にシンプルです。
00:22:22動画の冒頭で行ったWebアプリの手順を
00:22:25そのままやるだけです。
00:22:26最初からこう言います。
00:22:28「これはモバイルアプリ用だ。」
00:22:29「ビジュアルもそれを反映させてくれ。」
00:22:32しかし、Webアプリを作った後に
00:22:33それをモバイルプラットフォームに変換したい場合は
00:22:35とても簡単です。
00:22:36今のプロンプトウィンドウで続けてもいいのですが、
00:22:40「よし、次はこれをモバイルで見せてくれ」と入力します。
00:22:42同じ内容で別のプロジェクトにしたほうが
00:22:45おそらく理にかなっています。
00:22:46そうすれば、作業しているWebアプリと
00:22:48モバイル版が明確に区別されます。
00:22:51そのために、右上の
00:22:53「共有」ボタンをクリックします。
00:22:54そして「プロジェクトを複製」を押します。
00:22:57そうすると、このようなページに移動します。
00:23:00ホームページに戻ると
00:23:02「CD demo remix」があるのが確認できます。
00:23:05そのリミックスが、複製されたプロジェクトです。
00:23:08そこでプロンプトを入力します。
00:23:10「同じデザインをモバイル形式で見せてくれる？」
00:23:13すると、提示してくれたモバイル版がこれです。
00:23:153つすべてについてバリエーションを作ってくれました。
00:23:18指定はしていませんでしたが、やってくれました。
00:23:19つまり、合計9つのモックアップを
00:23:21コスト使用率5%で作成できたことになります。
00:23:25いつも通りのフローですね。
00:23:27ここにマクロな案を出してくれました。
00:23:29Webアプリで決めたのと同じものを
00:23:30選ぶのが賢明でしょう。
00:23:32そしてそこから、こう言います。
00:23:34「編集用の案を気に入った。」
00:23:36「完成度を高めるために微調整案を出してくれ。」
00:23:38ですが本当のところ、
00:23:39Webアプリ版ですべて設定を済ませていれば
00:23:42微調整もすでに終わっているはずです。
00:23:44ですから、この時点で
00:23:47変更が必要なことはほとんどないはずです。
00:23:48とはいえ、
00:23:51標準的なWebアプリからモバイルデザインに移行すると
00:23:53必ず多少の問題は出てきます。
00:23:55でもご覧の通り、とても簡単です。
00:23:57たった一つのプロンプトですから。
00:23:58というわけで、今回はここまでです。
00:23:59Claude DesignとClaude Codeの違いを
00:24:02明確にできていれば幸いです。
00:24:04特に、Claude Designで
00:24:06本当に価値を生む機能である
00:24:09微調整とバリエーションについて強調しました。
00:24:11これらがもたらすのは、まさにイテレーションのスピードです。
00:24:15自分が納得できるものにたどり着くまで
00:24:17作ろうとしているもののバージョンを
00:24:19何度も試すことができます。
00:24:21そして納得したら、
00:24:22Claude Codeのエコシステムに取り込むのです。
00:24:25作成や反復のたびに失われた割合を示すことで、
00:24:27使用コストについても
00:24:31少しは明確にできたと思います。
00:24:33いつものように、感想を聞かせてください。
00:24:35今後もClaude Designの情報を発信していくので
00:24:38ぜひチェックしてください。本当に素晴らしいツールですから。
00:24:40Claude Codeマスタークラスに参加したい方は
00:24:42ぜひChase AI+をチェックしてみてください。
00:24:45では、またお会いしましょう。