「右上のボタンを押してください」と伝えても、似たボタンがいくつもあると迷います。画像に矢印を一本入れ、先端を目的のボタンに合わせると、文章だけで位置を説明する手間を減らせます。
この記事では、ITtripが提供する「ここ見て画像」を使い、JPEGやスクリーンショットに矢印を付けてPNGで保存する手順を説明します。例に使うのは架空の設定画面です。
まず、矢印で指すか、範囲を囲むかを決める
印は、相手にしてほしいことに合わせて選びます。一か所を指すなら矢印、まとまった範囲を確認してほしいなら囲み、複数の場所を順に説明するなら番号が向いています。
| 伝えたいこと | 使う印 | 短い説明の例 |
|---|---|---|
| 一つのボタンを押す | 矢印 | 通知のスイッチを押す |
| この部分全体を確認する | 囲み | 配送先の入力欄を確認 |
| 順番に操作する | 番号 | 1：対象を選ぶ、2：内容を確認 |
矢印の先端を画面の余白に置くと、どこを指しているかが曖昧になります。先端は目的のボタンや項目に寄せ、矢印の線でボタン名を隠さない配置を選びましょう。
ここ見て画像で矢印を入れる手順
1．編集したい画像を一枚入れる
ここ見て画像で画像に矢印を付けるを開き、「画像を選ぶ」から端末にある画像を選択します。画面内にはサンプルがあるため、自分の画像へ置き換えてから始めます。
画像ファイルのドロップ、クリップボードにある画像の貼り付けも利用できます。貼り付ける場合は説明文の入力欄からフォーカスを外し、Ctrl＋V、Macなら⌘＋Vを使います。うまく貼り付けられないときは、いったん画像ファイルとして保存し、「画像を選ぶ」から読み込みます。
2．「矢印」を選び、始点から目的の場所へドラッグする
「矢印」を選びます。説明を置く側の余白から、見てほしい場所へ向けてドラッグしてください。ドラッグを終えた位置が矢印の先端になります。
たとえば通知のスイッチを指すなら、スイッチの少し左からスイッチの端まで引きます。クリックだけで終わらせず、始点と終点を離して線を引きます。
位置を直したいときは「選択・移動」で矢印を選び、ドラッグして移動します。「矢印・囲みを選択」の一覧から対象を選ぶ方法もあります。選択すると始点・終点の座標欄が表示されるので、先端だけを調整したい場合はそちらを使います。
3．必要なときだけ短い説明を足す
矢印だけで操作が伝わらない場合は、「説明文」を選んで画像の空いた場所をクリックし、「通知のスイッチを押す」と書きます。この説明文は画像の上に配置されます。
複数の場所に説明が必要なら「番号」を使います。番号に対応する説明は画面の説明欄で入力し、保存時には画像の下にまとめて入ります。画像上の説明文と、番号の説明欄は配置が異なるため、用途に合わせて選んでください。
4．仕上がりを確認してPNGを保存する
「保存する画像を確認」で、矢印の向き、先端の位置、説明文を確認します。問題なければ「PNGで保存」を選びます。端末に保存された画像を開き、説明の下部まで入っているか確認しましょう。
JPEGを読み込んだ場合も、書き出し形式はPNGです。JPEGのまま上書きする機能ではありません。保存ファイルを用途に合わせて「通知設定の案内.png」などへ変更すると、元画像と区別しやすくなります。
保存したPNGは、元画像と分けて残す
完成したPNGでは、元の画像と矢印や説明が一枚の画像になります。そのPNGを読み込み直しても、以前の矢印だけを選んで動かすことはできません。後で矢印の位置を変更する可能性があるなら、印を付ける前の画像も残してください。
編集中のデータは自動保存されません。ページを閉じる前に必要なPNGを保存し、別の画像へ置き換えるときも先に保存します。
使えない画像や、別の編集方法を選ぶ場面
ここ見て画像が読み込む形式はPNG・JPEG・WebP・GIFです。GIFは静止画として扱います。一度に扱う画像は一枚で、読み込みの上限は20MB、長辺8,192px、2,500万画素です。条件を超える場合は、必要な範囲を切り取るなどして小さい画像を用意してください。トリミングは別の画像編集機能で行います。
矢印を一本入れるだけなら、端末にある機能で済む場合もあります。WindowsのSnipping Toolはキャプチャ後の注釈を扱え、iPhone・iPadのマークアップは画像に図形やテキストを追加できます。すでに使い慣れた機能があれば、そちらも選択肢です。MicrosoftのSnipping Tool案内、Appleのマークアップ案内
色や線の太さを細かく作り込みたい場合は、それらを調整できる編集ソフトを選びます。ここ見て画像では、見てほしい位置と短い説明を整え、保存した一枚を相手に渡すことを中心に使いましょう。
コメント