Web制作者は変化についていけるか? 変化についていくべきか?

11,366 views

Published on

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

Published in: Technology
1 Comment
103 Likes
Statistics
Notes
No Downloads
Views
Total views
11,366
On SlideShare
0
From Embeds
0
Number of Embeds
2,545
Actions
Shares
0
Downloads
93
Comments
1
Likes
103
Embeds 0
No embeds

No notes for slide

Web制作者は変化についていけるか? 変化についていくべきか?

  1. 1. Web制作者は変化についていけるか?変化についていくべきか?2012.12.01 WebSig 24/7 こもりまさあき
  2. 2. まずは自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、などTwitter: @cipher / @proteanbmInstagram: @cipher
  3. 3. LINEのスタンプ買っちゃった!
  4. 4. ある居酒屋での会話です
  5. 5. 世の中、変わり始めてます
  6. 6. 今日お話しすること•Webを閲覧する状況の変化•変わらざるを得ないワークフロー•より多くの環境に対応するために•スマートで効率的な仕事環境づくり
  7. 7. Webを閲覧する状況の変化
  8. 8. 変わりゆくWebを閲覧する環境•PCもしくはフィーチャーフォンが主だったあの頃•気がつけば、ブロードバンド回線も普及した•しかし、この数年でまた大きく変わり始めている
  9. 9. そう、大きく変わりはじめている
  10. 10. フィーチャーフォンからスマートフォンへ
  11. 11. そして、タブレットの登場と普及
  12. 12. http://www.apple.com/ipad/
  13. 13. http://www.google.com/nexus/
  14. 14. http://www.microsoft.com/Surface/en-US
  15. 15. “ The Need for a Responsive Retail ExperienceWhen it came to online shopping, 14.1% of shoppers preferredusing their mobile phones. The most popular device for USconsumers — the iPhone, followed by the iPad.Online Black Friday sales shot up 20.7% from last year, mostlyfrom mobile shoppers. 16.3% of mobile sales, mostly from an iPad.24% of Black Friday retail traffic came from a mobile, whereas itwas only 14.3% last year and less than 1% in 2009http://www.zurb.com/article/1115/the-need-for-a-responsive-retail-experienhttp://www.lukew.com/ff/entry.asp?1665
  16. 16. 必ずしもPCでアクセスする時代ではない
  17. 17. 変わ ざ を ら る 得ないワークフロー
  18. 18. 閲覧環境が多様化しているのはわかった
  19. 19. それとワークフローに何の関係が?
  20. 20. たとえば、スマートフォンを対象に考えると•個々のデバイスに対して最適化?•それとも話題のレスポンシブ・ウェブデザイン?•アプリにしてしまうということも?•既存のPCサイトのままという選択肢もある?
  21. 21. 配信の手段はいくつか存在する
  22. 22. でも、一体どれだけ機種があると?
  23. 23. http://www.android.com/devices/
  24. 24. +タブレットはどうする?
  25. 25. http://www.android.com/devices/
  26. 26. Googleから、ひとつの提案
  27. 27. “ タブレット端末ユーザーにはフルサイズのウェブを表示しましょうhttp://googlewebmastercentral-ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html
  28. 28. 利用者のことを考えることが大事
  29. 29. http://www.html5rocks.com/en/mobile/cross-device/
  30. 30. デバイスの利用シーンは多岐にわたる
  31. 31. さて、そんな環境変化の中で
  32. 32. 従来のワークフローでやっていけるか?•次から次に発売されていくデバイス•OSの違い、端末の仕様の違い•下手したら、最初の設計からやり直しの場合も…
  33. 33. そうならないために
  34. 34. 無理のない設計、柔軟なワークフローを•デバイスの仕様に左右されない無理のない設計•ワイヤーフレームやデザインラフはそこそこに•早めにモックアップ、テストしながら作っていく
  35. 35. http://trentwalton.com/2012/10/03/a-new-microsoft-com/
  36. 36. http://trentwalton.com/2011/07/14/content-choreography/
  37. 37. フローの変更には多くの人の理解が必要
  38. 38. そろそろ考え方を変えないといけない時期
  39. 39. より多くの環境に対応するために
  40. 40. 知らないでは済まされないデバイスの特性
  41. 41. なぜ、デバイスのことを知る必要があるか•あれがやりたい、これがやりたい、が難しい•実装側が無理をしてどうにかなるものではない•企画する人もビジュアルデザインする人も、 デバイスの特性ぐらいは知らないと話にならない
  42. 42. http://android-developers.blogspot.jp/2012/10/building-quality-tablet-apps.html
  43. 43. http://msdn.microsoft.com/library/windows/apps/hh465424
  44. 44. そして…
  45. 45. 固定サイズでデザインすることの難しさ•PCだけが対象であれば、固定サイズでもよい•スマートデバイスの画面サイズや比率はまちまち•バラバラの環境に対して、固定のデザインは無理
  46. 46. 1pxのズレとか気にしてたらできない
  47. 47. そもそもWebは可変することが前提でありPhotoshopは Webデザインツールではない
  48. 48. そろそろ、pxベースからの卒業を•画面のピクセル密度の違いをどう考えるか•高解像度化するデバイスに対して画像を再生成する、柔軟に扱えることを前提に•CSS3で置き換え、SVGやWebフォントの利用
  49. 49. 同じ16pxでも端末で見え方は異なる
  50. 50. 多様な環境に対応するために必要なこと•操作そのものがマウスから指先になることを考える•利用環境が必ずしも高速ではないので、WebサイトやWebアプリの表示スピードも大事•他にも、オフラインユースを想定するなど
  51. 51. 考えなければならないことが一杯
  52. 52. Content Choreography | Trent Walton“We’ve found that the best way forward is to pull allmembers of a team together to design, build, test andthen evaluate in multiple quick rounds.http://trentwalton.com/2011/07/14/content-choreography/
  53. 53. みんなで一丸となって対応していく
  54. 54. そして、それを取り巻く制作環境にも変化が
  55. 55. スマートで効率的な仕事環境づくり
  56. 56. スタイルタイル、スタイルガイド
  57. 57. スタイルタイルとは•ワイヤーフレームでもなく、デザインラフでもない•全体的なデザインテイストの確認のため、必要な要素を1枚のファイルにまとめたもの•それをベースにサイトのイメージを共有
  58. 58. http://styletil.es
  59. 59. http://styletil.es
  60. 60. スタイルガイドとは•Webサイトを構成する、さまざまな要素をまとめたガイドライン的なもの•フォントの指定、サイズの指定はもちろん。HTML、CSS、JavaScriptのコードなども•誰が修正しても同じものができる
  61. 61. http://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
  62. 62. https://github.com/styleguide/css
  63. 63. http://www.bbc.co.uk/gel/mobile/device-considerations/philosophy
  64. 64. http://www.flickr.com/photos/aarronwalter/5579386649/
  65. 65. CSSプリプロセッサによる実装の効率化
  66. 66. CSSプリプロセッサ•煩雑になりがちなCSSを、効率よく書くためのメタ言語•変数などを使って、特定の入力を自動で処理•Sass/SCSS、LESS、Stylusなど
  67. 67. http://lesscss.org/
  68. 68. http://sass-lang.com/
  69. 69. http://learnboost.github.com/stylus/
  70. 70. フレームワークを使った開発
  71. 71. http://todomvc.com/
  72. 72. http://metroui.org.ua
  73. 73. パッケージマネージャを活用する
  74. 74. http://twitter.github.com/bower/
  75. 75. “bower install jquery”
  76. 76. jQueryの最新版が手元に
  77. 77. バージョン管理システムを介しての協業
  78. 78. バージョン管理システム•システム開発の現場ではおなじみのバージョン管理•GitやSubversion、Mercurialなど•GitHubやBitbucketを使えばオンライン管理も•どこにいてもやりとりができるという点も魅力
  79. 79. http://git-scm.com/
  80. 80. http://bitbucket.org
  81. 81. http://github.com
  82. 82. サービスを通じて人と繋がることも
  83. 83. いろいろなところが変わり始めてます
  84. 84. 最後に
  85. 85. Changing Times For Web Developers – 6 Tips You Should Read To Survive“1 – Learn to write better JavaScript and CSS2 – Familiarize yourself with a Responsive Framework3 – Learn the most useful JavaScript MVC frameworks4 – Understand REST and HTTP5 – Understand HTML5 Beyond the Buzzword6 – Optimizehttp://www.amazedsaint.com/2012/11/changing-times-for-web-developers-6.html
  86. 86. 時代の変化についていくか、いかないか
  87. 87. それは皆さんが決めることです
  88. 88. 本日のまとめ•閲覧環境が多様化していることを認識しよう•従来のワークフローで対応できるか考えよう•少しやわらかな気持ちと頭に切り替えよう•環境の変化を察知すれば、次の世界がみえます
  89. 89. 本日はありがとうございました

×