スクリーンショットへ注釈を加えると、クリックする場所、操作順、注意点を1枚で伝えられます。AllEditの簡易画像編集ツールでは、矢印をドラッグで作成し、クリックするたび増える番号や、尖端と付け根を動かせる吹き出しを追加できます。各要素はレイヤーとして移動・拡大縮小し、PNG・WebP・JPGで保存できます。
インストール不要。ブラウザですぐに画像を処理できます。
スクリーンショットへ注釈を入れるメリット
文章だけで操作を説明すると、読み手は画面上の場所を探さなければなりません。矢印でクリック位置を示し、番号で順番を付け、吹き出しで短い補足を書くと、どこをどう操作するかを視覚的に伝えられます。マニュアル、問い合わせ対応、レビュー、社内資料、ブログ記事などに便利です。
注釈を増やしすぎると、元の画面や重要な文字が隠れます。1枚で伝える目的を決め、主役となる注釈を絞ってください。操作が多い場合は、複数のスクリーンショットへ分ける方が読みやすくなります。
| 注釈 | 主な役割 | 使い方の例 |
|---|---|---|
| 矢印 | 注目位置を指す | クリックするボタン、変更箇所を示す |
| 番号 | 順序を示す | ①→②→③の操作手順を表す |
| 吹き出し | 短い説明を添える | 注意点や入力内容を書く |
| 四角・丸 | 範囲を囲む | メニュー、ボタン、エラー部分を強調する |
| ぼかし | 見せたくない範囲を隠す | 氏名、メール、通知、IDを加工する |
| ルーペ | 一部分を拡大する | 小さなアイコンや文字を見せる |
AllEditでスクリーンショットに注釈を入れる手順
- 01編集する画像を追加する
JPG・PNG・WebP形式のスクリーンショットをドロップするか、ファイル選択から読み込みます。
- 02注釈ツールを選ぶ
テキスト、矢印、四角形、丸・楕円、吹き出し、番号、ぼかし、挿入画像、ルーペから必要なものを選びます。
- 03キャンバス上で位置と大きさを整える
要素を選択し、枠内をドラッグして移動します。四隅・辺のハンドルで拡大縮小し、対応要素は上のハンドルで回転できます。
- 04色・太さ・文字などを設定する
右側のプロパティで線・塗り、文字サイズ、フォント、不透明度、座標、幅、高さなどを調整します。
- 05レイヤー順と仕上がりを確認して保存する
重なり順を前後へ移動し、PNG・WebP・JPGと画質を選んで完成画像を書き出します。
保存したPNG・WebP・JPGでは、背景と各注釈が1枚の画像へ統合されます。後から個別の矢印や文字を再編集するプロジェクト保存ではないため、完成前に元画像を残し、必要な修正を済ませてください。
矢印は指したい方向へドラッグして作る
ツールバーで「矢印」を選び、矢印の始点から指したい位置まで押したままドラッグします。ドラッグした距離が矢印の長さになり、動かした方向へ自動的に回転します。作成後も選択枠のハンドルで長さと太さを変え、回転ハンドルや角度の数値で方向を調整できます。
矢印では線の色と塗り色の両方を設定できます。軸の線は線の色、矢印の先端は塗り色が中心になるため、同じ色へそろえると一体に見えます。線の太さ、不透明度、位置、幅、高さも数値で指定できます。
- ✓矢印の先端を対象の中心へ重ねすぎず、少し手前で止める
- ✓背景と明暗差のある色を選ぶ
- ✓同じ画像では矢印の色と太さをそろえる
- ✓短すぎる矢印では先端が大きく見えるため、十分な長さを取る
- ✓回転中にCtrlを押すと15度単位で止める
番号で操作順を分かりやすくする
「番号」をクリックするたび、1、2、3の順で数字入りの丸が追加されます。番号は拡大縮小しても真円を維持し、塗り色、丸枠の色と太さ、不透明度を調整できます。背景画像を変更すると番号は1から始まります。
番号だけでは対象が分かりにくい場合は、「番号から指示ラインを伸ばす」を有効にします。オレンジ色の＋をドラッグして指示先を移動でき、指示ラインの太さは丸枠とは別に設定できます。番号本体を移動すると指示先も同じ距離だけ移動するため、全体の位置関係を保ったまま配置を変えられます。
| 設定 | 役割 | ポイント |
|---|---|---|
| 塗り色 | 番号の丸の色 | 他の番号と統一する |
| 線の色・丸枠の太さ | 丸の外枠 | 明暗差を付けて背景から分離する |
| 指示ライン | 番号と対象を結ぶ | 必要な番号だけ有効にする |
| 指示ラインの太さ | 対象まで伸びる線 | 丸枠とは独立して調整する |
吹き出しの文字・尖端・付け根を調整する
吹き出しを追加すると、中の文章を右側で入力できます。「テキストに合わせて吹き出しを自動調整」が初期状態で有効になっており、文字サイズや行数が増えたときは、文章が収まるよう吹き出しの幅と高さが広がります。必要に応じて自動調整を無効にし、ハンドルで自由に大きさを変えられます。
下側のオレンジ色の↕ハンドルを動かすと、尖端だけを左右・上下へ移動できます。左右の↔ハンドルは吹き出し本体と尖端をつなぐ付け根の始まりと終わりで、個別に移動できます。「尖りの付け根幅」では4～50％の範囲でまとめて幅を調整できます。
- ✓文章は一つの要点に絞り、長文を避ける
- ✓文字サイズを先に決め、自動調整で吹き出しを合わせる
- ✓尖端を話者や対象へ向ける
- ✓付け根を広げすぎず、吹き出し本体とのつながりを確認する
- ✓吹き出しが画面の重要な文字を隠さない位置へ置く
四角・丸・テキストで補足する
四角形または丸・楕円を選び、囲みたい範囲をドラッグして作成します。作成途中にCtrlを押すと正方形または真円になり、作成後の拡大縮小でもCtrlを押している間は縦横を同じ長さにできます。どちらも初期状態は塗りなしの線だけです。必要な場合だけ「図形を塗りつぶす」を有効にします。
四角形は角の丸みを0pxから短辺の半分まで設定できます。テキストでは游ゴシック、メイリオ、BIZ UDPゴシック、Arial、Verdana、Georgia、Courier Newから端末で利用できる書体を選び、文字色、縁の色、サイズ、回転を調整できます。
簡易画像編集ツールは端末にインストールされたシステムフォントを利用します。指定したフォントがない環境では代替フォントが使われるため、保存前のプレビューで実際の形を確認してください。
個人情報はぼかし、小さな部分はルーペで拡大する
範囲ぼかしは、氏名、メールアドレス、通知、ユーザーIDなどを隠すために使えます。四角または丸を選び、範囲の大きさと4～80pxのぼかし強度を調整します。丸形は拡大縮小しても真円を維持します。公開前には、縮小表示でも文字や顔を推測できないか確認してください。
ルーペは指定した場所を1.5～5倍で円形に拡大します。「拡大元の位置を選択」を押して対象をクリックするか、ライン先端のオレンジ色の＋をドラッグして拡大元を移動します。ルーペ本体を移動するとライン先端も一緒に動き、指示ラインとルーペ枠の太さは別々に調整できます。
- ✓ぼかしは対象より少し広い範囲へかける
- ✓機密情報はぼかしだけでなく塗りつぶしも検討する
- ✓ルーペの中で対象が中央に見えるよう拡大元を合わせる
- ✓ルーペを大きくしすぎて他の注釈を隠さない
直接操作・Ctrlスナップ・Ctrl＋Zを使う
追加した要素をクリックすると、四隅と上下左右にサイズ変更ハンドルが表示されます。テキスト、矢印、四角、丸・楕円には回転ハンドルも表示されます。右側ではX・Y・幅・高さを直接入力できるため、複数要素の位置やサイズをそろえたい場合に便利です。
要素を移動するときにCtrlを押すと、キャンバスの左・中央・右、上・中央・下へ近づいたときにガイドが表示され、位置が吸着します。回転中のCtrlは15度単位の角度スナップです。直前の編集を取り消す場合はCtrl＋Zを使え、履歴は最大100回分保持されます。やり直し操作はないため、大きな変更の前には状態を確認してください。
| 操作 | 結果 |
|---|---|
| Ctrlを押しながら移動 | キャンバスの端・中央へスナップ |
| Ctrlを押しながら回転 | 15度単位へスナップ |
| Ctrlを押しながら四角・丸を作成 | 正方形・真円を維持 |
| Ctrlを押しながら四角・丸をリサイズ | 途中からでも正方形・真円へ変更 |
| Ctrl＋Z | 直前の編集へ1つ戻る |
レイヤーの重なりと挿入画像を調整する
左側のレイヤー一覧では、追加した注釈を選択し、前面・背面へ移動できます。吹き出しの上へ番号を置く、囲み線の上へ矢印を重ねるなど、見せたい順に調整します。不要な要素は選択して削除できます。
画像挿入では別の画像をキャンバスへ重ね、枠内の表示範囲を調整できます。トリミング拡大率は100～300％、横・縦位置は0～100％です。注釈としてロゴや小さな比較画像を置く場合も、重要部分が枠から切れていないか確認してください。
Free・Proの違いと保存形式
簡易画像編集ツールは1枚ずつ編集します。Freeの利用上限はAllEdit全ツール合計で1日3枚、Proは1日の処理枚数が無制限です。注釈機能はどちらでも利用でき、Pexelsフリー素材検索はPro限定です。Freeの最大出力は1280×720、Proは3840×2160（4K UHD）です。元画像の縦横比を維持し、両方の上限内に収まるよう必要な場合だけ縮小されます。
保存形式はPNG・WebP・JPGです。細かな文字や線を優先するならPNG、Web掲載で容量も抑えるならWebP、写真中心で互換性を重視するならJPGが目安です。WebPとJPGでは50～100％の画質を選べます。
| 項目 | Free | AllEdit Pro |
|---|---|---|
| 1日の処理枚数 | AllEdit全ツール合計3枚 | 無制限 |
| 一度に編集できる画像 | 1枚 | 1枚 |
| 最大出力サイズ | 1280×720 | 3840×2160 |
| 矢印・番号・吹き出しなど | 利用可能 | 利用可能 |
| Pexelsフリー素材検索 | 利用不可 | 1時間20回まで |
| PNG・WebP・JPG保存 | 利用可能 | 利用可能 |
保存前のチェックリスト
- ✓矢印の先端が正しい場所を指している
- ✓番号が操作順に並び、抜けや重複がない
- ✓吹き出しの尖端が説明対象へ向いている
- ✓文字が背景から読み取れる色と大きさになっている
- ✓注釈が元画面の重要な内容を隠していない
- ✓個人情報のぼかしが十分な強さと範囲になっている
- ✓レイヤーの重なり順に違和感がない
- ✓保存後の画像を通常の表示サイズで確認した
- ✓元のスクリーンショットを別に保管している
よくある質問
矢印は画像上で直接作れますか？
はい。「矢印」を選び、始点から指したい位置までドラッグすると、長さと方向に合う矢印が作られます。作成後もサイズ・色・太さ・回転を調整できます。
番号は自動的に増えますか？
はい。「番号」をクリックするたび1、2、3と増えます。丸は拡大縮小しても真円を維持し、必要な番号だけ指示ラインを有効にできます。
吹き出しの尖っている部分を自由に動かせますか？
はい。尖端のハンドルを直接動かせます。付け根の左右位置も個別に調整でき、付け根全体の幅は4～50％で変更できます。
編集を1つ前へ戻せますか？
Ctrl＋Zで直前の編集へ戻れます。最大100回分の履歴を保持しますが、やり直し機能や編集プロジェクトの保存はありません。
画像はサーバーへアップロードされますか？
背景画像と挿入画像の読み込み、注釈の描画、保存用画像の生成はブラウザ内で行われ、選択した画像自体はAllEditのサーバーへアップロードされません。
この記事の内容を、AllEditで実際に試してみましょう。