CPI Fan☆トークナイト！ Vol.2 【ウェブ制作者必見】
CPIエバンジェリストが選ぶ
優良ツール100選 20分間のセッションで発表した資料です。

2. 自己紹介
Evangelist 04
よつばデザイン 後藤賢司
東京と大分の2拠点で活動中。
出版社～デザイン会社～Web制作会社～企画会社～独立。
根っこから考えるタイプのお仕事が得意。
ブランド立ち上げ、メディアサイトの企画・運営など。
企業Webサイトの企画・デザイン。

3. 活動
WP-D グリーン
CPIエバンジェリスト
ゼロから始めるWordPress勉強会 (facebookグループ）
Webクリエイターのための情報交換所 (facebookグループ）
Webクリエイターズニュース
すみだクリエイターズクラブ

4. COCOmag
子どもと一緒の毎日を
楽しく、可愛くする情報
（メディアサイト）
http://COCOmag.net

5. よろずサウンド
著作権フリーのBGM販売サイト
yorozusound.com

6. 著書
電子書籍版も
あります。

7. Webクリエイターズニュース
Web制作者に
役立つ情報を発信。
http://web-cre.info/

8. 打ち合わせ
写真素材
アイコンフォント
原稿作成
フレームワーク
プロトタイプ

9. 打ち合わせ

10. ホワイトボード
NUボード（ホワイトボード）
構成を組立る際に活用
修正がすぐ出来るので
クライアントに参加してもらって試行錯誤。

11. 写真素材

12. The Stocks
著作権フリーの写真サイト
UNSPLASH・LITTLE VISUALS
NEW OLD STOCK・SUPER FAMOUS
GRATISOGRAPHY・GETREFE
JAY MANTRI・MAGDELINE
BREAKING PIC・TRAVEL COFFEE
http://thestocks.im/
※今回のスライド写真はほぼここから利用

13. VSCOcam
画像加工アプリ
良い感じの写真に加工。
iOS、Android対応
http://vsco.co/vscocam

14. Waterlogue
水彩タッチに加工するiOSアプリ。
素材写真がしょぼすぎる時の緊急対
策として使えるかもしれない。
!
https://itunes.apple.com/jp/app/
waterlogue/id764925064?mt=8

15. アイコンフォント

16. FontAwesome
アイコンは既存のものを
うまく活用する方向。
種類が多く使いやすい。
http://
fortawesome.github.io/Font-
Awesome/

17. 1600+ iOS7 Vector Icons
ラインの細いアイコンフォント。シャープなイメージが欲しい時やス
マホサイト用に。$69～
http://www.streamlineicons.com/

18. 原稿作成（文章）

19. Mou
マークダウンエディタ

20. Write
マークダウンエディタ。タグでまとめられる。

21. フロントエンドフレームワーク

22. Bootstrap
HTML、CSS、javascript。SassやLessにも対応。

23. Animate.css
CSSアニメーションのセット

24. Dash
様々なドキュメント参照ツール。
有料版は表示にタイムラグが無い。
http://kapeli.com/dash

25. プロトタイプ

26. 構成を決めたらプロトタイプ作成

27. Blocks
コンポーネント単位でページを作
成。
http://www.mightydeals.com/
deal/blocks.html?
fid=77e283db
http://demo.bootstraptor.com/
blocks.html

28. Briqs
BootstrapベースでHTMLを作成。
これをベースにして
作り込んでいくのもアリ。

29. ありがとうございました。