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

1. Responsive Web Design について

2. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design
とは？ メリット・デメリット プロセス 設計

3. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design
とは？ メリット・デメリット プロセス 設計

4. Responsive Web Design
とは？

5. Responsive
Design
とは？

6. Responsive
Design
とは？
http://www.creativesurvey.jp
http://adaptive-images.com/

7. Responsive
Design
とは？
スクリーン幅に応じて、レイアウトを変える手法

8. Responsive
Design
とは？
スクリーン幅に応じて、レイアウトを変える手法
レイアウトの話

9. Responsive
Design
とは？
なぜ注目されているのか？

10. Responsive
Design
とは？
なぜ注目されているのか？
• 様々なデバイスに適応できる

11. Responsive
Design
とは？
なぜ注目されているのか？
• 様々なデバイスに適応できる
• 発行されるURLが一つである

12. Responsive
Design
とは？
なぜ注目されているのか？
• 様々なデバイスに適応できる
• 発行されるURLが一つである
• 最新の技術を使用している

13. Responsive
Design
とは？
なぜ注目されているのか？
• 様々なデバイスに適応できる
特徴なので
• 発行されるURLが一つである 後述します
• 最新の技術を使用している

14. Responsive
Design
とは？
なぜ注目されているのか？
• 様々なデバイスに適応できる
特徴なので
• 発行されるURLが一つである 後述します
• 最新の技術を使用している
• 新しい考え方への転換

15. Responsive 新しい
Design
とは？ 考え方
Progressive Enhancement

16. Responsive 新しい
Design
とは？ 考え方
Progressive Enhancement
最新のUA(User Agent)で、
最高のUX(User Experience)を。

17. Responsive
Progressive
Design
Enhancement
とは？
Responsive Design ≠ Cross Browser

18. Responsive
Progressive
Design
Enhancement
とは？
Responsive Design ≠ Cross Browser
伝える情報をきちんと伝える

19. Responsive
Progressive
Design
Enhancement
とは？
Responsive Design ≠ Cross Browser
伝える情報をきちんと伝える
UAに応じたUXを提供する

20. Responsive
Progressive
Design
Enhancement
とは？
Responsive Design ≠ Cross Browser
伝える情報をきちんと伝える
UAに応じたUXを提供する
ビジュアルエレメントが先行しない

21. Responsive
Progressive
Design
Enhancement
とは？
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE

22. Responsive
Progressive
Design
Enhancement
とは？
Cross Browser / Regressive Enhancement の一般的なタイムライン
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE

23. Responsive
Progressive
Design
Enhancement
とは？
Responsive Designのタイムライン
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE

24. Responsive
Progressive
Design
Enhancement
とは？
情報を構造をふまえて表現する
Responsive Designのタイムライン
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
様々なレイアウトを考慮すると、
視覚構造と情報構造のミスマッチがおきる

25. Responsive
Progressive
Design
Enhancement
とは？
一つの幹が複数の枝を持つ
HTML 「分木構造」
表層構造 = 情報構造
HEAD BODY
HEADER ARTICLE FOOTER

26. Responsive
Progressive
Design
Enhancement
とは？
情報を構造をふまえて表現する
Responsive Designのタイムライン
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
様々なレイアウトを考慮すると、
視覚構造と情報構造のミスマッチがおきる

27. Responsive
Design
とは？
Responsive ≠ Liquid / Fluid Layout
混同しやすいイメージ

28. Responsive
混同しやすい
Design
とは？ イメージ
Webデザインのレイアウト手法
1. Fixed Layout
・固定幅中央 え
2. Liquid / Fluid Layout
・可変幅 横幅目一杯
3. Flexible Layout
・可変幅 最大値 / 最小値を固定
4. Elastic Layout
・幅を文字数から決定する

29. Responsive
混同しやすい
Design
とは？ イメージ
Liquid / Fluid Layout
http://andreagandino.com/
Responsive Web Design
http://www.creativesurvey.jp/
http://adaptive-images.com/

30. Responsive
混同しやすい
Design
とは？ イメージ
Liquid / Fluid Layout
http://andreagandino.com/
Responsive Web Design
http://www.creativesurvey.jp/ Liquid の時もある
http://adaptive-images.com/
Fixed の時もある

