스크립트
00:00:00Claude Codeに、フロントエンドデザイン機能としては久しぶりとなる最大規模のアップデートが新機能「Slash Design」とともに実装されました。
00:00:07このSlash Designスキルは、ここにあるスタンドアロンのClaude Designウェブアプリの優れた点をそのままClaude Codeに持ち込むものです。
00:00:162つのアプリの間を行き来したり、Claude DesignからClaude Codeへデザインを面倒な手順で移行したりする必要がなくなり、両方の長所を良いとこ取りできるようになりました。
00:00:25さらに、Claude Codeの内部ですでに使っている既存のスキルすべての機能も合わせて活用できます。
00:00:30そのため、この新しいSlash Design機能を「Impeccable」や「Taste」といったスキルと組み合わせることで、はるかに優れた出力を得ることができます。
00:00:36そこで本日は、Slash Designの仕組みをご紹介するだけでなく、これを最大限に活用するための最適なワークフローもお伝えします。
00:00:42Claude Codeでフロントエンドのデザイン作業を行う方なら、ぜひ最後までご覧いただきたい内容です。
00:00:46さて、Slash Designスキルの最大の売りは、まさに今ご覧いただいているこちらの画面です。
00:00:49現在私はClaudeデスクトップアプリを使用していますが、ターミナルを使用している場合も同様です。
00:00:53「/design」と入力して何かを作成するよう指示すると、Claude Designウェブアプリに非常によく似たアートボードが生成されるという仕組みです。
00:01:02複数の選択肢の中から選ぶことができ、それぞれのオプションを確認しながら、変更を加える部分を非常に細かく調整できます。
00:01:09右側に表示されている通り、作成されたフロントエンドデザインのさまざまなコンポーネントをクリックすれば、ほとんどの要素を自由に変更可能です。
00:01:17それに加えて、同じような出力のバリエーションを簡単に複数要求することができ、特定のバージョンが気に入ったら、Claude Codeに実際にコーディング作業を行わせることができます。
00:01:27これにより、Claude Designのウェブアプリを開いて作業を完結させ、それを転送すると言ってZIPにまとめ、フォルダにドロップしてClaude Codeに読み込ませるという、あの面倒な手間が一切不要になり、大幅な時間の節約になります。
00:01:38単なる利便性だけでなく、先ほどお話ししたように、スキルの組み合わせ（スタック）が可能になったという大きなメリットがあります。
00:01:43Claude Designウェブアプリの中にいる状態では、「Impeccable」や「Taste」といったスキルを必ずしも呼び出して使うことはできません。
00:01:49しかし、ここならそれが可能です。
00:01:50そのため、最終的な出力の品質が格段に向上し、利便性もさらに高まります。
00:01:54デザインスキルの使い方はとても簡単です。
00:01:56「/design」と入力し、その後に作成したい内容をプロンプトで指示するだけです。
00:02:01例えば、新しいSlash Design機能の機能を詳しく紹介する、ソーシャルメディアの投稿（インスタグラムの投稿のようなもの）を作成したいとしましょう。
00:02:10そして、これを全く異なる3つのデザインスタイルで3つのバリエーションとして作成し、さらに「Impeccable」スキルを使いたいとします。
00:02:19マイクをオンにして、まさにそのように話しかければOKです。
00:02:22ソーシャルメディアの投稿用モックアップを作成できますか？
00:02:27新しいClaude CodeのSlash Designスキルが何ができるのかを詳細に説明する、インスタグラムの投稿のようなものをイメージしてください。
00:02:34極めて異なる3つのバリエーション、つまりデザインスタイルも美意識の方向性も全く異なるものを作りたいです。
00:02:41そして作成の際は、「Impeccable」スキルを呼び出してサポートさせてください。
00:02:45Claudeのデスクトップアプリ内で全く同じスキルを実行すると、このようなサイドパネルの中に表示されます。すべてが1つの場所にまとまっているため、デスクトップアプリで行うのが好きな理由の1つです。
00:02:57ターミナルの中では、アーティファクトとして作成されるため、実質的にブラウザで開くことになります。
00:03:02デスクトップアプリほど便利ではないものの、それでも作業を行うのはかなり簡単です。
00:03:06さて、アーティファクトを見る前に、本日のスポンサーである私からの簡単なお知らせです。
00:03:10私が提供している「Claude Code Masterclass」のアップデート版をリリースしました。特に非テック系出身の方が、ゼロからAI開発者へと成長するための最高の手段となっています。
00:03:19実際のユースケースや実践的な事例に焦点を当てており、毎週内容をアップデートしています。
00:03:24このとんでもないツールを実際にどう使いこなせばいいのか頭を悩ませている方にとって、まさにうってつけの内容です。
00:03:32固定コメントにリンクが貼ってあります。
00:03:33そしてこれが、作成されたアーティファクトの様子です。
00:03:35デスクトップアプリ内で見たのと同じように、インスタグラム投稿向けに3つの異なるデザインスタイルが用意されています。
00:03:37右側にはこのようにプロパティバーがあります。
00:03:44ズームインして特定の要素をクリックすれば、自分が調整している箇所についてより詳細な設定を確認できるようになります。
00:03:46また、右上には「tweaks（調整）」セクションがあるのにお気づきかと思いますが、現時点ではここは空っぽです。
00:03:52Claude Designウェブアプリで目にするような調整パネルを表示するよう、いつでもClaude Codeにプロンプトで指示することができます。
00:03:57これにより、ここに表示されている以上に多くの項目を調整することが可能です。
00:04:03実際にこのツールを使うという観点から見ても、比較的シンプルです。
00:04:07「/design」と入力して、望むものを尋ねるだけです。
00:04:10では、実際のワークフローはどのような形にすべきでしょうか？
00:04:12どうすればこれを最大限に活用できるのでしょうか？
00:04:14Claude Codeでフロントエンドのデザインを行う際には、毎回必ず実践すべきシンプルな3ステップのワークフローがあります。
00:04:16その最初のステップは「インスピレーション（ひらめき）」です。Claudeに渡すのは「適当に3つ違うものを作って」という指示だけでは不十分だからです。
00:04:22理想を言えば、Claude Codeには具体的なサンプルをいくつか与えたいところです。
00:04:30気に入ったポスターのスクリーンショットを撮ります。
00:04:33自分が好むデザインスタイルのスクリーンショットを撮影します。
00:04:35それらをClaude Codeに読み込ませ、「これと同じようなテイストのものを作ってくれないか？」と頼むのです。
00:04:39今回はポスターを例に作業していますが、これはランディングページやヒーローセクションなどを作成する場合でも同様に適用できます。
00:04:43さて、次に浮かぶ疑問は「インスピレーションはどこで見つければいいのか？」ということでしょう。
00:04:50幸いにも、アイデアを得られる場所はたくさんあります。
00:04:52おすすめのウェブサイトの1つがPinterestです。
00:04:55「Instagram インフォグラフィック」と検索するだけで、多くのデザイン候補が見つかります。
00:04:57もう1つのおすすめは「Landbook」で、ウェブデザインやヒーローセクションに非常に適しています。
00:05:01さらに「Dribbble」もあります（Bが3つのDribbbleです）。
00:05:06要するに、実際に外に出て、何かをデザインしたいときにいつでも参照してClaude Codeに持ち込めるような、自分なりのデザインライブラリを作り始めることが大切だということです。
00:05:11そうすれば、このインスピレーション集めのプロセスを毎回繰り返す必要がなくなります。
00:05:21それでは、私が気に入ったデザインのスクリーンショットをいくつか撮影します。
00:05:24このデザインはなかなか良さそうです。
00:05:27これも非常に面白味のある見た目をしていると思います。
00:05:29忘れないでいただきたいのは、Claudeに抽出してほしい一般的な美意識の方向性をざっくりと提示しているだけだということです。
00:05:31そして、こちらのデザインもかなり興味深い仕上がりだと思います。
00:05:36それでは、先ほど撮影した3つのスクリーンショットをプロンプトウィンドウにドロップします。
00:05:39そして、先ほどと同じようなプロンプトを基本的に与えます。「例のインスタグラムの投稿のようなものを作りたい」と。
00:05:43異なるバージョンを3つ作成してほしいと伝えます。
00:05:48ただし今回は、「これらのスクリーンショットを参照してほしい」と付け加えます。
00:05:49これらをインスピレーション源として活用してほしいのです。
00:05:52それぞれのスクリーンショットに応じて、異なったデザインを生成させることができます。
00:05:54さらに、「Impeccableスキルを必ず使用するように」とも伝えます。
00:05:59また、外部のアセットを生成したい場合は、私が持っているHiggs field MCPのようなツールを使用するように指示します。
00:06:02他の画像生成ツール用として、file.aiのような別のサービスを使っても構いません。
00:06:09要するに、私たちは今Claude Codeの中にいるため、このデザインプロセスの中に自分が必要なものを何でも取り込むことができるということです。
00:06:14もちろん、望まなければ外部の画像を使用する必要は必ずしもありません。
00:06:19ですが、私のプロンプトはこのような内容になります。
00:06:23それでは、先ほど完了した3つの投稿を実際に再作成してみましょう。
00:06:25ここでもスラッシュデザインスキルを使用しています。
00:06:29ただし、今回はここに3つのスクリーンショットをドロップしました。
00:06:31そして、デザインプロセスのインスピレーションとしてそれらを利用したいと考えています。
00:06:33ですので、新しく3つの生成を行いたいのです。
00:06:37これら適切なスクリーンショットのそれぞれから要素を引っ張ってきた生成物を1つずつ作ってください。
00:06:39繰り返しになりますが、Impeccableデザインスキルを使用してください。
00:06:43そして、Higgs field MCPへのアクセス権があることも忘れないでください。
00:06:45そのため、ポスター用に利用できる外部アセットを生成する必要があると感じた場合は、それも実行してください。
00:06:48そのあたりはあなたの裁量にお任せします。
00:06:55これが、このプロセスの実質的なステップ1とステップ2になります。
00:06:56ステップ1は、インスピレーションを見つけること。
00:06:59そしてステップ2は、Claude Designウェブアプリの中だけでは到底使えない追加スキルを実際に活用することです。
00:07:00もし「あなたがしきりに言っているImpeccableとは一体何なのか分からない」と思われている方がいたら補足します。
00:07:08これは、Claude Codeに追加できるオープンソースの無料スキルのひとつです。
00:07:11その主眼はすべてフロントエンドデザインにあります。
00:07:16本質的に、AI特有の安っぽさ（AIスロップ）がどのような見た目かを見抜き、それを排除した上で、作成しているものにより優れたデザイン原則を落とし込んでくれるというものです。
00:07:18その点についてより深く知りたい場合は、Impeccableを最も効果的に活用する方法を徹底解説した動画を用意しています。
00:07:26さて、ここからはClaudeがSlash Designを用いて作成した新しいポスターの数々を見ていきましょう。
00:07:31ご覧の通り、私たちが与えたインスピレーションがしっかりと反映されているのが分かります。
00:07:35そして以前と同様、どのタイミングでもここにズームインすることができます。
00:07:39プロパティを確認しながら、様々な要素を編集していくことが可能です。
00:07:43それでは、調整（tweaks）についてお話ししましょう。
00:07:46現時点では、このデザインにはまだ調整可能なコントロールがありません。
00:07:49調整したい内容を記述すれば、Claudeがそれ用の調整パネルを追加してくれます。
00:07:50それではそれをやってみましょう。いよいよプロセスのステップ3に入り、自分が気に入るまで細部を微調整していきたい段階だからです。
00:07:53そこで私がすることは、ターミナルを開いて「ねえ、ここでいくつか調整可能なコントロールを追加してもらえるかい？」と伝えることです。
00:08:00調整はかなりアグレッシブに行えるようにしたいです。
00:08:10Claude Design内の調整パネルを使って、ほとんど何でも、可能な限り多くの要素を自分で編集できるようにしたいのです。
00:08:12ご覧のように、右側にこの調整用パーツが表示されるようになりました。
00:08:21今見ているのは、真ん中にあるこちらです。
00:08:24用紙の色を変更することができますよね？
00:08:25ここでは何をしましょうか？
00:08:29ここでは何をしましょう？
00:08:30こうした調整機能はアイデアの源にもなります。
00:08:33いつでもClaude Codeに戻って、プロンプトでさまざまな変更を加えることが可能です。
00:08:39ビジュアルで確認できることの最大のメリットは、Claude Codeにプロンプトを送り、生成を待ち、気に入るか確認するという工程を何度も繰り返さずに済む点です。
00:08:52これによって全体的のプロセスが大幅にスピードアップします。
00:08:55このようにテキストの見た目を変更することもできます。
00:08:58実際のサイズ、太さ、行間などを自由に変えられます。
00:09:03ここに見えているすべての要素が編集可能です。
00:09:06さらに、大きな変更を加えることも忘れないでください。
00:09:082番目のデザインの全体的な見た目が気に入らない場合も対応できます。
00:09:12もちろん可能です。
00:09:13例えば、「実際のコンテンツが気に入らないので変更したい」とプロンプトで指示できます。
00:09:17スラッシュデザインの機能をユーザーに分かりやすく説明する内容にしたいのです。
00:09:21そこで、2番目のデザインをベースにしつつ進めたいと伝えます。
00:09:26ただ、正直なところコンテンツは少し変更したいと思っています。
00:09:29繰り返しになりますが、スラッシュデザインの利点を説明するインフォグラフィックを目指しています。
00:09:34そのため、再作成する際は他の2つは無視して構いません。
00:09:36今はその1つだけに集中したいのです。
00:09:38ウェブ検索を行ってスラッシュデザインの実際の利点をしっかりと理解し、このインフォグラフィックの新バージョンに反映させてください。
00:09:48こちらがそのポスターのアップデート版です。
00:09:49ご覧のとおり、新しいスラッシュデザインの機能に関する情報がさらに充実しています。
00:09:53そしてこの新しいスラッシュデザインのスキルを使っているため、編集が非常に簡単です。
00:09:56「ここのテキストはあまり好みではないな」
00:09:59と思ったら、好きな場所に移動できます。
00:10:00テキストそのものを調整することも可能です。
00:10:03ここからは、「インスピレーションを得る」「適切なスキルを使う」「気に入ったデザインをブラッシュアップする」という3つのステップを続けるだけです。
00:10:11真ん中のデザインを採用したい場合は、Claude Codeに「中央のものだけで作業したい」と伝えます。
00:10:16そして、納得がいくまで何度も繰り返して調整していきます。
00:10:20その後は自由にお使いいただけます。
00:10:22全体像として、このスラッシュデザインスキルによってClaude Code内でのフロントエンドデザインが圧倒的に簡単になります。
00:10:28これまで私たちは、このようなウェブ上でのライブデザインを行うためにImpeccableなどの外部ツールに頼らざるを得ませんでした。
00:10:34ぜひ時間を取って、この新機能を試してみてください。
00:10:36Claude Codeを普段使いしつつ、Claude Designのウェブアプリも気に入っていながら、両者の切り替えに少し不便さを感じていた人にとって完璧なツールだと思います。
00:10:45それがこの機能の狙いです。
00:10:46まさにそのようなユーザー層をターゲットにしています。
00:10:48いつものように、感想をぜひ聞かせてください。
00:10:51私のClaude Codeマスタークラスに興味がある方は、ぜひChase AI Plusをチェックしてください。
00:10:55それではまたお会いしましょう。