スクリーンショットに手順の番号を振る
矢印を四本引くより番号を三つ置いたほうが伝わる理由、番号をどこに置くか、一枚に詰めるか分けるか、そして番号を一つ消したときに起きる事故。
操作を説明する画像を作るとき、多くの人はまず矢印を引きます。ひとつ引いて、もうひとつ引いて、気づくと四本になっている。そして読み手は、どれから見ればいいのかわからない。矢印は「ここ」を運べますが、「その次」を運べません。順序が必要な瞬間に必要なのは番号です。
検索してこのページに来た人が知りたいのは、たいてい二つだと思います。番号をどうやって画像に入れるか、そして入れたあとに番号の付け方でどう失敗するか。前者は道具の話なので短く済みます。後者のほうが長い。
矢印四本より、番号三つ
同じ画面の中に指すべき場所が三つ以上あるとき、矢印だけの画像は必ず読み順の問題を起こします。読み手は左上から読むか、太い矢印から読むか、色の強いものから読むか、そのどれかを勝手に選びます。あなたが意図した順とは限りません。
番号は読み順そのものを画像に埋め込みます。1 を見て 2 を探し、2 を見て 3 を探す。読み手が迷う余地がなくなり、そのぶん本文の説明を短くできます。番号を振ってから本文を書き直すと、「画面右上のメニューを開き、その中の設定を選び、いちばん下までスクロールして」が「1 から 3 の順に」で済むことに気づきます。
逆に、指す場所がひとつしかないなら番号は要りません。1 だけが書かれた丸は、矢印より情報が少ない。ひとつなら矢印か四角、複数で順序があるなら番号、というのが素直な使い分けです。
番号をどこに置くか
- 対象の上に重ねない。ボタンを説明する画像でボタンが番号に隠れていたら、その画像は仕事をしていません。対象のすぐ横、できれば余白側に置きます。
- 置く側を揃える。全部の番号を対象の左上に置く、と決めておくと、読み手は次の番号を探す場所を覚えます。ばらばらだと視線が毎回さまよいます。
- 重なる色を避ける。青い画面に青い番号は、拡大するまで見つかりません。背景と反対側の明度を選び、それでも沈むなら影を付けます。
- 端に寄せすぎない。切り抜きや、SNS 側の自動的な切り取りで欠けるのは端からです。
- 番号と対象の距離を揃える。距離が違うと、どの番号がどれを指しているのかが曖昧になります。曖昧になるくらいなら、その番号だけ短い矢印を添えてください。
一枚に五つか、五枚に一つずつか
ここが実際に効く判断です。番号を五つ置いた一枚は、作るのが速く、読むのが遅い。画面が一つで手順が同じ場所に集まっているなら一枚が正しく、画面が切り替わるなら分けるべきです。
基準はこうです。手順を進めても画面が変わらないなら一枚にまとめてよい。手順を進めると次の画面に移るなら、その境目で画像も切ります。ひとつの画像の中に「押す前」と「押した後」が同居していると、読み手は必ずどこかで迷います。
もうひとつ、五つを超えたら分けたほうがいいという経験則があります。読み手は画像の中で番号を探す作業をしていて、その探索は数が増えるほど急に苦しくなります。六つ以上を一枚に置きたくなったら、それは手順が二段階に分かれている合図であることが多い。
番号を一つ消したときに起きる事故
作っている途中で、二番目の手順が要らなくなることは頻繁にあります。その番号を消すと、画像には 1 と 3 と 4 が残ります。
これは単に見た目が悪いのではなく、読み手にとっては誤りとして読まれます。2 が見つからない読者は、自分が何かを見落としたと考え、画像をもう一度端から探します。探しても無いので、本文と画像のどちらかが古いのだろうと判断して、その説明全体の信頼が一段下がる。手順書で最も高くつく種類の間違いです。
だから手作業で番号を置く道具を使っているなら、消したあとに残りを全部打ち直す必要があります。番号が七つあって三番目を消した場合、四から七までを一つずつ減らす。この作業は退屈で、退屈な作業は飛ばされます。
Marka の番号マーカーはここを自動でやります。タップして 1、2、3 と置き、二番目を消すと三番目が二番目になります。振り直しの基準は置いた順であって、どのマーカーが上に重なっているかではありません。あとから間に一つ足したくなった場合も同じ考え方で並びます。地味な機能ですが、手順画像を何枚も作る日にはここだけで時間の使い方が変わります。
番号以外に、その画像が持つべきもの
- 画面のどこの話かがわかる範囲まで含める。ボタンだけを切り抜いた画像は、そのボタンがどこにあるかを教えてくれません。
- 見せる必要のないものは先に隠す。手順の説明であっても、そこに自分のアカウント名やメールアドレスが写っていることは普通にあります。
- 番号は対象と一対一にする。ひとつの番号が二か所を指していると、その時点で手順ではなくなります。
- 本文と番号を一致させる。本文が「3. 保存を押す」なら、画像の 3 は保存ボタンの横にある必要があります。両方を書いたあとで、番号だけを突き合わせて読み直してください。
- 最後に、番号を隠したつもりで画像だけを見る。番号の順に目が動くかどうかが、その画像が機能しているかの判定です。
Marka では番号マーカーは Pro の注釈ツールに含まれます。文字や線の大きさは画像の短辺に対する比率で決まるので、大きなスクリーンショットでも小さな切り抜きでも、番号の見た目の大きさは揃います。ひとつの手順書の中で画像ごとに番号の大きさが違う、という気の散る事態が起きません。
よくある質問
番号と矢印はどう使い分けますか。
指す場所がひとつなら矢印か四角、複数あって順序があるなら番号です。複数あるが順序が無い場合は、番号を使うと読み手に順序があると誤解されるので、色や形の違う印を使うか、画像を分けてください。
一枚の画像に番号はいくつまで入れられますか。
技術的な上限の話ではなく、読める上限の話として五つくらいまでです。それを超えると読み手は画像の中で番号を探す作業に時間を使い始めます。六つ以上必要になったら、たいてい手順が二段階に分かれている合図です。
途中の番号を削除したら、あとの番号はどうなりますか。
Marka では自動的に振り直されます。1、2、3 と置いて 2 を消せば、元の 3 が 2 になります。振り直しは置いた順に従い、どのマーカーが上に重なっているかには影響されません。1 から 3 へ飛ぶ画像は読み手に誤りとして読まれるので、ここは手作業に任せない設計にしてあります。
番号を置く色は何がいいですか。
背景と明度が反対側になる色を選んでください。明るい画面なら濃い色、暗い画面なら明るい色。画面の中に同系色が多いと沈むので、その場合は影を付けると輪郭が立ちます。赤は目立ちますが、エラー表示の多い画面では画面側の赤と混ざります。
番号マーカーは無料で使えますか。
使えません。無料で使えるのは、画像を開く、切り抜きと回転と反転、モザイクブラシでの目隠し、取り消し、書き出しまでです。番号マーカーを含む注釈ツールは Pro に入っています。Pro は買い切りで、iPhone と iPad と Mac をまたいで一度の購入です。
Marka でやってみる
Marka は iPhone・iPad・Mac 用のスクリーンショット注釈アプリです。見せたくないところをなぞってモザイクにし、見せたいところに矢印を置き、手順に番号を振り、投稿先の比率に切り抜いて送る。処理はすべて端末内で完結し、アップロードもアカウントも計測もなく、ダウンロードは 2.4 MB。画像を開く・切り抜き・モザイクブラシ・書き出しは無料で、Pro は 3 機種共通の買い切りです。