English ブラウザで使う

SaaS の利用ガイドをつくる人へ

ただの画像なのに、
何度でも直せる。

ガイド用のスクリーンショットに、枠・番号・説明を。保存はふつうの JPEG / PNG。どこにでも貼れて、Harie で開けば枠も文字も何度でも直せます。

ブラウザで使う GitHub を見る

無料・オープンソース（MIT）。インストールもアカウントも要りません。

架空の SaaS「Tasklane」の通知設定画面のスクリーンショット 同じ画面に、番号付きの赤い枠と説明の吹き出しを 3 組付けた画像
同じ 1 つのファイルです

ガイドの画像づくりは、手間が多い。

  • どこを囲み、何と書くか毎回迷う人によって書き方もばらばらになります。
  • 画像の数だけ同じ作業撮る、開く、書く、書き出すを繰り返します。
  • 文言 1 つで作り直しボタンの名前が変わっただけで、画像を作り直します。
  • 前任者の画像を直せない元のデータがどこにあるか分かりません。
  • 個人情報が映り込む本番の画面には、お客さまの名前やメールが並びます。

撮って、補って、残す。

取得から保存までを 1 本でつなぎます。

  1. 撮る

    Chrome 拡張で表示中のページを撮って、そのままエディタへ。見えている範囲・ドラッグした範囲・ボタンなどの要素を選べます。

  2. 補う

    枠・矢印・番号・吹き出し・スポットライト。説明したいことを書けば、AI が番号付きの枠と説明文を下書きします。

  3. 残す

    保存はふつうの JPEG / PNG。ヘルプページにそのまま貼れて、あとから誰が開いても注釈を直せます。

保存したあとも直せる仕組み

1 枚の画像に、元の画面と注釈が入っている。

Harie で保存した画像には、見るための画像と一緒に、元のスクリーンショットと注釈のデータが入っています。ほかのアプリやブラウザでは、ふつうの画像として表示されます。

Harie で開くと、枠も文字も 1 つずつ動かしたり書き換えたりできます。プロジェクトファイルを別に残す必要はありません。画像を受け取った人が、そのまま開いて直せます。

保存し直しても元のスクリーンショットは再圧縮しないので、何度直しても画質は落ちません。ファイル形式の仕様も公開しています。

tasklane-notifications.harie.png 149 KB
見るための画像どのアプリでも表示できる
元のスクリーンショット再圧縮しない
注釈のデータ枠 3・番号 3・吹き出し 3
この見本をダウンロードしてエディタで開くと、注釈を直せます。
ガイド画像の作り方の比較
画像編集ツールで書き出し 手順書作成サービス Harie
ヘルプページにそのまま貼れる ○ サービスから書き出す ○
貼った画像の文言をあとで直せる 元のプロジェクトファイルがあれば サービスの中でなら ○ 画像を開くだけ
作った人以外が直せる ファイルを受け渡せば 同じ契約のメンバーなら ○ 画像を渡すだけ
アカウント・契約が要らない ツールによる 要る ○

AI

「どこに、何を」を、AI と決める。

補足の提案

「Slack 通知の設定方法を説明したい」のように書くと、AI が囲む場所と説明文を下書きします。下書きは 1 つずつ採用・却下・修正できます。Chrome 拡張で撮った画像は、ページの要素の位置に枠を合わせます。

Anthropic の API キーを設定して使います。画像を送る前に確認を出し、キーはこのブラウザの中にだけ保存します。

Claude から直接編集（MCP）

MCP サーバー @harie/mcp を登録すると、Claude Code や Claude Desktop に頼むだけで注釈を付けたり直したりできます。UI の文言が変わったときも、まとめて直せます。

guides の通知設定の画像で、「保存して反映」を「更新して反映」に直して

harie_open → harie_edit

吹き出し 3 の文言を直して上書き保存しました。

個人情報

何の画面かは伝わるまま、個人情報だけ消す。

氏名・メール・電話番号などを、ダミーの値に置き換えられます。ぼかすより、どんな項目が並ぶ画面なのかが読み手に伝わります。塗りつぶし・モザイク・ぼかしも選べます。

加工は元の画像に直接かけるので、元に戻せません。ファイルを人に渡しても、加工前の値は中に残りません。

加工前 担当者欄に架空の氏名とメールアドレスが表示されている
加工後 担当者欄がダミーの値「担当 A」に置き換わっている
見本の画面・氏名・アドレスはすべて架空のものです。

いつもの場所で使える。

どこで保存しても同じファイル、同じ見た目です。

Web

今すぐ使える

ブラウザで開くだけ。画像はブラウザの中で処理し、サーバーに送りません。オフラインでも使えます。

エディタを開く

Chrome 拡張

ストア公開準備中

表示中のページを撮って、そのまま注釈を付けます。今はソースからビルドして読み込めます。

入れ方を見る

デスクトップ

配布準備中

macOS / Windows。OS のダイアログで開いて、そのまま上書き保存できます。

詳しく見る

MCP

今すぐ使える

Claude などの AI エージェントから、指定したフォルダの画像を読み書きします。

始め方を見る

MCP の始め方

Claude に頼んで、注釈を付ける。

MCP サーバー @harie/mcp を登録すると、Claude Code や Claude Desktop から Harie の画像を開いて、注釈を付けたり直したりできます。

  1. Node.js 22 以上を用意する

    サーバーは npx で npm から取ってきて動かすので、別のインストールは要りません。node -v で版を確かめられます。

  2. 使うアプリに登録する

    --root には注釈を付けたい画像を置くフォルダを指定します。サーバーが読み書きできるのは、このフォルダの中だけです。

    Claude Code

    claude mcp add harie -- npx -y @harie/mcp --root ~/Pictures/guides

    Claude Desktop

    claude_desktop_config.json に追加して、Claude Desktop を再起動します。フォルダは自分のパスに変えてください。

    {
  "mcpServers": {
    "harie": {
      "command": "npx",
      "args": ["-y", "@harie/mcp", "--root", "/Users/you/Pictures/guides"]
    }
  }
}

  3. 頼んでみる

    • 「settings.png を Harie ファイルにして、保存ボタンを赤枠で囲み、『ここで保存します』と吹き出しを付けて」
    • 「guides の画像で、メールアドレスが映っているところをダミーに置き換えて」

    個人情報の加工は元に戻せないので、確認を付けたときだけ保存する作りになっています。

    ツールの一覧と詳しい使い方（GitHub）

次のガイドから、何度でも直せる画像で。

ブラウザで使う GitHub を見る