31. Responsive
混同しやすい
Design
とは？ イメージ
レスポンシブデザインのレイアウトは？
CSS3を使って、
Fixed / Liquid Layout を使い分ける

32. Responsive
混同しやすい Layout
Design
使い分け
とは？ イメージ
CSS3は古いブラウザでは動かないのでは？

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. Responsive
混同しやすい Layout
Design
使い分け
とは？ イメージ
CSS は 「使い分け」のスイッチ

35. Responsive
混同しやすい Layout
Design
使い分け
とは？ イメージ
CSS は 「使い分け」のスイッチ
1. 使い分け前の状態を通常のサイトとする

36. Responsive
混同しやすい Layout
Design
使い分け
とは？ イメージ
CSS は 「使い分け」のスイッチ
1. 使い分け前の状態を通常のサイトとする
2. 「使い分け」を別の方法で実現する

37. Responsive
混同しやすい Layout
Design
使い分け
とは？ イメージ
CSS3は古いブラウザでは動かないのでは？
Responsive
CSSによる使い分けを使わない状態も一つの適応例

38. まとめ

39. Responsive Web Design
とは？

40. スクリーン幅に応じて、レイアウトを変える手法

41. スクリーン幅に応じて、レイアウトを変える手法
Progressive Layout
Enhancement 使い分け

42. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design
とは？ メリット・デメリット プロセス 設計

43. Responsive Web Design
メリット・デメリット

44. メリット
デメリット
Responsive Web Design : メリット
様々なデバイスに 発行されるURLが
CSSシフト
適応できる 一つである

45. メリット
デメリット
Responsive Web Design : メリット
様々なデバイスに 発行されるURLが
CSSシフト
適応できる 一つである

46. メリット 様々な
デメリット デバイス

47. メリット 様々な
デメリット デバイス
SmartTV?

48. メリット 様々な
デメリット デバイス
SmartGadgets? SmartTV?

49. メリット 様々な
デメリット デバイス
SmartGadgets? SmartTV?
特定のデバイスをターゲットとせずに、広く情報を発信できる
「シームレスにレイアウトを適応させる」

50. メリット 様々な
デメリット デバイス
SmartGadgets? SmartTV?
特定のデバイスをターゲットとせずに、広く情報を発信できる
「シームレスにレイアウトを適応させる」
Progressive Enhancement

51. メリット 様々な
デメリット デバイス

52. メリット 様々な
デメリット デバイス
UAに応じて+αのUXを余白だった部分に展開できる

53. メリット 様々な
デメリット デバイス
UAに応じて+αのUXを余白だった部分に展開できる
Progressive Enhancement

54. メリット
デメリット
Responsive Web Design : メリット
様々なデバイスに 発行されるURLが
CSSシフト
適応できる 一つである

55. メリット URLが
デメリット ひとつ
複数の最適化ページの場合

56. メリット URLが
デメリット ひとつ
複数の最適化ページの場合 Responsive Web Designの場合

57. メリット URLが
デメリット ひとつ
修正 / 更新作業

58. メリット URLが
デメリット ひとつ
修正 / 更新作業

59. メリット URLが
デメリット ひとつ
ただし、
HTML CSS JavaScript
データソース データ修飾 UAに応じた処理
データ / ヴィジュアルが分離していれば
データのみの変更ですべてに適応できる

60. メリット URLが
デメリット ひとつ
SEO

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. メリット URLが
デメリット ひとつ
サーバーアプリケーション

63. メリット URLが
デメリット ひとつ
サーバーアプリケーション
フルスクラッチ

64. メリット URLが
デメリット ひとつ
サーバーアプリケーション
デバイス振り分けロジック
デバイス分のテンプレート検証
フルスクラッチ

65. メリット URLが
デメリット ひとつ
サーバーアプリケーション
デバイス振り分けロジック
デバイス分のテンプレート検証
フルスクラッチ
デバイス振り分けロジック
デバイス分のテンプレート検証
をHTMLに依存させる

66. メリット URLが
デメリット ひとつ
サーバーアプリケーション
デバイス振り分けロジック
デバイス分のテンプレート検証
フルスクラッチ
デバイス振り分けロジック
デバイス分のテンプレート検証
をHTMLに依存させる
バックエンドとフロントエンドの分離

