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

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

きくちたかし • ウェブコンサルティング

菊池崇

•
•
•
•
•
•

allWebクリエイター塾講師
Web Directions East LLC
講演（Adobe Max多数）
執筆（gihyo.jp, ASCII.jp,日経）
制作業務（スマホ案件・UI設計）
大手通信メーカー・大手コンビニ

おかげでRWD
本で売れ行きNO1
Amazon.co.jpで
絶賛販売中
2,500円

スマートフォン

対応が遅れた企業

データを集めよう！

木を見て森をみず

自分の現場は非常に局所的であり
大局を把握するには不十分

モバイルユーザーの増加
万人

モバイルユーザー

デスクトップユーザー

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

米国のトップ３デジタル eコマースのユーザー数
180

162.6

ユーザー数

135

90

93.9

58

45

0

Amazon

eBay
Wal-Mart
Source: comScore, September 2013

月間の米国トップ３へのアクセスデバイス
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

http://opensignal.com/reports/fragmentation-2013/

Android

3,997

モデル

（2012/8）


Android

11,868

モデル

（2013/8）


タブレットが２０１４年に
世界の半分の出荷台数予想
タブレット

デスクトップ

ノートブック

ノートブック
33%
タブレット
50%

デスクトップ
17%

世界タブレット出荷数プラットフォーム別
55000000

アンドロイド
Windows

アップル
Nook

キンドル
BlackBerry

41250000

27500000

13750000

0
Q2 2010

Q4 2010

Q2 2011

Q4 2011

Q2 2012

Q4 2012

Q2 2013

図表2-2-3-1 主な情報通信機器の世帯保有状況（平成19∼23年末）
100

75

50

25

0
"平成19年末

"平成20年末

携帯電話・ＰＨＳ（スマートフォン含む）
インターネットに接続できるテレビ
タブレット型端末
（再掲）スマートフォン

"平成21年末

"平成22年末

"平成23年末

パソコン
インターネットに接続できる家庭用ゲーム機
その他インターネットに接続できる家電（情報家電）等

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

Fluid Grid
Fluid Image
Media Query

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

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

@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

@media screen and(min-width : 68em){
column-count:2;}

@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

@media screen and (min-width
@media screen and (min-width :

: 20em){}
: 30em){}
: 40em){}
49.875em){}

RWDの5つの

「よく言われるデメリットとその真実」

問題
1. ユーザーのメリットがないのでは
クライアントの理解をえずらいのでは

2. サイト容量が大きくなる
3. レイアウト／デザインの自由度が低い
4. ユーザビリティでもマーケティングでも「最適化」で
はない？
5. 大手企業サイトには向いてないのでは？

1,ユーザーのメリットがないのでは？
クライアントの理解をえずらいのでは

m.dokkanoweb.com
dokkanoweb.com

コンペ提出内容
•

デザイン（トップページ、下層４ページ）＋カンプ

•

見積もり（9000万）人月工数

•

全ページ（15,000ページ）

•

CMS組み込み

•

サーバー仕様変更

メリット
•

実際の出来上がりとの差異がない

•

RWDに触ってもらえる

•

デザイン以外にフォーカスがいく

紙のカンプはデザイ
ンばかりに目がいく

パフォーマンス
使いやすさ

ウェブの問題点とはすべての人が、デザイナーで
あることだ。すべての人がデザインついてだけ議
論する。なぜなら、そこだけわかるからだ。
Scott Berkun

2,サイト容量が大きくなる

はい、大きくなり
ます

Google,Yahoo,Bing
Google では検索レスポンスが 0.4秒遅延すると、
ユーザーあたりの検索回数が 0.59%減少する。
!

Yahoo! では 0.4秒遅延すると5％から9%のト
ラフィックを失う。
!

Bing では検索レスポンスが 2秒遅延すると、ユー
ザーあたりの検索回数が 1.8%減少し、利益は
4.3%減少する。

http://mobile.httparchive.org/interesting.php#bytesperpage

1465×1000
308kb
1465000

520×520
165kb
270400

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

3,レイアウト／
デザインの自由度が低い

HTML

CSS

１

１

2

2

3

3

4

4

HTML

CSS

１

１

2

4

3

3

4

2

Flexbox
Flexbox is pretty awesome and is
certainly part of the future of layout.

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

どの手法もなりま
せん

センサーや行動パターン

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

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

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

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

Thank You
Satoshi Kikuchi
@mantangs
mantangs@gmail.com

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

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

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

Mehr von schoowebcampus

Mehr von schoowebcampus (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)