WCAF vol.10 こもり資料

1. Web Design Process for The Future
2013.05.18 こもりまさあき
WCAF vol.10

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

3. 今日お話しすること
•Responsiveって実際のところどうなの？
•未来を考えるとワークフローはどうなる？
•そして、次世代のWebデザインプロセスへ

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

5. Responsive Web?

6. Optimization ?、Responsive ?

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. 携帯電話コンテンツ制作と同じ轍を踏まなくても…

14. OSの種類とブラウザ、デバイス毎の差異、バグ…

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

16. 最適化という選択肢は、現実的に可能だろうか？

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

18. そもそもWebってどういうのだろう？

19. “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

20. “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

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

23. 複数のデバイスをシーケンシャルに使う人たちもいる

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

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

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

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

28. デバイスを基準に最適化するのではなく、
何で見ても大丈夫にした方が良いのでは？

29. 利用状況にあわせた柔軟な配信ができたら…

30. その答えのひとつが、Responsive Web Design

31. Responsiveだと、コンテンツが…画像がさ…って、
それって表面的なとこしかみてないからじゃないの？

32. 解決策はある。もっと違う部分に目を向けよう

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

34. コンテンツの立ち振る舞いを考える

35. たとえば、こういう情報構造のコンテンツ

37. スマートフォンでそのまま表示すると

39. それをこういう風にできたとしたら？

41. 閲覧状況を考えて、よりわかりやすく、使いやすくする

42. A technique for re-arranging layouts using CSS in responsive web design
http://uk.rimmellondon.com/

43. この他にもいろいろな技術がどんどん採り入れられている

44. Webサイトの表示スピードも大事だし

45. 世界のWebサイトは、全然先に進んでるから

46. TIME
http://time.com/time/

47. Delicious
http://deliciuos.com/

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

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

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

51. Atmosphere Maps
http://www.atmospheremaps.com/

52. ただレイアウトが切り替わる手法じゃないのよ

53. もう少し本質的なところを見た方がいいね

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

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

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

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

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

59. refactoring

60. Rethinking Workflow

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

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

63. Photoshopでカンプを作って、HTML/CSSで再構成？

64. デバイスがこれだけ増えて、考えること一杯なのに？

65. そろそろ「ピクセル」って概念すらあやういのに？

66. 1px 1px ?
Standard
Retina

67. Retinaとか高解像度のデバイスが出てきてる

68. “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

69. Don't Repeat Yourself

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

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

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

73. refactoring

74. 「リーン・…」とかよく見かける今のご時世

75. さまざまな環境を考えながら、スムーズに制作するには？

76. “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

77. 膨大なページ、さまざまなサイズのPSDで作るなんて無理

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

79. Designing in The Browser

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

81. Deciding in The Browser

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

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

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

85. そういうところをまず最初に考えよう

86. refactoring

87. あと、過度な分業体制も考えもの

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

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

90. 誰かがやってるからって、自分にすっぽりあてはめない

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

92. 僕たちは、同じ形の車を大量生産してるわけではない

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

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

95. 自分たちにあったこれからのワークフローを考えよう

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

97. “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

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

99. refactoring

100. The Future Design Process

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

102. もはや、ソフトもオールインワンで済まない

104. 昔はこれだけでもどうにかなった

105. でも、いまは制作するものにあわせて柔軟に切り替える

106. Web制作のツールは、日に日に便利になっていく

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

108. 最新の手法は、だいたいコマンドラインから

109. 怖がってる場合じゃないし、怖くない

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

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

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

113. 単純作業はコンピュータにまかせ、生産的なことをしようよ

114. Webを作るといっても、どんどん複雑化している

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

116. そういう時には、CSSフレームワークを活用するのも手

117. Susy
http://susy.oddbird.net/

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

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

120. 使ってみたいけど、うまく使える自信がない？

121. ピクセルベースのカンプを再現するフローには向かない

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

123. 話はそれからだ。実装サイドが頑張れば済むものでもない

124. デザインやレイアウトのためのCSSは、どんどん複雑に

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

126. LESS
http://lesscss.org/

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

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

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

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

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

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

133. Don't Repeat Yourself

134. そして、いずれかのタイミングでStyle Guideを

135. Pears
http://pea.rs/

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

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

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

139. Kalei
http://kaleistyleguide.com/

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

141. さらに、何でもCMSで作れば効率が良いわけでもない

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

143. Static Site Generatorを使った方が、はるかに楽…

144. Jekyll
http://jekyllrb.com/

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

146. DocPad
http://docpad.org/

147. roots
http://roots.cx/

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

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

150. FTPクライアントってなんでしたっけ？

151. そのベースとなるHTMLは、テンプレートエンジンで

152. Haml
http://haml.info/

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

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

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

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

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

158. AngularJS
http://angularjs.org/

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

160. Knockout
http://knockoutjs.com/

161. JSフレームワークを使って、Webアプリも簡単に

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

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

164. いまから慣れておいた方が仕事の幅も拡がるでしょう

165. Delicious
https://delicious.com/

166. Deliciousは、Backbone.js + Bootstrap

167. Pitchfork
http://pitchfork.com/

168. Pitchforkは、Backbone.js + WordPress

169. スクリーンショットだって、制作の合間にJavaScriptで

170. CasperJS
http://casperjs.org/

171. そうすれば、デザインカンプとかいらなくない？

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

173. そんな制作に必要なツールは、パッケージで管理する時代

174. npm
http://npmjs.org/

175. Bundler
http://gembundler.com/

176. Composer
http://getcomposer.org/

177. Bower
http://bower.io/

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

179. Grunt
http://gruntjs.com/

180. サイト制作の箱作りの段階から、自動化することもできる

181. Yeoman
http://yeoman.io/

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

183. そうすれば、コンテンツを作るだけに専念できる

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

185. 20130518wcaf最新_03_new2.zip？

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

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

188. 無駄

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

190. どれが最新？先祖返り？そんなトラブルともさようなら

191. Gitぐらい使えないと、この先協業もままならない

192. 制作手法もワークフローもどんどん変わっている

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

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

195. PLTTS
http://pltts.me/

196. “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

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

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

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

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