手順を説明する画像の作り方

• 画面を写したものは、そのままだと分かりにくい
• 見る箇所を示すと、伝わる
• 余分な部分は、切り取る

手順の説明には、画面を写した画像を使っている。整え方を決めた話を書く。

そのままだと分かりにくい

最初は、画面全体をそのまま載せていた。

• どこを見ればよいか分からない
• 文字が小さくて読めない
• 関係ない部分が目に入る

1つ目が本質的な問題だ。画像を載せても、伝わっていなかった。

切り取る

最初にやるのは、不要な部分を切ることだ。

• 説明に関係する範囲だけ残す
• 画面の端や、別の内容は切る
• どこの画面か分かる程度は残す

3つ目が必要だ。切りすぎると、どこの話か分からなくなる。

見る箇所を示す

切っただけでは足りないので、印を付ける。

• 四角で囲む
• 矢印で示す
• 番号を振る

3つ目は、手順が複数あるときに使う。番号があると、本文と対応がつく。

印の付け方

印にも決めがある。

• 色は1色に統一する
• 太さを揃える
• 1枚に印は3つまで

3つ目が基準だ。印が多いと、どこを見るか分からなくなる。

個人の情報を消す

画面を写すときは、必ず確認している。

• 名前や連絡先が映っていないか
• 他の案件の情報が映っていないか
• 消すのではなく、最初から映さない

3つ目が確実だ。塗りつぶしても、元の情報が残る形式がある。

映さない工夫

撮る前に、画面を整えている。

• 説明用の内容に差し替える
• 関係ない表示を閉じる
• 通知が出ない状態にする

3つ目を忘れやすい。撮った瞬間に通知が入っていることがある。

大きさを揃える

複数枚載せるときは、大きさも揃える。

• 幅を同じにする
• 切り取る範囲も、近い大きさにする
• 並べたときに、違和感が出ないようにする

3つ目が目的だ。大きさが違うと、順番に見づらい。

軽くする

画面を写したものは、容量が大きい。

• 表示する幅に合わせて縮める
• 文字が読める範囲で、縮める
• 形式を見直す

2つ目が限界だ。縮めすぎると、文字が読めなくなる。

文章と組み合わせる

画像だけで説明しないようにしている。

• 手順は文章で書く
• 画像は、場所を示すために添える
• 画像が無くても、手順が追えるようにする

3つ目を条件にした。画像が表示されない場合も、読める。

代替の説明を入れる

画像には、説明の文字を付けている。

• 何が写っているか、1行で書く
• 装飾の画像には、入れない
• 手順の画像には、必ず入れる

3つ目を守っている。画像が見えない環境でも、内容が伝わる。

作り直す基準

画面が変わると、作り直しが必要になる。

• 画面の構成が変わったら、撮り直す
• 色や細部の違いは、放置する
• 撮り直した日を、記録しておく

2つ目で歯止めをかけている。細かい変更を全部追うと、終わらない。

動きを説明する場合

静止した画像で足りない場面もある。

• 操作の流れは、複数枚に分けて示す
• 番号を振って、順番を示す
• 動画にするのは、最後の手段にする

3つ目の理由は、更新の手間だ。画面が変わったとき、動画は撮り直しになる。

枚数を決める

1記事に載せる枚数も、目安を決めた。

• 手順の数に合わせる
• 同じ画面を何枚も載せない
• 役割が説明できない画像は、入れない

2つ目が起きやすい。似た画像が並ぶと、違いが分からない。

撮り直しを減らす工夫

撮り直しが減るよう、撮る範囲も考えている。

• 変わりやすい部分を、画像に入れない
• 操作する箇所だけを、切り取る
• 周辺の装飾は、入れない

1つ目が効く。画面の端は更新されやすいので、入れないほうが長く使える。

並べる順番

複数枚載せるときは、順番も本文と合わせている。

• 本文の手順と、画像の順番を一致させる
• 画像の前に、その手順の説明を書く
• 画像だけ先に並べない

3つ目を避けている。先に画像が並ぶと、どれが何の説明か分からない。

まとめ

• 画面全体をそのまま載せても、伝わらない
• 不要な部分を切り、見る箇所に印を付ける
• 印は1枚に3つまで。色と太さを揃える
• 個人の情報は、消すのではなく最初から映さない
• 画像が無くても手順が追える形にする