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

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

• 1.
  レスポンシブWebデザインの実装における、 よくある間違い・嘘・真実 菊池崇
• 2.
  き く ちたかし • ウェブコンサルティング 菊池 崇 • • • • • • allWebクリエイター塾講師 Web Directions East LLC 講演（Adobe Max多数） 執筆（gihyo.jp, ASCII.jp,日経） 制作業務（スマホ案件・UI設計） 大手通信メーカー・大手コンビニ
• 3.
  おかげでRWD 本で売れ行きNO1 Amazon.co.jpで 絶賛販売中 2,500円
• 4.
  なぜ重要？
• 5.
  スマートフォン 対応が遅れた企業
• 9.
  じぇ
• 11.
  じぇじぇ
• 14.
  じぇじぇじぇ
• 15.
  RWDを取り巻く 状況
• 16.
  データを集めよう！ 木を見て森をみず
• 17.
  自分の現場は非常に局所的であり 大局を把握するには不十分
• 18.
  モバイルユーザーの増加 万人 モバイルユーザー デスクトップユーザー 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
• 19.
  米国のトップ３デジタル eコマースのユーザー数 180 162.6 ユーザー数 135 90 93.9 58 45 0 Amazon eBay Wal-Mart Source: comScore, September2013
• 20.
  月間の米国トップ３へのアクセスデバイス 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
• 21.
  アンドロイド
• 22.
  http://opensignal.com/reports/fragmentation-2013/
• 23.
  http://opensignal.com/reports/fragmentation-2013/
• 24.
  Android 3,997 モデル （2012/8） http://opensignal.com/reports/fragmentation-2013/
• 25.
  Android 11,868 モデル （2013/8） http://opensignal.com/reports/fragmentation-2013/
• 26.
  倍返しだ
• 27.
  http://opensignal.com/reports/fragmentation-2013/
• 28.
  タブレット
• 29.
  タブレットが２０１４年に 世界の半分の出荷台数予想 タブレット デスクトップ ノートブック ノートブック 33% タブレット 50% デスクトップ 17%
• 30.
  世界タブレット出荷数 プラットフォーム別 55000000 アンドロイド Windows アップル Nook キンドル BlackBerry 41250000 27500000 13750000 0 Q2 2010 Q4 2010 Q22011 Q4 2011 Q2 2012 Q4 2012 Q2 2013
• 31.
  図表2-2-3-1 主な情報通信機器の世帯保有状況（平成19∼23年末） 100 75 50 25 0 "平成19年末 "平成20年末 携帯電話・ＰＨＳ（スマートフォン含む） インターネットに接続できるテレビ タブレット型端末 （再掲）スマートフォン "平成21年末 "平成22年末 "平成23年末 パソコン インターネットに接続できる家庭用ゲーム機 その他インターネットに接続できる家電（情報家電）等
• 37.
  RWDでスマート TV対応 スマートフォン、タブレット、デスクトップだけが端末じゃない
• 38.
  これRWDじゃな い
• 44.
  Adaptive Layout
• 45.
  Fluid Grid Fluid Image MediaQuery
• 46.
  = Responsive Web Design
• 50.
  RWDはデバイスに依存しない
• 51.
  RWDはviewport にあわせて可変する
• 52.
  @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
• 53.
  Break Point
• 54.
  @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
• 55.
  http://opensignal.com/reports/fragmentation-2013/
• 56.
  em
• 57.
  32em
• 58.
  45em
• 59.
  68em
• 60.
  32em 32em
• 61.
  @media screen and(min-width: 68em){ column-count:2;}
• 62.
  @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
• 63.
  @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){}
• 64.
  RWDの5つの 「よく言われるデメリットとその真実」
• 65.
  問題 1. ユーザーのメリットがないのでは  クライアントの理解をえずらいのでは 2. サイト容量が大きくなる 3.レイアウト／デザインの自由度が低い 4. ユーザビリティでもマーケティングでも「最適化」で はない？ 5. 大手企業サイトには向いてないのでは？
• 66.
  1,ユーザーのメリットがないのでは？ クライアントの理解をえずらいのでは
• 67.
  SNS
• 69.
  Design the URL
• 70.
  m.dokkanoweb.com dokkanoweb.com
• 71.
  実例
• 72.
  コンペ提出内容 • デザイン（トップページ、下層４ページ）＋カンプ • 見積もり（9000万）人月工数 • 全ページ（15,000ページ） • CMS組み込み • サーバー仕様変更
• 73.
  RWDでカンプを 提出
• 74.
  Designing In theBrowser
• 75.
  メリット • 実際の出来上がりとの差異がない • RWDに触ってもらえる • デザイン以外にフォーカスがいく
• 76.
  紙のカンプはデザイ ンばかりに目がいく
• 77.
  パフォーマンス 使いやすさ
• 78.
  ウェブの問題点とはすべての人が、デザイナーで あることだ。すべての人がデザインついてだけ議 論する。なぜなら、そこだけわかるからだ。 Scott Berkun
• 79.
  2,サイト容量が大きくなる
• 80.
  はい、大きくなり ます
• 81.
  Google,Yahoo,Bing Google では検索レスポンスが 0.4秒遅延すると、 ユーザーあたりの検索回数が0.59%減少する。 ! Yahoo! では 0.4秒遅延すると5％から9%のト ラフィックを失う。 ! Bing では検索レスポンスが 2秒遅延すると、ユー ザーあたりの検索回数が 1.8%減少し、利益は 4.3%減少する。
• 82.
  http://mobile.httparchive.org/interesting.php#bytesperpage
• 83.
  time.com
• 85.
  1465×1000 308kb 1465000 520×520 165kb 270400
• 87.
  = 308kb = 165kb × 1.7
• 88.
  PunyPNG
• 89.
  jpeg mini
• 90.
  356kb 192kb
• 91.
  ImageOptim
• 92.
  ImageOptim
• 93.
  time.com
• 94.
  Responsive Image
• 95.
  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
• 96.
  3,レイアウト／ デザインの自由度が低い
• 97.
  デザイン度が低い？
• 98.
  デザイン度が低い？
• 99.
  デザイン度が低い？
• 100.
  デザイン度が低い？