67. メリット
デメリット
Responsive Web Design : メリット
様々なデバイスに 発行されるURLが
CSSシフト
適応できる 一つである

68. メリット
CSSシフト
デメリット
JavaScriptや画像の扱いを工夫する必要があった。
その副作用としていくつかのメリットがあった。

69. メリット
CSSシフト
デメリット
JavaScriptや画像の扱いを工夫する必要があった。
その副作用としていくつかのメリットがあった。
ロジック/ヴィジュアル
分離

70. メリット
CSSシフト
デメリット
JavaScriptや画像の扱いを工夫する必要があった。
その副作用としていくつかのメリットがあった。
ロジック/ヴィジュアル
パフォーマンス
分離

71. メリット
CSSシフト
デメリット
JavaScriptや画像の扱いを工夫する必要があった。
その副作用としていくつかのメリットがあった。
ロジック/ヴィジュアル レイアウト変更に
パフォーマンス
分離 関わる画像変更

72. ロジック
メリット
CSSシフト ビジュアル
デメリット
分離
ヴィジュアルにタッチする部分をCSSに限定した。

73. ロジック
メリット
CSSシフト ビジュアル
デメリット
分離
ヴィジュアルにタッチする部分をCSSに限定した。
さりげないJavaScriptの実現に貢献した

74. ロジック
メリット
CSSシフト ビジュアル
デメリット
分離
ヴィジュアルにタッチする部分をCSSに限定した。
さりげないJavaScriptの実現に貢献した
HTML
データソース

75. ロジック
メリット
CSSシフト ビジュアル
デメリット
分離
ヴィジュアルにタッチする部分をCSSに限定した。
さりげないJavaScriptの実現に貢献した
HTML CSS
データソース データ修飾

76. ロジック
メリット
CSSシフト ビジュアル
デメリット
分離
ヴィジュアルにタッチする部分をCSSに限定した。
さりげないJavaScriptの実現に貢献した
HTML CSS JavaScript
データソース データ修飾 UAに応じた処理

77. ロジック
メリット
CSSシフト ビジュアル
デメリット
分離
ヴィジュアルにタッチする部分をCSSに限定した。
さりげないJavaScriptの実現に貢献した
低機能UA：補助
高機能UA：追加
HTML CSS JavaScript
データソース データ修飾 UAに応じた処理

78. メリット
CSSシフト パフォーマンス
デメリット
Progressive Enhancementの考えに実現したかった。
IEでアニメーションをやめた。

79. メリット
CSSシフト パフォーマンス
デメリット
Progressive Enhancementの考えに実現したかった。
IEでアニメーションをやめた。
それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる

80. メリット
CSSシフト パフォーマンス
デメリット
Progressive Enhancementの考えに実現したかった。
IEでアニメーションをやめた。
それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる
さらなる
ロジック/ヴィジュアル パフォーマンス改善
分離

81. メリット
CSSシフト 画像置換
デメリット
画像テキストの使いどころが難しい

82. メリット
CSSシフト 画像置換
デメリット
画像 画像
画像 画像
デバイステキストブロック デバイステキスト
ブロック

83. メリット
CSSシフト 画像置換
デメリット
画像テキストの使いどころが難しい
テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した

84. メリット
CSSシフト 画像置換
デメリット
画像テキストの使いどころが難しい
テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
柔軟なレイアウト

85. メリット
CSSシフト 画像置換
デメリット
画像テキストの使いどころが難しい
テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
柔軟なレイアウト ファイル転送量縮小

86. メリット
CSSシフト 画像置換
デメリット
画像テキストの使いどころが難しい
テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
柔軟なレイアウト ファイル転送量縮小 Retina対応簡略化

87. メリット
デメリット
Responsive Web Design : デメリット
開発コストが モバイル向けの プラグイン・広告
割高である? ”最適化”ではない に注意

88. メリット
デメリット
Responsive Web Design : デメリット
開発コストが モバイル向けの プラグイン・広告
割高である? ”最適化”ではない に注意

89. メリット
開発コスト
デメリット
開発コストが高いという印象を持たれている

90. メリット
開発コスト
デメリット
開発コストが高いという印象を持たれている
それほど難しいと感じなかった

91. メリット
開発コスト
デメリット
開発コストが高いという印象を持たれている
なぜ？
それほど難しいと感じなかった

