Frontrend in Fukuoka -（2014年1月25日開催）で使用したスライドです。 デバイスの多様化はとどまる所を知らず、Webデザインは複雑化するばかり。 960pxで固定された従来のカンプは、現在のWebを効率よくデザイン出来ているとは言えません。 本セッションでは、デザイナーとディベロッパーのギャップを埋めるべく、フロントエンド指向のWebデザインについてお話し出来ればと思っています。 特に、柔軟なデザインプロセス、パフォーマンスチューニングなどについて焦点を当てていきます。

1. THIS TALK IS CALLED
フロントエンド の 求めるデザイン
FRONTREND IN FUKUOKA

2. #frontrend_ff2b

3. @pocotan001
Hayato Mizuno

4. “
お弁当箱というものを考えるときに、まず箱と
いう言葉に捕われないように注意しなくてはい
けません。箱という概念にとらわれてア
イディアが一辺倒なものになってしま
うからです。四角くないとダメだ、キューブ
じゃないとダメだと思ってしまいます。[...]
- Jonathan Ive
http://www.gizmodo.jp/2013/02/post_11717.html

7. http://dribbble.com/shots/1280333-iWatch-Mock-Up

8. アジェンダ
Photoshopは死んだ？
コンポーネントを管理する
パフォーマンスチューニング

9. “
訳: @cssradar
システムデザインとインタラクションについて考
えることなく、インタラクティブなビジュ
アルデザインを考えることができないという
のが私の意見だ。我々はグラフィックデザイン
をしているのではない。我々はポスターをデザ
インしているのでも、標識をデザインしているの
でもないのだ。
- Paul Adams
http://article.enja.io/articles/the-dribbblisation-of-design.html

10. 1. ポストpsd？

11. http://www.bohemiancoding.com/sketch/

12. http://html.adobe.com/edge/reflow/

13. http://macaw.co/

14. http://facebook.github.io/origami/

15. http://noflojs.org/

16. http://goo.gl/a7C96j

17. https://www.easel.io/

18. Designing in the browser?
(Deciding in the browser)

19. https://speakerdeck.com/studiomohawk/designing-in-the-browser-ver-1-dot-0-rc

20. vs
Browser
Photoshop

21. vs
Browser
Photoshop

22. RWDに対応しやすい
インタラクションを備えている
CSSフレンドリー
vs
デザインと開発が同時に進められる
一部の修正作業を効率良く行える
Photoshopクラッシュする
Browser
Photoshop高すぎる
Photoshop

23. vs
Browser
Photoshop

24. 創造的な探査に適している
レイアウトの並び替えが楽
ブラシや不規則なシェイプを描く機能
カンプの提出が必要
vs
使い慣れている
会社で決められている
Browser
HTML, CSSは難しい
Photoshop

25. 2. Photoshopの拡張性

26. http://glifo.uiparade.com/

27. http://www.store.uiparade.com/

28. http://bjango.com/mac/skalapreview/

29. https://layervault.com/

30. +
Browser
Photoshop

31. アジェンダ
Photoshopは死んだ？
コンポーネントを管理する
パフォーマンスチューニング

32. “
私たちはページをデザインしているの
ではない、コンポーネントのシステム
をデザインしているのだ。
We're not designing pages, we're designing systems of
components.
- Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

33. 1. 成果物の再考

34. http://www.bestpsdfreebies.com/freebie/appz-psd-theme/

38. 2. スタイルタイル

39. http://styletil.es/

40. http://webdesign.tutsplus.com/tutorials/workflow-tutorials/style-tiles-an-alternative-to-full-design-comps/

41. 3. エレメントコラージュ,
スタイルプロトタイプ

42. http://sparkbox.github.io/style-prototype/

43. http://graphicburger.com/flat-design-ui-components/

44. http://medialoot.com/item/free-flat-ui-design-kit/

45. http://www.specctr.com/

47. 4. スタイルガイド

48. http://sfdc-styleguide.herokuapp.com/

51. http://hughsk.io/kss-node/

52. http://stylifyme.com/

53. 5. プロジェクトハブ

54. http://24ways.org/2013/project-hubs/

55. 6. 一貫性・ルール

56. http://www.slideshare.net/hiloki/high-performance-webdesign

64. https://github.com/t32k/speed/blob/master/articles/gzip.md

65. http://methodandcraft.com/videos/hack-smart-objects-to-create-dynamic-sprites

70. http://bjango.com/articles/linkedsmartobjects/

72. アジェンダ
Photoshopは死んだ？
コンポーネントを管理する
パフォーマンスチューニング

73. “
訳: @cssradar
私はパフォーマンスを機能であると考えている。
[...] この競争の多いインターネットの世界で知って
おくべきレッスンがあるとしたら、この世には2種
類のWebサイトしかない: 早いか、死んでいるかの
どちらかだ。
To me, performance is a feature, [...] I think there's also a lesson to
be learned here about the competitive landscape of the public
internet, where there are two kinds of websites: the quick and the
dead.
- Jeff Atwood
http://www.codinghorror.com/blog/2011/06/performance-is-a-feature.html

74. http://www.strangeloopnetworks.com/web-performance-infographics

75. http://www.keynote.com/docs/reports/Keynote-2012-Mobile-User-Survey.pdf

76. 1秒 ...
http://www.usability.gr.jp/alertbox/20091005_timeframes.html

77. http://mirucho.me/

79. 1. ネットワーキング

80. HTTP Request Structure
Set TCP Connection
Send Data
Complete
Server
ISP
Client
DNS Look up
First Connect
First HTTP Request
DNS Lookup Connecting
Waiting
Receive Data
Complete
Receiving
http://t32k.me/mol/log/reduce-http-requests-overview/

82. Chrome

83. IE 9

88. https://www.easel.io/

89. 2. レンダリング

90. HTML
DOM
視覚部分を
表すツリー
レンダーツリー
CSSOM
CSS
paint

91. 16.67ms ...

92. http://jsbin.com/umimos

93. gradient
border-radius
box-shadow
filter: blur
background
position: fixed
background-attachment: fixed
…
http://jsbin.com/umimos

94. http://jsbin.com/ocihek

95. CSSコストの検証 with ねこ36匹
https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu

96. (none)
31.33 ms
shadow+dotted
126.35 ms
box-shadow
102.66 ms
shadow+radius
649.71 ms
border-radius
146.07 ms
radius+dotted
3099.11 ms
dotted-border
39.29 ms
all mix!!
3651.06 ms
※あくまでDebugger上の数字であり、実際のブラウザではもっと早く処理されます

97. …

98. “
「それも、いいじゃないか」は、
おもしろい人生のスローガン。
"Why not" is a slogan for an interesting life.
- Mason Cooley

99. Thank you