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

by SORACOM

Slide 1

Slide 1 text

いい感じでスクリーンショットを作る話

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

自己紹介 • 矢崎誠 (makoto) • 株式会社ソラコム Technical Writer • テクニカルライター歴: 約25年 • Twitter: @yazakimakoto https://www.amazon.co.jp/dp/4902820102 おすすめの本→

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

株式会社ソラコム概要株式会社ソラコム / SORACOM, INC. 商号玉川憲代表取締役社⾧ IoT プラットフォームの提供事業概要日本、英国、米国(シアトル) 拠点 2017年8月に KDDI グループ入り

Slide 6

Slide 6 text

IoT とは？メーター (ガス・電気) 温度計デジタル化 { "gas_volume": 426.807, "temperature": 30 } { "air_conditioner": true, "target_temperature": 28 } 遠隔操作エアコンクラウド自宅

Slide 7

Slide 7 text

SORACOM は IoT の「つなぐ」を簡単にセンサー/デバイスデータ活用  遠隔操作  メンテナンス  蓄積・見える化  アラート通知通信デバイスセンサーキットネットワーク IoT SIM LPWA パートナーデバイスパートナークラウド (AWS / Microsoft / Google / IBM) Wi-Fi / 有線 3G / LTE / 5G LTE-M 閉域網

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

スクリーンショットを撮っていますか

Slide 11

Slide 11 text

スクリーンショットはなぜ必要か • 文章だけでは、操作対象 (UI) の場所や周囲の情報を伝えられない。そんなときにスクリーンショットがあるとわかりやすくなりますね。

Slide 12

Slide 12 text

ソラコムでどうやってスクリーンショットを準備しているか 1. 画面を撮影して、余計なところをトリミングしたり、一部の数字にモザイクをかけたりします。

Slide 13

Slide 13 text

ソラコムでどうやってスクリーンショットを準備しているか 2. PowerPoint に貼り付けて、横幅を 20cm に揃えて、 PowerPoint の表示倍率を 100% にしたうえで赤枠を付けます。 20 cm

Slide 14

Slide 14 text

ソラコムでどうやってスクリーンショットを準備しているか 3. PowerPoint ファイルを保存して、PowerPoint のスクリーンショットを撮ります！このようにすることで画像のサイズをおおむねね揃えています。

Slide 15

Slide 15 text

ソラコムでどうやってスクリーンショットを準備しているか 4. GIMP に貼り付けて、余白をトリミングします。

Slide 16

Slide 16 text

ソラコムでどうやってスクリーンショットを準備しているか 5. ここで画像ファイルの名前を決めても忘れてしまうので、 GIMP はこのままにして、Visual Studio Code に切り替えます。

Slide 17

Slide 17 text

ソラコムでどうやってスクリーンショットを準備しているか 6. Visual Studio Code で markdown ファイルを開き、ファイル名を書いたうえで、Ctrl + Alt を押しながら画像ファイルのファイル名をクリックして、画像が正しいこと (新規作成のときは画像がないこと) を確認します。

Slide 18

Slide 18 text

ソラコムでどうやってスクリーンショットを準備しているか 7. タブを右クリックし、[パスのコピー] をクリックします。この操作で画像ファイルの正しいフルパスがクリップボードにコピーされます。

Slide 19

Slide 19 text

ソラコムでどうやってスクリーンショットを準備しているか 8. GIMP に戻って画像ファイルを保存します。ファイル名には、クリップボードにコピーされているフルパスを指定します。このように操作すると、間違ったファイルに上書きしてしまったり、ファイルが正しくリンクされていなかったり、といった事故が避けられます。

Slide 20

Slide 20 text

ソラコムでどうやってスクリーンショットを準備しているかちなみに、スクリーンショットを貼ったり赤枠を付けたりした PowerPoint ファイルは作業用のファイルとして保存しています。 PowerPoint のファイル名 (xxx.pptx) は、markdown (正確にはディレクトリ) とあわせてあります。そのため、markdown ファイルを修正するときに、どの PowerPoint ファイルに以前のデータが含まれているかわかるようになっています。 PowerPoint markdown

Slide 21

Slide 21 text

イイ感じ (当社比) のスクリーンショットを作るコツ

Slide 22

Slide 22 text

コツスクリーンショットにまつわるコツを取りとめもなくシェアしようという回です。主に以下のような話が出てきます。 • 角を含める話 • 情報を隠す話 • 画像を加工する話 • ファイル名を忘れちゃう話

Slide 23

Slide 23 text

コツスクリーンショットにまつわるコツを取りとめもなくシェアしようという回です。主に以下のような話が出てきます。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 • 画像を加工する話 • ファイル名を忘れちゃう話

Slide 24

Slide 24 text

