Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

1.159 visualizaciones

Publicado el

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

Publicado en: Empresariales
  • Sé el primero en comentar

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

  1. 1. マーケティングから考えるRWD 菊池崇の レスポンシブWEBデザイン道場 RWD
  2. 2. 菊池 崇 •WDE(海外イベント)CEO •ライター(2012:Ascii記事ランキングNo1) •コンサルティング(ガイドライン作成、IT技術 研修、最新情報提供) •レスポンシブWebデザイン書籍執筆 •セミナー、講義で講師を多数
  3. 3. 菊池 崇 •WDE(海外イベント)CEO •ライター(2012:Ascii記事ランキングNo1) •コンサルティング(ガイドライン作成、IT技術 研修、最新情報提供) •レスポンシブWebデザイン書籍執筆 •セミナー、講義で講師を多数
  4. 4. 菊池 崇 •WDE(海外イベント)CEO •ライター(2012:Ascii記事ランキングNo1) •コンサルティング(ガイドライン作成、IT技術 研修、最新情報提供) •レスポンシブWebデザイン書籍執筆 •セミナー、講義で講師を多数
  5. 5. 菊池 崇 •WDE(海外イベント)CEO •ライター(2012:Ascii記事ランキングNo1) •コンサルティング(ガイドライン作成、IT技術 研修、最新情報提供) •レスポンシブWebデザイン書籍執筆 •セミナー、講義で講師を多数
  6. 6. ついに、何と 本でました! Amazon.co.jpで 絶賛販売中 2,500円
  7. 7. アジェンダ 1. 技術を覚える前に
 なぜRWDが生まれたのかを考えよう 2. モバイルファーストではじめよう 3. RWDとマルチデバイス 4. GoogleグラスとRWD
  8. 8. 本質を学ぶとは 1. 流行に振り回されず正しい方向を見出す 2. 提案力、企画力、プロジェクト進行に役立つ
  9. 9. 流行・不易 進化が早いのは技術だけ プログレッシブエンハンスメントは
 日本で流行らなかった(現場で)
  10. 10. みなさんに質問 プログレッシブエンハンスメント?
  11. 11. PEってなに? 1. 古いブラウザを無視してモダンブラウザのみ 2. モダンブラウザを無視して古いブラウザのみ 3. 新しいブラウザに対応しつつ、古いブラウザ にもそれなりに見せること
  12. 12. PEってなに? 1. 古いブラウザを無視してモダンブラウザのみ 2. モダンブラウザを無視して古いブラウザのみ 3. 新しいブラウザに対応しつつ、古いブラウザ にもそれなりに見せること
  13. 13. PE Photo by sharkbait - http://flic.kr/p/4Bshaz
  14. 14. コンセプトはいらない? 制作にも、発注にも関係ない、 できればいいんだよ完成さえすれば
  15. 15. Photo by xdjio - http://flic.kr/p/28A3Y
  16. 16. Photo by Nomadic Lass - http://flic.kr/p/gQEp5X
  17. 17. 流行だけにしない •深い知識を持つ(データ・指標) •Web上の記事は間違った内容や、誤解 されやすい記事も多くある
  18. 18. CSS3よりIE6対応 全部のブラウザがCSS3に対応したら・・・
  19. 19. CSS3 この文章を知っていれば
  20. 20. Formula 1の写真ノーズ交換
  21. 21. ブラウザのサポートは 一生そろわない
  22. 22. 技術を覚える前に なぜRWDが生まれた のかを考えよう
  23. 23.  賢者は歴史に学び、 愚者は経験に学ぶ  ビスマルク
  24. 24. レスポンシブ Webデザインの歴史
  25. 25. Ethan Marcotte イーサン・マルコッテ
  26. 26. 2009.3
  27. 27. 2009
  28. 28. 2010.3
  29. 29. 2010.05.25
  30. 30. モバイルファーストではじめよう
  31. 31. 1モバイル・ファースト
  32. 32. Luke Wroblewski ルーク・ウロブレウスキ
  33. 33. http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
  34. 34. 1. モバイルにはより多くの人にリーチでき るチャンスがあるから 2. モバイルの画面の小さいことが、本当に 重要なことにフォーカスさせるから 3. モバイルの機能が様々な新しいイノベー ションの土台になるから モバイルファースト
  35. 35. モバイルは世界人口の87%にリーチ
  36. 36. 15∼19歳では80.3%
  37. 37. Lukeと僕が遊んだ島はどこでしょう? 1.あわじしま 2.父島 3.のこのしま
  38. 38. モバイルファースト ウェブサイトのみならず、 サービスなどをモバイルから考えること
  39. 39. モバイルファースト ネット
  40. 40. モバイルファースト サービス・商品 TV 紙 ネット 紙
  41. 41. レスポンシブ・ウェブ・デザイン と マルチデバイス
  42. 42. ユーザーあたりの平均利用時間 スマートフォン 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
  43. 43. ブラウザのシェア デスクトップのシェアより スマートフォンのシェア
  44. 44. コンピューターの プラットフォームのシェア1位は 1. iOS 2. Windows 3. OSX 4. Android 5. Blackberry
  45. 45. コンピューターの プラットフォームのシェア1位は 1. iOS 2. Windows 3. OSX 4. Android 5. Blackberry
  46. 46. コンピュータープラットフォームシェア 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
  47. 47. モバイルの プラットフォームのシェア1位は 1. iOS 2. Windows 3. OSX 4. Android 5. Blackberry
  48. 48. モバイルの プラットフォームのシェア1位は 1. iOS 2. Windows 3. OSX 4. Android 5. Blackberry
  49. 49. モバイルプラットフォームシェア 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
  50. 50. 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
  51. 51. モバイルブラウザ
  52. 52. GoogleグラスとRWD
  53. 53. http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design
  54. 54. Android Wear
  55. 55. NEST
  56. 56. IoT
  57. 57. IoTの意味は 1. Internet over Trend 2. Internal of Technology 3. Internet of Things
  58. 58. IoTの意味は 1. Internet over Trend 2. Internal of Technology 3. Internet of Things
  59. 59. 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 ウエアラブル
  60. 60. RWD?
  61. 61. 告知3つ
  62. 62. クリークアンドリバー社 5/15 19:00から
  63. 63. お疲れ様でした。

×