イラストでわかりやすく表現する技術

勉強のモチベーションを上げていく方法が紹介されていました。

湊川あいさん（Webデザイナー/マンガ家/技術書執筆）の勉強会資料です。

【湊川あい 登壇情報】
お声がけいただき「実践！イラストでわかりやすく表現する技術」というタイトルで登壇します！
技術を図解化するハンズオンやりましょう！

高専カンファレンス in 東京 2018
2018/7/15(日) 10:00〜
六本木 DMMグループセミナールームにて#kosenconfhttps://t.co/vvh8N0jFH4

— 湊川あい🌱マンガでわかるDocker③AWS編 ダウンロード販売開始 (@llminatoll) June 27, 2018

本日の資料をアップしました！
『実践！イラストでわかりやすく表現する技術』by 湊川あい#kosenconf https://t.co/2iQuQEUedF

— 湊川あい🌱マンガでわかるDocker③AWS編 ダウンロード販売開始 (@llminatoll) July 15, 2018

実践！イラストでわかりやすく表現する技術

#インフラ勉強会 実践！イラストでわかりやすく表現する技術_by湊川あい @llminatoll - Google スライド

docs.google.com

b.hatena.ne.jp

湊川あいさんは、分かりやすいマンガの技術書を書かれています。

わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉

上記資料には、こういう本を書くにはどうしたらいいか？という説明とともに、勉強のやり方にもつながるお話が紹介されていました。 

グラフィックレコーディングとは？

（スライド　p.9）

fullswing.dena.com

会議などで、こんなコミュニケーションロスを経験したことのある方は多いのではないでしょうか。そんな方に、おすすめの手法がグラフィックレコーディングです。これは、議論をグラフィックで可視化して記録するというもの。言葉だけではなくグラフィックを用いてコミュニケーションすることで、数多くのメリットが生まれます。

note.mu

紙とペンで人々の対話や議論をグラフィックで可視化する「グラフィックレコーディング」という手法

話を図解することが、「グラフィックレコーディング」ということみたいです。

Graphic Recorder ―議論を可視化するグラフィックレコーディングの教科書

（スライド　p.18）

中学生の頃から、授業のノートを絵でまとめてた。

字ばっかりだと後から読む気がしないからっていう単純な理由ｗ

学校の授業や読書のノートも、グラフィックレコーディング＝絵を活用すると分かりやすくできますね。

勉強のコツ　その１

• 字だけでなく、絵も活用する。
• 視覚的に理解を助ける。

図解の手順

（スライド　p.21）

(1) つまづいたことをメモ

(2) 過去の自分に答えてあげる

(3) 表現する

(4) 発信する

上記の流れは、具体的にはこんなかんじかな？

(1) 教科書を読んでいて、分からないことがあったら付箋紙を貼ったり読書ノートにメモ。

(2) 疑問の答えをGoogle検索などで調べて書く。

(3) 複雑な話なら図解も書く。

(4) ついでにネットで公開。

自分一人で勉強するときは、(1)から(3)だけで十分なのですが、ついでに(4)の公開までやることが勉強のモチベーションを高めるコツだと思いました。

自己完結しないで他者にも提供すると、間違っていた場合は指摘されたり、別の答えをアドバイスしてもらえたりします。

何らかの利益が得られると嬉しくなり、モチベーション（やる気、動機付け）の増加につながりますね？

勉強のコツ　その２

• 勉強の成果を提供する。
• 指摘やアドバイスなどのフィードバックが得られる。

説明のパターン化 

（スライド　p.31）

1. 事例（こんなこと）
2. 比喩（～のようだ）
3. 抽象化（まとめる）
4. 具体化（広げる） 

１つの事項をこのような切り口で別の角度からスポットライトを当てて説明すると分かりやすそうですね。

発表の場

（スライド　p.39）

今ならインターネットで誰でも情報発信できます。

手軽な順番だと、

1. ツイッター
2. ブログ
3. ミニコミ（同人誌）
4. マスコミ（出版社）

などがあると。

動画が作成できるなら、YouTubeとかもありですね。

（スライド　p.43）

ネットで公開すれば、いろんな反応が得られまね。

図解のやり方

（スライド　p.50）

（スライド　p.51）

図解のノウハウは、デザインの専門書などでも紹介されています。

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA)

自分の疑問を他人と共有する

（スライド　p.67）

（スライド　p.68）

自分が勉強して分からなかった部分は、他人も同様に疑問を持つ可能性があります。

自分が分からなかった部分を解明してネットで公開すれば、他人と情報共有できます。

検索して自分のメモを見てもらえれば、他人の疑問解決に役立ちますね。

「次につまづく人を減らすことができる！」という発想で勉強すれば、モチベーションを高めることができると思います。

→この考え方が参考になりました。

つまづいたことノートの作成

以前、湊川あいさんの本を読んだときのメモを振り返ってみました。 

jsstudy.hatenablog.com

私は、Gitを使い始めて以降、わからないことがあったら「つまづいたことノート」に書いてきました。なお、本書の執筆にあたっても、日々勉強しながら解説を書くという形でした。わかばちゃんが「なんでこうなるの？」と疑問に思う部分は、私が過去につまづいた部分です。

分からなかったことを記録して、１つずつ疑問を潰していくスタイルは、勉強の基本ですね。

「イラストでわかりやすく表現する技術」を参考にして、JavaScript学習を進めていきたいと思います。

わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉

わかばちゃんと学ぶ Googleアナリティクス〈アクセス解析・Webマーケティング入門〉