第14回リクリセミナー「Web制作の未来、あなたの未来」最終版

1. Web Design Process for The Future
2013.07.27 こもりまさあき
Re:Creator's Seminar Vol. 14

2. 簡単に自己紹介
こもりまさあき
1972年生まれのフリーランス。90年代前半から都内のDTP系
デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正
社員に。入出力業務、デザイン業務、ネットワーク関連業務に
並行して従事後、2001年会社を退職しフリーランスの道へ。業
務内容や立ち位置が異なるので、職域的な肩書きはなし
近著に『基礎から覚える、深く理解できる。 Webデザインの新
しい教科書』『レスポンシブ・ウェブデザイン標準ガイド』、
など
Twitter:@cipher/@proteanbm
Instagram:@cipher

3. 今日お話しすること
•レスポンシブ？デバイス最適化？どっち？
•未来を考えるとワークフローはどうなる？
•そして、次世代のWebデザインプロセスへ

4. refactoring
プログラムの外部から見た動作を変えずに、
将来の仕様変更に柔軟に対応できるよう、
ソースコードの内部構造を整理しなおすこと
【リファクタリング】

5. Responsive? or Optimization?

6. レスポンシブなのか？、デバイス最適化なのか？

7. 最適な配信形態は、コンテンツによって違うもの

8. アプリって話もある。どっちが良いとか悪いではない

9. でも、日本はどうも携帯コンテンツ文化を引きずり…ｒｙ

10. “7,000 different device types are used to access Facebook each day.
VP Mike Schroepfer: 7,000 Different Types Of Mobile Devices Access Facebook Every Day
http://techcrunch.com/2012/08/03/vp-mike-schroepfer-7000-different-mobile-devices-access-facebook-every-day/

11. 7,000different device types

12. 次から次に発売されるデバイス、進まない機種変…

13. Androidめ…

14. という声も聞かれる昨今

15. OSのバージョン、ブラウザ、デバイス毎の差異やバグ…

16. 携帯電話コンテンツ制作と同じ轍を踏まなくても…

17. 新規制作にかかるコスト、メンテナンス効率

18. 各々のデバイスに最適化って、現実的に可能なの？

19. IE6が…とか言ってる場合じゃないよ？

20. 7,000different device types

21. そもそもWebってどういうものか考えよう

22. “The primary design principle underlying the Web’s usefulness and
growth is universality. ••• And it should be accessible from any
kind of hardware that can connect to the Internet: stationary or
mobile, small screen or large.
Long Live the Web: A Call for Continued Open Standards and Neutrality: Scientific American
http://www.scientificamerican.com/article.cfm?id=long-live-the-web
by Tim Berners-Lee

23. “If you think about it, responsive layout is not a new thing.
Open a simple HTML file in a web browser, and the content
automatically adapts to fit the width of that browser.
The web is responsive on its own—by default.
Responsive by default
http://blog.andyhume.net/responsive-by-default/
by Andy Hume

24. 接続するデバイスが増え、利用する状況も人それぞれ

25. 複数のデバイスをシーケンシャルに使う時代に

27. PCとそれ以外でコンテンツに相違があったら困ることも

28. ©Brad Frost
http://bradfrostweb.com/

29. そろそろ過去のモノ

30. ©Brad Frost
http://bradfrostweb.com/

31. ©Brad Frost
http://bradfrostweb.com/

32. いろいろなデバイスが接続されるようになるだろう

33. そんな利用状況にあわせた柔軟なコンテンツ配信を

34. Responsive Web Designというか、Future Friendlyに

35. Responsiveだと、コンテンツが…画像がさ…

36. かわいそうに。「皮相の見」ですね…

37. 解決策を知らないだけでいろいろ言わない

38. Content Choreography
Content Choreograpy
http://trentwalton.com/2011/07/14/content-choreography/
Choreography: バレエやダンスの振り付け

39. 閲覧環境に応じてコンテンツの振る舞いを考える

40. A technique for re-arranging layouts using CSS in responsive web design
http://www.jordanm.co.uk/lab/contentchoreography

41. 閲覧環境を考えて、よりわかりやすく、より使いやすく

42. Webサイトの表示スピードも大事

43. 世界のWebサイトは、もっと先を見ながら進んでる最中

44. TIME
http://time.com/time/

45. Microsoft
http://www.microsoft.com/en-us/default.aspx

