00:00:00Claude Codeは本当に素晴らしいですが、私たちのチームはあらゆることにそれを使い始めました。
00:00:03Anthropicもこれに気づき、少し前に「スキル」という概念を導入しました。
00:00:07しかし、Nano Banana Proのリリースにより、人々は全く異なる方向へ進み始めました。
00:00:12それは、anti-gravityのようなGoogle製品を使って、より良いサイトを構築することです。
00:00:15私たちもanti-gravityを試しましたが、現状ではあまりに不完全だというのが正直な意見です。
00:00:19anti-gravity派の人たちから猛反発を受けることは分かっています。
00:00:21ですが、これはまた別の動画のトピックです。ただ、生成される画像は無料です。
00:00:25そこで、コーディングはClaudeに、画像生成はanti-gravityに任せてはどうかと考えました。
00:00:30しかし、ここで重要なポイントがあります。
00:00:31これらの異なるユースケースに対して、毎回Claudeにプロンプトを出し直すべきではありません。
00:00:35Claudeを訓練し、専用の「スキル」を作成すべきなのです。
00:00:37最近、Claudeはスキルを実際にどのように構築すべきかについてのガイドをリリースしました。
00:00:41最も重要な部分は、テストとイテレーション（反復）です。
00:00:44正直なところ、このガイドによって、スキルの捉え方が大きく変わりました。
00:00:48「Skill Creator」については、すでに耳にしているかもしれません。
00:00:50これはClaude Code公式のスキルで、効果的なスキル作成のガイダンスを提供してくれます。
00:00:55しかし、チームメンバーの一人が、公開された新しいガイドに照らし合わせると、
00:00:58それがまだ古い内容であることに気づきました。
00:01:00そこで、私たちはそれを更新しました。新しいガイドラインに従って多くの変更を加え、
00:01:02非常に素晴らしい改善を施しました。
00:01:05この更新されたSkill Creatorと、多くの苦労を伴う反復作業を経て、
00:01:09この新しい「nano banana UIスキル」を作成しました。
00:01:12最初に作り始めたスキルと、最終的に完成したスキルは、全くの別物になりました。
00:01:16これらのスキルはどちらも「AI Labs Pro」で利用可能になります。
00:01:19知らない方のために説明すると、これは私たちが最近立ち上げたコミュニティで、
00:01:22今回の動画やすべての過去動画のプロジェクトに、直接組み込めるテンプレートが手に入ります。
00:01:26すぐに使えるテンプレートが満載です。
00:01:28私たちの活動に価値を感じ、チャンネルをサポートしたいと思ってくださるなら、
00:01:31これが最善の方法です。リンクは概要欄にあります。
00:01:34Claude CodeとAnti-Gravityの連携プロセスについては、すでに解決済みでした。
00:01:38そこで、Claude CodeとAnti-Gravityの両方で同じディレクトリを開きました。
00:01:42Claudeがプロジェクトを初期化し、Anti-Gravityが関与するのは「public」フォルダだけです。
00:01:47ここにはすべての画像が格納されます。
00:01:49Claudeは、Anti-Gravityが生成すべき画像のプロンプトとファイル名を提供します。
00:01:53それらのプロンプトがAnti-Gravityに入力されます。
00:01:56画像生成ツールが起動し、並列処理を利用して、
00:02:00複数の画像を同時に生成しました。
00:02:033つの画像が生成され、すべてがこの「images」フォルダに配置されたのがわかります。
00:02:08配置された後、Claudeは即座にそれらを認識し、簡単に作業を進めることができました。
00:02:12しかし、実際に画像を生成し始めた瞬間、多くの不具合が発生しました。
00:02:17何度も耳にしているかもしれませんが、こうした繰り返し行うワークフローを構築する際、
00:02:21「説明文エンジニアリング」は最も重要な要素の一つです。これらの説明は、
00:02:26Claude Codeを開いたときに常にコンテキストに読み込まれる「YAMLフロントマター」です。
00:02:30Claudeはこれを見て、スキルを読み込む必要があるかどうかを判断します。
00:02:34しかし、多くのユーザーから、必要ない時にスキルが読み込まれてしまうという報告があります。
00:02:38それは、ほとんどの説明が「スキルが何をするか」しか書かれていないからです。
00:02:41優れた説明文には、2つの問いへの答えが含まれている必要があります。
00:02:44「そのスキルは何をするのか？」そして「いつClaudeはそれを使うべきか？」です。
00:02:46ここで重要になるのが「トリガーフレーズ」です。これらがスキルの呼び出しを指示します。
00:02:51例えば「ランディングページを構築して」や「nano banana」という言葉などです。しかし、それだけではありません。
00:02:57ガイドには「ネガティブトリガー」についても記載されています。これはスキルを使うべきではない時をClaudeに伝えます。
00:03:01例えば、単純なバグ修正やデータベース作業では読み込まないように定義します。
00:03:05このように、良い説明文と悪い説明文の差は明らかです。
00:03:08新しいSkill Creatorで作ったこのスキルには、複数のトリガーフレーズとネガティブトリガーがありますが、
00:03:13古いもので作った方は、単にスキルの内容を説明しているだけです。
00:03:17構文に関する純粋に定量的な指示もありますが、
00:03:21それらについては知っておく必要はありません。
00:03:23また、コンテンツを楽しんでいただけているなら、ぜひハイプボタンを押してください。
00:03:27そうすることで、より多くのコンテンツを作成し、より多くの人に届けることができます。
00:03:31さて、通常、様々な画像を生成する際、用途に合わせて
00:03:35異なる寸法にする必要がありました。
00:03:39変更を加える前のプロンプトでは、そのように指定していました。
00:03:42しかし、カスタム寸法を使おうとするたびに問題が起きました。
00:03:46Anti-gravityの画像生成ツールは、常に正方形の画像しか生成しなかったのです。
00:03:50GeminiアプリやGoogle AI Studioにあるシンプルなモデルなら問題ありませんが、
00:03:55ここではプロセスを変更し、それに応じてスキルを修正する必要がありました。
00:03:58「skill.md」内の適切な段階でその旨を参照させ、
00:04:02プロンプトのルール内にも、プロンプトを書く際には
00:04:06寸法やアスペクト比を指定しないように記載しました。それは重要ではなかったからです。
00:04:10もし特定の用途で画像を切り抜く必要がある場合は、
00:04:12後で「画像クロップツール」を使って行えばよいのです。
00:04:15だからこそ「scripts」フォルダが非常に重要なのです。
00:04:18ここには、Claudeが特定の引数で呼び出せる実行可能なツールが格納されており、
00:04:22ユースケースに応じてこれらのツールを見つけ出していきます。
00:04:25優れたスクリプトには、Claudeが簡単に呼び出せるように、
00:04:29異なるモードを持つCLI引数が備わっています。
00:04:31また、メンバーの一人が発見した非常に重要な要素は「プレビューモード」です。
00:04:35これにより、Claudeは破壊的な操作を行う前に出力を確認することができます。
00:04:40ここで少し休憩して、本日のスポンサーについてお話しします。
00:04:42この後、ほとんどの人がスキル構築で陥る
00:04:45「構造的な間違い」について見ていきます。
00:04:47CREAM
00:04:47開発者やSaaS創設者にとって、最大の悩みは開発そのものではありません。
00:04:50それは、グローバルな税務とVATコンプライアンスという悪夢です。
00:04:53CREAMは、この負担をすべて肩代わりする販売代理人（MoR）であり、開発に集中させてくれます。
00:04:58次世代のデジタルビジネス向けに構築されたCREAMは、
00:05:00初日から100カ国以上で支払いを可能にする超高速セットアップを提供します。
00:05:05不透明な隠れ手数料を排除し、
00:05:073.9% + 40セントという透明性の高い一律料金を提示しています。
00:05:11それだけです。
00:05:11顧客が東京でもテキサスでも、カードがAMEXでもGoogle Payでも同じレートです。
00:05:16自動収益分配などの強力な機能により、スムーズな立ち上げを実現します。
00:05:20常に隔離されたテストモードと専用のTypeScript SDKを使用してください。
00:05:23さらに、CREAMはClaude Code、Cursor、Windsurf向けの公式AIエージェントスキルを提供しています。
00:05:28AIアシスタントにCREAMの統合を指示するだけで、
00:05:30最新のAPIベストプラクティスに基づいた、安全で本番環境対応のコードを即座に生成します。
00:05:36ただし、APIキーをバージョン管理にコミットしないよう注意してください。
00:05:39決済スタックを整える準備ができたら、固定コメントのリンクをクリックしてください。
00:05:42税金の心配はやめて、CREAM.ioでスケールを始めましょう。
00:05:45過去の動画でも「段階的開示（Progressive Disclosure）」について何度か触れてきました。
00:05:50これはスキルだけでなく、コンテキストウィンドウにとっても非常に重要だからです。
00:05:55つまり、エージェントはその時点で必要な情報だけを知るべきだということです。
00:05:59説明文が常にClaude Codeのコンテキストに読み込まれることは既にお話ししました。
00:06:03そのため、これらのスキルは3レベル構造を採用しています。
00:06:06第1レベルは常にClaudeのコンテキスト内にあります。
00:06:09第2レベルはskill.mdの本体であり、そこには第3レベルへの参照が含まれるべきです。
00:06:14これにはフルワークフローや、参照資料の使い方に関する指示も含まれます。
00:06:18そして、その構造の中で、公式ガイドは「クリティカル・セクション」というものを定義しています。
00:06:23最も重要な情報は、雑多な指示の中に埋もれさせるのではなく、
00:06:26冒頭のすぐ目につく場所に記載すべきです。
00:06:29このスキルを見ると、skill.mdしかなく、第3レベルの構造がないことがわかります。
00:06:34これは、ワークフロー、コツ、推奨事項、トラブルシューティングの
00:06:38すべてが単一のファイルに詰め込まれているためです。
00:06:41これは正しい構造ではありません。
00:06:43現時点でそれらすべてのガイドラインが必要とは限らないからです。
00:06:45まずはワークフローだけを読み込み、
00:06:47プロンプトルールなどは、実際に書いたり使用したりする時だけ取り込むべきです。
00:06:51一方で、こちらのスキルは参照資料や必要なスクリプトが
00:06:54明確に構造化されています。
00:06:56ワークフローに加えて、各スクリプトを実行するタイミングや、
00:07:01各種ガイドラインを参照するタイミングのトリガーも明確に記されています。
00:07:04つまり「skill.md」には、nano bananaスキルのワークフローのみが含まれています。
00:07:08そして「references」セクションに各種ガイドラインがあり、
00:07:12そのプロンプトルールには、反復テストで見出した
00:07:1513個の異なるテストルールが格納されています。
00:07:17しかし、これほど構造化しても、Claude Codeはステップを飛ばす方法を見つけ出します。
00:07:22最初のバッチの画像が生成された後、それらは
00:07:24再生成が必要になることが目に見えていました。
00:07:26nano bananaは常に最も正確な出力を生成するわけではないからです。
00:07:29驚くべきことに、Claudeは自らそれを検証しようとしませんでした。
00:07:33意図したデザイン通りに画像が仕上がっているか、こちらから問いかける必要がありました。
00:07:37そうでなければ、生成されたものをそのまま実装してしまっていたでしょう。
00:07:41だからこそ、スキル構築において反復が最大の鍵だと言ったのです。
00:07:45資産を検証するステップは既にあり「validate images」スクリプトを使っていましたが、
00:07:49それは画像が構造的に問題ないかを検証するだけで、
00:07:52美的に正しいかどうかは判断していませんでした。
00:07:55美観については一切関与していなかったのです。
00:07:57美観については、Claude自身でビジュアルレビューを行う必要がありました。
00:08:00一連の問いに照らして、画像が合格か不合格かを判断するのです。
00:08:04そして不合格の場合は、その理由も提示させる必要があります。
00:08:07ビジュアルレビューで不合格となった場合、
00:08:09その画像を削除し、新しく修正されたプロンプトを書く必要があるからです。
00:08:13anti-gravityモードであれば、前のプロンプトが失敗した理由を含めた
00:08:16新しいプロンプトを提供し、
00:08:20それによってanti-gravityがより良い画像を再生成できるようにします。
00:08:23だからこそ、anti-gravityは「ガラスの画像を再生成しました、
00:08:27今回は要件に従っています」と言っているのです。
00:08:29ワークフローを構築する際は、こうした「バリデーション・ゲート」を設けることが非常に重要です。
00:08:34バリデーション・ゲートとは、次の工程に進む前に
00:08:39完了させておくべきことを定義した明示的な「障壁」です。
00:08:41見ていただいた通り、Claude任せにすると、画像が欠落していたり壊れていたりしても、
00:08:46指示されない限り、検証もせずに平気でUIを構築してしまいます。
00:08:48例えば、このスキルを見ると、
00:08:50ワークフローには従うべき複数のステップが明確に示されています。
00:08:54しかし、他の間違いに加えて、
00:08:55次のステップへ進むためのバリデーション・ゲートが書かれていません。
00:08:59これらのバリデーション・ゲートも結局はプロンプトです。
00:09:01何か魔法のようなBashコマンドがあるわけではありません。
00:09:04しかし、毎回再利用され、内容にバリエーションがないのであれば、
00:09:08ツール化して、そのツールをバリデーション・ゲートとしてリストアップすべきです。
00:09:11このケースでは、複数のステップの間にバリデーション・ゲートを設けています。
00:09:15これによって、あるプロセスから別のプロセスへ勝手に進むのを防ぐだけでなく、
00:09:19各ワークフローの中にミニプロセスを形成することもできます。
00:09:22プロセスを何度も実験し、反復していく中で、
00:09:26多くのエラーに遭遇することに気づくでしょう。
00:09:30例えば、画像の欠落や破損、API出力の不完全、
00:09:34部分的な失敗によるスクリプトの終了などです。
00:09:36スキルを洗練させていく過程で、
00:09:39優れたスキル作成者は、これらのエラー処理をメモし、明確に定義すべきです。
00:09:44一度起きたことは、再び起きる可能性があるからです。
00:09:46そして、それは以下の形式で処理されるべきです。
00:09:48まずエラーを定義し、次にClaudeが理解できるように原因を書き、
00:09:51そして実際に問題を解決するための手順を記載します。
00:09:54繰り返しになりますが、ランディングページの構築を指示すると、スキルが読み込まれファイルが参照されます。
00:09:58すでにNext.jsプロジェクトがある場合はそれを検出し、
00:10:02ページの用途やAI生成画像の要否について質問してきます。
00:10:06画像が不要と答えれば、既存のフロントエンドリソースのみを使ってページを構築します。
00:10:11これは、開発の過程でClaudeに対し、このフロントエンドデザインスキルの
00:10:16仕上げも依頼していたからです。これには、見栄えの良いサイトを
00:10:19実際に実装するための素晴らしいガイドラインが豊富に含まれています。
00:10:22すべての実験を終えた後、実際に生成されたものがこちらです。
00:10:27生成された画像が表示されており、
00:10:29そこには繊細なアニメーション効果が施されています。
00:10:32それ以外も非常にクリーンなランディングページで、画像もやりすぎ感がありません。
00:10:36本当に必要な場所にだけ適用されています。
00:10:39しかし、最初に生成された時はフォントに問題がありました。
00:10:43あまりうまく機能していなかったのです。
00:10:44そこで、彼らが試行錯誤して見つけた特定のタイポグラフィフォントを導入し、
00:10:48これによってようやくタイポグラフィの問題が解決しました。
00:10:51つまり、このnano bananaデザインスキルとは直接関係のない
00:10:54様々なリソースを組み込むことで、
00:10:57必要な場所でそれらの能力を発揮できるようにしているのです。
00:11:00段階的開示において、参照資料やスクリプトを含む追加ファイルについてはすでにお話ししました。
00:11:06ここからは、参照資料、つまりドメイン特化型のインテリジェンスについて深掘りします。
00:11:09スキルが特定のドメインに向けたものであっても、
00:11:12小さな複数の知識パッケージを別々のコンポーネントとして持つことができます。
00:11:16例えば、これらの参照資料には、デザインパターン、
00:11:19フロントエンドの美学、プロンプトルールなどがリストアップされています。
00:11:21こうすることで、コンテキストウィンドウを汚さずにスキルの知識ベースを拡張し続けることができます。
00:11:26これまでのアドバイスは、タスクをより良くこなすためにClaudeをどう訓練するかというものでした。
00:11:31しかし、それを実際にどう使いこなすかについては触れていません。
00:11:33そのために別の動画を用意しました。そこでは、Claude Codeで
00:11:36優位に立つための、最新の10通りの方法を紹介しています。
00:11:39終了画面にその動画が表示されますので、
00:11:41検索する手間を省いて、ぜひそちらをクリックしてください。
00:11:43これで今回の動画は終わりです。
00:11:45チャンネルをサポートし、このような動画作りを応援していただけるなら、
00:11:49下の「スーパーサンクス」ボタンからお願いします。
00:11:51いつものように、ご視聴ありがとうございました。また次回の動画でお会いしましょう。