1. Grow Group Ishihara takashi
制作効率を
劇的にあげる
最高のツール
石原隆志

2. About
軽く自己紹介
Ishihara takashi
石原隆志
・熊本県天草市出身
・独学で勉強してきました。

3. Work
軽く自己紹介
・2013年 7月
Grow Group合同会社

4. Agenda
今日やること
1. 制作効率を考えるその前に
2. 制作フローを見直すためのツール
3. 開発効率を上げる ためのツール
4. その他・地味に使える ツール

5. 1. 制作効率を
考えるその前に
that considering
the production efficiency.

6. 僕が働く
Grow Group 合同会社
Before that considering
the production efficiency.
1. 制作効率を
考えるその前に

7. 僕が働く
Grow Group 合同会社
現在 社員数
2名
Before that considering
the production efficiency.
1. 制作効率を
考えるその前に

8. 小さな会社が
利益上げるためには
Before that considering
the production efficiency.
1. 制作効率を
考えるその前に

9. 0. 制作効率を
考えるその前
の前に
小さな会社が
利益上げるためには
Before that considering
the production efficiency.
利益率
いかに工数をかけずにお金をいただくか。ぐへへ
1. 制作効率を
考えるその前に

10. 1. 制作効率を
考えるその前に
Before that considering
the production efficiency.
小さな会社が
利益上げるためには
まぁ、今日は製作者として....
Before that considering
the production efficiency.
1. 制作効率を
考えるその前に

11. 制作効率
小規模のweb制作会社にとっては
利益に直結する 重要な要素。
Before that considering
the production efficiency.
1. 制作効率を
考えるその前に

12. 僕には
いつもかせられている課題。
Before that considering
the production efficiency.
1. 制作効率を
考えるその前に

13. Before that considering
the production efficiency.
あなたは、webサイトの構築を
頼まれた時、
最善の方法を提案できていますか？
1. 制作効率を
考えるその前に

14. Before that considering
the production efficiency.
http://www.evolutionoftheweb.com/?hl=ja
ウェブの進化1. 制作効率を
考えるその前に

15. ウェブの進化
Before that considering
the production efficiency.
http://www.evolutionoftheweb.com/?hl=ja
Webテクノロジーの進歩スピードは
ものすごい早い。
1. 制作効率を
考えるその前に

16. Before that considering
the production efficiency.
レスポンシブwebデザイン1. 制作効率を
考えるその前に

17. レスポンシブwebデザイン
Before that considering
the production efficiency.
・デバイスの多様化。
・技術的にも難易度が高い。
・意外と構築に時間がかかる。
1. 制作効率を
考えるその前に

18. Before that considering
the production efficiency.
webアプリケーション
1. 制作効率を
考えるその前に

19. 1. 制作効率を
考えるその前
Before that considering
the production efficiency.
webアプリケーション
Before that considering
the production efficiency.
・デバイスの多様化により。
・便利なHTML5 API が続々と登場。
1. 制作効率を
考えるその前に

20. Before that considering
the production efficiency.
こんなに技術が進化して
制作者にかかる負担は増加の一方。
2018年には、エンジニアの4割は
ストレスで脱毛に悩む
1. 制作効率を
考えるその前に

21. Before that considering
the production efficiency.
そんなことはありません。
1. 制作効率を
考えるその前に

22. Before that considering
the production efficiency.
クラウド・コンピューティング
1. 制作効率を
考えるその前に

23. Before that considering
the production efficiency.
様々なフレームワーク
1. 制作効率を
考えるその前に

24. Before that considering
the production efficiency.
様々なツール・アプリケーション
1. 制作効率を
考えるその前に

25. Before that considering
the production efficiency.
技術は複雑に。
やることは増えているが
その分恩恵は十分受けている。
1. 制作効率を
考えるその前に

26. 1. 制作効率を
考えるその前に
Before that considering
the production efficiency.
知っている と 知っていない。
その差は大きい。
今日は ( 僕が知るかぎり )
をご紹介致します。最善の方法

27. 2. 制作フローを
考えなおす
ためのツール
I rethink the production flow.

28. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
レスポンシブwebデザインで
5ページのwebサイトを作ります。

29. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
通常のやり方
ウォーターフォール方式
設計 確認 デザイン 確認 実装 確認

30. 通常のやり方
ウォーターフォール方式
設計 確認 デザイン 確認 実装 確認
2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
.....時間がかかる。
スマートフォン タブレット デスクトップ
1 1 1
5ページ分のデザインを上げるとして、
計 15 ファイル

31. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
デザイニング イン ブラウザ
Designing in browser

32. デザイニング インブラウザ2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
でも、チームで やるときって
どうすれば.......

33. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
1. Style Tiles
スタイルタイルズ
http://styletil.es/

34. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
ダウンロードすると１枚のPSDが。
http://styletil.es/

35. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
http://samanthatoy.com/georgia-gov/
スタイルタイルズの例

36. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
スタイルタイルズの例
完成
http://samanthatoy.com/washington-examiner/

37. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
1. Style Tiles
スタイルタイルズ
デザインのイメージを1枚のPSDに集約。
ロゴ・ボタン・見出しなど、
主要なオブジェクトのイメージをチームでシェアする。

38. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
サイトで紹介しているPSDファイルはあくまで 考え方。
それぞれの 組織・チーム で使いやすい
テンプレートを考える。
1. Style Tiles
スタイルタイルズ

39. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
https://tutsplus.com/
1. Style Tiles
スタイルタイルズ
・デザインのイメージを1枚のPSDに集約。
ロゴ・ボタン・見出しなど、主要なオブジェクト
をチームでシェア。
2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
ただ、これだけでは 大変。
そこで....

40. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
2. Style Guide
CSSの仕様をドキュメント化
http://css-tricks.com/css-style-guides/

41. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
Style Guideの例
CSSの仕様をドキュメント化
https://github.com/styleguide

42. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
いろんなサイトのスタイルガイドを見て勉強。
https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

43. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow. スタイルガイドを簡単に作る為の
ツールもたくさんある。
http://warpspire.com/kss/
Knyle Style Sheets
http://kaleistyleguide.com/
Kalei - Style guide
http://stylifyme.com/
Stylify me
Pears Style Docco

44. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
これで楽にスタイルガイドを作成。

45. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
webデザインのレイアウトには
パターン がある。
Atomic Design という考え。

46. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
pattern lab
パターン作りから始める、
本格的なフレームワーク・Static Site Generator.
http://pattern-lab.info/

47. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
Atomic Designという考え方。
http://bradfrostweb.com/blog/post/atomic-web-design/

48. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
Web デザインに必要な要素を細かく設定。
mustachaというHTMLテンプレートエンジンを使用
SCSSと併用し、それぞれの要素を事細かく指定
http://mustache.github.io/

49. 2. 制作フローを
考えなおす
ためのツール
I rethink
the production flow.
まずは制作フローを見直すところから
制作効率を変えていこう。

50. 3. 作業効率を
上げる
ためのツール
Tools for increasing
the working efficiency

51. 3. 作業効率
を上げる
ためのツール
開発環境を整えるのってめんどくさい。
・いつの間にかバージョンアップしている。
・CMSを使ってはいけない案件....
・ディレクトリ構造から整える必要が.......
Tools for increasing
the working efficiency

52. そんな悩みを解決してくれる
ツールをご紹介。
3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency

53. 3. 作業効率
を上げる
ためのツール
yeoman
webアプリケーションを
高速にビルド可能にするツール
Tools for increasing
the working efficiency

54. 3. 作業効率
を上げる
ためのツール
yeoman
プロジェクトを作成
Tools for increasing
the working efficiency
$ yo webapp

55. 3. 作業効率
を上げる
ためのツール
Grunt
jsのタスク管理。コンパイル等の自動化。
Tools for increasing
the working efficiency
$ grunt server
$ grunt test
$ grunt

56. 3. 作業効率
を上げる
ためのツール
Bower
プロジェクト内のパッケージマネージャー
Tools for increasing
the working efficiency
$ bower install jquery
$ bower search jquery

57. 3. 作業効率
を上げる
ためのツール
メリット
・Coffee scriptとか Sassとかのコンパイルをしてくれる。
・自動的にブラウザをリロード。
(同じネットワーク環境内だと、iPhone やiPadでもリロードしてくれる。)
・テストの実行。
・画像ファイルの最適化、軽量化を自動で。
・bowerコマンドで様々なライブラリを管理。
Tools for increasing
the working efficiency

58. 3. 作業効率
を上げる
ためのツール
デメリット
・基本的にコマンドラインでの実行
・一から環境を作るのは結構たいへん。
Tools for increasing
the working efficiency

59. 3. 作業効率
を上げる
ためのツール
Hammer
テンプレートを選択し、構築のプラットフォームを
作成してくれる。
Tools for increasing
the working efficiency

60. 3. 作業効率
を上げる
ためのツール
「Publish Build」機能で、
Web上にアップロード&公開が一瞬で可能
Tools for increasing
the working efficiency

61. 3. 作業効率
を上げる
ためのツール
他にも.....
Static Site Generator
HTMLテンプレートエンジン + α
でサイト制作を効率化してくれる。
Jekyll MIXTURE Middleman
Tools for increasing
the working efficiency

62. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
開発環境を見なおして
制作効率をアップする。

63. 4. その他・地味に
使える
ツール
Other Tools

64. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
こんなツールがあれば楽なのに.....
そう思うことって結構有りますよね？

65. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
知っていると知らない。
そんなリソースの数が、
普段の何気ない作業の効率を決める。

66. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
Emmet Live Style
CSSを書くだけでサイトに反映。リロードもなし。
Chromeのエクステンション。

67. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency 保存すらせずにサイトに反映。
Emmet Live Style

68. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
PAGE LAYERS
HTMLからPSDに変換。
精度はかなり高い。

69. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency PAGE LAYERS
webサイトをPSDに変換。
精度はかなり高い。

70. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
Koala
SASSやLESS,Coffescriptのコンパイルなどを実行。
JSで作られたアプリ。

71. 3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
Koala
webの技術でのみ構築されているため、
windows,mac,linuxで稼働

72. まとめ
Summary

73. webテクノロジーの移り変わるスピードは
ものすごく速い。
3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
1.Webテクノロジーの発展スピードは
とにかく早い。

74. webテクノロジーの移り変わるスピードは
ものすごく速い。
3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
2.有益な情報はほとんど英語から。
黒い画面のものが多い。

75. webテクノロジーの移り変わるスピードは
ものすごく速い。
3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
3.実際できるかどうかわからなくても
とりあえず挑戦。
実際どんな動きをするかわからない
ツールだとしても
とりあえず挑戦。

76. webテクノロジーの移り変わるスピードは
ものすごく速い。
3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
4.実際の作業フローに積極的に取り入れる。
どうせ、いつかはやらなければいけないの
だから、やるなら今。

77. webテクノロジーの移り変わるスピードは
ものすごく速い。
3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
5.実際のフローに取り入れたら、
それをさらに効率化。
自分、社内で使いやすいように
テンプレート化する。

78. webテクノロジーの移り変わるスピードは
ものすごく速い。
3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
とにかく挑戦！

79. webテクノロジーの移り変わるスピードは
ものすごく速い。
3. 作業効率
を上げる
ためのツール
Tools for increasing
the working efficiency
ご静聴ありがとうございました。