ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/319/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. モバイルユーザーの増加
万人
モバイルユーザー
デスクトップユーザー
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, September 2013

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
Q2 2011
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
Media Query

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

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

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

103. Flexbox
Flexbox 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. Thank You
Satoshi Kikuchi
@mantangs
mantangs@gmail.com