はじめに
皆さん、こんにちは、初投稿になります。
本日はClaude Codeの開発Tipsを紹介させていただきます！
毎日いろんなプロダクトを動かしていると、同時並行で複数のものを作っていることが多いかなと思います。そんな時に一番問題となってくるのが、Claude Codeに作ってもらったものの確認作業だと思います。
私が今作っているものはWebアプリケーションが多いのですが、Claudeにある程度指示を与えて作ってもらった後に、もちろん確認をしなければなりません。
しかしながら、そもそも作ってもらったものの操作が分からなかったり、作成の意図を汲むところからスタートになったりというケースが多く、時間をかけなければいけないとは理解しているものの、それを逐一自分で開いて確認するという作業がとてもストレスになっていました。
ですが、この方法を使うことで、劇的に作業効率が改善し、フィードバックサイクルもうまく回るようになったので、共有したいと思います。
何をやっているか
- 実装が終わったら、その内容を一通りの流れで画面キャプチャに撮ってもらう
- そのキャプチャを載せたHTMLを作ってもらう
- それをArtifactとして発行してもらって、返ってきたURLを開いてチェックする
この3つを行ってもらうことで、視覚的に分かりやすく確認することを実現しています。
実装方法
下記のプロンプトをClaude Codeで指示すれば設定してくれます。
実装が終わったあとの報告を、画面キャプチャ付きのHTMLで受け取りたいです。
次の運用をこのプロジェクトに設定してください。
# やってほしいこと
実装が完了したら、毎回このレポートを出してください。
1. Playwright MCP を使って、今回実装した機能を実際に操作し、
一連の流れを順番にスクリーンショットで撮る
2. そのスクリーンショットを埋め込んだ、単体で開けるHTMLのレポートを作る。
入れる内容は次の4つ
- 何を実装したか
- 変更したファイル
- 操作の流れ（撮ったスクリーンショットを順番に並べる）
- 見てほしいところ（判断が必要な箇所、未対応で残したもの）
3. そのHTMLを Artifact として発行し、URLを返す
# 設定してほしいこと
- 上記の手順を impl-report というスキルにまとめてください。
撮影の作法（どの画面から始めてどこまで撮るか、開発サーバーの起動確認、
詰まりやすいところ）も、スキルの中に手順として書いてください。
- CLAUDE.md に「実装が完了したら impl-report を必ず実行する」と追記してください。
こちらから指示しなくても実行される状態にしてください。
画面キャプチャの取得方法
画面キャプチャの撮影は、皆さんご存知のPlaywrightのMCPを使っています。
Claudeに、実装内容の一連の流れを実画面でスクリーンショットに撮らせる形で行っています。
操作の流れを撮ってもらうことによって、作ってもらったものの全体像であったり、また作られたもの自体が使いやすいものなのかということを判断できるようにしています。
先にPlaywright MCPを使える状態にする必要があります。
出力はArtifactで
撮ってもらったキャプチャに関しては、HTMLで編集をしてもらって、ClaudeのArtifactとして発行してもらっています。
このArtifactに関しても、最近よく使われている方が多いかなと思うんですが、そのままClaude上でページとして確認できるものになっているので、URLをもらって開くことができます。
こうしてもらうことで、わざわざローカルファイルから開くという手間がなく非常に便利です。
実際に出してもらうと、このような形になります。
めちゃくちゃ見やすくないですか？？
このあたりはスキル化して、CLAUDE.mdにも実装時には必ず実行して！と書くことで、基本的に守ってもらうようできます。
まとめ
実際に作っていく中で、実装を任せている部分が今は多くなってきているかなと思うんですけれども、全部を指示しているわけではないので、操作方法すら分からないといったケースも出てきます。
そういった時にも分かりやすく教えてくれますし、そちらで作成されたものを見て、明らかに思っていたのと違うとか、想定と違うようなものが作られてしまったら、そのまま差し戻して作り直してもらうという判断が早くなります。
自分で手を動かして見ていくというところより一歩前に、早めにレビューできるということで非常におすすめです。
こういったところも、効率化としては非常に大事なんじゃないかなと思っていまして、このような使い方をしています。
今後も、このような自分がやっている情報を挙げていければと思います！
よろしくお願いいたします！