はじめに

こんにちは！株式会社コムデでPM（プロジェクトマネージャー）をしている神田です。

以前は、エンジニアとして自らコードを書き、開発に携わっていました。

近年話題になっている生成AIですが、PMとしても何をどこまでできるのか、どんなことに活用できるのかキャッチアップするため、コードを一切書かずにAIのみで動くものを作ってみました。

この記事では、PMが生成AIを使って開発をしてみたプロセスと、PMとして得られた気づきをお話しします。

※ 具体的なコードレベルの解説や成果物は割愛しておりますのでご了承ください

「@」でメンションをChatworkでも

何を作ろうか考えた時、普段の業務を効率化できるものが良いなと思いました。
以前から気になっていた、Chatworkのメンション機能を効率化できないかと考えました。
そこで今回、Chatworkのメッセージ入力欄で「@」を入力すると、Slackのようにメンション候補がサジェスト表示されるChrome拡張機能を作りました。

・変更前：TOボタン押下＞宛先を検索＞選択する（マウスカーソル、キーボード操作）
・変更後：@を入力＞宛先候補を選択（キーボード操作のみで完結）

▼百聞は一見に如かずということで、実際の動作をご覧ください

〈要約〉

1. メッセージ入力欄で「@」を入力
2. そのチャットに参加しているメンバーのリストが瞬時に表示される
3. 矢印キー（↑↓）、もしくは名前を入力して自動絞り込み後にメンバー選択
4. Enterキーで入力

このようにキーボード操作のみで、スムーズにメンションが入力できるようになりました。

CSSが大の苦手な私が自分で構築したら何人日かかるかわからないですが、
今回はAIを使用して、約3時間ほどで完成しました。（別の作業しながらだったので、実質1時間くらいかと思います）

今回利用した技術/サービスはこちら

今回下記の技術/サービスを利用しました。

※ここでは詳しい設定手順は割愛させていただきます

PMは指示出し専門、コーディングを"AIに丸投げ"した開発フロー

今回は、PMの本来の役割である「仕様を決めて、実装を依頼する」というスタイルを、AIを相手に実践してみることにしました。

私の役割は「ディレクター」、そしてAIが「専属エンジニア」。この体制で、下記のような4stepで開発を進めました。

Step 1：指示出し（やりたいことを日本語で伝える）

まずはAI（Claude Code）に、作りたいアイデアの仕様を伝えます。
特別なプログラミング言語は不要。普段使っている日本語で、できるだけ具体的に指示を出すだけです。

【例：Light/Darkモードへ対応するように指示】

Light／Darkモードに対応できていないため、設定によってデザインを変えるようにしてください。

Step 2：AIがコーディング（数秒でコードが完成）

上記の指示を出すと、AIはほんの数秒で、実現のために必要なコード一式を書き上げてくれます。
必要に応じて、「このように変更するけど良いですか？」と聞いてくれたり、変更内容のサマリーをあげてくれたりします。

▼サマリー例

Step 3：実装＆動作確認

AIが生成したコード一式を、Chromeの「拡張機能の管理」ページから読み込みます。
その後ブラウザでChatworkを開き、「@」と入力して、指示通りに動くかを確認します。

Step 4：修正依頼（フィードバックを繰り返す）

もちろん、一回で完璧なものができるわけではありません。
実際に動かしてみると、様々な改善点が見つかります。

「リストのデザインがイマイチだな…」
「キーボードで選択できないな…」
「選択した後にリストが消えない…」

そうした問題点や改善したいことを、再びAIに具体的に伝えます。

【修正指示の例】

ありがとうございます。
色の設定ですが、固定の値を入れるのではなく、chatworkのcss内で持っている変数の値を使えないですか？

この「指示 → AIがコーディング → 自分で動作確認 → 修正内容の整理」というサイクルを何度も繰り返しました。

実際にAIを使ってみたリアルな感想

今回、本格的にAIコーディング支援ツールを使ってみて、その実力と特徴が見えてきました。良かった点、そして「ここは改善が必要だな」と感じた点の両方を、正直にお話しします。

良かった点：0→70%までの圧倒的なスピード感

まず驚いたのは、明確で具体的な指示に対する「構築速度」です。

「この機能を実現するためのJavaScriptコードを書いて」
「このCSSを適用して」
など、ゴールがはっきりしているタスクを任せると、コードを書き上げてくれ、ほぼ完璧に動作します。特に、プロジェクトの骨格を作る「0から70%」のフェーズでは、AIは最強のパートナーになりえると思いました。面倒な初期設定や定型的なコード記述をすべて任せることで、より他の部分に注力できると感じました。

また、まるで高速のアジャイル開発のように、小さなイテレーションを回しながら理想の機能がどんどん形になる体験は、これまでにない開発体験でテンションが上がりました。

改善点："空気が読めない"ことによる手戻り

一方で、AIの課題も見えてきました。それは、指示が抽象的だと、文脈を無視して勝手に解釈を進めてしまう点です。

例えば、UIの調整で「隣のボタンと同じようなデザインにしてください」と、少しラフな指示を出した時のこと。 AIは「隣」がどの要素を指すのかを理解できなかったようで、全く見当違いのスタイルが適用されてしまいました。

人間同士なら「"隣"って、このボタンのことですよね？」と確認してくれる場面ですが、AIは疑問に思っても聞き返してはくれません（あまりに雑な指示には聞き返してくれましたが）。わからないまま突き進んでしまうのです。これには「頼むからわからないなら質問してくれ！」と切に思いました。

また、「70%から100%」のフェーズは不得意かなと感じました。

今回Chrome拡張の開発を題材に選んだことも影響しているかもしれませんが、細かい挙動やデザインが伝わりきらず、結局はエンジニア目線のかなり具体的な指示を出して、何とか解決しました。

AIとの対話で得た気づき

今回の経験から、AIをパートナーにする上で最も重要なのは「指示の出し方」だと痛感しました。
人間同士なら文脈で伝わることも、AIには通用しません。前提条件や目的を一つひとつ言語化し、誤解の余地をなくすプロセスが不可欠です。

そこで気づいたのは、この開発で求められたのはコーディングの知識以上に、「現状の課題は何か」「理想の状態はどういうものか」を的確な言葉で伝えるディレクション能力だということでした。

そしてこの能力は、まさにPMという仕事の根幹をなすスキルそのものです。

AIとの対話を通じて、自らの仕事の本質を再認識できたことは、大きな驚きであり、同時に深く腑に落ちる発見でした。

まとめ

今回は、PMが生成AIを使って開発をしてみたプロセスと、PMとして得られた気づきをご紹介しました。

生成AIによって劇的に開発のスピードは上がっていき、我々の生産性を上げていく強い武器になることは間違いありません。
ただそれには、生成AIに依頼するだけではなく、明確に言語化して的確な言葉で伝えるディレクション力が必要不可欠だと考えます。今後より一層このスキルを磨いていこうと思います。

私たちの会社では、事業拡大に伴いPM・Webディレクターを絶賛募集中です。

この記事を読んで「AIを業務に活用したい！」「このチーム、面白そう！」と感じていただけたら、
ぜひ「話を聞きに行きたい」ボタンからお気軽にご連絡ください！