Making of Testerchan

新人さんからわかるテスト解説マンガ「テスターちゃん」の誕生秘話、目的、使われている技術、どんな風に描いているかを説明しています。

Transcript

1. 新人さんからわかるテストマンガ 「テスターちゃん」 誕生秘話と製作法
2. 「テスターちゃん」とは ブラックボックステストでのテストの考え方、やり方、技法や用語を わかりやすく、実践的に説明するマンガ。 現状(2019/10/30) 総PV数 : 574,546 月平均PV : 約20,000
3. 「テスターちゃん」誕生秘話 テストの本は小難しくて 読みにくい ※1年で終わるつもりだったけど 人気がでたので続行中
4. 「テスターちゃん」の目指すところ テスターちゃんはテスト部署に入ってきた新人さんの教育やテストを理 解しようとし始めたマネージャーや開発者の勉強のための補助教材の位 置づけのイメージ。 テスト部署の本棚に置いてあり、 新人さんが来たときに 「これに目を通してみて」 と、読んでもらうことで 「テストってこういうことをするんだ。大切なんだ」 という『テストの基礎となる部分』（会社に依存しない部分）を ある程度マンガで理解できる、教育の一部をこの本でまかなう…… という事を目指している。 「ちょっとだけわかりました」 を引き出せたら良いかと考えている。 ちょっとだけ わかりましたっ
5. 「テスターちゃん」を書いたことで変化したこと 「某会社のまつさん」 ↓ 「テスターちゃんのまつさん」 会社依存ではなくなった イラストやマンガの 依頼が来るようになった 新しい収入源
6. 「テスターちゃん」に使われている技術
7. 4コマ漫画で「アジャイル創作」 通常のストーリー漫画では1Pでは話が成立しないので、 キリがいいページ数を描かなければリリースができない。 描きためてリリースは忙しいし続きそうにない… このページだけ リリースしても 読者に伝わらない ？
8. 4コマ漫画で「アジャイル創作」 4コマ漫画の場合、1Pでオチがついている。 反応を受けて、次回の話の方向性を変えることもできる。 このページだけで （おおよそ）把握可能 このページさえ描けば リリースできるという 安心感/手軽さ
9. 4コマ漫画で「アジャイル創作」 そして個々の1Pが集まり、ひとつの大きな話題を形成する。 仕様把握の話題
10. 1 hour sprint（というと語弊があるが…） 様々な作業工程があるが、それらを1時間程度、それぞれが完成まで作業。 1ページは約9~10時間で完成する。 各コマの内容 考える 各コマの セリフ決め 下書き ペン入れ １コマ目 ペン入れ 2コマ目 ベタ トーン貼り 仕上げ 平日帰宅後も 作業可能になった まとめて描いていた時より 方向転換ができるようになった ペン入れ 3コマ目 ペン入れ 4コマ目 セリフ入れ
11. 複数サイトへの自動deployツール開発 テスターちゃんは様々なサイトへ投稿している。 それらすべてを手動で投稿していると投稿だけで30分ほどかかる。 ・LINEマンガ ・マンガボックス ・アルファポリス ・ニコニコ静画 ・FUNBOX ・pixiv また6サイトもあるとどこかしらアップデートされていて、通常のE2Eテ スト自動化の操作などではどこかでコケてしまう。 そこでそれらをクリアできるキーワード＆データ駆動の自作RPAツール で自動化し、数分で終わるようにしている。 エクセルに簡単な操作を書いてツールにD&Dすると完了する。 （ターミナルから実行も可能）
12. 複数サイトへの自動deployツール開発（実演） 内部動作は、該当pageのhtmlを取り込み、該当文字列が含まれるタグを検索、 内部で動的にxpathを生成して、それを使い入力やクリックさせている。 (javascriptで生成されるpageなどは通信の時間を加味して待ち時間など入れる必要アリ） 例1） <img src=“img.png”> をクリックしたいなら 「img.png」と指定してもいいし、「rc=“im 」でも。タグの文字列ならどこでもいい 例2） <div class=“hoge”>ほげふが</div>なら 「ほげふが」でも「oge”>ほ」でも、どこでも。変更がかからなそうなところを選ぶ。 idやxpathの設定を必要としない ため、htmlの構造変化に強い。 12/14の技術書同人誌博覧会と BOOTHで販売予定 https://testerchan.booth.pm/ テスターちゃん5巻を描いていたら間に合わなそう…
13. 複数サイトへの自動deployツール開発 （おまけ：なぜかテストもできる）
14. 「テスターちゃん」の作成工程
15. 「テスターちゃん」の作成工程（大枠） まずは何の「話題」を取り扱うかを考える。 そこから描きたい大枠を列挙する。 列挙すると、大体の構成話数が見えてくる。 （描いている間に変動するけど） 細かなことは実際に4コマを書くときに考えるので キーワードレベルで考える。 「ふりかえり」！
16. 「テスターちゃん」の作成工程 １ お風呂でネタ出し ２ ノートで各コマに どんな内容を入れるか 概要を考える ３ ノートで各コマの セリフを具体的に考える アイディアはよく馬上枕上厠上（ばじょうちんじょう しじょう）で出ると言われていますが、私はお風呂で す。 「何を描きたいか」「4コマ目」をどうするか考えます （どういう流れで終わりに持っていくか） その後、各コマにどんな内容を入れるか概要を考えま す。 それらが終わった後は具体的なセリフを考え始めます。 コマ内容とセリフを同時に考えることもあります。
17. 「テスターちゃん」の作成工程 ４ アタリを描く 使用ツールはClip Studio ネーム……というよりアタリ（補助線）を引きます。 ここで全体のコマ構成をまとめます。 目立たない色、ということで水色を使っています。
18. 「テスターちゃん」の作成工程 ５ 下書き 先に描いたアタリを参考に下絵を描きます。 私の場合、まだ頭の大きさと体の大きさのバランスが 取れなかったりするので、アタリから大きく外れたり します……。 色はなんとなくオレンジを使っています。 ちなみに4コマ目のポーズを大きく変えています。 理由は簡単で、描いているうちに完全に涼宮ハルヒの 構図になったので避けました。
19. 「テスターちゃん」の作成工程 ６ セリフ入れ ペン入れより前にセリフを入れてしまいます。 目的は以下。 ・セリフ自体のバランスをとる。 ・セリフとキャラの位置を調整する。 ・セリフで隠れる部分のペン入れは省きたい。 4コマ目の絵の位置をずらしています。
20. 「テスターちゃん」の作成工程 ７ ペン入れ ペン入れをします。 ほとんど下書きのままです。 「手」といったパーツはココで詳細化しています。 2コマで1時間ほど持っていかれます。 背景が入るとさらに時間がかかります。 肩こりになる作業です。
21. 「テスターちゃん」の作成工程 ８ ベタ ベタ（黒）を入れます。 ベタを入れることで絵にメリハリが出ます。 この段階で髪の毛や服などの線を増やしています。
22. 「テスターちゃん」の作成工程 ９ トーン貼り トーンを入れます。 髪は70線20%、服は70線60%です。 また、60%の場所は線もつぶれるので、境界線に消し ゴムを入れます。 髪もテカリ部分に消しゴムを入れます。 他、背景としてトーンを入れます。 レースのトーンがお気に入りです。
23. 「テスターちゃん」の作成工程 ９ 仕上げ セリフを表示し、全体的なバランスチェックをします。 文字だけの部分などはホワイトをバックに入れて見え やすくします。 全て終わった後は、思い付きで注釈を挟みます。 注釈を挟むときは次回マンガで説明しようとしている 部分を書かないように注意します。
24. 「テスターちゃん」1～4巻・英語版1巻、紙/電子ともに発売中！ BOOTH(pixiv) Amazon(kindle)
25. Thank you これからもテストのわかりやすい説明を ゆかいなキャラと共に描いていきます