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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32. 2009.3

33. 2009

34. 2010.3

35. 2010.05.25

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

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

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

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

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

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

43. 15∼19歳では80.3％

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

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

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

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

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

52. ユーザーあたりの平均利用時間
スマートフォン 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

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

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

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

58. コンピュータープラットフォームシェア
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

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

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

61. モバイルプラットフォームシェア
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

62. 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

63. モバイルブラウザ

65. GoogleグラスとRWD

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

69. Android Wear

70. NEST

71. IoT

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

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

74. 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 ウエアラブル

75. RWD?

76. 告知３つ

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

80. お疲れ様でした。