Knock!Knork! Webデザイントレンド2016（2016年3月12日開催）の発表資料です。

1. デザイナーさんでもできる
Browsersyncからはじめる作業効率化・春
Knock!Knock! Webデザイントレンド 2016 / 2016.03.12 sat
SHIMIZU Kumiko

2. 自己紹介
• 浜松市を中心に活動しているWeb系おかん
• デザイナー兼マークアップエンジニア
• Web制作会社12年、現在フリーランス1年生
• 趣味はフィルム写真と映画鑑賞と猫
• Webアクセシビリティ興味のある方、お友達になりましょう
清水久美子 SHIMIZU Kumiko
トトコトデザイン
@oratnin jiumei32
Photo by @wbyn
Photo by Hironobu Matsumura

3. 本日の
ターゲット

4. コーディングもこなす
デザイナーさん
もっと早く帰りたい
マークアッパーさん

5. 本日のお題

6. ところで
コーディングするとき
1日何回ブラウザをリロードしていますか？
指、疲れるよ…ね？

7. そのお悩み
で解決しちゃいましょう

8. ファイルの変更を検知して
ブラウザをリロードしてくれる
便利なツール。無料。
Windowsでも、Macでも。
https://www.browsersync.io/

9. なにが
できる？

10. なにができる？
ファイルの更新を
検知してブラウザを
自動でリロード
その1

11. なにができる？
スクロールやクリック
ページ遷移などを
ブラウザ間で同期
その2

12. なにができる？
同じWi-Fi内の
モバイル端末や
PCで動作確認ができる
その3

13. なにができる？
• モバイル端末のデバッグ
• 低速回線のシミュレート
• CSSの可視化
• グリッドの表示 など
Responsive Web Design Testerが便利
ほかに

15. マルチデバイス時代の
強い味方！

16. DEMO

17. でも…
難しいん
でしょう?

18. それが案外
簡単
なんですよ

19. 用意するもの
Browsersync
…と、少しの英語力とやる気
Node.js黒い画面
コマンドプロンプト
ターミナル

20. 導入の手順
STEP 1 Node.jsをインストール
STEP 2 npm の設定ファイルを作る
STEP 3 Browsersyncをインストール
STEP 4 起動のための設定をする

21. たったの、これだけ！
できそうな気が…しませんか？

22. DEMO
本日のお試し用デモファイル
https://github.com/oratnin/browsersync_demo

23. まとめ

24. 導入は明日からでも、
年度末で忙しい人は 新年度 からでも！
1. 日々の小さな作業は自動化できる
3. 導入は 意外 と 簡単！
Browsersyncの詳しい設定方法は、追ってブログで公開予定です。
2. Browsersync はファイル変更を検知・リロード

25. Browsersync から
作業効率化、はじめてみよう！

26. ご清聴ありがとうございました！
Thank You
@oratnin jiumei32
http://totoco.org/
All Photographs by SHIMIZU Kumiko

27. Thank You
All Photographs by SHIMIZU Kumiko
https://creativemarket.com/pixelbazaar/
Thanks to
FLATILICIOUS by Pixel Bazaar