Successfully reported this slideshow.
Your SlideShare is downloading. ×

レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 121 Ad

レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/319/room
ーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/319/room
ーーーーーーーーーーーーーーーーーーーーーーー

Advertisement
Advertisement

More Related Content

Viewers also liked (20)

Similar to レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇 (20)

Advertisement

More from schoowebcampus (20)

Advertisement

Recently uploaded (20)

レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇

  1. 1. レスポンシブWebデザインの実装における、 よくある間違い・嘘・真実 菊池崇
  2. 2. き く ち たかし • ウェブコンサルティング 菊池 崇 • • • • • • allWebクリエイター塾講師 Web Directions East LLC 講演(Adobe Max多数) 執筆(gihyo.jp, ASCII.jp,日経) 制作業務(スマホ案件・UI設計) 大手通信メーカー・大手コンビニ
  3. 3. おかげでRWD 本で売れ行きNO1 Amazon.co.jpで 絶賛販売中 2,500円
  4. 4. なぜ重要?
  5. 5. スマートフォン 対応が遅れた企業
  6. 6. じぇ
  7. 7. じぇじぇ
  8. 8. じぇじぇじぇ
  9. 9. RWDを取り巻く 状況
  10. 10. データを集めよう! 木を見て森をみず
  11. 11. 自分の現場は非常に局所的であり 大局を把握するには不十分
  12. 12. モバイルユーザーの増加 万人 モバイルユーザー デスクトップユーザー 1800 1350 900 450 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trends-ri041210
  13. 13. 米国のトップ3デジタル eコマースのユーザー数 180 162.6 ユーザー数 135 90 93.9 58 45 0 Amazon eBay Wal-Mart Source: comScore, September 2013
  14. 14. 月間の米国トップ3へのアクセスデバイス 160000 42,871 デスクトップのみ モバイル+デスクトップ モバイルのみ 120000 Thousands (000) 42,168 21,933 80000 64,193 23,440 19,276 45,982 40000 9,825 30,146 0 Amazon Sites eBay Source: comScore, June 2013 Wal-Mart
  15. 15. アンドロイド
  16. 16. http://opensignal.com/reports/fragmentation-2013/
  17. 17. http://opensignal.com/reports/fragmentation-2013/
  18. 18. Android 3,997 モデル (2012/8) http://opensignal.com/reports/fragmentation-2013/
  19. 19. Android 11,868 モデル (2013/8) http://opensignal.com/reports/fragmentation-2013/
  20. 20. 倍返しだ
  21. 21. http://opensignal.com/reports/fragmentation-2013/
  22. 22. タブレット
  23. 23. タブレットが2014年に 世界の半分の出荷台数予想 タブレット デスクトップ ノートブック ノートブック 33% タブレット 50% デスクトップ 17%
  24. 24. 世界タブレット出荷数 プラットフォーム別 55000000 アンドロイド Windows アップル Nook キンドル BlackBerry 41250000 27500000 13750000 0 Q2 2010 Q4 2010 Q2 2011 Q4 2011 Q2 2012 Q4 2012 Q2 2013
  25. 25. 図表2-2-3-1 主な情報通信機器の世帯保有状況(平成19∼23年末) 100 75 50 25 0 "平成19年末 "平成20年末 携帯電話・PHS(スマートフォン含む) インターネットに接続できるテレビ タブレット型端末 (再掲)スマートフォン "平成21年末 "平成22年末 "平成23年末 パソコン インターネットに接続できる家庭用ゲーム機 その他インターネットに接続できる家電(情報家電)等
  26. 26. RWDでスマート TV対応 スマートフォン、タブレット、デスクトップだけが端末じゃない
  27. 27. これRWDじゃな い
  28. 28. Adaptive Layout
  29. 29. Fluid Grid Fluid Image Media Query
  30. 30. = Responsive Web Design
  31. 31. RWDはデバイスに依存しない
  32. 32. RWDはviewport にあわせて可変する
  33. 33. @media @media @media @media screen screen screen screen and and and and (min-width (min-width (min-width (min-width : : : : 320px){} iPhone 480px){} iPhone 640px){} android 798px){} ipad
  34. 34. Break Point
  35. 35. @media @media @media @media screen screen screen screen and and and and (min-width (min-width (min-width (min-width : : : : 320px){} iPhone 480px){} iPhone 640px){} android 798px){} ipad
  36. 36. http://opensignal.com/reports/fragmentation-2013/
  37. 37. em
  38. 38. 32em
  39. 39. 45em
  40. 40. 68em
  41. 41. 32em 32em
  42. 42. @media screen and(min-width : 68em){ column-count:2;}
  43. 43. @media @media @media @media screen screen screen screen and and and and (min-width (min-width (min-width (min-width : : : : 320px){} 480px){} 640px){} 798px){} 320/16 480/16 640/16 798/16
  44. 44. @media screen and (min-width @media screen and (min-width @media screen and (min-width @media screen and (min-width : : 20em){} : 30em){} : 40em){} 49.875em){}
  45. 45. RWDの5つの 「よく言われるデメリットとその真実」
  46. 46. 問題 1. ユーザーのメリットがないのでは  クライアントの理解をえずらいのでは 2. サイト容量が大きくなる 3. レイアウト/デザインの自由度が低い 4. ユーザビリティでもマーケティングでも「最適化」で はない? 5. 大手企業サイトには向いてないのでは?
  47. 47. 1,ユーザーのメリットがないのでは? クライアントの理解をえずらいのでは
  48. 48. SNS
  49. 49. Design the URL
  50. 50. m.dokkanoweb.com dokkanoweb.com
  51. 51. 実例
  52. 52. コンペ提出内容 • デザイン(トップページ、下層4ページ)+カンプ • 見積もり(9000万)人月工数 • 全ページ(15,000ページ) • CMS組み込み • サーバー仕様変更
  53. 53. RWDでカンプを 提出
  54. 54. Designing In the Browser
  55. 55. メリット • 実際の出来上がりとの差異がない • RWDに触ってもらえる • デザイン以外にフォーカスがいく
  56. 56. 紙のカンプはデザイ ンばかりに目がいく
  57. 57. パフォーマンス 使いやすさ
  58. 58. ウェブの問題点とはすべての人が、デザイナーで あることだ。すべての人がデザインついてだけ議 論する。なぜなら、そこだけわかるからだ。 Scott Berkun
  59. 59. 2,サイト容量が大きくなる
  60. 60. はい、大きくなり ます
  61. 61. Google,Yahoo,Bing Google では検索レスポンスが 0.4秒遅延すると、 ユーザーあたりの検索回数が 0.59%減少する。 ! Yahoo! では 0.4秒遅延すると5%から9%のト ラフィックを失う。 ! Bing では検索レスポンスが 2秒遅延すると、ユー ザーあたりの検索回数が 1.8%減少し、利益は 4.3%減少する。
  62. 62. http://mobile.httparchive.org/interesting.php#bytesperpage
  63. 63. time.com
  64. 64. 1465×1000 308kb 1465000 520×520 165kb 270400
  65. 65. = 308kb = 165kb × 1.7
  66. 66. PunyPNG
  67. 67. jpeg mini
  68. 68. 356kb 192kb
  69. 69. ImageOptim
  70. 70. ImageOptim
  71. 71. time.com
  72. 72. Responsive Image
  73. 73. Responsive Image <img src-1="(max-width: 400px) pic-small.jpg" src-2="(max-width: 1000px) pic-medium.jpg" src="pic-large.jpg" alt="Obama talking to a soldier in hospital scrubs."> http://tabatkins.github.io/specs/respimg/Overview.html
  74. 74. 3,レイアウト/ デザインの自由度が低い
  75. 75. デザイン度が低い?
  76. 76. デザイン度が低い?
  77. 77. デザイン度が低い?
  78. 78. デザイン度が低い?
  79. 79. HTML CSS 1 1 2 2 3 3 4 4
  80. 80. HTML CSS 1 1 2 4 3 3 4 2
  81. 81. Flexbox Flexbox is pretty awesome and is certainly part of the future of layout.
  82. 82. 4,ユーザビリティでも マーケティングでも最適にならない
  83. 83. なりません
  84. 84. どの手法もなりま せん
  85. 85. http://flic.kr/p/dP1Sdd
  86. 86. http://flic.kr/p/dMoFNw
  87. 87. センサーや行動パターン
  88. 88. Responsive Contents
  89. 89. ある女性のユーザーが毎日、通勤途中に牛丼屋さ んのクーポンが届く。でも彼女は牛丼はすきじゃ ない。
  90. 90. 女性ユーザーが毎日同じ時間に通勤しているので、 ただの通勤客。しかも、スーパーでの決済から鶏 肉が好きなことを把握。 今朝、冷蔵庫とNFCで連動した際に、冷蔵庫には 鶏肉が残っていることも把握したので、クーポン の配布は停止。 鶏肉メニューが追加された場合のみ、配布を検討。
  91. 91. 5,大手企業にむいてない?
  92. 92. 家電量販店も
  93. 93. 国際公共機関も
  94. 94. メディアも
  95. 95. 首相官邸も
  96. 96. 子供向けも
  97. 97. みんなできる! がんばろう
  98. 98. Thank You Satoshi Kikuchi @mantangs mantangs@gmail.com

×