92. メリット
開発コスト
デメリット
1. 制作者の習熟度に依存する部分が大きい
2. 設計:実装が密に連携する場面がある可能性が強い

93. メリット
デメリット
Responsive Web Design : デメリット
開発コストが モバイル向けの プラグイン・広告
割高である? ”最適化”ではない に注意

94. メリット モバイル
デメリット 最適化
モバイル向けの最適化とは何か？

95. メリット モバイル
デメリット 最適化
モバイル向けの最適化とは何か？
モバイルに適したコンテンツ

96. メリット モバイル
デメリット 最適化
モバイル向けの最適化とは何か？
モバイルに適したコンテンツ
モバイルに適したレイアウト

97. メリット モバイル
デメリット 最適化
モバイル向けの最適化とは何か？
モバイルに適したコンテンツ
モバイルに適したレイアウト
ファイル転送量の削減

98. メリット モバイル
デメリット 最適化
モバイル向けの最適化とは何か？
モバイルに適したコンテンツ
モバイルに適したレイアウト
ファイル転送量の削減

99. メリット モバイル コンテンツ
デメリット 最適化 レイアウト
（実装的な）無理が生じない分にはResponsiveで対応可能
モバイルでしかできないことはモバイルでやるべき
条件分岐の処理分のパフォーマンスは落ちる

100. メリット モバイル
デメリット 最適化
モバイル向けの最適化とは何か？
モバイルに適したコンテンツ
モバイルに適したレイアウト
ファイル転送量の削減

101. メリット モバイル 不必要な
デメリット 最適化 画像
不必要な画像の読み込みが発生する？

102. メリット モバイル
デメリット 最適化
不必要な画像の読み込みが発生する？
imgタグ 背景画像

103. メリット モバイル
デメリット 最適化
imgタグと背景画像の２パターンで実験
ウィンドウサイズ

104. メリット モバイル
デメリット 最適化
imgタグ：ページ読み込み時のリソース

105. メリット モバイル
デメリット 最適化
背景画像：ページ読み込み時のリソース

106. メリット モバイル
デメリット 最適化
非表示の背景画像は読み込まれません

107. メリット モバイル
デメリット 最適化
非表示の背景画像は読み込まれません
データソースとしての
HTML

108. メリット モバイル
デメリット 最適化
非表示の背景画像は読み込まれません
データソースとしての 表示装飾としての
HTML CSS

109. メリット モバイル
デメリット 最適化
非表示の背景画像は読み込まれません
データソースとしての 表示装飾としての
HTML CSS
表示すべき=読み込むべき

110. メリット モバイル
デメリット 最適化
不必要な画像の読み込みが発生する？
imgタグ 背景画像
CSSシフト

111. メリット モバイル
デメリット 最適化
ブラウザのハック
背景画像 実装の手間
CSSシフト
imgである必要がある

112. メリット モバイル
デメリット 最適化
ブラウザのハック
背景画像 実装の手間
CSSシフト
imgである必要がある
不必要な画像の読み込みは発生します

113. メリット
デメリット
Responsive Web Design : デメリット
開発コストが モバイル向けの プラグイン・広告
割高である? ”最適化”ではない に注意

114. メリット プラグイン
デメリット 広告
可変サイズに対応できるか
見えないときに動作するか

115. まとめ

116. メリット デメリット
CSSシフト 開発コスト
様々なデバイスに 発行されるURLが
モバイル最適化 プラグイン
適応できる 一つである

117. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design
とは？ メリット・デメリット プロセス 設計

118. Responsive Web Design
プロセス

119. ブラウザごとの
挙動を決定する

120. ブラウザ
プロセス
挙動
CSS3 対応表
IE10 Firefox
IE6 IE7 IE8 IE9 Chrome Safari
(12. 10/26) (3.5+)
X X X ▲ o o o o

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. ブラウザ
プロセス
挙動
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. ブラウザ
プロセス
挙動
ヴィジュアルデザインを組む上での制約が決定
IE9 > IE8 モード, default: 1024px fixed

124. ヴィジュアル
デザイン

125. ヴィジュアル
プロセス
デザイン
レイアウト分岐数を決める
例えば５つ
0. 1200px +
1. 1024px
2. 768px
3. 480px
4. 320px

