将来ウェブ業界に入りたい学生さん向けのイベント、アップルップルのWeb技術の学び方講座 OthloEvent#29（ https://othlotech.connpass.com/event/85253/ ）で話した内容です。

1. Otho Tech #29 Web技術の学び⽅講座
〜ウェブ業界で⽣き残るための情報収集のしかた〜
変化し続けるウェブ技術を追うためには
有限会社アップルップル 森⽥かすみ

2. 有限会社アップルップル所属
デザイナー
森⽥かすみ
4⽉にマークアップエンジニアからジョブチェンジしたデザイナー

3. 武器
学び始めた⼈でも、
⼿っ取り早く⾝につけられる
ウェブ業界における情報収集とは
新しい
知識

4. ❖ ウェブの知識は変わり続ける
❖ 新しい技術はわずらわしい実装から解放してくれる
❖ 新しい技術から⽬を背けるといずれ怖いものに変わっていく
なぜウェブ業界で⽣き残るためには
情報収集が必要なのか？

5. ❖ ウェブの知識は変わり続ける
なぜウェブ業界で⽣き残るためには
情報収集が必要なのか？
2013 2014 2015 2016 2017 2018
HTML5.0
レスポンシブWebデザイン
XHTML
スマホサイト・PCサイト作成
Fireworks
Sketch
Adobe XD
Photoshop
Illustrator
HTML5.1
HTML5.2
※表は個⼈的な感覚です

6. なぜウェブ業界で⽣き残るためには
情報収集が必要なのか？
❖ 新しい技術はわずらわしい実装から解放してくれる
float レイアウト flexbox のレイアウト
A B
C
A B
C対処をしないと
回り込んでしまう
意識しなくても
回り込まない

7. なぜウェブ業界で⽣き残るためには
情報収集が必要なのか？
❖ 新しい技術はいずれ怖いものに変わっていく
Gのつく⽣き物が冷蔵庫の裏に
出現したとき、どうする？
冷蔵庫
⽬から離さない。
⽬を背けた瞬間、
どこに⾏ったかわからなくなるから。

8. 今⽇は今まで私が実践してきた
情報収集の⽅法をご紹介します

9. ❖ スキマ時間でやること
❖ ライバルをみつけよう
❖ 検索スキルを⾝につけるには
❖ 持続するために習慣化する
- Agenda -
アジェンダ

10. スキマ時間でやること
- Gathering Information Technic 1 -

11. スキマ時間とは？
予定と予定の間に⽣じた短時間の暇、ちょっとした物事に取り組めるわず
かな余裕などを意味する語。移動時間や待ち時間などを指すことが多く、
勉強や情報収集などを⼩刻みに積み重ねるといった事柄で⽤いられる場合
が多い。
- weblio 辞書

12. ❖ 移動時間（電⾞の中、歩いているとき）
❖ 家事をしているとき（お⽫洗い、洗濯物を⼲しているとき）
❖ コーディングしているときのBGMとして
スキマ時間の⾒つけ⽅

13. スキマ時間の使い⽅1 配信されているものを聴く
❖ Rebuild.fm（エンジニア寄り）
❖ Automatic Podcast（デザイン寄り、たまにエンジニア寄り）
❖ Takram Cast（デザイン寄り）
❖ CSS Nite（配信あり・有料）
❖ Inside Frontend （配信あり）
❖ Frontrend（配信あり）
❖ UI Crunch（配信あり）

14. ❖ Frontend Weekly
❖ Code Grid
❖ Web Tool Weekly
❖ Frontend Focus
❖ Web Design Weekly
スキマ時間の使い⽅2 メールマガジン
〇〇Weeklyで探せばだいたいある

15. ❖ ウェブクリエーターの情報交換所
❖ HCD-Net 東海
❖ UI Crunch
スキマ時間の使い⽅3 Facebook グループ

16. ❖ Drrrible
❖ Bechance
❖ Pinterest
❖ Codepen
❖ Product Hunt
❖ GitHub
❖ makepost
スキマ時間の使い⽅4 作品を⾒る

17. ❖ Oreilly
❖ BNN社
❖ ボーンデジタル
スキマ時間の使い⽅5 技術書
ノンデザイナーズ・
デザインブック
リーダブルコード
出版社 書籍

