Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

レスポンシブ・ウェブデザイン -Responsive web design-

27,756 views

Published on

顧客コミュニケーション・マーケティングリサーチ・ユーザーアンケートなどに使える最先端のWEBアンケートツール。しばらく無料です!⇒ https://creativesurvey.com/

Published in: Technology
  • Be the first to comment

レスポンシブ・ウェブデザイン -Responsive web design-

  1. 1. Responsive Web Design について
  2. 2. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  3. 3. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  4. 4. Responsive Web Design とは?
  5. 5. Responsive Design とは?
  6. 6. Responsive Design とは? http://www.creativesurvey.jp http://adaptive-images.com/
  7. 7. Responsive Design とは? スクリーン幅に応じて、レイアウトを変える手法
  8. 8. Responsive Design とは? スクリーン幅に応じて、レイアウトを変える手法 レイアウトの話
  9. 9. Responsive Design とは? なぜ注目されているのか?
  10. 10. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる
  11. 11. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる • 発行されるURLが一つである
  12. 12. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる • 発行されるURLが一つである • 最新の技術を使用している
  13. 13. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる 特徴なので • 発行されるURLが一つである 後述します • 最新の技術を使用している
  14. 14. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる 特徴なので • 発行されるURLが一つである 後述します • 最新の技術を使用している • 新しい考え方への転換
  15. 15. Responsive 新しい Design とは? 考え方 Progressive Enhancement
  16. 16. Responsive 新しい Design とは? 考え方 Progressive Enhancement 最新のUA(User Agent)で、 最高のUX(User Experience)を。
  17. 17. Responsive Progressive Design Enhancement とは? Responsive Design ≠ Cross Browser
  18. 18. Responsive Progressive Design Enhancement とは? Responsive Design ≠ Cross Browser 伝える情報をきちんと伝える
  19. 19. Responsive Progressive Design Enhancement とは? Responsive Design ≠ Cross Browser 伝える情報をきちんと伝える UAに応じたUXを提供する
  20. 20. Responsive Progressive Design Enhancement とは? Responsive Design ≠ Cross Browser 伝える情報をきちんと伝える UAに応じたUXを提供する ビジュアルエレメントが先行しない
  21. 21. Responsive Progressive Design Enhancement とは? STRATEGY SCOPE STRUCTURE SKELTON SURFACE
  22. 22. Responsive Progressive Design Enhancement とは? Cross Browser / Regressive Enhancement の一般的なタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE
  23. 23. Responsive Progressive Design Enhancement とは? Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE
  24. 24. Responsive Progressive Design Enhancement とは? 情報を構造をふまえて表現する Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE 様々なレイアウトを考慮すると、 視覚構造と情報構造のミスマッチがおきる
  25. 25. Responsive Progressive Design Enhancement とは? 一つの幹が複数の枝を持つ HTML 「分木構造」 表層構造 = 情報構造HEAD BODY HEADER ARTICLE FOOTER
  26. 26. Responsive Progressive Design Enhancement とは? 情報を構造をふまえて表現する Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE 様々なレイアウトを考慮すると、 視覚構造と情報構造のミスマッチがおきる
  27. 27. Responsive Design とは? Responsive ≠ Liquid / Fluid Layout 混同しやすいイメージ
  28. 28. Responsive 混同しやすい Design とは? イメージ Webデザインのレイアウト手法 1. Fixed Layout ・固定幅中央 え 2. Liquid / Fluid Layout ・可変幅 横幅目一杯 3. Flexible Layout ・可変幅 最大値 / 最小値を固定 4. Elastic Layout ・幅を文字数から決定する
  29. 29. Responsive 混同しやすい Design とは? イメージLiquid / Fluid Layout http://andreagandino.com/Responsive Web Design http://www.creativesurvey.jp/ http://adaptive-images.com/
  30. 30. Responsive 混同しやすい Design とは? イメージLiquid / Fluid Layout http://andreagandino.com/Responsive Web Design http://www.creativesurvey.jp/ Liquid の時もある http://adaptive-images.com/ Fixed の時もある
  31. 31. Responsive 混同しやすい Design とは? イメージ レスポンシブデザインのレイアウトは? CSS3を使って、 Fixed / Liquid Layout を使い分ける
  32. 32. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS3は古いブラウザでは動かないのでは?
  33. 33. Responsive 混同しやすい Layout Design 使い分け とは? イメージ IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) X X X ▲ o o o o IE7 4%前後 IE8 20%前後 1/4に対応できない?
  34. 34. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS は 「使い分け」のスイッチ
  35. 35. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS は 「使い分け」のスイッチ 1. 使い分け前の状態を通常のサイトとする
  36. 36. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS は 「使い分け」のスイッチ 1. 使い分け前の状態を通常のサイトとする 2. 「使い分け」を別の方法で実現する
  37. 37. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS3は古いブラウザでは動かないのでは? ResponsiveCSSによる使い分けを使わない状態も一つの適応例
  38. 38. まとめ
  39. 39. Responsive Web Design とは?
  40. 40. スクリーン幅に応じて、レイアウトを変える手法
  41. 41. スクリーン幅に応じて、レイアウトを変える手法 Progressive Layout Enhancement 使い分け
  42. 42. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  43. 43. Responsive Web Design メリット・デメリット
  44. 44. メリットデメリット Responsive Web Design : メリット 様々なデバイスに 発行されるURLが CSSシフト 適応できる 一つである
  45. 45. メリットデメリット Responsive Web Design : メリット 様々なデバイスに 発行されるURLが CSSシフト 適応できる 一つである
  46. 46. メリット 様々なデメリット デバイス
  47. 47. メリット 様々なデメリット デバイス SmartTV?
  48. 48. メリット 様々な デメリット デバイスSmartGadgets? SmartTV?
  49. 49. メリット 様々な デメリット デバイスSmartGadgets? SmartTV? 特定のデバイスをターゲットとせずに、広く情報を発信できる 「シームレスにレイアウトを適応させる」
  50. 50. メリット 様々な デメリット デバイスSmartGadgets? SmartTV? 特定のデバイスをターゲットとせずに、広く情報を発信できる 「シームレスにレイアウトを適応させる」 Progressive Enhancement
  51. 51. メリット 様々なデメリット デバイス
  52. 52. メリット 様々なデメリット デバイス UAに応じて+αのUXを余白だった部分に展開できる
  53. 53. メリット 様々なデメリット デバイス UAに応じて+αのUXを余白だった部分に展開できる Progressive Enhancement
  54. 54. メリットデメリット Responsive Web Design : メリット 様々なデバイスに 発行されるURLが CSSシフト 適応できる 一つである
  55. 55. メリット URLがデメリット ひとつ 複数の最適化ページの場合
  56. 56. メリット URLがデメリット ひとつ 複数の最適化ページの場合 Responsive Web Designの場合
  57. 57. メリット URLがデメリット ひとつ 修正 / 更新作業
  58. 58. メリット URLがデメリット ひとつ 修正 / 更新作業
  59. 59. メリット URLがデメリット ひとつ ただし、 HTML CSS JavaScript データソース データ修飾 UAに応じた処理 データ / ヴィジュアルが分離していれば データのみの変更ですべてに適応できる
  60. 60. メリット URLがデメリット ひとつ SEO
  61. 61. メリット URLが デメリット ひとつ SEO Googlebotくん Googlebotくんhttp://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.co.jp/ja/jp/intl/ja/webmasters/docs/search-engine-optimization-starter-guide-ja.pdf
  62. 62. メリット URLがデメリット ひとつ サーバーアプリケーション
  63. 63. メリット URLがデメリット ひとつ サーバーアプリケーション フルスクラッチ
  64. 64. メリット URLが デメリット ひとつ サーバーアプリケーションデバイス振り分けロジックデバイス分のテンプレート検証 フルスクラッチ
  65. 65. メリット URLが デメリット ひとつ サーバーアプリケーションデバイス振り分けロジックデバイス分のテンプレート検証 フルスクラッチ デバイス振り分けロジック デバイス分のテンプレート検証 をHTMLに依存させる
  66. 66. メリット URLが デメリット ひとつ サーバーアプリケーションデバイス振り分けロジックデバイス分のテンプレート検証 フルスクラッチ デバイス振り分けロジック デバイス分のテンプレート検証 をHTMLに依存させる バックエンドとフロントエンドの分離
  67. 67. メリットデメリット Responsive Web Design : メリット 様々なデバイスに 発行されるURLが CSSシフト 適応できる 一つである
  68. 68. メリット CSSシフトデメリット JavaScriptや画像の扱いを工夫する必要があった。 その副作用としていくつかのメリットがあった。
  69. 69. メリット CSSシフトデメリット JavaScriptや画像の扱いを工夫する必要があった。 その副作用としていくつかのメリットがあった。 ロジック/ヴィジュアル 分離
  70. 70. メリット CSSシフトデメリット JavaScriptや画像の扱いを工夫する必要があった。 その副作用としていくつかのメリットがあった。 ロジック/ヴィジュアル パフォーマンス 分離
  71. 71. メリット CSSシフトデメリット JavaScriptや画像の扱いを工夫する必要があった。 その副作用としていくつかのメリットがあった。 ロジック/ヴィジュアル レイアウト変更に パフォーマンス 分離 関わる画像変更
  72. 72. ロジックメリット CSSシフト ビジュアルデメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。
  73. 73. ロジックメリット CSSシフト ビジュアルデメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した
  74. 74. ロジックメリット CSSシフト ビジュアルデメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した HTML データソース
  75. 75. ロジックメリット CSSシフト ビジュアルデメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した HTML CSS データソース データ修飾
  76. 76. ロジックメリット CSSシフト ビジュアルデメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した HTML CSS JavaScript データソース データ修飾 UAに応じた処理
  77. 77. ロジックメリット CSSシフト ビジュアルデメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した 低機能UA:補助 高機能UA:追加  HTML CSS JavaScript データソース データ修飾 UAに応じた処理
  78. 78. メリット CSSシフト パフォーマンスデメリット Progressive Enhancementの考えに実現したかった。 IEでアニメーションをやめた。
  79. 79. メリット CSSシフト パフォーマンス デメリット Progressive Enhancementの考えに実現したかった。 IEでアニメーションをやめた。それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる
  80. 80. メリット CSSシフト パフォーマンス デメリット Progressive Enhancementの考えに実現したかった。 IEでアニメーションをやめた。それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる さらなる ロジック/ヴィジュアル パフォーマンス改善 分離
  81. 81. メリット CSSシフト 画像置換デメリット 画像テキストの使いどころが難しい
  82. 82. メリット CSSシフト 画像置換デメリット 画像 画像 画像 画像 デバイステキストブロック デバイステキスト ブロック
  83. 83. メリット CSSシフト 画像置換デメリット 画像テキストの使いどころが難しい テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
  84. 84. メリット CSSシフト 画像置換デメリット 画像テキストの使いどころが難しい テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した 柔軟なレイアウト
  85. 85. メリット CSSシフト 画像置換デメリット 画像テキストの使いどころが難しい テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した 柔軟なレイアウト ファイル転送量縮小
  86. 86. メリット CSSシフト 画像置換デメリット 画像テキストの使いどころが難しい テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した 柔軟なレイアウト ファイル転送量縮小 Retina対応簡略化
  87. 87. メリットデメリット Responsive Web Design : デメリット 開発コストが モバイル向けの プラグイン・広告 割高である? ”最適化”ではない に注意
  88. 88. メリットデメリット Responsive Web Design : デメリット 開発コストが モバイル向けの プラグイン・広告 割高である? ”最適化”ではない に注意
  89. 89. メリット 開発コストデメリット 開発コストが高いという印象を持たれている
  90. 90. メリット 開発コストデメリット 開発コストが高いという印象を持たれている それほど難しいと感じなかった
  91. 91. メリット 開発コストデメリット 開発コストが高いという印象を持たれている なぜ? それほど難しいと感じなかった
  92. 92. メリット 開発コストデメリット1. 制作者の習熟度に依存する部分が大きい2. 設計:実装が密に連携する場面がある可能性が強い
  93. 93. メリットデメリット Responsive Web Design : デメリット 開発コストが モバイル向けの プラグイン・広告 割高である? ”最適化”ではない に注意
  94. 94. メリット モバイルデメリット 最適化 モバイル向けの最適化とは何か?
  95. 95. メリット モバイルデメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ
  96. 96. メリット モバイルデメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ モバイルに適したレイアウト
  97. 97. メリット モバイルデメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ モバイルに適したレイアウト ファイル転送量の削減
  98. 98. メリット モバイルデメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ モバイルに適したレイアウト ファイル転送量の削減
  99. 99. メリット モバイル コンテンツ デメリット 最適化 レイアウト(実装的な)無理が生じない分にはResponsiveで対応可能 モバイルでしかできないことはモバイルでやるべき 条件分岐の処理分のパフォーマンスは落ちる
  100. 100. メリット モバイルデメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ モバイルに適したレイアウト ファイル転送量の削減
  101. 101. メリット モバイル 不必要なデメリット 最適化 画像 不必要な画像の読み込みが発生する?
  102. 102. メリット モバイルデメリット 最適化 不必要な画像の読み込みが発生する? imgタグ 背景画像
  103. 103. メリット モバイルデメリット 最適化 imgタグと背景画像の2パターンで実験 ウィンドウサイズ
  104. 104. メリット モバイルデメリット 最適化 imgタグ:ページ読み込み時のリソース
  105. 105. メリット モバイルデメリット 最適化 背景画像:ページ読み込み時のリソース
  106. 106. メリット モバイルデメリット 最適化 非表示の背景画像は読み込まれません
  107. 107. メリット モバイルデメリット 最適化 非表示の背景画像は読み込まれません データソースとしての HTML
  108. 108. メリット モバイルデメリット 最適化 非表示の背景画像は読み込まれません データソースとしての 表示装飾としての HTML CSS
  109. 109. メリット モバイルデメリット 最適化 非表示の背景画像は読み込まれません データソースとしての 表示装飾としての HTML CSS 表示すべき=読み込むべき
  110. 110. メリット モバイルデメリット 最適化 不必要な画像の読み込みが発生する? imgタグ 背景画像 CSSシフト
  111. 111. メリット モバイルデメリット 最適化 ブラウザのハック 背景画像 実装の手間 CSSシフト imgである必要がある
  112. 112. メリット モバイルデメリット 最適化 ブラウザのハック 背景画像 実装の手間 CSSシフト imgである必要がある 不必要な画像の読み込みは発生します
  113. 113. メリットデメリット Responsive Web Design : デメリット 開発コストが モバイル向けの プラグイン・広告 割高である? ”最適化”ではない に注意
  114. 114. メリット プラグインデメリット 広告 可変サイズに対応できるか 見えないときに動作するか
  115. 115. まとめ
  116. 116. メリット デメリット CSSシフト 開発コスト様々なデバイスに 発行されるURLが モバイル最適化 プラグイン 適応できる 一つである
  117. 117. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  118. 118. Responsive Web Design プロセス
  119. 119. ブラウザごとの挙動を決定する
  120. 120. ブラウザプロセス 挙動 CSS3 対応表 IE10 FirefoxIE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+)X X X ▲ o o o o
  121. 121. ブラウザプロセス 挙動 CSS3 対応表 IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) X X X ▲ o o o o IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+)default default default ! responsive responsive responsive responsive
  122. 122. ブラウザプロセス 挙動 CSS3 対応表 IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) X X X ▲ o o o o 可変カラム不可!! IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+)default default default ! responsive responsive responsive responsive
  123. 123. ブラウザプロセス 挙動 ヴィジュアルデザインを組む上での制約が決定 IE9 > IE8 モード, default: 1024px fixed
  124. 124. ヴィジュアルデザイン
  125. 125. ヴィジュアルプロセス デザイン レイアウト分岐数を決める 例えば5つ 0. 1200px + 1. 1024px 2. 768px 3. 480px 4. 320px
  126. 126. ヴィジュアルプロセス デザイン レイアウト分岐数を決める 0. 1200px + ページ単位ではなく 例えば5つ ボックス単位。 1. 1024px レイアウトに変更が あれば作成する。 2. 768px 3. 480px 4. 320px
  127. 127. ヴィジュアルプロセス デザイン レイアウトを決める 1. Fixed Layout ・固定幅中央 え 2. Liquid / Fluid Layout ・可変幅 横幅目一杯 3. Flexible Layout ・可変幅 最大値 / 最小値を固定 4. Elastic Layout ・幅を文字数から決定する
  128. 128. ヴィジュアルプロセス デザイン レイアウトを決める 1. Fixed Layout 1024~768のように ・固定幅中央 え シームレスを 2. Liquid / Fluid Layout 前提として ・可変幅 横幅目一杯 レイアウトを決定。 3. Flexible Layout ・可変幅 最大値 / 最小値を固定 4. Elastic Layout ・幅を文字数から決定する
  129. 129. ヴィジュアルプロセス デザイン レイアウトを決める 1. Fixed Layout 1024~768のように ・固定幅中央 え シームレスを 2. Liquid / Fluid Layout 前提として ・可変幅 横幅目一杯 レイアウトを決定。 3. Flexible Layout ・可変幅 最大値 / 最小値を固定 4. Elastic Layout ワイヤーフレームで ・幅を文字数から決定する も同様に、 カラムになる場合は レイアウトを考える
  130. 130. 実装
  131. 131. プロセス 実装 シームレスかどうか
  132. 132. プロセス 実装 シームレスかどうか 画像 画像 デバイステキストブロック
  133. 133. プロセス 実装 シームレスかどうか 画像 画像 画像 画像 デバイステキストブロック デバイステキスト ブロック
  134. 134. 実装 シームレスかどうか はみ出る 画像 画像 画像 画像 デバイステキストブロック デバイステキスト ブロック 折り返す
  135. 135. プロセス 実装文章構造と情報構造が一致しているか
  136. 136. プロセス 実装文章構造と情報構造が一致しているか メニュー1 文言変更 メニュー2 並び順
  137. 137. プロセス 実装文章構造と情報構造が一致しているか メニュー1 文言変更  メニュー2 並び順 ▲
  138. 138. プロセス 実装文章構造と情報構造が一致しているか メニュー1 文言変更  メニュー2 並び順 ▲ 隠しておく
  139. 139. プロセス 実装文章構造と情報構造が一致しているか HTML CSS JavaScript データソース データ修飾 UAに応じた処理
  140. 140. プロセス 実装文章構造と情報構造が一致しているか ページ読み込みの段階から 変更を加える考え方はNG HTML CSS JavaScript データソース データ修飾 UAに応じた処理
  141. 141. プロセス 実装 STRATEGY SCOPE STRUCTURE SKELTON SURFACE
  142. 142. プロセス 実装 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 弊社内で完結したのでスムーズだったが、実際の案件単位では未知数
  143. 143. まとめ
  144. 144. まとめレイアウト 挙動
  145. 145. まとめレイアウト ビジュアル 挙動 デザイン
  146. 146. まとめレイアウト ビジュアル 実装協議 挙動 デザイン
  147. 147. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  148. 148. Responsive Web Design 設計
  149. 149. 情報を構造をふまえて表現する Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE 様々なレイアウトを考慮すると、 表層構造と情報構造のミスマッチがおきる表層構造 = 情報構造
  150. 150. 情報を構造をふまえて表現する Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE 様々なレイアウトを考慮すると、 表層構造と情報構造のミスマッチがおきる表層構造 = 情報構造 重要!
  151. 151. どのぐらい重要? STRATEGY SCOPE STRUCTURE SKELTON SURFACE 表層構造 = 情報構造
  152. 152. どのぐらい重要? STRATEGY SCOPE STRUCTURE SKELTON ユーザーに負荷 SURFACE 実現不可能 非効率な処理 表層構造 = 情報構造
  153. 153. どのぐらい重要? STRATEGY SCOPE STRUCTURE SKELTON ユーザーに負荷 SURFACE 実現不可能 非効率な処理 表層構造 = 情報構造
  154. 154. どのぐらい重要? STRATEGY SCOPE STRUCTURE SKELTON ユーザーに負荷 SURFACE 実現不可能 非効率な処理 表層構造 = 情報構造 事故を前提にするようなもの コスト スケジュール クオリティ
  155. 155. 言い換えると
  156. 156. 今までのリニアなやり方なら、 表層構造はある程度無視できたSTRATEGY SCOPE STRUCTURE SKELTON SURFACE 今まで以上に 両面から 考える必要性 高度化
  157. 157. どのように高度化するのか。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 今まで以上に 両面から 考える必要性 今までと同様
  158. 158. どのように高度化するのか。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 今まで以上に 両面から 考える必要性 表層構造において あるべき姿を理解する HTML構造 HTMLタグの意味 実装コスト
  159. 159. どのように高度化するのか。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 今まで以上に 両面から 考える必要性 表層構造において それって現実的? あるべき姿を理解する HTML構造 HTMLタグの意味 実装コスト
  160. 160. 理想的な解決
  161. 161. 理想的な解決 ・情報設計の担当がもともと知識が超豊富 HTMLや最新のJS/CSS事情にも詳しいレベル ・情報設計の担当がそのままデザインと実装を行う 自己完結すれば問題が顕在化しない。 ・情報設計の必要がないぐらい作るものがシンプル
  162. 162. 理想的な解決? ・情報設計の担当がもともと知識が超豊富 HTMLや最新のJS/CSS事情にも詳しいレベル ・情報設計の担当がそのままデザインと実装を行う 自己完結すれば問題が顕在化しない。 ・情報設計の必要がないぐらい作るものがシンプル
  163. 163. 理想的な解決? ・情報設計の担当がもともと知識が超豊富 HTMLや最新のJS/CSS事情にも詳しいレベル? ・情報設計の担当がそのままデザインと実装を行う 自己完結すれば問題が顕在化しない。 ・情報設計の必要がないぐらい作るものがシンプル
  164. 164. 理想的な解決? ・情報設計の担当がもともと知識が超豊富 HTMLや最新のJS/CSS事情にも詳しいレベル? ・情報設計の担当がそのままデザインと実装を行う 自己完結すれば問題が顕在化しない。? ・情報設計の必要がないぐらい作るものがシンプル 今あるレスポンシブデザインはこういうものが多い
  165. 165. 現実的な解決 1:専門知識は専門家に。 2:担当領域の分担と分離。
  166. 166. 1:専門知識は専門家に。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE IA担当だけでなく みんなで考える
  167. 167. 1:専門知識は専門家に。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE IA担当だけでなく みんなで考える デザイナー デベロッパー エンジニア
  168. 168. 1:専門知識は専門家に。 STRATEGY SCOPE STRUCTURE WFは仕様書ではなくなる SKELTON SURFACE IA担当だけでなく みんなで考える デザイナー デベロッパー エンジニア 反復型チーム開発マネジメント
  169. 169. 1:専門知識は専門家に。 STRATEGY SCOPE STRUCTURE WFは仕様書ではなくなる SKELTON 情報設計の不確実性を IA担当だけでなく SURFACE サポートする体制 みんなで考える デザイナー デベロッパー エンジニア 反復型チーム開発マネジメント
  170. 170. 2:担当領域の分担と分離 STRATEGY SCOPE STRUCTURE SKELTON SURFACE素材や分量や優先順位を 表層の専門領域を担保しながら作り上げる。 料理を仕上げて行く
  171. 171. 現実的な解決 1:専門知識は専門家に。 情報設計のレイヤーで表層領域の専門性を付加。 のちの変更を受け入れる意識的なマネジメント。 2:担当領域の分担と分離。 情報設計の工程を分担し、具体化を分離する。 その後の検証も含めて分担できる可能性。
  172. 172. たとえばSTRATEGY SCOPE STRUCTURE SKELTON SURFACE コンサル A社 4D B社
  173. 173. たとえばSTRATEGY SCOPE STRUCTURE SKELTON SURFACE A社 B社 このやり方だとリスクが大きくなる
  174. 174. STRATEGY SCOPE STRUCTURE SKELTON SURFACE IA担当だけでなく みんなで考える デザイナー デベロッパー エンジニア素材や分量や優先順位を 表層の専門領域を担保しながら作り上げる。 料理を仕上げて行く
  175. 175. たとえばSTRATEGY SCOPE STRUCTURE まとめ SKELTON SURFACE コラボレーションが生まれる よりよい関係性が求められる A社 B社 このやり方だとリスクが大きくなる
  176. 176. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  177. 177. ご清聴ありがとうございました!!
  178. 178. ® ターゲット消費者のインサイトが「見える」リサーチツール Get Insights for Better Design !! https://www.creativesurvey.jp/ブログやソーシャルメディアで LAB. BLOG最新情報を更新しています。 ブログ facebook Twitter

×