46. gloople
http://www.gloople.co.uk/

47. RIMMEL
http://uk.rimmellondon.com/

48. あるWebサイトで実際に使われている技術や仕組み

49. Requirejs
LESS
Bower
Node.js
PhantomJS
Web Fonts
Grunt
Responsive Images
Style Guide
JShint
localStorage
Jasmine
Curljs

50. いろいろな技術がどんどん採り入れられている

51. Media QueryとかFluid Layoutだけの話じゃないの

52. 使えるものは、総動員すればいいだけ

53. もう少し本質的なところから考えた方がいい

54. さて、未来の話をしましょう

55. Google Glass
http://www.google.com/glass/start/what-it-does/

56. NYTimes for Leap Motion
https://airspace.leapmotion.com/apps/nytimes-for-leap-motion/

57. ここまでくると、CSSのTipsとかどうでもよくない？

58. それよりも、この先情報配信の形がどうなっていくか？

59. USA Today
http://usatoday.com/

60. Is This The Future Of The Airline Website?
http://www.f-i.com/fi/airlines/

61. その未来を想像して、僕たちが今できることは何か？、と

62. これまでのWebに対する考えを

63. refactoring

64. Rethinking Workflow

65. そんな未来が押し寄せようとしている現代のWeb

66. いまのワークフローは、これからの時代に対応できるか

67. 対応するものが増えれば、それだけ制約も増える

68. 制約がある中で問題解決するのも仕事

69. Photoshopでカンプを作って、HTML & CSSで再構築？

70. アタマで思い描いたことが、必ず形にできるわけじゃない

71. まだ「1px」にこだわったりしてる？

72. 1pxが1pxじゃないようなこの時代に？

73. 1px 1px ?
Standard
Retina

74. Screensiz.es
http://screensiz.es/

75. “Photoshop is repeating yourself. Ok, so you’ve spent 3 days on a
mockup in Photoshop. Now what? Now I have to make it all over
again in HTML/CSS. Wasted time.
Just build it in HTML/CSS and spend that extra time iterating,
not rebuilding. If you’re not fast enough in HTML/CSS, then
spend the time learning how to create in HTML/CSS faster.
It’s time well spent.
Why we skip Photoshop by Jason Fried of 37signals
http://37signals.com/svn/posts/1061-why-we-skip-photoshop
by Jason Fried

76. Don't Repeat Yourself

77. 時間は上手に使わないと。やることばっかり増えちゃう

78. 固定サイズ、ピクセルパーフェクトという呪縛からの解放

79. 「ページ」という概念ですら、どうなることやら

80. 紙の置き換え的発想は、Web制作にあってないのだから

81. refactoring

82. 「リーン・ホニャララ」とかよく見かける今のご時世

83. さまざまな環境を視野に入れて、スムーズに制作するには？

84. 必要なだけ、デバイスサイズにわけたPSDで管理する？

85. “Managing more than 200 PSD files is not only tedious, but it can
produce minor discrepancies between comps of the same page at
different breakpoints.
Case Study: Responsive Design for Time.com
http://appendto.com/case-study/responsive-design-time-com
by appendTo

86. 無理、無理（笑）

87. スケッチでざっくりワイヤー、そしてモックアップへ

88. Designing in The Browser

89. ブラウザで作り上げるのが、いきなり無理だったら

90. Deciding in The Browser

91. 動かない画面じゃなく、動くモノを見ながら決めていく

92. 視覚表現も大事だけど、先に考えるのはコンテンツのこと

93. 情報をどうやって組み込んで、どういう形で届けるのか

94. そういうところをまず最初に考えた方がいいよね？

95. refactoring

96. そこでひっかかるのが、区分けされすぎた分業体制

97. 決して分業が悪いわけではない

98. スペシャリストの存在があって完成する仕事ではある

99. サイトの規模や種類、作るコンテンツ、それぞれ違うもの

100. 右へならえ文化もほどほどに

101. 参考にしつつ、アレンジするぐらいの柔らかさで

102. 自分たちにあったワークフローを考えよう

103. Content Choreography
http://trentwalton.com/2011/07/14/content-choreography/

104. “We’ve found that the best way forward is to pull all members of a
team together to design, build, test and then evaluate in multiple
quick rounds.
Content Choreography
http://trentwalton.com/2011/07/14/content-choreography/
by Trent Walton

105. 関係者全員の協力が必要。意識改革ができるか

