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

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. 0
450
900
1350
1800
2007 2008 2009 2010 2011 2012 2013 2014 2015
モバイルユーザー デスクトップユーザー
モバイルユーザーの増加
http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trends-ri041210
万人

19. 米国のトップ３デジタル eコマースのユーザー数ユーザー数
0
45
90
135
180
Source: comScore, September 2013
Amazon eBay Wal-Mart
58
93.9
162.6

20. 月間の米国トップ３へのアクセスデバイス
Thousands(000)
0
40000
80000
120000
160000
Source: comScore, June 2013
Amazon Sites eBay Wal-Mart
19,276
21,933
42,871
9,825
23,440
42,168
30,146
45,982
64,193
デスクトップのみ モバイル＋デスクトップ モバイルのみ

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%
デスクトップ
17%
タブレット
50%
タブレット デスクトップ ノートブック

30. 世界タブレット出荷数 プラットフォーム別
0
13750000
27500000
41250000
55000000
Q2 2010 Q4 2010 Q2 2011 Q4 2011 Q2 2012 Q4 2012 Q2 2013
アンドロイド アップル キンドル
Windows Nook BlackBerry

31. 図表2-2-3-1 主な情報通信機器の世帯保有状況（平成19∼23年末）
0
25
50
75
100
"平成19年末 "平成20年末 "平成21年末 "平成22年末 "平成23年末
携帯電話・ＰＨＳ（スマートフォン含む） パソコン
インターネットに接続できるテレビ インターネットに接続できる家庭用ゲーム機
タブレット型端末 その他インターネットに接続できる家電（情報家電）等
（再掲）スマートフォン

37. RWDでスマート
TV対応
スマートフォン、タブレット、デスクトップだけが端末じゃない

38. これRWDじゃな
い

44. Adaptive
Layout

45. Fluid Grid
Fluid Image
Media Query

46. =
Responsive Web
Design

50. RWDはデバイスに依存しない

51. RWDはviewport
にあわせて可変する

52. @media screen and (min-width : 320px){}
@media screen and (min-width : 480px){}
@media screen and (min-width : 640px){}
@media screen and (min-width : 798px){}
iPhone
iPhone
android
ipad

53. Break Point

54. @media screen and (min-width : 320px){}
@media screen and (min-width : 480px){}
@media screen and (min-width : 640px){}
@media screen and (min-width : 798px){}
iPhone
iPhone
android
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 screen and (min-width : 320px){}
@media screen and (min-width : 480px){}
@media screen and (min-width : 640px){}
@media screen and (min-width : 798px){}
320/16
480/16
640/16
798/16

