画面の写しを使うとき、加工の仕方を決めた

• そのまま載せると、どこを見ればよいか分からない
• 個人情報が写り込むことがある
• 加工の手順を決めると、速く確実になる

手順を説明する記事では、画面の写しが最も分かりやすい。ただし、そのまま載せると問題がある。

そのまま載せた問題

最初は、撮ったものをそのまま使っていた。

• 画面全体が写り、どこを見ればよいか分からない
• 関係ない部分に目が行く
• メールアドレスや名前が写っていた

3つ目が問題だ。気づかずに公開すると、取り返しがつかない。

加工の手順

いまは、この順でやっている。

• 必要な範囲だけ切り抜く
• 個人情報を消す
• 見てほしい箇所に印を付ける
• 容量を抑える

2つ目を忘れないよう、手順に組み込んだ。最後に確認するのではなく、必ず通る工程にする。

切り抜く範囲

どこまで含めるかに基準を作った。

• 操作する箇所と、その周辺
• どの画面か分かる手がかりを残す
• 関係ない部分は切る

2つ目が難しい。切りすぎると、どこの画面か分からなくなる。

消すもの

消す対象を一覧にしてある。

• メールアドレス、氏名
• URLに含まれる識別子
• 取引先や顧客の情報
• 金額や契約の内容

2つ目を見落としやすい。アドレス欄に、個別の識別子が入っていることがある。

消し方

消す方法も決めている。

• 塗りつぶす。ぼかしは復元される可能性がある
• 別の文字に置き換えてから撮り直す
• テスト用の内容で撮る

3つ目が最も安全だ。そもそも写らない状態で撮る。

印の付け方

見てほしい箇所を示す方法も揃えた。

• 枠で囲む。色は1色に決める
• 番号を付ける。複数箇所がある場合
• 矢印は使わない。向きが分かりにくい

1つ目を揃えると、記事全体で見た目が統一される。

撮る前の準備

撮る段階でも、気をつけることがある。

• 通知を切る。撮影中に出ることがある
• 関係ないタブを閉じる
• 画面の幅を揃える。記事内で統一される

3つ目で見た目が整う。幅がばらばらだと、並べたときに落ち着かない。

並べ方を決める

複数の写しを載せるときは、並べ方も揃えている。

• 手順の順に、上から並べる
• 1手順に1枚。複数枚にしない
• 画像の下に、何の操作か1行書く

3つ目があると、画像が表示されない環境でも手順が追える。読み込みが遅い回線では、画像より先に文章が出る。文章だけでも成立する状態にしておくと、どの環境でも読める。

容量

画面の写しは、意外と大きい。

• 高精細な画面で撮ると、数MBになる
• 表示する幅に合わせて縮める
• 文字が読める範囲で圧縮する

3つ目が基準だ。文字が読めなければ、載せる意味が無い。

動画で見せる場合

静止画で足りない操作もある。

• 動きがある操作。並べ替えや、押しながら動かす操作
• 短い記録として撮る
• 音は入れない。環境を選ばずに見られる

2つ目が条件だ。長い記録は、見る側が止めたり戻したりする必要があり、かえって面倒になる。5秒以内で収まる操作だけ、動画にする。それを超えるなら、静止画を並べたほうが読者が自分の速さで進められる。

撮り直しを前提にする

画面は変わるので、撮り直しやすくしておく。

• どの画面を撮ったか、記録しておく
• 加工の手順を決めておく
• 同じ条件で撮れるようにしておく

3つ目が効く。画面の幅や表示の設定が違うと、並べたときに揃わない。撮影の条件を決めておけば、1枚だけ差し替えても違和感が無い。

古くなる問題

画面は変わるので、写しも古くなる。

• いつ撮ったか、記事に書く
• 画面が変わったら、撮り直す
• 撮り直せないなら、その旨を書く

1つ目があれば、読者が古さを判断できる。

まとめ

• そのまま載せると、どこを見ればよいか分からない
• 切り抜く・消す・印を付ける・軽くする、を手順にする
• 個人情報を消す工程を、必ず通る形にする
• テスト用の内容で撮るのが、最も安全
• いつ撮ったかを記事に書く