106. きっとあるはず、必要のないやりとりや時間が

107. refactoring

108. The Future Design Process

109. Webコンテンツ制作・配信の手法は多岐にわたる

110. 定番の幕の内弁当

112. 幕の内弁当って、いらなかったり足りなかったり

113. 足りないままガマンするのがいいのか？

114. Web制作のツールは、日に日に便利に

115. 年に1回のアップデートじゃなく、週に1回ぐらいでねｗ

116. 残念ながら、最新のツールはコマンドラインから

117. コマンドラインを怖がってる場合じゃないし、怖くない

118. 数百もあるPhotoshopの機能を覚えてる方が怖いｗ

119. GUIのツールが出るのは、膨大な時間を費やした後

120. 3日かかった仕事が3時間で終われば、別のことができる

121. 単純作業はコンピュータに。人間はアタマを使うことを

122. refactoring

123. 複雑化しているWeb制作の現場

124. いきなり作り始めた方が早いこともある

125. ざっくりとコンテンツを入れてモックアップを作る

126. そういう時、頼りになるのはフレームワーク

127. Bootstrap
http://twitter.github.io/bootstrap/

128. Foundation 4
http://foundation.zurb.com/

129. Pure
http://purecss.io/

130. Furatto
icalialabs.github.io/furatto/

131. Twittstrap
twittstrap.com/twittstrap/

132. 使ってみたけど、うまく扱えなかった？

133. たぶん、それわかってない

134. カンプを再構築するフローだと、かえって厄介

135. 動くかどうかわからない図面より、先に動くものを作る

136. 話はそれから。もう実装サイドが頑張れば済む話じゃない

137. そんな中、CSSの記述はどんどん複雑に…

138. 効率よく管理、実装するためにCSSプリプロセッサを使う

139. LESS
http://lesscss.org/

140. Sass
http://sass-lang.com/

141. Compass
http://compass-style.org/

142. Stylus
http://learnboost.github.io/stylus/

143. Roole
http://roole.org/

144. 変数や数式を使って、複雑化するCSSも効率よく管理

145. Scalable and Modular Architecture for CSS
http://smacss.com/

146. <a class="btn btn-primary btn-large">Learn more </a>
ボタンの基本スタイル
ボタン青くして
ボタン大きくして

147. サイトの規模が大きくなっても、問題ないような設計を

148. Don't Repeat Yourself

149. そして、どこかのタイミングでStyle Guideを作っておく

150. Pears
http://pea.rs/

151. Style Guideに則れば、決まりを守るだけで同じになる

152. KSS
http://warpspire.com/kss/styleguides/

153. StyleDocco
http://jacobrask.github.io/styledocco/

154. Kalei
http://kaleistyleguide.com/

155. Style Guide Boilerplate
http://bjankord.github.io/Style-Guide-Boilerplate/

156. 最初の設計とドキュメンテーションが大事

157. DAUX.IO
http://daux.io/

158. CMSの存在はありがたい。でも、機能過多だったり…

159. DBからデータを引っ張らなくてもいいような案件

160. Static Site Generatorを使った方が楽なこともある

161. Jekyll
http://jekyllrb.com/

162. Serve
http://get-serve.com/

163. DocPad
http://docpad.org/

164. roots
http://roots.cx/

165. コンテンツは、MarkdownやJSONで用意して

166. Static Site Generatorでウォッチ、ビルド＆デプロイ

167. えっと、FTPクライアントってなんでしたっけ？

168. ベースとなるHTMLは、テンプレートエンジンで変換

169. Haml
http://haml.info/

170. Slim
http://slim-lang.com/

171. Jade
http://jade-lang.com/

172. Handlebars.js
http://handlebarsjs.com/

173. HTMLですら、変数を定義して自動的に生成させる

174. 世の中には「適材適所」という言葉がある

175. でも、やっぱりコマンドラインなんでしょ…？

176. あるよ

177. Hammer
http://hammerformac.com/

178. そして、ずっと虐げられてたWindows環境にも朗報

179. Mixture
http://mixture.io/

180. Prepros
http://alphapixels.com/prepros/

181. 実は、ここまでのいろいろを覚えると良いことがある

182. Webが動的になるにつれ、さらに注目されるJavaScript

183. AngularJS
http://angularjs.org/

184. Backbone.js
http://backbonejs.org/

185. Knockout
http://knockoutjs.com/

