画面を送って「これを選んで保存して」と説明しても、どの項目から操作するのかは相手に伝わりにくいものです。操作する場所を番号で示し、番号ごとに一つの動作を書けば、画像と文章を行き来するときの目印になります。
この記事では、ITtripが提供する「ここ見て画像」を使い、番号と説明を付けた操作案内を作る方法を紹介します。例は架空の文書設定画面で、「対象を選ぶ」「内容を確認する」「保存する」の三つを案内する場面です。
一枚にまとめる前に、同じ画面で完了するかを確かめる
一枚のスクショで伝えやすいのは、必要な項目が同時に表示されている操作です。設定欄と保存ボタンが同じ画面にあるなら、番号を順に付けられます。
一方、①を押すと別の画面へ移り、②が初めて現れる操作は、その状態の画像が必要です。最初の画面に番号だけ足しても、相手は次のボタンを見つけられません。「画面Aの操作」「画面Bの操作」の二枚に分け、送る文章に画像の順番を付けましょう。ここ見て画像では一枚ずつ作成・保存します。
一つの番号に、一つの動作を書く
番号の説明を長くすると、相手は画像を見ながら文章を探すことになります。まず「何をするか」を書き、必要なら条件を短く足します。
| 番号 | 説明の記入例 | 操作が終わった目安 |
|---|---|---|
| 1 | 対象を「週報」にする | 選択欄に「週報」と表示される |
| 2 | 宛先と日付を確認する | 送信先と対象日が意図どおりになっている |
| 3 | 「保存」を押す | 完了表示を確認できる |
「ここを確認」だけだと、何を確認するかが残りません。「宛先と日付を確認」のように対象を含めます。「1で選んで2を確認して3を押す」という一文は、番号ごとの説明に分けると読みやすくなります。
Microsoftの手順ガイドでも、複数の操作は番号付きの手順にし、各指示を分け、OKや適用など完了させる操作を含める考え方が示されています。Microsoftの手順の書き方
ここ見て画像で番号の案内を作る
- ここ見て画像で番号付きの説明画像を作るを開き、「画像を選ぶ」から案内したいスクショを読み込みます。
- 「番号」を選び、最初に操作する項目の近くをクリックします。ボタン名を隠さない位置を選びます。
- 対応する説明欄に「対象を『週報』にする」のような短文を書きます。
- 二番目、三番目の場所にも、操作してほしい順に番号と説明を追加します。
- 必要なら「囲み」で二番目の確認範囲を示します。囲みだけで操作順を表すことはせず、番号の説明に対象を書きます。
- 「保存する画像を確認」で番号と説明の対応を見直し、「PNGで保存」を選びます。
番号の説明文は保存画像の下部にまとめて入ります。編集画面ではスクショ側と説明欄が分かれていますが、書き出したPNGでは一枚になります。番号に説明を入力し忘れていないか、プレビューの下部も確認してください。
位置を調整する場合は、説明欄の番号を選ぶと対象を選択できます。「選択・移動」で番号を動かし、矢印で目的の項目を補う方法もあります。
途中の番号を削除したら、添付文も確認する
不要になった番号は、説明欄の削除ボタンで消します。残った番号は連番に振り直されるため、別途書いた「画像の3を見てください」という文章も見直してください。
番号はクリックして追加した順になります。場所を動かしても読む順番を並べ替えたことにはならないので、最終的な順番を決めてから追加すると修正が少なく済みます。誤って削除したときは「元に戻す」で戻せます。
画像だけで渡さず、同じ内容を短い文章でも添える
番号付きPNGは位置を見つける助けになりますが、画像の文字は読み上げや検索で扱いづらい場合があります。送信文にも操作を三行で書くと、画像を開けないときの手掛かりが残ります。
文書設定画面で、1．対象を「週報」にする、2．宛先と日付を確認する、3．「保存」を押す、の順に進めてください。保存後は完了表示を確認してください。
この例は説明文の書き方の見本です。実際の案内では、相手が使う画面の名称と、操作後に現れる表示に合わせて直します。
保存したPNGを開き、番号と下部の説明を読めるか確認してください。相手がスマホで見るなら、長い縦画面を一枚に詰めるより、必要な範囲ごとに画像を分ける方が読みやすい場合があります。
ここ見て画像の説明は一項目160文字までで、一枚に置ける番号や図形などの要素は合計99個までです。上限に近づけるために情報を詰め込むのではなく、相手が迷いそうな操作だけを残しましょう。編集状態は自動保存されないため、案内を完成させたらPNGを保存し、元のスクショも手元に残します。
コメント