いい感じでスクリーンショットを作る話/Technical Writing Meetup vol.29

2024年1月18日(木）開催のテクニカルライティングをテーマにした技術者向けのミートアップTechnical Writing Meetup vol.29 にて、ソラコム　テクニカルライターの矢崎がお話した内容です。
https://tw-meetup.connpass.com/event/306213/

いい感じでスクリーンショットを作る話
技術ドキュメントで画面操作を説明するドキュメントを作成する時に必要となるのがスクリーンショット。より伝わりやすい、不要な情報のない、管理しやすいスクリーンショットを作るコツを紹介します。

株式会社ソラコム
テクニカルライター
矢崎 誠

Transcript

1. いい感じでスクリーンショットを作る話
3. 自己紹介 • 矢崎 誠 (makoto) • 株式会社ソラコム Technical Writer • テクニカルライター歴: 約25年 • Twitter: @yazakimakoto https://www.amazon.co.jp/dp/4902820102 おすすめの本→
5. 株式会社ソラコム 概要 株式会社ソラコム / SORACOM, INC. 商号 玉川 憲 代表取締役社⾧ IoT プラットフォームの提供 事業概要 日本、英国、米国(シアトル) 拠点 2017年8月に KDDI グループ入り
6. IoT とは？ メーター (ガス・電気) 温度計 デジタル化 { "gas_volume": 426.807, "temperature": 30 } { "air_conditioner": true, "target_temperature": 28 } 遠隔操作 エアコン クラウド 自宅
7. SORACOM は IoT の「つなぐ」を簡単に センサー/デバイス データ活用  遠隔操作  メンテナンス  蓄積・見える化  アラート通知 通信 デバイス センサー キット ネットワーク IoT SIM LPWA パートナー デバイス パートナークラウド (AWS / Microsoft / Google / IBM) Wi-Fi / 有線 3G / LTE / 5G LTE-M 閉域網
10. スクリーンショットを撮っていますか
11. スクリーンショットはなぜ必要か • 文章だけでは、操作対象 (UI) の場所や周囲の情報を伝えられな い。そんなときにスクリーンショットがあるとわかりやすくな りますね。
12. ソラコムでどうやってスクリーンショットを 準備しているか 1. 画面を撮影して、余計なところをトリミングしたり、一部の 数字にモザイクをかけたりします。
13. ソラコムでどうやってスクリーンショットを 準備しているか 2. PowerPoint に貼り付けて、横幅を 20cm に揃えて、 PowerPoint の表示倍率を 100% にしたうえで赤枠を付けます。 20 cm
14. ソラコムでどうやってスクリーンショットを 準備しているか 3. PowerPoint ファイルを保存して、PowerPoint のスクリー ンショットを撮ります！このようにすることで画像のサイズ をおおむねね揃えています。
15. ソラコムでどうやってスクリーンショットを 準備しているか 4. GIMP に貼り付けて、余白をトリミングします。
16. ソラコムでどうやってスクリーンショットを 準備しているか 5. ここで画像ファイルの名前を決めても忘れてしまうので、 GIMP はこのままにして、Visual Studio Code に切り替えます。
17. ソラコムでどうやってスクリーンショットを 準備しているか 6. Visual Studio Code で markdown ファイルを開き、ファイル 名を書いたうえで、Ctrl + Alt を押しながら画像ファイルの ファイル名をクリックして、画像が正しいこと (新規作成のと きは画像がないこと) を確認します。
18. ソラコムでどうやってスクリーンショットを 準備しているか 7. タブを右クリックし、[パスのコピー] をクリックします。 この操作で画像ファイルの正しいフルパスがクリップボード にコピーされます。
19. ソラコムでどうやってスクリーンショットを 準備しているか 8. GIMP に戻って画像ファイルを保存します。ファイル名には、 クリップボードにコピーされているフルパスを指定します。 このように操作すると、間違ったファイルに上書きしてし まったり、ファイルが正しくリンクされていなかったり、 といった事故が避けられます。
20. ソラコムでどうやってスクリーンショットを 準備しているか ちなみに、スクリーンショットを貼ったり赤枠を付けたりした PowerPoint ファイルは作業用のファイルとして保存しています。 PowerPoint のファイル名 (xxx.pptx) は、markdown (正確にはディレクト リ) とあわせてあります。そのため、markdown ファイルを修正するときに、 どの PowerPoint ファイルに以前のデータが含まれているかわかるように なっています。 PowerPoint markdown
21. イイ感じ (当社比) のスクリーンショットを 作るコツ
22. コツ スクリーンショットにまつわるコツを取りとめもなくシェアしよ うという回です。主に以下のような話が出てきます。 • 角を含める話 • 情報を隠す話 • 画像を加工する話 • ファイル名を忘れちゃう話
23. コツ スクリーンショットにまつわるコツを取りとめもなくシェアしよ うという回です。主に以下のような話が出てきます。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 • 画像を加工する話 • ファイル名を忘れちゃう話
24. コツ スクリーンショットにまつわるコツを取りとめもなくシェアしよ うという回です。主に以下のような話が出てきます。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 → Chrome/Edge のスニペット。Edit Anything。 • 画像を加工する話 • ファイル名を忘れちゃう話
25. コツ スクリーンショットにまつわるコツを取りとめもなくシェアしよ うという回です。主に以下のような話が出てきます。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 → Chrome/Edge のスニペット。Edit Anything。 • 画像を加工する話 → GIMP と PowerPoint。 • ファイル名を忘れちゃう話
26. コツ スクリーンショットにまつわるコツを取りとめもなくシェアしよ うという回です。主に以下のような話が出てきます。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 → Chrome/Edge のスニペット。Edit Anything。 • 画像を加工する話 → GIMP と PowerPoint。 • ファイル名を忘れちゃう話 → Visual Studio Code と GIMP (説 明済み)。
27. 角を含める話
28. スクリーンショットを撮るのは何のため？ 言葉だけでは説明しきれない付加情報をふんだんに提供して、ス ムーズに操作してもらうためです。 • 操作対象 (ボタンなど) の位置 • 操作対象 (ボタンなど) のデザイン ここでは例として「PowerPoint でスライドショーを表示すると きに、どのディスプレイを使うか選択する方法を説明する」こと を考えてみましょう。
29. 「どこにあるか」伝わらない例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。
30. 「どこにあるか」伝わらない例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。 ユーザーにとって情報が増えていないので 。 ユーザーはこの画面をすでに見ているはずです。
31. 「どこにあるか」伝わらない例 2 1. [スライドショー] の [モニター] でディスプレイを選択します。
32. ユーザーにとって情報がほんの少ししか増えていないので 。 [モニター] のデザインはわかりますが、位置はわかりません。 「どこにあるか」伝わらない例 2 1. [スライドショー] の [モニター] でディスプレイを選択します。
33. 「どこにあるか」伝わりそうな例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。
34. 「どこにあるか」伝わりそうな例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。
35. 「どこにあるか」伝わりそうな例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。 • 画面の基準点を含めている。基準点は、見ればどこか判別 できる点。この例では左上。基準点はどこでも大丈夫。 • 赤枠をつけた。 基準点
36. 「どこにあるか」伝わりそうな例 2 1. [スライドショー] の [モニター] でディスプレイを選択します。 • PowerPoint のリボン UI に慣れていることが期待できれば、 リボン UI そのものが画面の基準点になりうる。 基準点
37. 1. [スライドショー] の [モニター] でディスプレイを選択します。 「どこにあるか」伝わりそうな例 2 基準点 • 画面の基準点を含めている。基準点は、見ればどこか判別 できる点。この例では左上。基準点はどこでも大丈夫。 • 省略を表す波線をつけた。 • 赤枠をつけた。
38. 「どこにあるか」伝わりそうな例 3 • ポップアップ画面の場合は、ポップアップ画面の基準点を 含めればよい。 (もともと操作していた画面を含める必要はない。) 基準点 基準点
39. (まとめ) 角を含める話 見ればどこか判別できる基準点を含めて撮影しましょう。 よく使われるのは左上と右上ですが、どこでも大丈夫です。
40. 情報を隠す話
41. 作業者 (makoto) の名前が出ないようにする
42. 右上の "makoto" を "example@example.jp" に変更する
43. 右上の "makoto" を "example@example.jp" に変更する // Replace account name to example@example.jp bulkReplaceTextInElement("#accountMenu > summary > span", [ { oldText: "makoto", newText: "example@example.jp" }, ]); function bulkReplaceTextInElement(selector, replacements) { const element = document.querySelector(selector); if (element) { replaceTextRecursivelyBulk(element, replacements); } } function replaceTextRecursivelyBulk(element, replacements) { for (let node of element.childNodes) { if (node.nodeType === Node.TEXT_NODE) { for (const replacement of replacements) { node.textContent = node.textContent.replace( replacement.oldText, replacement.newText ); } } else if (node.nodeType === Node.ELEMENT_NODE) { replaceTextRecursivelyBulk(node, replacements); } } }
44. 右上の "makoto" を "example@example.jp" に変更する // Replace account name to example@example.jp bulkReplaceTextInElement("#accountMenu > summary > span", [ { oldText: "makoto", newText: "example@example.jp" }, ]); function bulkReplaceTextInElement(selector, replacements) { const element = document.querySelector(selector); if (element) { replaceTextRecursivelyBulk(element, replacements); } } function replaceTextRecursivelyBulk(element, replacements) { for (let node of element.childNodes) { if (node.nodeType === Node.TEXT_NODE) { for (const replacement of replacements) { node.textContent = node.textContent.replace( replacement.oldText, replacement.newText ); } } else if (node.nodeType === Node.ELEMENT_NODE) { replaceTextRecursivelyBulk(node, replacements); } } } 右上の "makoto" を "example@example.jp" に変更する
45. "makoto" を "example@example.jp" に 変更する Chrome/Edge の開発ツールを 表示して、[ソース] → [スニ ペット] に新しいスニペットを 作成して、先ほどのスクリプト を入力しておきます。 作成したスニペットを右クリック して、[実行] をクリックすると、 example@example.jp に置換され ます。
46. "makoto" を "example@example.jp" に 変更する Chrome/Edge の開発ツールを 表示して、[ソース] → [スニ ペット] に新しいスニペットを 作成して、先ほどのスクリプト を入力しておきます。 作成したスニペットを右クリック して、[実行] をクリックすると、 example@example.jp に置換され ます。 スクリーンショットを撮影する前に、 このスニペットを実行すれば、 "makoto" が撮影されることもない。
47. 右上の "makoto" を今回だけ "test-test-test" に変更する
48. 右上の "makoto" を今回だけ "test-test-test" に変更する • Chrome の拡張機能 Edit Anything を使うと、Web ページのテ キストを編集できます。 https://chromewebstore.google.com/detail/edit- anything/kgkhambjbahgejgoaefmekdchedkihln?pli=1 この画面は Edge。Edge も Chrome の拡張機能を使えます。
49. (まとめ) 情報を隠す話 スニペットや Edit Anything を使って情報を隠していきま しょう。 (モザイクをかけるのは次のセクションです。)
50. 画像を加工する話
51. PowerPoint GIMP △ 0.1 mm 単位の大雑把 なトリミング ◦ 1 ピクセル単位の精緻 なトリミング トリミング △ 0.1 mm 単位の大雑把 なモザイク。1 色 ◦ 1 ピクセル単位の精緻 なモザイク モザイク ◦ 直感的 △ ちょっと難しい 赤枠をつける ◦ 直感的な気がする △ ちょっと難しい スクリーンショットの 中間を省略する GIMP と PowerPoint を使っています
52. GIMP と PowerPoint を使っています • 雑に撮影したスクリーンショットの余計な部分を、 GIMP を使って、ていねいにトリミングします。
53. • 雑に撮影したスクリーンショットの余計な部分を、 GIMP を使って、ていねいにトリミングします。 GIMP と PowerPoint を使っています
54. GIMP と PowerPoint を使っています • 数字にモザイクをかけるのも GIMP を使っています。
55. • 数字にモザイクをかけるのも GIMP を使っています。 GIMP と PowerPoint を使っています
56. GIMP と PowerPoint を使っています • 数字にモザイクをかけるのも GIMP を使っています。
57. GIMP と PowerPoint を使っています • 赤枠を付けるのは PowerPoint です。
58. GIMP と PowerPoint を使っています • メニューで赤枠を重ねる場合もきれいに作れます。
59. GIMP と PowerPoint を使っています • メニューで赤枠を重ねる場合もきれいに作れます。 [図形の書式] → [図形の挿入] の [図形の結合] → [切り出し] の順にクリックします。 赤枠を 2 つ描いて選択します。
60. GIMP と PowerPoint を使っています 何も変わっていないように見えますが、 3 つに分割されています。 青い部分を消して、位置 を調整すれば完成です。
61. GIMP と PowerPoint を使っています 右下のパーツを右クリックして、 [頂点の編集] をクリックします。 L 字の角を右クリックして [パ スを開く] をクリックします。
62. 3 つに分かれたパーツの位置を 調整して、中央のパーツを削除 したら完成です。 位置の調整は、左揃え/右揃え、上揃え/下揃 えをうまく使います。 GIMP と PowerPoint を使っています 頂点を 2 つ削除します。 この 2 つを 削除すると 以下のよう になります。
63. GIMP と PowerPoint を使っています • ⾧い画面の中央を省略する線も簡単に書けます。
64. GIMP と PowerPoint を使っています • [挿入] → [図] の [図形] → [小 波] を使って、イイ感じの波線 を準備します。 小波:
65. GIMP と PowerPoint を使っています [図形の書式] → [図形の挿入] の [図形の結合] → [接合] の順にクリックして、1 つにまとめます。 色を調整します。
66. GIMP と PowerPoint を使っています • 両端を白い四角で隠せば、波線の完成です。
67. GIMP と PowerPoint を使っています • ⾧い画像を用意して、コピー します。 一方は上側の画像として、 もう一方は下側の画像として 利用します。間に波線を置く イメージです。
68. GIMP と PowerPoint を使っています • ⾧い画像を用意して、コピーし ます。 一方は上側の画像として、 もう一方は下側の画像として利 用します。
69. GIMP と PowerPoint を使っています • 中央に波線、波線の左右に白い四 角を置いて、位置を揃えたら完成 です。位置を揃えるために横線を 用意するとよいでしょう。 位置を揃えるための横線
70. (まとめ)画像を加工する話 GIMP や PowerPoint を使って画像を加工しましょう。赤枠 や省略の波線は PowerPoint で作業しておくと、修正が簡単 です。
71. Visual Studio Code と GIMP でうまいことやります (説明済 み)。画像ファイル名は、markdown の上にしか書いていない (PowerPoint ファイルには書いていない) というのが重要ポイ ントです。 ファイル名を忘れちゃう話
72. まとめ スクリーンショットにまつわるコツを取りとめもなくシェアし ようという回でした。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 → Chrome/Edge のスニペット。Edit Anything。 • 画像を加工する話 → GIMP と PowerPoint。 • ファイル名を忘れちゃう話 → Visual Studio Code と GIMP。
73. We're hiring!
74. ご清聴ありがとうございました！ Twitter: @yazakimakoto