Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

11,917 views

Published on

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

Published in: Technology

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. 本日はありがとうございました

×