Revisely: ビジュアルフィードバックをAI修正へ

ウェブサイトのフィードバックをAIですぐ使える修正に変換。注釈を付け、UXの問題をチェックし、CSSを編集し、Cursor・Claude・GitHub・Linear・Jira向けにプロンプトやチケットをエクスポートできます。

Revisely — ライブなウェブサイトのフィードバックを、AIですぐ使えるコード修正に変換する Chrome 拡張機能。散らかったスクリーンショットや「もう少し右に寄せて」といった曖昧なメールとはお別れです。どのページのどの要素でもクリックし、メモを残し、CSS をライブで編集して、AI プロンプト・リビジョンカード・課題チケットとしてワンクリックでエクスポートできます。 開発者・デザイナー・QA テスター・制作会社・プロダクトマネージャーが、デザインのフィードバックを伝える最速かつ最も明確な方法です。 ✨ v1.3.0 — 新機能 • デザイン刷新: ページ内のパネルとツールバーをゼロから再設計しました。よりすっきり、より速く、リビジョンあたりのクリック数も削減。ワークフロー全体が右側のドックでスムーズに流れます。 • AIハンドオフプロファイル: Cursor・Claude・ChatGPT・v0・Lovable それぞれに最適化した専用プロンプト。各プロンプトにはセレクタ・優先度・担当者・受け入れ基準が含まれます。Revisely が適切なプロンプトをコピーし、AI ツールを自動で開きます。あなたは貼り付けて進めるだけ。 • 自動課題ファインダー（ページ監査）: コントラスト不足・文字が小さすぎる・alt テキストの欠落・タップ領域が小さいなど、よくある UX・アクセシビリティの問題を自動で検出し、ワンクリックでリビジョンに変換します。 • GitHub・Linear・Jira エクスポート: フィードバックを、課題トラッカーにそのまま貼り付けられるチケットとしてエクスポート。ステータス・優先度・担当者・セレクタ・推奨 CSS も含まれます。 • チームメタデータ: 各リビジョンに優先度・ステータス・担当者を割り当て、リビジョンカードやプロンプトをチームにとってさらに便利にします。 • DESIGN.md・SKILL.md ハンドオフ: デザインのコンテキストとプロジェクトのルールを、1 つのファイルで AI コーディングツールに引き継げます。 • インポートとセッション復元: 以前エクスポートしたリビジョンカードを読み込むと、Revisely が URL を認識し、すべてのメモ・バッジ・CSS 編集を中断したところから復元します。 • 5 言語対応: 英語・トルコ語・ドイツ語・スペイン語・日本語 — 拡張機能内から即座に切り替えられます。 🚀 なぜ Revisely なのか？ ウェブ制作では、フィードバックはしばしば「伝達の途中」で失われます。「これを 1 ピクセル左へ」「この青をもう少し濃く」といった言葉は、すぐに意味を失います。Revisely は、ライブの DOM に直接注釈を付けられるようにすることで、この問題を根本から解決します。 - 視覚的＋技術的なコンテキストを同時に取得: スクリーンショットだけでなく、HTML 要素・その CSS セレクタ・算出済みスタイルまでキャプチャします。 - AI ファーストのワークフロー: バグを報告するだけでなく、解決策そのものを書きましょう。AI が変更を即座に適用するために必要な技術情報をすべて含む、構造化されたプロンプトとしてフィードバックをエクスポートできます（Cursor・Claude・ChatGPT・v0・Lovable に対応）。 - プロ品質の成果物: チームやクライアント向けに、洗練された「リビジョンカード」HTML レポート、または GitHub / Linear / Jira のチケットを生成できます。 🌟 主な機能 1. クリックしてマークする要素ピッカー: ページ上の任意の要素にカーソルを合わせてクリック。Revisely が、あなたが意図した要素を正確にハイライトします。 2. スクリーンショットへの描き込み: リビジョンを追加する際、ペン・矢印・四角形を使って、何が問題かを正確にマークできます。 3. 組み込みのライブ CSS エディタ: 変更を「説明」するのではなく、「見せる」。 - カラーピッカー: テキストと背景の色をライブで調整。 - タイポグラフィ: フォントサイズを変えて階層を最適化。 - スペーシング: margin と padding のためのビジュアルなボックスモデル操作。 - カテゴリ: 問題を「バグ・デザイン・コンテンツ・その他」でタグ付けし、簡単に絞り込み。 4. AI プロンプトジェネレーター（Developer Export）: Revisely を際立たせる中核機能。次の内容を含む構造化されたプロンプトとしてフィードバックをエクスポートします。 - 正確な CSS セレクタ（ID／クラス） - 現在の算出済みスタイルと、要求する変更内容 - 文脈を含む HTML スニペット このプロンプトを任意の AI コーディングアシスタントに貼り付ければ、修正済みのコードがすぐに手に入ります。 5. 自動課題ファインダー（ページ監査）: コントラスト・alt テキスト・タップ領域などのアクセシビリティ／UX の問題を自動で検出し、ワンクリックでリビジョンに変換します。 6. 課題トラッカーへのエクスポート: フィードバックを、GitHub・Linear・Jira 向けのそのまま使えるチケット文面に変換。ステータス・優先度・担当者・技術的な詳細も付きます。 7. ビジュアルなリビジョンカードとカスタムスクリーンショット: 高品質で自己完結型の HTML レポートをエクスポートできます。 - 自動スクリーンショット: 各問題ごとに自動でトリミングされた画像。 - 画像の差し替え: 自分のカスタム画像やモックアップをカードに直接アップロード。 - 組み込みの「AI プロンプトをコピー」ボタン。 8. セッションのインポートと復元: エクスポート済みのリビジョンカードを読み込むと、Revisely が URL を認識し、すべてのバッジ・メモ・CSS 編集を中断したところから復元します。チームメンバー同士でリビジョンファイルをインポートし合うこともできます。 👨🏻‍💻 こんな方へ - 開発者: セレクタとスタイルデータ付きの、本当に意味のあるバグレポートを受け取れます。 - デザイナー: 実装されたデザインを QA し、ピクセル単位のフィードバックを送れます。 - QA テスター: 視覚的なバグをこれまで以上に速く記録できます。 - 制作会社・フリーランス: クライアントの修正依頼を、明確でプロフェッショナルなレポートに変換できます。 - クライアント・PM: コードを知らなくても、変更を明確に伝えられます。 🔒 プライバシー最優先 Revisely は 100% ローカルで動作します。アカウントなし、ログインなし、クラウドなし、バックエンドなし。あなたの視覚データとフィードバックはブラウザ内で処理され、エクスポートしたファイルを自分で明示的に共有しない限り、外部サーバーに送信されることは一切ありません。 Revisely は AI を一切呼び出さず、API キーを求めることもありません。用意されたプロンプトを生成するだけで、それを自分の AI ツール（Cursor・Claude・ChatGPT …）に貼り付けるかどうかは、完全にあなた次第です。 今すぐ Revisely をダウンロードして、同じバグを二度直す作業から卒業しましょう。