18. ❖ WPJ
❖ コリス
❖ Web担当者フォーラム
❖ UX Milk
❖ CSS Tricks
❖ Smashing Magazine
❖ Sitepoint
スキマ時間の使い⽅7 ウェブメディア

19. ❖ WCAN（名古屋・有料）
❖ contents.nagoya（名古屋）
❖ UX 名古屋
❖ HCD-Net
❖ Startup Weekend
❖ Ateam Tech Meet Up #エンジニアLT＆交流会
❖ Mobile Act NAGOYA
❖ DTPの勉強部屋
❖ Nagoya.js
❖ Frontend Nagoya
スキマ時間の使い⽅6 セミナーに参加登録する

20. 検索スキルを⾝につけるためには
- Gathering Information Technic 2 -

21. 検索スキルとは？
なにかを作ろうと思うにも、やる気のつぎは知識。
⾃分でアプリを作りたい！
でも周りに聞ける⼈が
いない…
うまく
実装できない…
対処法は？
ただ、すばやく⽬的のものを検索するにはコツがある。
検索は⼤事なスキルの⼀つ。
その知識をどうやって補うかというと、まずは「検索」。

22. ❖ 知らない専⾨⽤語があったら、とりあえず単語だけ覚える。
もし英語もわかるなら、綴りも覚えておく。
❖ 検索するときは⽇付を確認する。
古い情報がでてきたときはフィルターする。
❖ ⽂章よりもビジュアルを探すなら「画像検索」で
❖ イラストはDrrrible、Behance、Pinterest。実際に使ってる⼈を
イメージしたいならTwitterやInstagramを使うのも◎
❖ 現在の状況を調べたいときもTwitter（例：GitHub落ちてるかな）
検索スキルを磨く⽅法

23. 持続するためには
- Gathering Information Technic 3 -

24. ❖ ツールを使って習慣づける
❖ 似た分野を勉強している仲間やライバルを⾒つける
❖ 発信の場を持つ
❖ アイディアを吸収できる場を把握しておく
❖ なぜかやる気がでないときは
持続するためには

25. ツールを使って習慣づける
このあとのワークショップでやります
❖ RSSリーダー
❖ リマインダーで⽇時・場所指定
❖ はてなブックマーク
❖ Twitterに記事の要約を投稿する
❖ IFTTTを使って普段アクセスするサービスと連携する
スキマ時間でやることを決めて習慣づける

26. ❖ Twitterで発信して仲間づくり。効果的な⽅法。
❖ 海外の記事を⽇本語で要約する
❖ セミナーや勉強会に参加したときは登壇者が⾔っていることをまとめる
似た分野を勉強している仲間やライバルを⾒つける（その1）

27. ❖ 似た年代の⼦たちが参加している⼤会に出場してもいいかも
❖ リアルで会って継続的に仲良くするためにはSNSを使うのが堅い
似た分野を勉強している仲間やライバルを⾒つける（その2）
例えば：NEXT COMMUNICATION FORUM 例えば：技能五輪

28. ❖ 勉強会で話す
❖ ブログを書く、GitHubでソースコードを公開する、
Drrrible・Behance・Twitterで発信する
発信の場を持つ
例えば：OthoEvent#30 でLTする 例えば：noteに参加レポートを書く

29. ❖ 忙しいとインプットしなくなりがち
でも本当はインプットがあってこそのアウトプット
❖ 良質なアウトプットは⼤量のアイディアによって⽣まれる
アイディアを吸収できる場を把握しておく
例えば：OthoEvent に参加する 例えば：Drrribleを眺める

30. ❖ タスクの粒度を細かくする
❖ 魔法の呪⽂「1分だけやろう」
なぜかやる気が出ないときは
例えば：ウェブサイトを作るときのタスク
デザイン
を作る
コンセプト
を作る
配⾊を
決める
フォントを
決める
⼝調を
決める
ペルソナ
を作る
例えば：1分だけエディタを開く
<p>とりあえずテキストエ
ディターを開けてみたら1~2
時間経っていたなんてことも
あります</p>

31. 気になったことは
なによりも⼤事なこと
すぐに試す

32. Frontend Nagoya #4 6⽉16⽇（⼟）16:00 - 18:00
ベースキャンプ名古屋
∼５分間で自分を語れ、自己紹介LT大会∼
https://frontend758.doorkeeper.jp
イベント情報

33. ご清聴ありがとうございました
KasumiMorita
kasumi.morita.750
http://mkasumi.com