はじめに
QA業務をしていると、「この作業、あと一歩ツールがあれば楽になるのに」と思う場面が意外と多くあります。今回、そういった細かい不便さを解消するためにブックマークレットを作ってみたところ、思った以上に業務が快適になったので、その経緯と実際に作ったもの、そして今後試してみたいアイデアをまとめてみます。
きっかけ：拡張機能では届かなかった痒いところ
最初はブラウザ拡張機能を作ることも検討しました。ただ、拡張機能は次のような制約がネックになりました。
- インストールや配布の手間がかかる
- 組織によっては拡張機能の導入自体に申請や承認が必要
- ちょっとした思いつきレベルのツールを試すには重い
さらに、業務端末に何かをインストールするとなるとセキュリティ的な不安もあり、「便利そう」というだけで気軽に導入できるものではありませんでした。
そこで目をつけたのがブックマークレットです。ブックマークレットであれば、
- インストール不要でブラウザのブックマークバーに登録するだけ
- コードはURLの形で完結しており、拡張機能ほど大がかりな権限を必要としない
- 気軽に作って、気軽に捨てられる
という手軽さがあり、「まず試してみる」のハードルがぐっと下がりました。もちろんブックマークレットにもできることの限界はありますが、今回解決したかった課題に対しては十分でした。
実装はClaude Codeにお任せ
自分でゼロからJavaScriptを書き上げるのではなく、Claude Codeに「こういう動きをするブックマークレットが欲しい」という方向性を伝えて実装してもらう形で進めました。細かい実装の試行錯誤をこちらで抱え込まずに済んだので、アイデアを形にするスピードがかなり上がったのは大きなメリットでした。
実際に作ったもの
1. サイトと画像を横に並べて比較するツール
デザインカンプ（画像）と実際の実装画面を並べて見比べたいというシーンはQA・デザインレビューの現場でよくあります。このブックマークレットを使うと、閲覧中のページと任意の画像を画面上に横並びで表示し、差分を目視確認しやすくなります。わざわざ別ツールを開いたり、画像を切り替えながら見比べたりする手間がなくなりました。
2. キャプチャと簡単な加工ツール
バグ報告や共有のためにスクリーンショットを撮ることは日常的にありますが、「撮る→別ツールで開く→加工する→保存する」という一連の流れが地味に手間でした。ブラウザ上でキャプチャを撮り、そのまま簡単な加工（矢印や枠線の追加など）までできるようにしたことで、バグ報告作成のスピードが上がりました。
今後試してみたいアイデア
作ってみて感じたのは、「ブックマークレットは小さな不便を解消する手段として非常に相性がいい」ということです。今、頭の中にあるアイデアを備忘録も兼ねて書き出しておきます。
- ページのinfo情報を取得する機能：タイトルやURL、meta情報などをワンクリックで取得・整形してコピーできるようにする
- カラーピッカー：ページ上の任意の要素の色をその場で取得する
- テスト支援ツール：入力補助など、テスト実施時の定型作業を効率化する
- テストケース蓄積機能：ブラウザ上で見つけた観点やケースをその場でメモ・蓄積していける仕組み
- バグ表への起票機能：ブラウザから直接バグ管理ツールにチケットを起票できるようにする
- ブラウザ上でAIと対話しながら相談できる機能：作業中の画面を見ながらその場でAIに相談できると、調査や判断のスピードが上がりそう
これらは実現の難易度もそれぞれ違い、決して簡単なものばかりではありませんが、「検討する価値はありそうだ」と思えるものばかりです。
おわりに：ブックマークレットの先にあるもの
こうして小さなツールを積み重ねていくうちに、「これはブックマークレットという枠にとどまらず、もっと大きな話につながるのでは」と思うようになりました。たとえば、
- QA業務に特化した機能をあらかじめ組み込んだQA向けブラウザを作る
- 今回のブックマークレット群を統合して、もっと便利な単一のツールに育てる
といった方向性です。今回はあくまで「小さく作って試す」ところから始めましたが、積み重ねた先に見えてくる可能性についても、引き続き考えていきたいと思います。
同じようにQA業務の中で「ちょっとした不便」を感じている方の参考になれば幸いです。