WebSig 24/7 Vol. 31 こもり資料

1. Web制作者は変化についていけるか？
変化についていくべきか？
2012.12.01 WebSig 24/7 こもりまさあき

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

3. LINEのスタンプ買っちゃった！

4. ある居酒屋での会話です

5. 世の中、変わり始めてます

6. 今日お話しすること
•Webを閲覧する状況の変化
•変わらざるを得ないワークフロー
•より多くの環境に対応するために
•スマートで効率的な仕事環境づくり

7. Webを閲覧する状況の変化

8. 変わりゆくWebを閲覧する環境
•PCもしくはフィーチャーフォンが主だったあの頃
•気がつけば、ブロードバンド回線も普及した
•しかし、この数年でまた大きく変わり始めている

9. そう、大きく変わりはじめている

10. フィーチャーフォンからスマートフォンへ

11. そして、タブレットの登場と普及

12. http://www.apple.com/ipad/

13. http://www.google.com/nexus/

14. http://www.microsoft.com/Surface/en-US

15. “
The Need for a Responsive Retail Experience
When it came to online shopping, 14.1% of shoppers preferred
using their mobile phones. The most popular device for US
consumers — the iPhone, followed by the iPad.
Online Black Friday sales shot up 20.7% from last year, mostly
from mobile shoppers. 16.3% of mobile sales, mostly from an iPad.
24% of Black Friday retail traffic came from a mobile, whereas it
was only 14.3% last year and less than 1% in 2009
http://www.zurb.com/article/1115/the-need-for-a-responsive-retail-experien
http://www.lukew.com/ff/entry.asp?1665

16. 必ずしもPCでアクセスする時代ではない

17. 変わ ざ を
ら る 得ないワークフロー

18. 閲覧環境が多様化しているのはわかった

19. それとワークフローに何の関係が？

20. たとえば、スマートフォンを対象に考えると
•個々のデバイスに対して最適化？
•それとも話題のレスポンシブ・ウェブデザイン？
•アプリにしてしまうということも？
•既存のPCサイトのままという選択肢もある？

21. 配信の手段はいくつか存在する

22. でも、一体どれだけ機種があると？

23. http://www.android.com/devices/

24. ＋タブレットはどうする？

25. http://www.android.com/devices/

26. Googleから、ひとつの提案

27. “ タブレット端末ユーザーには
フルサイズのウェブを表示しましょう
http://googlewebmastercentral-ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html

28. 利用者のことを考えることが大事

29. http://www.html5rocks.com/en/mobile/cross-device/

30. デバイスの利用シーンは多岐にわたる

31. さて、そんな環境変化の中で

32. 従来のワークフローでやっていけるか？
•次から次に発売されていくデバイス
•OSの違い、端末の仕様の違い
•下手したら、最初の設計からやり直しの場合も…

33. そうならないために

34. 無理のない設計、柔軟なワークフローを
•デバイスの仕様に左右されない無理のない設計
•ワイヤーフレームやデザインラフはそこそこに
•早めにモックアップ、テストしながら作っていく

35. http://trentwalton.com/2012/10/03/a-new-microsoft-com/

36. http://trentwalton.com/2011/07/14/content-choreography/

37. フローの変更には多くの人の理解が必要

38. そろそろ考え方を変えないといけない時期

39. より多くの環境に対応するために

40. 知らないでは済まされないデバイスの特性

41. なぜ、デバイスのことを知る必要があるか
•あれがやりたい、これがやりたい、が難しい
•実装側が無理をしてどうにかなるものではない
•企画する人もビジュアルデザインする人も、
デバイスの特性ぐらいは知らないと話にならない

42. http://android-developers.blogspot.jp/2012/10/building-quality-tablet-apps.html

43. http://msdn.microsoft.com/library/windows/apps/hh465424

44. そして…

45. 固定サイズでデザインすることの難しさ
•PCだけが対象であれば、固定サイズでもよい
•スマートデバイスの画面サイズや比率はまちまち
•バラバラの環境に対して、固定のデザインは無理

46. 1pxのズレとか気にしてたらできない

47. そもそもWebは可変することが前提であり
Photoshopは Webデザインツールではない

48. そろそろ、pxベースからの卒業を
•画面のピクセル密度の違いをどう考えるか
•高解像度化するデバイスに対して
画像を再生成する、柔軟に扱えることを前提に
•CSS3で置き換え、SVGやWebフォントの利用

49. 同じ16pxでも端末で見え方は異なる

50. 多様な環境に対応するために必要なこと
•操作そのものがマウスから指先になることを考える
•利用環境が必ずしも高速ではないので、
WebサイトやWebアプリの表示スピードも大事
•他にも、オフラインユースを想定するなど

51. 考えなければならないことが一杯

52. Content Choreography | Trent Walton
“
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.
http://trentwalton.com/2011/07/14/content-choreography/

53. みんなで一丸となって対応していく

54. そして、それを取り巻く制作環境にも変化が

55. スマートで効率的な仕事環境づくり

56. スタイルタイル、スタイルガイド

57. スタイルタイルとは
•ワイヤーフレームでもなく、デザインラフでもない
•全体的なデザインテイストの確認のため、
必要な要素を1枚のファイルにまとめたもの
•それをベースにサイトのイメージを共有

58. http://styletil.es

59. http://styletil.es

60. スタイルガイドとは
•Webサイトを構成する、
さまざまな要素をまとめたガイドライン的なもの
•フォントの指定、サイズの指定はもちろん。
HTML、CSS、JavaScriptのコードなども
•誰が修正しても同じものができる

61. http://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

62. https://github.com/styleguide/css

63. http://www.bbc.co.uk/gel/mobile/device-considerations/philosophy

64. http://www.flickr.com/photos/aarronwalter/5579386649/

65. CSSプリプロセッサによる実装の効率化

66. CSSプリプロセッサ
•煩雑になりがちなCSSを、
効率よく書くためのメタ言語
•変数などを使って、特定の入力を自動で処理
•Sass/SCSS、LESS、Stylusなど

67. http://lesscss.org/

68. http://sass-lang.com/

69. http://learnboost.github.com/stylus/

70. フレームワークを使った開発

71. http://todomvc.com/

72. http://metroui.org.ua

73. パッケージマネージャを活用する

74. http://twitter.github.com/bower/

75. “bower install jquery”

76. jQueryの最新版が手元に

77. バージョン管理システムを介しての協業

78. バージョン管理システム
•システム開発の現場ではおなじみのバージョン管理
•GitやSubversion、Mercurialなど
•GitHubやBitbucketを使えばオンライン管理も
•どこにいてもやりとりができるという点も魅力

79. http://git-scm.com/

80. http://bitbucket.org

81. http://github.com

82. サービスを通じて人と繋がることも

83. いろいろなところが変わり始めてます

84. 最後に

85. Changing Times For Web Developers – 6 Tips You Should Read To Survive
“
1 – Learn to write better JavaScript and CSS
2 – Familiarize yourself with a Responsive Framework
3 – Learn the most useful JavaScript MVC frameworks
4 – Understand REST and HTTP
5 – Understand HTML5 Beyond the Buzzword
6 – Optimize
http://www.amazedsaint.com/2012/11/changing-times-for-web-developers-6.html

86. 時代の変化についていくか、いかないか

87. それは皆さんが決めることです

88. 本日のまとめ
•閲覧環境が多様化していることを認識しよう
•従来のワークフローで対応できるか考えよう
•少しやわらかな気持ちと頭に切り替えよう
•環境の変化を察知すれば、次の世界がみえます

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