画面操作マニュアルを爆速で作るChrome拡張「ManualShot」の使い方

ツールの操作方法を人に教える機会が多い方ほど、こんな経験はないでしょうか？

私もまさにこのタイプの仕事を長年してきました。GA4の設定方法、GTMでのタグ設置の手順、SWELLの管理画面操作など。説明する画面の数だけPowerPointのスライドが増えていき、気付けばマニュアル作成だけで半日が終わっている。

そんな状況を変えたくて、Claude Codeを使って自分用のChrome拡張機能「ManualShot」を作りました。スクショ→赤枠→矢印→保存（またはコピー）までをブラウザ上だけで完結できるツールです。PowerPointを開く必要がなくなり、1枚あたりの所要時間は30秒以下になりました。

皆さんが使えるようにChromeウェブストアに公開しておきました（無料です）ので、以下よりChromeに追加してご活用ください。

ManualShot – 簡易マニュアル作成

本記事では、ManualShotの使い方と機能について解説します。

ManualShotとは｜PowerPointを開かずにスクショマニュアルが完結する

ManualShotは、私がClaude Codeを使って自作したChrome拡張機能です。表示中のWebページをスクショして、その場で赤枠・矢印・連番・モザイク・テキストを入れて、PNG保存またはクリップボードコピーまでをブラウザ上だけで完結できます。

できることはシンプルですが、私が日常的に使う機能はだいたい揃えました。

これだけのことができれば、ちょっとした操作説明の画像は十分作れます。私自身、この拡張機能ができてからはPowerPointをマニュアル用途で開くことはなくなりました。

インストール方法

ManualShotはChromeウェブストアで公開しています。以下のページにアクセスし、「Chromeに追加」ボタンを押せばインストール可能です。

ManualShot – 簡易マニュアル作成

ブラウザにピン留めしておくとアイコンが常に表示されるのでおすすめです。

基本の使い方

ここでは、ManualShotの基本の使い方について解説します。（自分が使いやすいように）操作性にはこだわったので、起動すれば直感的に使えるはずです。

各ツールの詳細

ここからは、ManualShotで使える注釈ツールを1つずつ見ていきます。

赤枠：重要箇所を囲む

クリック＆ドラッグで矩形の枠を描画します。色・線の太さ・角の丸みはオプション設定画面でカスタマイズ可能です（後述）。デフォルトは赤色・太め・角ありで、視認性を優先した設定にしています。

矢印

注目してもらいたい箇所に向けて矢印を設定することが可能です。

アイコン

矢印は画像アイコンとして配置することもできます。こちらは任意の画像をオプション設定から読み込んでおくことで使える機能です。

私が愛用しているのは、ICOOON MONOさんが配布している以下の指やじるしのアイコンです。

指やじるしの無料素材

連番

手順が複数ある画面で、説明文の順番に対応する番号を画像内に置けます。

連番マーカーの色やスタイルは設定画面で切り替え可能です。

ぼかし／モザイク

メールアドレス・名前・URL・チャットの相手など、公開できない情報を隠したいときに使います。

範囲を矩形で指定すると、その範囲がぼかしまたはモザイク処理されます。ぼかしとモザイクは設定画面で切り替え可能で、強度（ぼかし量／モザイクの粗さ）も自由に変えられます。

テキスト：画面内に補足文を書く

画面内の任意の場所に直接テキストを書き込めます。

フォント・サイズ・色は設定画面で変更可能。「ここをクリック」「ログイン情報を入力」のような短い補足を入れたいときに便利です。

設定画面のカスタマイズ

各ツールの初期値は、オプション設定で変更できます。

オプション設定画面は、アイコンを左クリックして「オプション」から開くことができます。

オプション設定を開くと、以下のような画面が表示されます。ここで、全体の色の設定や枠線の太さ、アイコン画像のアップロードなど、初期値を設定することが可能です。

設定できる項目は次のとおりです。

項目	内容
枠線・矢印・テキストの色	カラーピッカー or HEX指定（共通設定）
線の太さ	1〜10px
角の丸み	0〜50px
矢印アイコン	自分の画像をアップロード。初期サイズもピクセル設定可能
テキストフォント	フォントファミリーの入力による指定
フォントサイズ	スライダーで調整
ぼかしタイプ	ぼかし／モザイクの切替
ぼかし強度	スライダーで調整
連番マーカー	2種類のスタイルから選択
画像フォーマット	保存時の画像フォーマットをWebP、PNG、JPGから選択可能
透かし	画像内に透かし（テキストまたは画像）を設置しサイズや透明度を設定可能

矢印アイコンの差し替えは、自社ブランドカラーに合わせたい方や、独自のアイコンセットを持っている方には便利な機能です。

オプション設定の変更を反映させるには、編集画面を閉じるボタンで一度閉じてから、ツールバーのアイコンで再度起動する必要があります。次に起動した編集画面から、変更した設定が適用されます。

よくある質問

ここでは、ManualShotについてよく寄せられそうな質問にまとめて答えます。

まとめ

私の感覚では、これまでPowerPointで1枚5分かけていたスクショマニュアルが、ManualShotを使い始めてからは1枚30秒以下で作れるようになりました。

特に便利なのが、クライアントやUdemy受講生などから質問があった際に、気軽に画像を使った説明ができるようになった点です。今読んでいただいているようなマニュアル記事の制作も簡単になりました。

人に何かを伝えることが多い人なら便利にお使いいただけるはずです。以下のリンクから無料でインストールできますので、お気軽に試してみてください。

ManualShot – 簡易マニュアル作成

機能改善のご要望があれば、下の方にあるコメント欄に書き込んでください。