126. ヴィジュアル
プロセス
デザイン
レイアウト分岐数を決める
0. 1200px + ページ単位ではなく
例えば５つ
ボックス単位。
1. 1024px レイアウトに変更が
あれば作成する。
2. 768px
3. 480px
4. 320px

127. ヴィジュアル
プロセス
デザイン
レイアウトを決める
1. Fixed Layout
・固定幅中央 え
2. Liquid / Fluid Layout
・可変幅 横幅目一杯
3. Flexible Layout
・可変幅 最大値 / 最小値を固定
4. Elastic Layout
・幅を文字数から決定する

128. ヴィジュアル
プロセス
デザイン
レイアウトを決める
1. Fixed Layout 1024~768のように
・固定幅中央 え シームレスを
2. Liquid / Fluid Layout 前提として
・可変幅 横幅目一杯 レイアウトを決定。
3. Flexible Layout
・可変幅 最大値 / 最小値を固定
4. Elastic Layout
・幅を文字数から決定する

129. ヴィジュアル
プロセス
デザイン
レイアウトを決める
1. Fixed Layout 1024~768のように
・固定幅中央 え シームレスを
2. Liquid / Fluid Layout 前提として
・可変幅 横幅目一杯 レイアウトを決定。
3. Flexible Layout
・可変幅 最大値 / 最小値を固定
4. Elastic Layout ワイヤーフレームで
・幅を文字数から決定する も同様に、
カラムになる場合は
レイアウトを考える

130. 実装

131. プロセス 実装
シームレスかどうか

132. プロセス 実装
シームレスかどうか
画像
画像
デバイステキストブロック

133. プロセス 実装
シームレスかどうか
画像 画像
画像 画像
デバイステキストブロック デバイステキスト
ブロック

134. 実装
シームレスかどうか はみ出る
画像 画像
画像 画像
デバイステキストブロック デバイステキスト
ブロック
折り返す

135. プロセス 実装
文章構造と情報構造が一致しているか

136. プロセス 実装
文章構造と情報構造が一致しているか
メニュー１ 文言変更
メニュー２ 並び順

137. プロセス 実装
文章構造と情報構造が一致しているか
メニュー１ 文言変更
メニュー２ 並び順 ▲

138. プロセス 実装
文章構造と情報構造が一致しているか
メニュー１ 文言変更
メニュー２ 並び順 ▲
隠しておく

139. プロセス 実装
文章構造と情報構造が一致しているか
HTML CSS JavaScript
データソース データ修飾 UAに応じた処理

140. プロセス 実装
文章構造と情報構造が一致しているか
ページ読み込みの段階から
変更を加える考え方はNG
HTML CSS JavaScript
データソース データ修飾 UAに応じた処理

141. プロセス 実装
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE

142. プロセス 実装
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
弊社内で完結したのでスムーズだったが、実際の案件単位では未知数

143. まとめ

144. まとめ
レイアウト
挙動

145. まとめ
レイアウト ビジュアル
挙動 デザイン

146. まとめ
レイアウト ビジュアル
実装協議
挙動 デザイン

147. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design
とは？ メリット・デメリット プロセス 設計

148. Responsive Web Design
設計

149. 情報を構造をふまえて表現する
Responsive Designのタイムライン
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
様々なレイアウトを考慮すると、
表層構造と情報構造のミスマッチがおきる
表層構造 = 情報構造

150. 情報を構造をふまえて表現する
Responsive Designのタイムライン
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
様々なレイアウトを考慮すると、
表層構造と情報構造のミスマッチがおきる
表層構造 = 情報構造
重要！

151. どのぐらい重要？
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
表層構造 = 情報構造

152. どのぐらい重要？
STRATEGY
SCOPE
STRUCTURE
SKELTON ユーザーに負荷
SURFACE
実現不可能 非効率な処理
表層構造 = 情報構造

153. どのぐらい重要？
STRATEGY
SCOPE
STRUCTURE
SKELTON ユーザーに負荷
SURFACE
実現不可能 非効率な処理
表層構造 = 情報構造

154. どのぐらい重要？
STRATEGY
SCOPE
STRUCTURE
SKELTON ユーザーに負荷
SURFACE
実現不可能 非効率な処理
表層構造 = 情報構造
事故を前提にするようなもの
コスト スケジュール クオリティ

