生成AI関連
生成AIのSkillsとは？仕組み・MCPやカスタム指示との違い・デモまで
近年、コーディングエージェントは多くの開発者にとって欠かせないツールになりつつあります。これまでの生成AIは、文章生成やアイデア出しといった「思考支援」が中心でしたが、現在はコードの実装や修正といった「作業そのもの」を担う存在へと進化しています。
こうした流れを踏まえ、社内でコーディングエージェントに関する勉強会を実施しました。本記事では、その際に紹介した内容に加え、時間の都合で触れきれなかったポイントも含め、実務での活用方法や注意点を整理します。
本記事では主に以下のツールを取り上げます。
| ツール | 概要 |
|---|---|
| Gemini CLI | Google製のCLIベースのコーディングエージェント |
| Codex CLI | OpenAI製のCLIエージェント。設計フェーズの計画生成が特徴 |
| Claude Code | Anthropic製のCLIエージェント。コンテキスト管理に強み |
今回の勉強会は、ある案件のリーダーから「UI改善にAIを活用したい」「開発にAIをもっと取り入れていきたい」という相談を受けたことがきっかけでした。
開発現場ではすでに生成AIの活用が進んでいますが、個々人の使い方に依存しているケースも多く、チームとしてのナレッジ共有が十分とは言えない状況です。そこで、以下の点を整理し、チーム全体での理解を揃えることを目的として開催しました。
コーディングエージェントは、単なるコード生成ツールではありません。その本質は「作業の委譲」にあります。
たとえば、以下のような作業を任せることができます。
これまで開発者自身が行っていた作業の一部をエージェントに委ねることで、開発スピードを大きく向上させられます。一方で、すべてを任せられるわけではありません。以下の部分は引き続き人間が担う必要があります。
コーディングエージェントは「仕事を奪うもの」ではなく、「作業を手伝ってくれる相棒」として捉えると、適切な距離感で活用しやすくなります。
勉強会では、いわゆる「バイブコーディング（vibe coding）」と呼ばれるスタイルも紹介しました。これは、要件やデータベース定義を与え、ほぼ生成AIに任せて一気にアプリケーションを構築する手法です。
デモでは、まずバイブコーディングでベースとなるアプリを構築しました。その初期状態がこちらです：
次に、docs/*.md（要件定義書・データベース定義書）を参照させた上で、以下のプロンプトでUI改善を指示しました：
スマホ向けのWebアプリです。iPhoneのアプリみたいにおしゃれにして下さい。どんなアプリかは、docs/*.mdを見て下さい。
合計2回のやりとりで、以下のUIに仕上がりました：
一度の指示でですべてが完成するわけではありませんが、数回のやりとりで大きく見栄えが変わることが実感できます。
この手法は特に以下の用途に向いています。
ただし、コード構造が崩れやすく、そのまま本番に持ち込むのは難しいケースが多いため、用途を限定して使うことが重要です。
コーディングエージェントを使う上で非常に重要なのが、「一度に任せる範囲を絞る」ことです。
一度に大きな変更を指示すると、以下のような問題が発生します。
そのため、
というように、自分がレビューできる単位までスコープを分割することが現実的な運用になります。
生成AIは、人間のように文脈から意図を推測することが得意ではありません。そのため、指示の具体性が非常に重要になります。
たとえば、「設定アイコンを変更して」という指示では不十分です。代わりに、
右上にある歯車アイコンを、サイドバー内の設定ボタンに置き換えてください
のように、対象を明確に指定する必要があります。特に、同じような要素が複数存在する場合、曖昧な指示では誤った箇所を変更してしまう可能性があります。
また、変更対象のファイルが分かっている場合は、ファイルを明示して指示するのが最も確実です。
@src/components/Header.tsx の設定アイコンを、サイドバー内の設定ボタンに置き換えてください
エージェントはファイルを特定するためにコードベースを検索しますが、その過程で誤ったファイルを参照することもあります。ファイルを直接指定することで、そうした不確実性をあらかじめ排除できます。
近年のコーディングエージェントは、テキストだけでなく画像を用いた指示にも対応しています。たとえば、
といった形で、より直感的な指示が可能です。
ただし、以下のような制約があります。
そのため実務では、画像は別ファイルで渡し、テキストで補足説明を加えるという工夫が必要になります。
各ツールに搭載されているPlan Modeのように、実装前に計画を生成してくれる機能も有効です。
この機能の最大の特徴は、仕様が曖昧な部分を選択肢付きで質問してくれる点です。たとえば、
ログイン後の遷移先はどこにしますか？
(1) ダッシュボード
(2) 前回のページ
(3) プロフィール設定
(4) その他（自身で入力できる）
のように、実装に入る前に不明点を洗い出し、選択肢を提示してくれます。これにより、指示の曖昧さに起因する手戻りを大幅に減らすことができます。
その他にも、
という使い方も可能です。活用方法としては、主に以下の2パターンが考えられます。
そのまま実装させる
計画に問題がなければ、そのまま実装フェーズに移行します。
別のAIにレビューさせる
生成された計画を、別のAI（例：ChatGPTやGemini）に渡してレビューさせることで、設計上の問題点や抜け漏れを事前に検出できます。同じAIにレビューさせると同じバイアスがかかるため、異なるモデルに確認させることで客観性が上がるのがポイントです。
また、大規模な改修を行う際にも Plan Mode は特に有効です。いきなりコードを編集させるのではなく、まず計画をエージェントと共有・すり合わせすることで、実装の方向性が大きくずれるリスクを事前に防ぐことができます。「実装後に意図と大きくズレていた」という手戻りを避けるために、大きな変更ほど計画フェーズを丁寧に踏むことが重要です。
コーディングエージェントは、与えられたコンテキストに強く依存します。そのため、セッションが長くなって不要な情報が蓄積されると、精度が低下する可能性があります。
実務では、以下のような運用が有効です。
「何か変だな」と感じたらすぐにセッションを切り替える判断が、結果的に時間の節約になります。
なお、一度終了したセッションに戻りたい場合は、/resume コマンドが便利です。過去の会話履歴を引き継いだ状態でチャットを再開できるため、「前回の続きから作業したい」という場合に活用できます。ただし、不要なコンテキストまで持ち込まれる可能性もあるため、長期化したセッションを無闇に再開する点には注意が必要です。
コーディングエージェントをより実践的に使いこなすために、Skills（スキル）という仕組みも活用できます。
Skillsは、AIに特定の作業手順や専門知識を持たせるための仕組みです。一度定義しておけば、必要な場面で自動的に読み込まれるため、毎回長いプロンプトを書く手間が省けます。Skillsの詳細な仕組みや具体的なデモについては、以下の記事で詳しく解説しています。
勉強会では、 frontend-design というSkillを紹介しました。
Anthropicが公開している frontend-design Skillは、UIの見た目に関する設計指針をエージェントに持たせるためのSkillです。タイポグラフィの選び方、カラーパレットの組み方、アニメーション、空間構成といったデザイン原則が体系的にまとめられており、「AIらしい凡庸なUI」を避けるための指針が込められています。
このSkillが実務で特に役立つ場面は2つあります。
デザインの方向性を生成AIに考えさせる
ゼロからUIを作る際に、デザインの美的方向性の判断をエージェントに委ねられます。大まかな用途やトーンを伝えるだけで、エージェントが方向性を選択・提案しながら実装を進めてくれます。
エージェント間のアウトプット差を減らす
Gemini CLI、Codex CLI、Claude Codeなど、どのエージェントを使うかによってUIの仕上がりにばらつきが出ることがあります。frontend-design Skillを共通で読み込ませることで、ツールに依存しない統一した設計基準を与え、アウトプットの品質を安定させられます。
# Skills.sh からfrontend-design Skillを追加
npx skills add https://github.com/anthropics/skills --skill frontend-design
生成AIが出力したコードは、そのまま利用するのではなく、必ずレビューとリファクタリングを行う必要があります。現時点では、
といった観点で、人間が書いたコードの方が優れているケースも多く見られます。「AIが書いたから大丈夫」という過信は禁物です。
コーディングエージェントを利用する上で、特に注意すべきなのが破壊的な操作です。過去には、
といった事例も確認されています。こうした問題の背景には、コンテキスト不足・指示の曖昧さ・エージェントの自律的判断があります。
そのため、以下のような対策が重要になります。
開発環境の分離
Dev Containerなどを利用し、ローカル環境とは切り離された状態で実行することで、万が一の影響を限定できます。
権限とコマンドの制御
settings.jsonなどで最小限の権限のみを付与し、危険なコマンドを制限します。ただし、これらの対策も完全ではなく、別経路で実行される可能性もあるため、「完全に防ぐ」ことは難しい点に注意が必要です。
バックアップ戦略
「壊れることを前提に設計する」という発想が、現実的なアプローチとなります。
コーディングエージェントは単なるツールではなく、「共同作業者」として扱うことが重要です。ただし、
という前提は変わりません。AIの特性を理解した上で、適切な距離感で活用することが求められます。
コーディングエージェントは、開発の進め方そのものを変える可能性を持った技術です。適切に活用すれば生産性は大きく向上しますが、リスクや制約も存在します。
今回の勉強会を通じて見えてきた重要なポイントは以下の通りです。
本記事が、実務でのコーディングエージェント活用の参考になれば幸いです。
Tech Funでは、お客様のフェーズに合わせ、生成AI活用に向けた支援を3つのパックでご提供しています。
生成AIに限らず、Web・業務システム開発やインフラ設計など、技術領域を問わずご相談を承っています。「何から始めれば良いか分からない」という段階でも構いませんので、ぜひお気軽にお問い合わせください。