コツスクリーンショットにまつわるコツを取りとめもなくシェアしようという回です。主に以下のような話が出てきます。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 → Chrome/Edge のスニペット。Edit Anything。 • 画像を加工する話 • ファイル名を忘れちゃう話

Slide 25

Slide 25 text

コツスクリーンショットにまつわるコツを取りとめもなくシェアしようという回です。主に以下のような話が出てきます。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 → Chrome/Edge のスニペット。Edit Anything。 • 画像を加工する話 → GIMP と PowerPoint。 • ファイル名を忘れちゃう話

Slide 26

Slide 26 text

Slide 27

Slide 27 text

角を含める話

Slide 28

Slide 28 text

スクリーンショットを撮るのは何のため？言葉だけでは説明しきれない付加情報をふんだんに提供して、スムーズに操作してもらうためです。 • 操作対象 (ボタンなど) の位置 • 操作対象 (ボタンなど) のデザインここでは例として「PowerPoint でスライドショーを表示するときに、どのディスプレイを使うか選択する方法を説明する」ことを考えてみましょう。

Slide 29

Slide 29 text

「どこにあるか」伝わらない例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。

Slide 30

Slide 30 text

「どこにあるか」伝わらない例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。ユーザーにとって情報が増えていないので。ユーザーはこの画面をすでに見ているはずです。

Slide 31

Slide 31 text

「どこにあるか」伝わらない例 2 1. [スライドショー] の [モニター] でディスプレイを選択します。

Slide 32

Slide 32 text

ユーザーにとって情報がほんの少ししか増えていないので。 [モニター] のデザインはわかりますが、位置はわかりません。「どこにあるか」伝わらない例 2 1. [スライドショー] の [モニター] でディスプレイを選択します。

Slide 33

Slide 33 text

「どこにあるか」伝わりそうな例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。

Slide 34

Slide 34 text

「どこにあるか」伝わりそうな例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。

Slide 35

Slide 35 text

「どこにあるか」伝わりそうな例 1 1. [スライドショー] の [モニター] でディスプレイを選択します。 • 画面の基準点を含めている。基準点は、見ればどこか判別できる点。この例では左上。基準点はどこでも大丈夫。 • 赤枠をつけた。基準点

Slide 36

Slide 36 text

「どこにあるか」伝わりそうな例 2 1. [スライドショー] の [モニター] でディスプレイを選択します。 • PowerPoint のリボン UI に慣れていることが期待できれば、リボン UI そのものが画面の基準点になりうる。基準点

Slide 37

Slide 37 text

1. [スライドショー] の [モニター] でディスプレイを選択します。「どこにあるか」伝わりそうな例 2 基準点 • 画面の基準点を含めている。基準点は、見ればどこか判別できる点。この例では左上。基準点はどこでも大丈夫。 • 省略を表す波線をつけた。 • 赤枠をつけた。

Slide 38

Slide 38 text

「どこにあるか」伝わりそうな例 3 • ポップアップ画面の場合は、ポップアップ画面の基準点を含めればよい。 (もともと操作していた画面を含める必要はない。) 基準点基準点

Slide 39

Slide 39 text

(まとめ) 角を含める話見ればどこか判別できる基準点を含めて撮影しましょう。よく使われるのは左上と右上ですが、どこでも大丈夫です。

Slide 40

Slide 40 text

情報を隠す話

Slide 41

Slide 41 text

作業者 (makoto) の名前が出ないようにする

Slide 42

Slide 42 text

右上の "makoto" を "[email protected]" に変更する

Slide 43

Slide 43 text

右上の "makoto" を "[email protected]" に変更する // Replace account name to [email protected] bulkReplaceTextInElement("#accountMenu > summary > span", [ { oldText: "makoto", newText: "[email protected]" }, ]); 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); } } }

Slide 44

Slide 44 text

Slide 45

Slide 45 text

"makoto" を "[email protected]" に変更する Chrome/Edge の開発ツールを表示して、[ソース] → [スニペット] に新しいスニペットを作成して、先ほどのスクリプトを入力しておきます。作成したスニペットを右クリックして、[実行] をクリックすると、 [email protected] に置換されます。

Slide 46

Slide 46 text

Slide 47

Slide 47 text

右上の "makoto" を今回だけ "test-test-test" に変更する

Slide 48

Slide 48 text

右上の "makoto" を今回だけ "test-test-test" に変更する • Chrome の拡張機能 Edit Anything を使うと、Web ページのテキストを編集できます。 https://chromewebstore.google.com/detail/edit- anything/kgkhambjbahgejgoaefmekdchedkihln?pli=1 この画面は Edge。Edge も Chrome の拡張機能を使えます。

Slide 49

Slide 49 text

(まとめ) 情報を隠す話スニペットや Edit Anything を使って情報を隠していきましょう。 (モザイクをかけるのは次のセクションです。)