155. 言い換えると

156. 今までのリニアなやり方なら、
表層構造はある程度無視できた
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
今まで以上に
両面から
考える必要性
高度化

157. どのように高度化するのか。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
今まで以上に
両面から
考える必要性
今までと同様

158. どのように高度化するのか。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
今まで以上に
両面から
考える必要性
表層構造において
あるべき姿を理解する
HTML構造 HTMLタグの意味 実装コスト

159. どのように高度化するのか。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
今まで以上に
両面から
考える必要性
表層構造において
それって現実的？
あるべき姿を理解する
HTML構造 HTMLタグの意味 実装コスト

160. 理想的な解決

161. 理想的な解決
・情報設計の担当がもともと知識が超豊富
HTMLや最新のJS／CSS事情にも詳しいレベル
・情報設計の担当がそのままデザインと実装を行う
自己完結すれば問題が顕在化しない。
・情報設計の必要がないぐらい作るものがシンプル

162. 理想的な解決
？ ・情報設計の担当がもともと知識が超豊富
HTMLや最新のJS／CSS事情にも詳しいレベル
・情報設計の担当がそのままデザインと実装を行う
自己完結すれば問題が顕在化しない。
・情報設計の必要がないぐらい作るものがシンプル

163. 理想的な解決
？ ・情報設計の担当がもともと知識が超豊富
HTMLや最新のJS／CSS事情にも詳しいレベル
？ ・情報設計の担当がそのままデザインと実装を行う
自己完結すれば問題が顕在化しない。
・情報設計の必要がないぐらい作るものがシンプル

164. 理想的な解決
？ ・情報設計の担当がもともと知識が超豊富
HTMLや最新のJS／CSS事情にも詳しいレベル
？ ・情報設計の担当がそのままデザインと実装を行う
自己完結すれば問題が顕在化しない。
？ ・情報設計の必要がないぐらい作るものがシンプル
今あるレスポンシブデザインはこういうものが多い

165. 現実的な解決
１：専門知識は専門家に。
２：担当領域の分担と分離。

166. １：専門知識は専門家に。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
IA担当だけでなく
みんなで考える

167. １：専門知識は専門家に。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
IA担当だけでなく
みんなで考える
デザイナー
デベロッパー
エンジニア

168. １：専門知識は専門家に。
STRATEGY
SCOPE
STRUCTURE
WFは仕様書ではなくなる
SKELTON
SURFACE
IA担当だけでなく
みんなで考える
デザイナー
デベロッパー
エンジニア
反復型チーム開発マネジメント

169. １：専門知識は専門家に。
STRATEGY
SCOPE
STRUCTURE
WFは仕様書ではなくなる
SKELTON
情報設計の不確実性を
IA担当だけでなく
SURFACE
サポートする体制
みんなで考える
デザイナー
デベロッパー
エンジニア
反復型チーム開発マネジメント

170. ２：担当領域の分担と分離
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
素材や分量や優先順位を 表層の専門領域を担保しながら
作り上げる。 料理を仕上げて行く

171. 現実的な解決
１：専門知識は専門家に。
情報設計のレイヤーで表層領域の専門性を付加。
のちの変更を受け入れる意識的なマネジメント。
２：担当領域の分担と分離。
情報設計の工程を分担し、具体化を分離する。
その後の検証も含めて分担できる可能性。

172. たとえば
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
コンサル
A社 4D
B社

173. たとえば
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
A社 B社
このやり方だとリスクが大きくなる

174. STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
IA担当だけでなく
みんなで考える
デザイナー
デベロッパー
エンジニア
素材や分量や優先順位を 表層の専門領域を担保しながら
作り上げる。 料理を仕上げて行く

175. たとえば
STRATEGY
SCOPE
STRUCTURE
まとめ SKELTON
SURFACE
コラボレーションが生まれる
よりよい関係性が求められる
A社 B社
このやり方だとリスクが大きくなる

176. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design
とは？ メリット・デメリット プロセス 設計

177. ご清聴ありがとうございました!!

178. ®
ターゲット消費者のインサイトが「見える」リサーチツール
Get Insights for Better Design !!
https://www.creativesurvey.jp/
ブログやソーシャルメディアで LAB. BLOG
最新情報を更新しています。
ブログ facebook Twitter