実践！
イラストで
わかりやすく
表現する技術
湊川あい
Webデザイナー/マンガ家/技術書執筆�
みなとがわ
#kosenconf
#kosenkonf
#kousenconf
#kosenconf
#kosenconf
四万十川 あい
湊川 あい
湊川 いあ
#kosenconf
湊川あい
フリーランスWebデザイナー / マンガ家 / 技術書執筆
みなとがわ
＠llminatoll
書店様・Amazon様で
発売中
グラフィックレコーディング
#湊川あいグラレコ
よく聞かれること
・解説文
・コーディング
・イラスト
・マンガ
絵は別の人が描いてるんでしょ？
・解説文
・コーディング
・イラスト
・マンガ
解説は別の人でしょ？
・解説文
・コーディング
・イラスト
・マンガ
いつから図解を
始めたの？
字だけだと�後で読む気
しないな……
※個人の感想です
あ、絵で
ノート取れば
いいのか
実践！図解してみよう
お題「べき等性」
制作時の流れ
①つまづいたことをメモ
②過去の自分に答えてあげる
③表現する
④発信する
学校で！（研究内容を共有）� 会社で！（自社サービス説明）� （後輩に教えるとき）� 個人活動で！
①つまづいたことをメモ
マンガの元になったメモはScrapboxで公開しています
【重要】感情もセットでメモする
それをやると何が嬉しいの？�その技術を使わなければ何がツライの？
わぁ動いた！�楽しい！
なんですぐ�コンテナ停止してしまうん。悲
まったくわからない。�俺たちは雰囲気で�Dockerをやっている…
デーモンって�こういう…？
なんか怖そう
②過去の自分に答えてあげる
正確
フェーズ
正しい情報を�調べる
質問者は答えを�「早く・重く」知りたい
人間が一度に理解できる量には制限がある。
②過去の自分に答えてあげる
まるめる
フェーズ
言い換え
具体例
デーモンとは？
デーモンとは？
つまり…
実際のところ…
…みたいな
ものだ
例えば…
抽象化（まとめる）
事例（こんなこと）
比喩（〜のようだ）
具体化（広げる）
デーモンとは？
で、Dockerの裏対応をしてくれるのは�なんていう名前のデーモンさんなの？
→Dockerデーモンです
メーラーデーモンからのメールを
受け取ったことは
ないかい？
雑用をやってくれる守護神みたいな
良い子
典型的なデーモンには末尾にdがついている。�例えばhttpdやsshdなど
抽象化（まとめる）
事例（こんなこと）
比喩（〜のようだ）
具体化（広げる）
悪魔じゃ�ないんだ！安堵
あるある！�共感
そのまんま�じゃん！笑
③表現する
図解化するための部品をそろえたら…
〜 中略 〜
④発信する
ツイッター ＜ブログ ＜ 個人制作誌 ＜ 商業誌
ハードル�低い順
④発信する
ツイッター ＜ブログ ＜ 個人制作誌 ＜ 商業誌
勉強会・カンファレンス
Podcast・YouTube
ハードル�低い順
選択肢は開かれている！
実は、マンガという手段そのものにはこだわっていなくて
「動画でわかる」でも「VRでわかる」でもいいんですよ。
今後もっともっと新しいメディアが生まれてくるはず。
何をしてもいいんですよ！ う〜んワクワクしますね！
情報は広がりたがっている！
土日で描いた荒削りな
#マンガでわかるGit
800ブクマ
もし自分のノートに描いただけだったら…�社内だけで公開していたら…
ここまで広がらなかった
実践！図解してみよう
お題「べき等性」
冪等性（べきとうせい）とは
情報工学における冪等とは、ある操作を1度行っても複数回行っても同じ効果となることを言う。�特に、何回行ってもエラーや不整合の状態が変わらない操作を指す。
#kosenconf
#kosenconf
絵心がない。
どうしたら
いいですか？
これさえあれば
大丈夫！�（本当です）
図解の基本形 イロイロ
A
B
対比
内包
A
B
A
B
因果
などなど
図解の基本形 イロイロ
A
B
A
B
「だから、どう」
・それは嬉しいことか？� ・嬉しくないことか？
・ナルホドなのか？
+α
冪等性（べきとうせい）とは
情報工学における冪等とは、ある操作を1度行っても複数回行っても同じ効果となることを言う。�特に、何回行ってもエラーや不整合の状態が変わらない操作を指す。
#kosenconf
①つまづいたことをメモ
②過去の自分に答えてあげる
③表現する
④？？？
①つまづいたことをメモ
②過去の自分に答えてあげる
③表現する
④発信する
#kosenconf
「べき等性」を図解してみた！
湊川の作例
(あくまでも一例としてご覧ください）
冪等性とは？
つまり…
実際のところ…
…みたいな
ものだ
例えば…
抽象化（まとめる）
事例（こんなこと）
比喩（〜のようだ）
具体化（広げる）
続きはこちらからどうぞ
やさしい
難しい
どゆこと？
ナルホド！
やさしい
難しい
どゆこと？
ナルホド！
やさしい
難しい
どゆこと？
ナルホド！
・心地よい負荷
・達成感
わかりやすい解説 = おもてなし
「わからない」は
チャンス
新しい技術やツールを�学び始めるとき
できない、�わからない
いっぱい�つまづく
チュートリアルの通りにやってるのに…
新しい技術やツールを�学び始めるとき
できない、�わからない
いっぱい�つまづく
チュートリアルの通りにやってるのに…
→実は超わかりやすい�解説を書けるチャンス
Say hello to
dynamic technologies
「わからない」を�「わかりやすい」に変換して
多様化する技術の融合に貢献しよう
湊川あい
#マンガでわかるUnity
はじめました