63. @media screen and (min-width : 20em){}
@media screen and (min-width : 30em){}
@media screen and (min-width : 40em){}
@media screen and (min-width : 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 the Browser

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. 520×520
165kb
270400
1465×1000
308kb
1465000

87. 308kb 165kb 1.7
=
= ×

88. PunyPNG

89. jpeg mini

90. 192kb
356kb

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. デザイン度が低い？

101. １
2
3
4
１
4
3
2
HTML CSS

102. １
2
3
4
１
4
3
2
HTML CSS

103. FlexboxFlexbox is pretty awesome and is
certainly part of the future of layout.

104. 4,ユーザビリティでも
マーケティングでも最適にならない

105. なりません

106. どの手法もなりま
せん

108. http://flic.kr/p/dP1Sdd

109. http://flic.kr/p/dMoFNw

110. センサーや行動パターン

111. Responsive
Contents

112. ある女性のユーザーが毎日、通勤途中に牛丼屋さ
んのクーポンが届く。でも彼女は牛丼はすきじゃ
ない。

113. 女性ユーザーが毎日同じ時間に通勤しているので、
ただの通勤客。しかも、スーパーでの決済から鶏
肉が好きなことを把握。
今朝、冷蔵庫とNFCで連動した際に、冷蔵庫には
鶏肉が残っていることも把握したので、クーポン
の配布は停止。
鶏肉メニューが追加された場合のみ、配布を検討。

114. 5,大手企業にむいてない？

115. 家電量販店も

116. 国際公共機関も

117. メディアも

118. 首相官邸も

119. 子供向けも

120. みんなできる！
がんばろう

121. Satoshi Kikuchi
@mantangs
mantangs@gmail.com
Thank You

122. マーケティングから考えるRWD
菊池崇の
レスポンシブWEBデザイン道場
RWD

123. 菊池 崇
•WDE（海外イベント）CEO
•ライター（2012:Ascii記事ランキングNo1）
•コンサルティング（ガイドライン作成、IT技術
研修、最新情報提供）
•レスポンシブWebデザイン書籍執筆
•セミナー、講義で講師を多数

125. 菊池 崇
•WDE（海外イベント）CEO
•ライター（2012:Ascii記事ランキングNo1）
•コンサルティング（ガイドライン作成、IT技術
研修、最新情報提供）
•レスポンシブWebデザイン書籍執筆
•セミナー、講義で講師を多数

127. 菊池 崇
•WDE（海外イベント）CEO
•ライター（2012:Ascii記事ランキングNo1）
•コンサルティング（ガイドライン作成、IT技術
研修、最新情報提供）
•レスポンシブWebデザイン書籍執筆
•セミナー、講義で講師を多数

129. 菊池 崇
•WDE（海外イベント）CEO
•ライター（2012:Ascii記事ランキングNo1）
•コンサルティング（ガイドライン作成、IT技術
研修、最新情報提供）
•レスポンシブWebデザイン書籍執筆
•セミナー、講義で講師を多数

130. ついに、何と
本でました！
Amazon.co.jpで
絶賛販売中
2,500円

131. アジェンダ
1. 技術を覚える前に
なぜRWDが生まれたのかを考えよう
2. モバイルファーストではじめよう
3. RWDとマルチデバイス
4. GoogleグラスとRWD

133. 本質を学ぶとは
1. 流行に振り回されず正しい方向を見出す
2. 提案力、企画力、プロジェクト進行に役立つ

134. 流行・不易
進化が早いのは技術だけ
プログレッシブエンハンスメントは
日本で流行らなかった（現場で）

135. みなさんに質問
プログレッシブエンハンスメント？

136. PEってなに？
1. 古いブラウザを無視してモダンブラウザのみ
2. モダンブラウザを無視して古いブラウザのみ
3. 新しいブラウザに対応しつつ、古いブラウザ
にもそれなりに見せること

137. PEってなに？
1. 古いブラウザを無視してモダンブラウザのみ
2. モダンブラウザを無視して古いブラウザのみ
3. 新しいブラウザに対応しつつ、古いブラウザ
にもそれなりに見せること

138. PE
Photo by sharkbait - http://flic.kr/p/4Bshaz

139. コンセプトはいらない？
制作にも、発注にも関係ない、
できればいいんだよ完成さえすれば

140. Photo by xdjio - http://flic.kr/p/28A3Y

141. Photo by Nomadic Lass - http://flic.kr/p/gQEp5X

142. 流行だけにしない
•深い知識を持つ（データ・指標）
•Web上の記事は間違った内容や、誤解
されやすい記事も多くある

144. CSS3よりIE6対応
全部のブラウザがCSS3に対応したら・・・

145. CSS3
この文章を知っていれば

146. Formula 1の写真ノーズ交換

147. ブラウザのサポートは
一生そろわない

148. 技術を覚える前に
なぜRWDが生まれた
のかを考えよう

149. 賢者は歴史に学び、
愚者は経験に学ぶ
ビスマルク

150. レスポンシブ
Webデザインの歴史

151. Ethan Marcotte
イーサン・マルコッテ

153. 2009.3

154. 2009

155. 2010.3

156. 2010.05.25

157. モバイルファーストではじめよう

159. １モバイル・ファースト

160. Luke Wroblewski
ルーク・ウロブレウスキ

161. http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

162. 1. モバイルにはより多くの人にリーチでき
るチャンスがあるから
2. モバイルの画面の小さいことが、本当に
重要なことにフォーカスさせるから
3. モバイルの機能が様々な新しいイノベー
ションの土台になるから
モバイルファースト

163. モバイルは世界人口の８７％にリーチ

164. 15∼19歳では80.3％

165. Lukeと僕が遊んだ島はどこでしょう？
1.あわじしま
2.父島
3.のこのしま

167. モバイルファースト
ウェブサイトのみならず、
サービスなどをモバイルから考えること

168. モバイルファースト
ネット

169. モバイルファースト
サービス・商品
TV
紙
ネット
紙

171. レスポンシブ・ウェブ・デザイン
と
マルチデバイス

173. ユーザーあたりの平均利用時間
スマートフォン Vs.デスクトップ
ユーザーあたりの平均利用時間(時間:分)
0
8.75
17.5
26.25
35
データ元：ニールセン
Q3 2012 Q4 2012 Q1 2013 Q2 2013 Q3 2013
28.97 29.38 28.47
27.35 27.0326
28
30
32
34

174. ブラウザのシェア
デスクトップのシェアより
スマートフォンのシェア

177. コンピューターの
プラットフォームのシェア1位は
1. iOS
2. Windows
3. OSX
4. Android
5. Blackberry

178. コンピューターの
プラットフォームのシェア1位は
1. iOS
2. Windows
3. OSX
4. Android
5. Blackberry

179. コンピュータープラットフォームシェア
0%
25%
50%
75%
100%
Source: Gartner, IDC, Stategy Analytics, Company Filings, BI Intelligence Estimates
Q1 2009 Q3 2009 Q1 2010 Q3 2010 Q1 2011 Q3 2011 Q1 2012 Q3 2012 Q1 2013 Q3 2013
Android Windows iOS Blackberry Other

180. モバイルの
プラットフォームのシェア1位は
1. iOS
2. Windows
3. OSX
4. Android
5. Blackberry

181. モバイルの
プラットフォームのシェア1位は
1. iOS
2. Windows
3. OSX
4. Android
5. Blackberry

182. モバイルプラットフォームシェア
0%
25%
50%
75%
100%
Source: Gartner, IDC, Strategy Analytics, Company Filings, BI Intelligence Estimates
Q1 2009 Q4 2009 Q3 2010 Q2 2011 Q1 2012 Q4 2012 Q3 2013
Android iOS Blackberry Windows Other

183. Mobile Now Accounts For More Than Half Of Facebook
Publisher Referrals
PercentageOfTotal
PublisherTrafficFrom
Facebook
0%
5%
9%
14%
18%
Source: Shareaholic
1月-13 3月-13 5月-13 7月-13 9月-13 11月-13 1月-14
Facebook mobile Facebook nonmobile

184. モバイルブラウザ

186. GoogleグラスとRWD

189. http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design

190. Android Wear

191. NEST

192. IoT

193. IoTの意味は
1. Internet over Trend
2. Internal of Technology
3. Internet of Things

194. IoTの意味は
1. Internet over Trend
2. Internal of Technology
3. Internet of Things

195. Global Internet Device Installed Base Forecast
NumberOfDevicesInUse(InThousands)
0
5000000000
10000000000
15000000000
20000000000
Source: Gartner, IDC, Strategy Analytics, Machina Research, company
filings, BII estimates
2004 2006 2008 2010 2012 2014E 2016E 2018E
PC スマートフォン タブレット
Internet Of Things スマートTV ウエアラブル

196. RWD?

197. 告知３つ

200. クリークアンドリバー社
5/15
19:00から

201. お疲れ様でした。