この記事は HowTelevision Advent Calendar 2025 7日目の記事です。25日まで連続投稿します。
外資就活ドットコム開発チームの菅です。 私たちのチームのフロントエンド開発における最も大きな変化は、Claude Code + MCPの導入です。
Claude Code自体の力に加え、MCPを接続することで、プロジェクトのコンテキストを統合的に把握できるようになりました。これにより、UI実装からブラウザでの挙動確認までを一貫してAIに依頼できるようになり、開発体験が劇的に変化しました。
Figma MCP
MCPを通じてFigmaに接続し、デザインのリンクをClaude CodeにわたすことでUIの大枠を自動生成できます。この機能のメリットは、Figmaで定義されたコンポーネント構造やスタイルトークンといったデザインデータを、Claude Codeがコンテキストとして正確に利用できる点にあります。
- プロンプト作成の手間を削減: 詳細なレイアウトやスタイルを記述する代わりに、デザイン情報が自動的にClaude Codeに伝達されます。
- スムーズな実装着手: 自動生成コードがそのまま本番利用できることは稀ですが、「叩き台」があることで、具体的な実装イメージをAIに効率的に伝えることができ、実装フェーズへの移行が迅速になりました。
chrome-devtools 連携
Chrome DevTools連携を使用すると、Claude Codeが自動でブラウザを起動し、指定されたシナリオに基づきUIの確認・デバッグを実行してくれます。Claude Codeがブラウザの内部情報にアクセスできるため、エラーの検出やデバッグログの確認も可能です。
AIによる自動チェック項目には、主に以下のものがあります。
- レイアウト崩れの有無: 異なる環境におけるUIのレンダリングチェック。
- イベントの正常動作: ボタンクリックやフォーム操作などのイベントの挙動確認。
- コンソールエラーの検出: 実行中に発生するエラーや警告のログからの抽出。
UIの崩れなどは検知できないことも多いですが、これらの基本的なチェックが自動化されたことで、問題の発見→修正のフィードバックループの速度が向上しました。特に、見落としがちなバグの早期発見に繋がり、結果として開発のボトルネックの一つが解消されました。
サブエージェント・カスタムコマンド
Claude Codeのサブエージェントとカスタムコマンドの仕組みは、繰り返される複雑なタスクの効率化と品質の安定に貢献しています。
サブエージェントは、リファクタリングや特定のエラー修正など、専門的なタスクに特化した指示セットを定義する機能です。これをカスタムコマンドとして登録することで、例えば「2つ前までのコミットに含まれる実装のリファクタ」といった複雑な依頼も、短いコマンド一つで実行できるようになります。
これにより、毎回詳細な指示を記述する手間が省け、AIに一貫した品質で作業を依頼することが可能になりました。特に、コードベース全体に影響するリファクタリングやエラー修正といった作業において、手順の標準化と実行の効率化が図れています。
🌟 おわりに
Claude Code導入以前はGitHub Copilotを使用していましたが、その時点でも開発体験は大きく様変わりしていました。
今回のClaude Code + MCPの導入で、私たちのチームでは設計・指示出し・レビューといったタスクに重点を置くことができるようになりました。実装作業の大部分をAIが支援してくれるようになったことで、開発者はより本質的な課題解決に集中し、プロダクトの品質向上に取り組んでいます。
私たちは、現状の効率化に満足することなく、今後もこのAI支援体制をさらに深化させ、開発効率を向上させていくことを目指します。来年以降、AIツールの状況は再び大きく変わるかもしれませんが、その時々で最も効果的でより良いものをチームで検討し、柔軟に取り入れていく方針です。開発環境を常に最適化することで、ユーザーに最高の価値を提供し続けたいと考えています。
ハウテレビジョンは、「全人類の能力を全面開花させ、世界を変える」をコーポレートミッションに掲げ、いくつもの新規事業を創り出しています。 一緒にこのミッション実現を目指して戦ってくださる仲間を募集しておりますので、よかったらぜひ採用情報をご覧ください。
▼募集中ポジション herp.careers
▼会社紹介サイト
