スクリーンショットに、矢印・四角・番号・文字などの注釈を書き込み、見せたくない部分をモザイク・ぼかし・塗りつぶしで隠せるツールです。角丸・影・背景・ブラウザー風の枠を付けて、見栄えのよい画像にもできます。
スクショはそのまま貼り付け(Ctrl+V/⌘+V)で読み込め、加工はすべてお使いのブラウザの中で行います。画像がサーバーに送信されることはありません。ブログの解説記事やマニュアルの画像づくりにお使いください。
スクリーンショットを編集する
1. 画像を入れる
2. 書き込む・隠す
3. 装飾する(任意)
4. 保存する
使い方
| 道具 | 使い方 |
|---|---|
| 矢印・四角・丸 | 画像の上をドラッグして描きます |
| ペン・マーカー | ペンは自由に線を描き、マーカーはドラッグした範囲に蛍光ペンのような色を重ねます |
| 番号 | クリックするたびに①②③…と順番に置けます |
| 文字 | 入れたい文字を入力してから、画像の上をクリックして置きます |
| モザイク・ぼかし・塗りつぶし | 隠したい範囲をドラッグします。メールアドレスや名前、アカウント情報などを隠す時に使います |
| 選択 | 書いたものをクリックして選び、ドラッグで移動、Deleteキーか「削除」で消せます。選んだものの色や文字も変えられます |
- Ctrl+Z(Macは⌘+Z)で元に戻す、Ctrl+Shift+Z(⌘+Shift+Z)でやり直しができます。
- 「クリップボードにコピー」を使うと、保存せずにそのままブログの編集画面やチャットに貼り付けられます(お使いのブラウザによっては使えません)。
- モザイクとぼかしは、元の文字が読み取れないくらい粗くかけます。保存した画像には、隠した部分の元の画素は残りません。
- 大きな画像は、長い辺が4,000pxになるように縮小して読み込みます。
(コラム)解説画像を見やすくするコツ
注釈の色は1〜2色にしぼると、どこを見ればよいかが伝わりやすくなります。目立たせたい場所は赤い四角や矢印、手順は番号、補足は短い文字で入れるのがおすすめです。
スクショの周りに余白と影を付けると、記事の背景と画像の境目がはっきりして、ページ全体が整って見えます。同じ記事の中では、装飾の設定をそろえると統一感が出ます。
あわせて使いたいツール
- 画像編集ツール(リサイズ・トリミング・圧縮):編集したスクショを縮小・圧縮して、記事に載せやすいサイズにできます
- 画像フィルター&エフェクトツール:写真にモノクロやビンテージなどのフィルターをかけられます
- メタタグ(OGP)生成ツール:SNSでシェアされた時の画像やタイトルを設定するタグを作れます
- 画像のコラージュ作成ツール:複数の画像を横並び・縦並び・グリッドにまとめて1枚にできます
- 画像の文字入れ・透かしツール:複数の画像に、サイト名やロゴの透かしをまとめて入れられます
- GIFアニメ作成ツール:複数の画像をつなげて、動くGIFアニメを作れます
- 写真のデジタルデータ(位置情報・Exif・日付等)の確認&削除ツール:写真の位置情報や撮影日時を確認して、画質を落とさずに消せます
- 画像の色の抽出&提案&グラデーション生成ツール:写真から色を取り出して、配色やグラデーションを作れます
このツールは役に立ちましたか?
これからの開発の参考にしたいので、いいねボタンで教えてください。


コメント