186. JavaScriptフレームワークを使ったWeb制作

187. ここでもHTMLテンプレートやプリプロセッサが活躍

188. エンジニアの使うフレームワークにも構造的に似てる

189. Delicious
https://delicious.com/

190. Deliciousは、Backbone.js + Bootstrap

191. Pitchfork
http://pitchfork.com/

192. Pitchforkは、Backbone.js + WordPress

193. いまから慣れておいた方が仕事の幅も拡がるのでは？

194. こういうのも形になりつつあるし

195. Polymer
http://www.polymer-project.org/

196. <polymer-element name="tk-element-databinding-color">
<template>
This is a <strong>{{owner}}</strong>'s tk-element.
{{owner}} likes the color
<span style="color: {{color}}">{{color}}</span>.
</template>
<script>
Polymer('tk-element-databinding-color', {
owner: "Daniel",
color: "red"
});
</script>
</polymer-element>
<!DOCTYPE html>
<html>
<head>
<script src="polymer-all/polymer/polymer.js"></script>
<link rel="import" href="tk-element-databinding-color.html">
</head>
<body>
<tk-element-databinding-color></tk-element-databinding-color>
</body>
</html>
index.html
tk-element-databinding-color.html

197. といった感じで、別々のモノがいろいろと繋がる

198. デバイス幅ごとのスクリーンショットだって簡単に

199. CasperJS
http://casperjs.org/

200. $ casperjs screenshots.js http://demosite.dev/

201. デザインカンプみたいなのが必要なら、途中で撮れば良い

202. 必要な技術を適宜組み合わせて、最良の結果を得る

203. もうフロントエンドのツールもパッケージで管理

204. 必要なものを必要に応じて、インストール＆アップデート

205. npm
http://npmjs.org/

206. Bundler
http://gembundler.com/

207. Composer
http://getcomposer.org/

208. Bower
http://bower.io/

209. 面倒なタスクは、コンピュータにお願いしてしまう

210. Grunt
http://gruntjs.com/

211. ModJS
http://madscript.com/modjs/readme.html

212. もっと前の箱作りの段階から、自動化することもできる

213. Automation
http://indigounited.com/automaton/

214. YEOMAN
http://yeoman.io/

215. YEOMAN GENERATORS
http://yeoman.io/community-generators.html

216. コマンドを実行するだけで必要なものが全部揃う

217. コーヒーでも入れてれば準備完了。あとは作るだけ

218. 時間は有効に。繰り返しの作業はしない

219. 20130727recre_komori_最新_02_new3.zip？

220. どれが最新ファイル？

221. あと、ファイルの先祖返り…。誰だー！

222. 無駄

223. バージョン管理システムの導入を本気で考えよう

224. たとえ、ぼっち駆動開発（BDD）でも

225. Gitぐらい使えないと、この先協業もできない

226. Git
http://git-scm.com/

227. GitHub
https://github.com/

228. Bitbucket
https://bitbucket.org/

229. Beanstalk
http://beanstalkapp.com/

230. 制作手法もワークフローもどんどん変わるもの

231. ネットワークや技術の発展は、仕事相手の距離さえ縮める

232. 東京だから…地方だから…は関係なく、誰とでもできる

233. ホスティングだって、どんどん変わっている

234. Amazon Web Services
http://aws.amazon.com/

235. AWS S3 Hosting
http://www.awsmicrosite.jp/s3-hosting/

236. WordPress AMI
http://ja.megumi-cloud.com/

237. アプリケーションプラットフォームも瞬時に

238. Heroku
https://www.heroku.com/

239. Engine Yard
https://www.engineyard.com/

240. もはや、インフラのことすら気にしない

241. PLTTS
http://pltts.me/

242. “From Pencil to finished Product in 8 hours
From Pencil to finished Product in 8 hours
http://vslck.im/articles/pencil-to-product
by Dominik Schmidt

243. 最新の技術やワークフローであればできるってこと

244. 先にやったもん勝ち

245. そのためにはどうすればいい？

246. 力の入れどころを間違えないように

247. はてブとか見てないで、Speaker Deckでもどうぞ

248. あとね、英語やったほうがいいね

249. 本日のまとめ
•増え続けるデバイスへの対応を考えたら当たり前
•いまあるワークフローが適切か、変えられるか
•これまでの無駄をなくし、これからの仕事をスムーズに

250. 本日はありがとうございました