バイブコーディングの生産性を本当に10倍にするClaudeのとんでもないスキル
AAI LABS
Computing/SoftwareAdvertising/MarketingSmall Business/StartupsInternet Technology
Transcript
00:00:00AIエージェントのスキルを活用すると、開発が驚くほど強力になります。
00:00:05今回は、AIエージェントを使った開発を大幅にスピードアップさせる6つの素晴らしいスキルをご紹介します。
00:00:10ただし、これらのスキルはこれまでの開発手法を置き換えるものではありません。
00:00:14すでに確立されたエージェントとのワークフローがあるなら、そのまま使い続けて問題ありません。スキルがそれを変えることはありません。
00:00:19その代わり、これまでは不可能だと思っていた新しい機能をAIコーディングエージェントに追加できるようになります。
00:00:24これらのスキルは、AI業界で最も著名な人々によって作成されました。例えば、そのうちの1つは、
00:00:29私たちがすべてのAIコーディングプロジェクトで使用している4つのルールを提供してくれます。また別のスキルは、
00:00:35AIエージェントがインターネットを認識し、ウェブサイトを利用する方法を完全に一変させます。当チャンネルが初めての方はようこそ。
00:00:40私たちはソフトウェア企業であり、ここはAI Labsです。この動画では、AIエージェントとの働き方を
00:00:45確実変える6つのスキルについて解説します。さて、スキルにおける最大の課題は作成することではなく、常に最新の状態に保つことです。
00:00:50エージェントが同じミスを繰り返すたびに、それに気づいて自分でスキルを改善しなければなりません。しかし、
00:00:55タスクオブザーバー（Task Observer）スキルを使えば、実際の作業を行いながらこれを自動で行うことができます。
00:01:00このスキルの基本的な考え方は、実際の作業中に直面する問題からスキルをより良くしていくというものです。
00:01:05一度机に座ってエージェントが犯すすべてのミスを予測することは不可能です。そのため、作業中に有益な教訓を監視してくれます。
00:01:10もし同じ解決策が新しいスキルになり得ると判断すればそれを記録し、既存のスキルに新しいルールが必要な場合は
00:01:15それも同様に記録します。このスキルをインストールする際には、2つの選択肢があります。
00:01:19メインの「.claude」フォルダにインストールして、コンピュータ上のすべてのClaude Codeセッションで機能させるか、
00:01:25あるいは1つのプロジェクト内にインストールするかを選択できます。プロジェクトごとのインストールを推奨します。
00:01:29プロジェクトごとに教訓を分離でき、管理が容易になるためです。インストールが完了すると、
00:01:34「log.md」というファイルが作成され、気づいたことすべてがそこに記録されます。このファイルは、実際のプロジェクトの外部にある
00:01:40コンピュータ上のClaude Codeのメインフォルダ内に置かれます。スキルをプロジェクトごとにインストールした場合、
00:01:45各プロジェクトが独自のログを保持します。その隣には、所有するすべてのスキルに適用されるべきルールを記述する別のファイルもあります。
00:01:51例えば、どのスキルであっても実際のクライアント名をファイルに書き込んではならないと決めたとします。
00:01:56そのルールはその時使っていたスキルだけに適用されるべきではなく、すべてのスキルに適用されるべきです。そのため、
00:02:00この2つ目のファイルに記述されます。セットアップの際、このスキルは「claude.md」ファイルに
00:02:06指示を追加するよう求めます。その指示により、作業中にClaudeがスキルを実行し、レッスンや改善点を
00:02:11見つけ続けられるようになります。ログ内では、スキルごとにセクションが分かれ、提案された変更点が
00:02:16その下に記述されます。ただし、このスキルは実際のスキルを即座に変更するわけではありません。ログ内の教訓は
00:02:21今後のセッションで使用され、それらがスキルの永続的な一部となるべきかを決定する前に確認することができます。
00:02:26これにより、1つの不適切な結果が、エージェントが永遠に従うルールに自動的になってしまうのを防ぎます。
00:02:31私たちは、動画のアニメーション作成に使用しているスキルでこの問題に直面しました。
00:02:36そのプロジェクトには、アニメーションの外観を整えるためのカスタム指示が多数あり、私たちは常にそれを改善しています。
00:02:42アニメーションの多くにはブランドロゴが含まれていますが、モデルはそれらのロゴを自分で正しく作成できません。
00:02:47そのため、SVGと呼ばれるコード形式でロゴを提供する必要があります。私たちはこれまで、
00:02:52「LoebHub」というサイトから手動でそのファイルを取得していました。LoebHubにはエージェントが
00:02:58ターミナルから実行できるツールもあるため、エージェントはそのツールを使ってロゴを取得できると思い込みましたが、
00:03:02そのツールは別の用途向けだったため失敗しました。このスキルは、LoebHubのツールを私たちの
00:03:08アニメーションシステムに使用すべきではないと記録しました。また、ロゴを取得するための正しいソースも見つけ、
00:03:13それを新しいルールとして記録しました。私たちは両方のレッスンを確認し、スキルに追加しました。これでアニメーションエージェントは
00:03:18ブランドロゴの取得先を正確に把握し、手動で行うことなく追加できるようになりました。次のスキルに進む前に、
00:03:23チャンネル登録と高評価ボタンを押していただけると幸いです。このちょっとしたサポートが私たちにとって大きな力になります。
00:03:28エージェントは動作するプロダクトを構築できますが、動作するプロダクトであっても、収益化する前にユーザーが離れてしまうことがあります。
00:03:34次のスキルは、アプリのそうした離脱を防ぐための部分をカバーしています。
00:03:39これらのスキルはCorey Haynes氏によるもので、48のマーケティングスキルコレクションの一部です。
00:03:44名前からすると広告やコンテンツ専用のように聞こえるかもしれませんが、このコレクションは
00:03:49プロダクトが収益を上げるためのさまざまな方法をすべて網羅しており、そのうちの3つはアプリに直接組み込まれています。
00:03:54まず、AIでコードを書く人が完全に見落としがちなアプリの非常に重要な部分、すなわち「オンボーディング」です。
00:03:59オンボーディングとは、新規ユーザーがプロダクトの設定を行い、使い始めるのをサポートするプロセスです。
00:04:04次に、コンバージョンを左右する最も重要な要素である「ペイウォール（有料会員登録画面）」があります。ペイウォールとは、
00:04:09ユーザー有料の機能を利用しようとしたときに表示される画面です。そして3つ目は、
00:04:14ユーザーがプロダクトにとどまるかどうかを理解する上で最も重要な指標の1つである「チャーン（解約率）」です。
00:04:18チャーンとは、プロダクトに料金を支払っていたユーザーが支払いをやめてしまうことです。これが、
00:04:23この動画の残りの部分で使用するアプリです。これはWebアプリを構築するための標準的な方法の1つであるNext.jsアプリで、
00:04:28ジム向けに構築したものです。ユーザーはこれを使ってジムのメンバーシップに登録し、トレーナーを選び、
00:04:33エクササイズを選択できます。基本的にジムを運営するために必要なすべてが1つのアプリに詰まっています。
00:04:38データベースにはSupabaseを使用しています。これはアプリに必要なすべてのデータを保存する最も簡単な方法の1つです。
00:04:43ユーザーやアプリ内のすべての情報を保存し、ログインシステムも処理してくれます。スキルフォルダを開くと、
00:04:48Supabaseスキルとともに3つのマーケティングスキルを確認できます。これがスキルの役割です。
00:04:53エージェントがまだ持っていない情報を与えるために使用します。Supabaseは常にアップデートされているため、
00:04:58モデルの学習データが使用しているバージョンと常に一致するとは限りません。また、これはこのようなアプリで
00:05:03最も人気のあるデータベースの1つです。そのため、Supabaseで開発を行っているのであれば、
00:05:08これらのスキルはインストールする価値があります。概要欄にもリンクを貼っておきます。
00:05:12オンボーディングスキルから始めましょう。ここでご覧いただいているのはプロトタイプです。つまり、
00:05:16実際のアプリにはまだ追加されていないということです。スキルが何を導き出したかを示すためだけにここにあります。
00:05:21このスキルを使用する前は、サインアップには5つの異なるステップで5つの質問に答える必要がありました。
00:05:26それでは、ユーザーがアプリ内に入って使い始めるハードルが高くなってしまいます。新しいバージョンでは、
00:05:31ユーザーがすでに完了したカードから名前を自動入力します。アカウント作成時に新しく尋ねるのは
00:05:35ジムの場所だけで、その後すぐにプランの画面に移行し、最も人気のあるプランがあらかじめ選択されているため、
00:05:40意思決定がしやすくなります。これらは適当に決めた選択肢ではなく、長年のテストを通じて実際のプロダクトで
00:05:45ユーザーがどのように行動してきたかに基づいています。ユーザーがアプリに入ると、
00:05:50削除したすべてのセットアップ手順は下部のプログレスバーに移動されます。アプリは開始に必要な情報のみを求め、
00:05:55残りの設定は後で完了するまで通知が表示され続けます。しかし、ユーザーをアプリに呼び込んでも、
00:06:00必ずしも課金してくれるとは限りません。そこでペイウォールスキルの出番となります。
00:06:05このスキルが採用したアプローチは、ユーザーに無料でサインアップしてもらい、プランに課金した場合に
00:06:10何が得られるかを表示するというものです。コンテンツの一部は利用可能ですが、残りはロックされたままになります。
00:06:14その後、画面から直接料金ページへと誘導され、ロックを解除できるようになっています。
00:06:19このパターンは多くのアプリですでに目にしたことがあるはずですが、エージェントにペイウォールの追加を
00:06:24普通にお願いしただけでは、こうした原則が組み込まれていないため、通常はこのような選択をしてくれません。
00:06:29そして、課金してもらったからといって、支払い続けてもらえるとは限りません。最後のスキルはチャーン（解約）の防止に関するものです。
00:06:33このスキルでは、解約ページを取り上げています。ユーザーがメンバーシップを解約しようとすると、
00:06:38アプリはすぐに解約処理をせず、まずなぜ辞めたいのか理由を尋ねます。理由を選択すると、
00:06:44その回答に基づいたより良いオファーを提示します。また、この画面では解約を減らすための細かなデザイン上の工夫も
00:06:49取り入れられています。ページ上のメインボタンにはメンバーシップの「一時停止」が配置され、
00:06:53解約の継続はその下部にプレーンテキストとして表示されます。この実装はデモであるため、まだ汎用的なものですが、
00:06:58スキルに実際のユーザーデータや販売している商品の詳細を渡すことで、その決定はご自身のプロダクトにより特化したものになります。
00:07:03コーディングエージェントに関する問題のほとんどは、コード自体に起因するものではありません。エージェントが、
00:07:09あなたが頼んでもいない決定を勝手に行うことから生じます。次のスキルは、
00:07:14Andrej Karpathy氏のアドバイスを、そのような事態を防ぐ4つのルールに落とし込んだものです。
00:07:20最初のルールは、リクエストが明確でない場合にエージェントが勝手に推測するのを防ぎます。何を前提としているかを伝え、
00:07:25異なる選択肢を示し、プロジェクトを別の方向に導きかねない決定を下す前に必ず確認を取るようにさせます。
00:07:292つ目のルールは、要求された以上の機能を構築するのを防ぎます。まだ存在しない問題のために
00:07:35余分な機能や設定、システムを追加するのではなく、機能する最もシンプルな解決策を使用させます。
00:07:393つ目のルールは、与えられた仕事の範囲外のものを変更するのを防ぎます。既存のコードベースに合わせ、
00:07:44自分で作った散らかりを片付けるだけに留め、他の問題については自分で勝手に直さずに報告させます。
00:07:49そして最後のルールは、何かを変更したという理由だけでエージェントが作業を完了したとみなすのを防ぎます。
00:07:54作業を始める前に、結果がどうあるべきか、そしてその結果をどのように検証するかを決定しなければなりません。
00:07:59その後、すべてのチェックがパスするまで作業を続けさせます。これを通常のスキルとしてインストールすることもできますが、
00:08:04私たちはすべてのコーディングプロジェクトに組み込みたいルールであるため、少し違った方法で使用しています。
00:08:09Macでは、すべてのコーディングプロジェクトを1つの開発者フォルダ内にまとめています。
00:08:15そのフォルダにカスタムアイコンを設定し、Finderのサイドバーにドラッグして、どのプロジェクトも同じ場所から始まるようにしています。
00:08:20その開発者フォルダ内では、これをスキルとしてインストールするのではなく、4つのルールをフォルダのルートにある
00:08:25「claude.md」ファイルにコピーします。Claude Codeは、プロジェクト内の「claude.md」ファイルと、
00:08:31開発者フォルダー内のプロジェクトを開くと、そのフォルダーの
00:08:37プロジェクト固有の指示に加えて、これら4つのルールが読み込まれます。これにより、
00:08:42コンピューター上の他の関係ないClaude Codeのセッションに影響を与えることなく、
00:08:48すべてのコーディングプロジェクトに同じ基本ルールを適用できます。AIエージェントの最大の制限の1つは、
00:08:53ウェブサイトの操作がまだ苦手という点です。ブラウザエージェントはすべてのページを開き、正しいボタンを見つけて、
00:08:58サイト内を地道に作業する必要があります。「OpenCLI」は、すでにログインしているアカウントを含む100以上の
00:09:04ウェブサイトを、エージェントが直接実行できるコマンドに変換することで、その状況を変えます。このツールは単なるスキルではなく、
00:09:08連携して動作する3つの部分で構成されています。メインのOpenCLIツール、Chromeに追加する拡張機能、
00:09:14そしてすべてを使いこなす方法をエージェントに教える一連のスキルです。OpenCLIはすでに100以上の
00:09:19ウェブサイトでのさまざまな作業の実行方法を理解しています。各コマンドは明確な処理を1つだけ行うため、エージェントに
00:09:24Xを開いてブックマークを探し、すべてをコピーするよう頼む代わりに、1つのコマンドを実行するだけでブックマークを
00:09:30整ったリストとして取得できます。Chrome拡張機能により、OpenCLIとすでにログインしているウェブサイトが接続されます。
00:09:35つまり、パスワードを再度入力しなくても、エージェントがあなたのアカウントを利用できるということです。そしてスキルによって、
00:09:40適切なコマンドの探し方、必要な場合の新しいコマンドの作成方法、ウェブサイトが変更された場合の修正方法をエージェントが学びます。
00:09:45良い例がXです。Xは公式API（他のソフトウェアがそのデータを使用するための手段）へのアクセスに料金を請求します。
00:09:51しかし、ChromeですでにXにログインしていれば、OpenCLIを使って、あなたのアカウント経由で投稿の検索、
00:09:57ブックマークの読み込み、投稿、返信、フォローを行うことができます。そのため、製品のアイデアをリサーチしている場合、
00:10:02その課題について人々が何と言っているかをエージェントが検索できます。また、保存したすべての
00:10:08投稿を、リサーチに活用できる整ったリストに変換することも可能です。これは、ご自身のカウントを使用して
00:10:13ウェブサイト経由で実行する作業向けに作られています。他人に販売するアプリ内の公式ツールを置き換えるためのものではありません。
00:10:18AIモデルは同じようなデザインを繰り返す傾向があります。そのため、最初に提示されたデザインをそのまま受け入れるのではなく、
00:10:24複数のバージョンを要求して比較するべきです。しかし実際のプロジェクト内では、
00:10:29ページの各パーツの複数のバージョンを管理するのはすぐに複雑になってしまいます。ここで役立つのが
00:10:34「very 8」スキルです。これは、当チャンネルでも以前紹介し、多くのスターを獲得した
00:10:39「hallmark design」スキルと同じ作者によるものです。さまざまなアイデアの試行錯誤が非常に簡単になるため、
00:10:45このスキルは主にランディングページにおすすめしています。これは先ほどのジムアプリです。このスキルを追加すると、
00:10:50アプリの一部に対する異なるバージョンを作成して比較できる小さなメニューが表示されます。これを
00:10:55ランディングページに追加しました。そのため、サインインしてメインアプリに入るとすぐに、このメニューは消えます。このメニューから、
00:11:00すべての異なるバージョンを切り替えることができます。現在は、ヒーローセクションのバリエーションのみを作成しています。
00:11:05そのため、バージョンを切り替えても、ランディングページの残りの部分は全く同じままです。さて、
00:11:10これは実際のNext.jsアプリですが、当チャンネルをご覧の方ならご存知の通り、アプリを設計する際は
00:11:14通常、シンプルなHTMLページから始めます。ここには、HTMLで構築された同じタイプのランディングページがあり、
00:11:20very 8のメニューもここで機能します。異なるバージョンを切り替えて、お好みのものを選択できます。
00:11:25その選択はエージェントに直接送信され、ページの別の部分のバージョンをさらに作成するよう依頼できます。
00:11:30これにより、毎回ランディングページ全体を再設計する必要がなくなります。1つのボタン、1つのセクション、またはヘッダーの
00:11:34異なるバージョンを試して、気に入った組み合わせが見つかるまで組み合わせることができます。ここまで紹介したすべてのスキルは、
00:11:40エージェントがより良い製品を作るのに役立ちますが、誰も欲しがっていないものを作っている場合、それらのどれも意味がありません。
00:11:45最後のこのスキルのコレクションは、そもそもその製品を作るべきかどうかという最初の決定を下すのに役立ちます。
00:11:50これらのスキルは、オンラインでデジタル製品を販売するための最も人気のあるプラットフォームの1つであるGumroadを立ち上げた
00:11:54サヒル・ラヴィニアによって作られました。これらは彼の著書『The Minimalist Entrepreneur』に基づき、
00:11:5910個のスキルに落とし込まれています。そのうちの9個のスキルが、ビジネス構築の各ステージへと導いてくれます。
00:12:04最初のスキルは、構築の対象となるターゲット層を見つけるのを助けてくれます。これは、ほとんどの人がアイデアを思いつく方法とは
00:12:09逆行したアプローチをとります。通常は、まずアイデアを選んでから、それを欲しがりそうな人々を探しに行きます。
00:12:14しかし、このスキルでは人々から始めます。自分がすでに所属しているグループに目を向けさせ、
00:12:19人々が不満を漏らし続けている問題を見つけさせます。その中の1つの問題を、製品のアイデアにすることができます。
00:12:24次に、そのグループが構築する価値のあるものかどうかを確認します。広告費をかけずにその人々に
00:12:29アプローチできるか、そして彼らがこのような問題を解決するためにすでにお金を費やしているかを確認します。
00:12:34実在する問題を見つけることでアイデアが得られますが、それでも誰もがあなたのソリューションにお金を払うという証明にはなりません。
00:12:39そのため、2つ目のスキルは検証に関するものです。これは、何かを作る前に人々がお金を払うかどうかを確認することを意味します。
00:12:44問題を抱えているのは誰かと尋ねた際、「企業」のような曖昧な答えは受け付けません。
00:12:49名前を挙げられる10人の実在する人物を求め、そのうちの少なくとも3人がお金を払うと答えることを
00:12:54要求します。人々が製品を求めていることが証明できたら、残りの7つのスキルが次のステップへと
00:12:58導いてくれます。最小限のバージョンの選択、まずは手作業で作業を行うこと、最初の顧客の獲得、
00:13:03価格設定、製品のマーケティング、資金調達なしでの成長、そして
00:13:08採用活動を行う前に会社の運営方法を決定することを網羅しています。さて、私たちの動画ですべて構築しお見せしているものはすべて、
00:13:12当コミュニティである「AI Labs Pro」で見つけることができます。私たちの活動に価値を見出し、
00:13:18チャンネルをサポートしたい場合は、これが一番の方法です。リンクは説明欄にあります。
00:13:23これでこの動画は終わりです。チャンネルをサポートし、このような動画の制作を続けられるよう
00:13:28お手伝いいただける場合は、下部にある「スーパーサンクス」ボタンからご支援いただけます。
00:13:33いつもご視聴いただきありがとうございます。また次の動画でお会いしましょう。
00:13:38それでは。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video