Slide 50

Slide 50 text

画像を加工する話

Slide 51

Slide 51 text

PowerPoint GIMP △ 0.1 mm 単位の大雑把なトリミング ○ 1 ピクセル単位の精緻なトリミングトリミング △ 0.1 mm 単位の大雑把なモザイク。1 色 ○ 1 ピクセル単位の精緻なモザイクモザイク ○ 直感的 △ ちょっと難しい赤枠をつける ○ 直感的な気がする △ ちょっと難しいスクリーンショットの中間を省略する GIMP と PowerPoint を使っています

Slide 52

Slide 52 text

GIMP と PowerPoint を使っています • 雑に撮影したスクリーンショットの余計な部分を、 GIMP を使って、ていねいにトリミングします。

Slide 53

Slide 53 text

• 雑に撮影したスクリーンショットの余計な部分を、 GIMP を使って、ていねいにトリミングします。 GIMP と PowerPoint を使っています

Slide 54

Slide 54 text

GIMP と PowerPoint を使っています • 数字にモザイクをかけるのも GIMP を使っています。

Slide 55

Slide 55 text

• 数字にモザイクをかけるのも GIMP を使っています。 GIMP と PowerPoint を使っています

Slide 56

Slide 56 text

GIMP と PowerPoint を使っています • 数字にモザイクをかけるのも GIMP を使っています。

Slide 57

Slide 57 text

GIMP と PowerPoint を使っています • 赤枠を付けるのは PowerPoint です。

Slide 58

Slide 58 text

GIMP と PowerPoint を使っています • メニューで赤枠を重ねる場合もきれいに作れます。

Slide 59

Slide 59 text

GIMP と PowerPoint を使っています • メニューで赤枠を重ねる場合もきれいに作れます。 [図形の書式] → [図形の挿入] の [図形の結合] → [切り出し] の順にクリックします。赤枠を 2 つ描いて選択します。

Slide 60

Slide 60 text

GIMP と PowerPoint を使っています何も変わっていないように見えますが、 3 つに分割されています。青い部分を消して、位置を調整すれば完成です。

Slide 61

Slide 61 text

GIMP と PowerPoint を使っています右下のパーツを右クリックして、 [頂点の編集] をクリックします。 L 字の角を右クリックして [パスを開く] をクリックします。

Slide 62

Slide 62 text

3 つに分かれたパーツの位置を調整して、中央のパーツを削除したら完成です。位置の調整は、左揃え/右揃え、上揃え/下揃えをうまく使います。 GIMP と PowerPoint を使っています頂点を 2 つ削除します。この 2 つを削除すると以下のようになります。

Slide 63

Slide 63 text

GIMP と PowerPoint を使っています • ⾧い画面の中央を省略する線も簡単に書けます。

Slide 64

Slide 64 text

GIMP と PowerPoint を使っています • [挿入] → [図] の [図形] → [小波] を使って、イイ感じの波線を準備します。小波:

Slide 65

Slide 65 text

GIMP と PowerPoint を使っています [図形の書式] → [図形の挿入] の [図形の結合] → [接合] の順にクリックして、1 つにまとめます。色を調整します。

Slide 66

Slide 66 text

GIMP と PowerPoint を使っています • 両端を白い四角で隠せば、波線の完成です。

Slide 67

Slide 67 text

GIMP と PowerPoint を使っています • ⾧い画像を用意して、コピーします。一方は上側の画像として、もう一方は下側の画像として利用します。間に波線を置くイメージです。

Slide 68

Slide 68 text

GIMP と PowerPoint を使っています • ⾧い画像を用意して、コピーします。一方は上側の画像として、もう一方は下側の画像として利用します。

Slide 69

Slide 69 text

GIMP と PowerPoint を使っています • 中央に波線、波線の左右に白い四角を置いて、位置を揃えたら完成です。位置を揃えるために横線を用意するとよいでしょう。位置を揃えるための横線

Slide 70

Slide 70 text

(まとめ)画像を加工する話 GIMP や PowerPoint を使って画像を加工しましょう。赤枠や省略の波線は PowerPoint で作業しておくと、修正が簡単です。

Slide 71

Slide 71 text

Visual Studio Code と GIMP でうまいことやります (説明済み)。画像ファイル名は、markdown の上にしか書いていない (PowerPoint ファイルには書いていない) というのが重要ポイントです。ファイル名を忘れちゃう話

Slide 72

Slide 72 text

まとめスクリーンショットにまつわるコツを取りとめもなくシェアしようという回でした。 • 角を含める話 → スクリーンショットの目的。 • 情報を隠す話 → Chrome/Edge のスニペット。Edit Anything。 • 画像を加工する話 → GIMP と PowerPoint。 • ファイル名を忘れちゃう話 → Visual Studio Code と GIMP。