「このボタンを少し大きくして」とAIに頼むと、別のボタンまで変わってしまう。画面を見れば一瞬で指せる場所を、文章ではうまく伝えられない。Spotnoteは、その受け渡しを助けるVite用プラグインです。ブラウザー上の要素を選んで修正メモを書くと、元のファイル・行・列と現在のスタイルを添えた指示文を作れます。
2026年10月21日公開のv0.5.0では、Webhookでメモを送る際に対象周辺の画像を添付できるようになりました。本記事では、架空の見積もり画面で日本語メモを送り、クリップボードと画像付きWebhookの出力を実際に確認しました。AIがコードを直すところまでの性能比較ではなく、「修正したい場所を正しく渡せるか」の検証です。
SpotnoteはVite 5以上・Node.js 22以上が必要です。Next.jsには非対応。日本語の入力は今回のサンプルで確認しましたが、操作UIは英語でした。AIエージェントの契約や利用料金は別途必要になる場合があります。
今回の新機能は「画像付きの修正メモ」
公式v0.5.0リリースは2026年10月21日12:29:40 JST、npm公開記録では同日12:30:23 JSTに利用可能になっています。夕方の確認時点で公開から約4時間です。npmでの初回公開は10月15日であり、本日生まれたサービスという意味ではありません。
| 項目 | これまでの機能と今回の追加 |
|---|---|
| 画面の要素を選ぶ | ソースの位置を含む指示文を生成する既存機能 |
| Webhookで送る | メモを自分の受信URLへ送る既存機能 |
| v0.5.0の追加 | Webhookに対象周辺の画像を添付できる |
| 画像の調整 | 周囲の余白と最大幅を設定できる |
たとえば制作担当者が「この申し込みボタンの上下を広げたい」と書けば、開発者は文章だけでなく、対象ファイルと見た目を一緒に確認できます。Webhookとは、ある操作をきっかけに指定URLへデータを送る仕組みです。Spotnoteを入れるだけでSlackやGitHubへ直接投稿できるわけではなく、各サービスにつなぐには受信側の処理が必要です。
「画像」「場所」「依頼内容」を分けて渡す
画面の画像は「何が見えていたか」を、ファイルと行番号は「どこに書かれているか」を、メモは「どう変えたいか」を伝えます。この3つをそろえるのがSpotnoteの用途です。ソースの行番号は、対象のDOM要素を生成した場所を示します。CSSの修正箇所やイベント処理の場所まで自動で特定したという意味ではありません。
同じコンポーネントからボタンが複数描画される場合もあります。指示文に対象テキストや描画インスタンスの情報があっても、共通コンポーネントを変更すれば他の表示へ影響します。「この画面だけ」「共通スタイルは維持」など、変更範囲は人が補う必要があります。
日本語の指示を実際に送ってみた
検証日は2026年10月21日。macOS上のChrome、Node.js 23.11.0、Vite 8.3.4、React 19.2.0、@vitejs/plugin-react 6.1.2、Spotnote 0.5.0を使用しました。既存サイトとは別のアプリを作り、実在の顧客・取引情報を含まない見積もり画面を用意しています。
入力したのは「このボタンの上下の余白を16pxにしてください。文言と送信処理は変更しないでください。」です。Enterで確定したあと、クリップボードには次のような内容が入りました。以下は実測出力の抜粋です。
## Requestこのボタンの上下の余白を16pxにしてください。文言と送信処理は変更しないでください。
## Target- file: src/main.jsx- line: 5, column: 142- element: <button>- text: "見積もりを送信"
## Current computed styles padding: 8px 12px元のJSXと照合すると、5行目・142列目は選択したbutton要素でした。padding: 8px 12pxは変更前の計算済みスタイルで、上下8px・左右12pxを意味します。指示文を作っただけでは16pxに変わりません。実際の修正は、指示を受け取ったAIや開発者が行います。
| 確認項目 | 今回の結果 |
|---|---|
| 日本語メモ | 入力した文面をクリップボードとWebhookで確認 |
| 対象の位置 | src/main.jsx:5:142が選択したbuttonと一致 |
| 画像付き送信 | ローカル受信先でWebP画像を受信 |
| 送信形式 | multipart/form-dataのpayloadとscreenshotを確認 |
| 通常のproductionビルド | 生成物に対象のdata-spotnote属性・Webhook URL・ランチャー識別子がないことを確認 |
| 未検証 | AIによる自動改修、MCP連携、他フレームワーク、ステージングへの配信 |
実際に届いた画像には、周辺の表示も入る
画像は5,880バイトで、対象のボタンだけでなく「Webサイト制作」や周辺の説明も入りました。一方、入力中のSpotnoteパネルそのものは画像に含まれていません。メモ本文は画像の中ではなく、同じリクエストのpayloadにあるJSONで受け取ります。
公式Webhook資料によると、標準の画像範囲は対象の周囲100px、最大幅1000pxです。これはディスプレイ全体の録画・キャプチャーではなく、DOMから作った画像です。canvasや動画、CORS条件を満たさない別オリジンの画像などは、見えているとおりに再現できない場合があります。画像生成・送信に失敗すると画像なしのJSONになるため、受信処理は両方を扱います。
Webhookを指定すれば、そのURLへメモや画像が送られます。画面上の個人情報・売上・内部パスも対象になり得ます。また、指示文をクラウドのAIへ貼れば、そのサービスへ送信されます。最初は架空データで試し、実業務では送信先と含まれる情報を確認してください。
既存のViteアプリに追加する手順
まずは画像送信やMCPを付けず、指示文のコピーだけで使うと導入の効果を確認しやすくなります。以下は既存のReact＋Viteアプリを想定した例です。フレームワークごとの条件は公式対応表を確認してください。
npm install -D spotnote@0.5.0import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import spotnote from 'spotnote';
export default defineConfig({ plugins: [react(), spotnote()],});- 1npm run devで開発サーバーを起動する。
- 2ブラウザー左下の「Open Spotnote」を押し、変更したい要素を選ぶ。
- 3修正内容を書いてEnterを押す。
- 4コピーされた指示文をエディターなどへ貼り、対象のファイル・行と画面の要素が一致するか確認する。
- 5使っているAIエージェントへ渡す。変更差分と、共通部品への影響を確認する。
Spotnote自体はMITライセンスのオープンソースで、公式READMEではアカウント不要とされています。OS別の対応表は確認した資料にはなく、本記事で実測したOSはmacOSのみです。UIは英語でも、今回の日本語メモはそのまま保持されました。日本語のすべての入力方法やIMEを網羅した試験ではありません。
同じ画面で試せる教材を用意した
日本語検証用アプリのZIPには、架空の見積もり画面、バージョンを固定した依存関係、ローカル受信プログラムを入れています。実測した指示文も確認できます。ZIPを展開したフォルダーで次を実行します。
npm cinpm run devhttp://127.0.0.1:8772を開いて試してください。教材はVite 8.3.4を固定しているため、Spotnote単体の最低条件に加え、ViteのNode.js条件も必要です。Node.js 22系なら22.12以上など、依存関係の条件を満たすLTSを使ってください。今回の実測環境は23.11.0ですが、同じバージョンを新規導入することを推奨するものではありません。
画像を受け取る場合は、ターミナルを2つ使います。1つ目で受信側を起動し、2つ目では通常の開発サーバーを止めてからWebhookを有効にします。次の環境変数の書き方はmacOS/Linux用です。
# ターミナル1npm run receiver
# ターミナル2SPOTNOTE_WEBHOOK=1 npm run dev再びメモを送ると、教材内のtrial-outputフォルダーにreceived.jsonと画像が保存されます。この受信側は127.0.0.1だけで待ち受ける検証用で、外部サービスへ転送しません。停止は各ターミナルでCtrl+C。公開サーバー用の認証・流量制限などは備えていないため、そのままインターネットに公開しないでください。
仕事では「変更しないもの」まで一緒に伝える
用途として考えやすいのは、社内画面の余白調整、試作品のレビュー、フォームの文言・エラー表示の修正です。下の文は実測結果ではなく、修正依頼に追加するためのテンプレートです。Spotnoteが付けた対象情報の後ろに添えて使えます。
選択したボタンの上下の余白だけを16pxにしてください。 変更前に、添付されたファイル・行番号と現在のコードが一致するか確認してください。 文言、送信処理、アクセス権限は変えないでください。 共通コンポーネントを変える必要がある場合は、影響する他の画面を先に示してください。 修正後はPCとスマートフォンの表示、キーボード操作を確認し、変更差分を示してください。
行番号はコード更新でずれます。レビューの途中で別のコミットへ切り替わった場合は、古いメモの位置をそのまま信じず、対象テキストとコードを再確認します。特定の要素を選べても、修正方針が正しいか、業務ロジックが守られているかは別の確認です。
最初の評価は「往復が減るか」で行う
今回確認できたのは、日本語の依頼と正しいソース位置を組み合わせ、画像付きで受け渡せることです。作業時間が何割減るか、どのAIが一番うまく直せるかは測っていません。導入するなら、小さな画面修正を数件選び、「どのボタンですか」という聞き返しや、別の場所を直す誤りが減るかを記録すると判断しやすくなります。
ふくふくの公開サイトはNext.jsなので、このプラグインをサイト本体へ導入したわけではありません。検証は別のViteアプリで実施しました。自分の開発環境に合うかを先に確かめたうえで、まずコピー方式、必要ならローカルWebhook、という順序で試すのが扱いやすい導入方法です。
確認日：2026年10月21日。主な一次資料：v0.5.0の変更点、README、Webhook仕様、対応フレームワーク、画像生成の実装。仕様の説明はv0.5.0に固定した資料を参照しています。