この記事は HowTelevision Advent Calendar 2025、19日目の記事です。 25日まで連続投稿します。 qiita.com
はじめに
こんにちは。ハウテレビジョン開発部の山本です。
Advent Calendar 19日目は「エンジニア2人+デザイナー1人」の仕事を1人で。新サービスの管理画面をClaude Codeに助けてもらった話です。
新サービスを立ち上げる際、どうしても後回しにされがちなのが「管理画面（Admin Panel）」です。
今回、私も新サービスの立ち上げに参加したのですが、エンジニア・デザイナーのほとんどをユーザー向け機能（ToC）に集中させたため、運営に必要な「会員管理」や「審査機能」などの管理機能を一人で担当することに⋯。
- 現状: 開発リソースはバックエンドエンジニアである自分一人。
- 課題: 開発期間が短く時間的な余裕はあまりない。人手も足りない。デザイナーじゃないけど「それなりに使いやすく、見た目の良い」UIは実現したい。
- 理想: 本来ならバックエンド1名、フロントエンド1名、デザイナー1名のチームで動くような内容を、一人でサクッと終わらせたい。
自分一人でコツコツと実装するのはどう考えても時間的に無理です。 そこでClaude Codeに開発パートナーとして助けてもらうことにしました。
今回は、このClaude Codeとバックエンドエンジニアが二人三脚で管理アプリをサクッと実装できた記録と、そこで得られた「AIエージェント型開発」の知見を共有したいと思います。
今回の技術スタックと「Claude Code」について
まずは前提となる環境です。
- Frontend: Vite + React + TypeScript
- Styling: Tailwind CSS (UI構築の効率化と非デザイナーでもある程度微調整できる)
- Backend: Hono (軽量かつ高速なAPI構築)
- AI Agent: Claude Code + GitHub Copilot
Claude Codeとは？
一応、ご存じない方のために補足すると、Claude CodeはAnthropic社が提供するCLIツールです。アプリやブラウザのチャット画面でコードを生成するだけでなく ターミナル上で動作し、ローカルのファイルシステムに直接アクセスして、コードの読み書き・コマンド実行・Git操作まで行うCLIエージェントです。
※今回はVS Code にプラグインを導入して Serena MCP と一緒に使っています。
開発においてAIとどう協業したか
プライベートではお触り程度にしかAIをつかったことがなかったので、色々と試行錯誤した結果、次のような使い方に落ち着きました。
Planモードで「設計」から入る
いきなりコードを書かせるのではなく、まずはClaude Codeの Plan モードを使って要件定義を行いました。
この工程を踏むことで自身の頭を整理するのと同時に、AIにプロジェクトのコンテキストをある程度理解してもらうことが目的です。プロジェクトの概要と目的を入力した後に
「HonoとVite/React/Tailwindを使って管理画面を作りたい。必要な機能は『認証・認可』『ユーザー管理』『審査機能』『通報管理』です。まずはディレクトリ構造と設計方針を提案してください。」
このように投げかけると、Claudeは技術スタックを理解し、たたき台を提示してくれます。「審査機能には承認・否認のステータスが必要ですね？」「認証の方式はどうしますか？」といった壁打ちを自然言語で行い、設計が固まった段階で「じゃあ、ボイラープレートを作成して」と指示。
数分後には、認証周りと基本的なディレクトリ構成が実装されたコードを出力してくれます。 ※ 念の為、各種設定ファイルの中身は目視で確認しておきます。
エラーもUI調整も「会話」で解決
開発中のイテレーション（反復）もスムーズです。
自律的なエラー修正
開発中にエラーが発生した際、わざわざそのエラーをAIに説明する必要はありません。Claude Codeはターミナルの出力を読んでいるため、
「あ、エラー出たね」と思っていると、向こうから
「エラーログを確認しました。XXの型定義が一致していないようです。修正しますか？」
と提案してきます。こちらは内容を確認して「はい」と答えるだけで修正完了です。
「言葉」でデザインする
「UIの調整を言葉で指示するとスタイルに翻訳してくれる」
デザイナーではない私にとって今回一番助かったのがこれです。
「このユーザーの削除ボタン、赤くして。あと確認モーダルを出してから削除するように変更して。」
「他の画面とトンマナをあわせるようにして」
このように指示するだけで、Tailwindのクラスを適切に当て、コンポーネント実装まで一気に完了します。 どうしてもうまく伝わらない部分だけ、自分で調整するケースがあったのですが、Tailwind だとパーツが用意されているのでDocumentを見て少し入れ替えるだけです。
このような単純な認証なら数秒で実装してくれます。
人間が介入すべきポイント
もちろん、全てを「お任せ」にはできません。ここが品質を担保するための重要な部分だと思います。
- 複雑なビジネスロジック サービス固有の「審査フローによるステータス遷移」など、コンテキストが深い部分は人間がロジックを整理して指示、あるいは自分で書く必要がありました。
- 導線設計やUXの部分はまだまだ
会話によりそれなりのデザインは実装できますが、指示役である人間側がデザインの素人なので、やはり限界はあります。
AIをつかってデザインするにしても、やはり指示を出すためには専門知識は必須。 - 品質管理（別のAIモデル + 人間）
こちらの指示が悪かったりして要求と違うコードが実装されることがあります。なので今回は「AIが書いたコードを、別のAIと人間がレビューする」という方法を取りました。
Claude Codeが書いた実装に対し、まず自分が目視で確認します。次にGitHubにPull Requestを作成するとGitHub Copilotがコードレビューをしてくれます。
このGitHubCopilotのレビューは、ルールや方針をカスタムすることができるので、プロジェクトの方針に沿ったコード品質になっているかの確認もできます。
また異なるモデルを使ってコードレビューを実施することで、違う視点での指摘を受けることができます。
最後に他のエンジニアの方にレビューを依頼して人の目でも確認してもらいます。
Claude Codeを使ってみた感想
良かった点（Pros）
- コンテキスト理解力が高い: プロジェクト全体のファイル構成を把握しているので、Aというファイルを直すためにBとCのファイルも修正する、といった「文脈を読んだ修正」が可能です。
- 単純作業からの解放: CRUD画面の土台作成、型定義、単体テストの実装など、人間がやると時間がかかる作業を一瞬で終わらせてくれます。
難しかった点・注意点（Cons）
- 「Yesマン」ゆえの暴走: こちらの指示が曖昧だと、Claudeは気を利かせて実装しますが、仕様と異なる解釈で進んでしまうことがあります。しかもテストコードまでその「間違った仕様」に合わせて書いてしまうため、テストが通っていても仕様バグがある、という事態が起こります。
- Git操作のリスク: 設定で
Edit Automaticallyなどの権限を与えすぎると、修正だけでなくgit commitやpushまで勝手に行うことがあります。- 対策: 禁止ルールを明確にするか、コミット前に必ず人間の承認（y/n）を挟む設定にしておくことが必須です。
成果とまとめ
定量的な成果
最終的に、認証・会員管理・審査機能・通報管理・マスタ管理といった必須機能を実装し終えるのにかかった工数は、体感で従来の半分以下でした。
特にUIに関しては、非デザイナーでも「社内ツールとしては十分すぎるクオリティ（80点）」のアウトプットが出せたと思います。微調整もTailwindを知っていれば（Documentを読めば）容易です。
開発体験（DX）の変化
最大の変化は、「コードを書く時間」が激減し、「設計と要件定義をする時間」が増えたことです。 「どう書くか（How）」はAIに任せ、「何を作るか（What）」に集中する。これにより、エンジニア1人でも「2人＋デザイナー1人」分のパフォーマンスを出すことが現実的になりました。 ただずっとコードを書いてきた人間としては、自分の存在意義が問われるような複雑な気持ちにもなったり⋯。
まとめ
AIをうまく使えば、いままで一人ではできなかったことができるようになる。
中年のおじさんエンジニアとしては「なんかすごい時代になってきたな〜」と感じる一方で「置き去りにされないようにアップデートを続けていかないと」と思わされる体験でした。
一緒に働いてくれる仲間を募集中！
弊社では、一緒に技術的な課題に取り組んでくれるエンジニアを募集中です！
現在募集中の採用情報の詳細は下記をご覧ください。
開発チームの最新情報はXでも発信しています。ぜひフォローをお願いします！
