Responsive Web Design について
Responsive Web Design
とは?
Responsive Web Design
メリット・デメリット
Responsive Web Design
プロセス
Responsive Web Design
設計
Responsive Web Design
とは?
Responsive Web Design
メリット・デメリット
Responsive Web Design
プロセス
Responsive Web Design
設計
Responsive Web Design
とは?
ResponsiveDesignとは?
http://www.creativesurvey.jp
ResponsiveDesignとは?
http://adaptive-images.com/
ResponsiveDesignとは?
スクリーン幅に応じて、レイアウトを変える手法
ResponsiveDesignとは?
スクリーン幅に応じて、レイアウトを変える手法
レイアウトの話
なぜ注目されているのか?
ResponsiveDesignとは?
なぜ注目されているのか?
• 様々なデバイスに適応できる
ResponsiveDesignとは?
なぜ注目されているのか?
• 様々なデバイスに適応できる
ResponsiveDesignとは?
• 発行されるURLが一つである
なぜ注目されているのか?
• 様々なデバイスに適応できる
ResponsiveDesignとは?
• 発行されるURLが一つである
• 最新の技術を使用している
特徴なので後述します
なぜ注目されているのか?
• 様々なデバイスに適応できる
ResponsiveDesignとは?
• 発行されるURLが一つである
• 最新の技術を使用している
特徴なので後述します
なぜ注目されているのか?
• 様々なデバイスに適応できる
ResponsiveDesignとは?
• 発行されるURLが一つである
• 最新の技術を使用している
• 新しい考え方への転換
Progressive Enhancement
ResponsiveDesignとは?
新しい考え方
最新のUA(User Agent)で、最高のUX(User Experience)を。
ResponsiveDesignとは?
Progressive Enhancement
新しい考え方
Responsive Design ≠ Cross Browser
ResponsiveDesignとは?
ProgressiveEnhancement
Responsive Design ≠ Cross Browser
ResponsiveDesignとは?
ProgressiveEnhancement
伝える情報をきちんと伝える
Responsive Design ≠ Cross Browser
伝える情報をきちんと伝える
ResponsiveDesignとは?
UAに応じたUXを提供する
ProgressiveEnhancement
Responsive Design ≠ Cross Browser
伝える情報をきちんと伝える
ResponsiveDesignとは?
UAに応じたUXを提供する
ビジュアルエレメントが先行しない
ProgressiveEnhancement
ResponsiveDesignとは?
ProgressiveEnhancement
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
ResponsiveDesignとは?
ProgressiveEnhancement
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
Cross Browser / Regressive Enhancement の一般的なタイムライン
ResponsiveDesignとは?
ProgressiveEnhancement
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
Responsive Designのタイムライン
ResponsiveDesignとは?
ProgressiveEnhancement
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
情報を構造をふまえて表現する
様々なレイアウトを考慮すると、視覚構造と情報構造のミスマッチがおきる
Responsive Designのタイムライン
ResponsiveDesignとは?
ProgressiveEnhancement
HTML
HEAD BODY
HEADER ARTICLE FOOTER
一つの幹が複数の枝を持つ
「分木構造」
表層構造 = 情報構造
ResponsiveDesignとは?
ProgressiveEnhancement
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
情報を構造をふまえて表現する
様々なレイアウトを考慮すると、視覚構造と情報構造のミスマッチがおきる
Responsive Designのタイムライン
Responsive ≠ Liquid / Fluid Layout
混同しやすいイメージ
ResponsiveDesignとは?
Webデザインのレイアウト手法1. Fixed Layout
・固定幅中央揃え
2. Liquid / Fluid Layout・可変幅 横幅目一杯
3. Flexible Layout・可変幅 最大値 / 最小値を固定
4. Elastic Layout・幅を文字数から決定する
ResponsiveDesignとは?
混同しやすいイメージ
ResponsiveDesignとは?
混同しやすいイメージ
Liquid / Fluid Layouthttp://andreagandino.com/
Responsive Web Designhttp://www.creativesurvey.jp/http://adaptive-images.com/
ResponsiveDesignとは?
混同しやすいイメージ
Liquid の時もあるFixed の時もある
Liquid / Fluid Layouthttp://andreagandino.com/
Responsive Web Designhttp://www.creativesurvey.jp/http://adaptive-images.com/
レスポンシブデザインのレイアウトは?
CSS3を使って、Fixed / Liquid Layout を使い分ける
ResponsiveDesignとは?
混同しやすいイメージ
CSS3は古いブラウザでは動かないのでは?
ResponsiveDesignとは?
混同しやすいイメージ
Layout使い分け
ResponsiveDesignとは?
混同しやすいイメージ
Layout使い分け
IE6 IE7 IE8 IE9 IE10(12. 10/26)
Chrome Firefox(3.5+)
Safari
X X X ▲ o o o o
IE7 4%前後IE8 20%前後
1/4に対応できない?
ResponsiveDesignとは?
混同しやすいイメージ
CSS は 「使い分け」のスイッチ
Layout使い分け
ResponsiveDesignとは?
混同しやすいイメージ
1. 使い分け前の状態を通常のサイトとする
CSS は 「使い分け」のスイッチ
Layout使い分け
ResponsiveDesignとは?
混同しやすいイメージ
2. 「使い分け」を別の方法で実現する1. 使い分け前の状態を通常のサイトとする
CSS は 「使い分け」のスイッチ
Layout使い分け
CSS3は古いブラウザでは動かないのでは?
ResponsiveDesignとは?
混同しやすいイメージ
CSSによる使い分けを使わない状態も一つの適応例Responsive
Layout使い分け
まとめ
Responsive Web Design
とは?
スクリーン幅に応じて、レイアウトを変える手法
ProgressiveEnhancement
Layout使い分け
スクリーン幅に応じて、レイアウトを変える手法
Responsive Web Design
とは?
Responsive Web Design
メリット・デメリット
Responsive Web Design
プロセス
Responsive Web Design
設計
Responsive Web Design
メリット・デメリット
Responsive Web Design : メリット
メリットデメリット
様々なデバイスに適応できる
発行されるURLが一つである
CSSシフト
Responsive Web Design : メリット
様々なデバイスに適応できる
発行されるURLが一つである
CSSシフト
メリットデメリット
メリットデメリット
様々なデバイス
様々なデバイス
SmartTV?
メリットデメリット
様々なデバイス
SmartTV?SmartGadgets?
メリットデメリット
様々なデバイス
SmartTV?SmartGadgets?
特定のデバイスをターゲットとせずに、広く情報を発信できる
「シームレスにレイアウトを適応させる」
メリットデメリット
様々なデバイス
SmartTV?SmartGadgets?
特定のデバイスをターゲットとせずに、広く情報を発信できる
「シームレスにレイアウトを適応させる」
Progressive Enhancement
メリットデメリット
様々なデバイス
メリットデメリット
様々なデバイス
メリットデメリット
UAに応じて+αのUXを余白だった部分に展開できる
様々なデバイス
UAに応じて+αのUXを余白だった部分に展開できる
Progressive Enhancement
メリットデメリット
Responsive Web Design : メリット
様々なデバイスに適応できる
発行されるURLが一つである
CSSシフト
メリットデメリット
URLがひとつ
複数の最適化ページの場合
メリットデメリット
URLがひとつ
複数の最適化ページの場合 Responsive Web Designの場合
メリットデメリット
URLがひとつ
修正 / 更新作業
メリットデメリット
URLがひとつ
修正 / 更新作業
メリットデメリット
URLがひとつ
データ / ヴィジュアルが分離していればデータのみの変更ですべてに適応できる
メリットデメリット
HTMLデータソース
CSSデータ修飾
JavaScriptUAに応じた処理
ただし、
URLがひとつ
メリットデメリット
SEO
URLがひとつ
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
メリットデメリット
SEO
URLがひとつ
メリットデメリット
サーバーアプリケーション
メリットデメリット
URLがひとつ
フルスクラッチ
サーバーアプリケーション
メリットデメリット
URLがひとつ
フルスクラッチ
サーバーアプリケーション
デバイス振り分けロジックデバイス分のテンプレート検証
メリットデメリット
URLがひとつ
フルスクラッチ
サーバーアプリケーション
デバイス振り分けロジックデバイス分のテンプレート検証
デバイス振り分けロジックデバイス分のテンプレート検証をHTMLに依存させる
メリットデメリット
URLがひとつ
フルスクラッチ
サーバーアプリケーション
デバイス振り分けロジックデバイス分のテンプレート検証
デバイス振り分けロジックデバイス分のテンプレート検証をHTMLに依存させる
バックエンドとフロントエンドの分離
Responsive Web Design : メリット
様々なデバイスに適応できる
発行されるURLが一つである
CSSシフト
メリットデメリット
メリットデメリット CSSシフト
JavaScriptや画像の扱いを工夫する必要があった。その副作用としていくつかのメリットがあった。
メリットデメリット CSSシフト
ロジック/ヴィジュアル分離
JavaScriptや画像の扱いを工夫する必要があった。その副作用としていくつかのメリットがあった。
メリットデメリット CSSシフト
ロジック/ヴィジュアル分離 パフォーマンス
JavaScriptや画像の扱いを工夫する必要があった。その副作用としていくつかのメリットがあった。
メリットデメリット CSSシフト
ロジック/ヴィジュアル分離 パフォーマンス
レイアウト変更に関わる画像変更
JavaScriptや画像の扱いを工夫する必要があった。その副作用としていくつかのメリットがあった。
メリットデメリット CSSシフト
ロジックビジュアル分離
ヴィジュアルにタッチする部分をCSSに限定した。
メリットデメリット CSSシフト
ロジックビジュアル分離
さりげないJavaScriptの実現に貢献した
ヴィジュアルにタッチする部分をCSSに限定した。
メリットデメリット CSSシフト
ロジックビジュアル分離
HTMLデータソース
さりげないJavaScriptの実現に貢献した
ヴィジュアルにタッチする部分をCSSに限定した。
メリットデメリット CSSシフト
ロジックビジュアル分離
HTMLデータソース
CSSデータ修飾
さりげないJavaScriptの実現に貢献した
ヴィジュアルにタッチする部分をCSSに限定した。
メリットデメリット CSSシフト
ロジックビジュアル分離
HTMLデータソース
CSSデータ修飾
JavaScriptUAに応じた処理
さりげないJavaScriptの実現に貢献した
ヴィジュアルにタッチする部分をCSSに限定した。
メリットデメリット CSSシフト
ロジックビジュアル分離
HTMLデータソース
CSSデータ修飾
JavaScriptUAに応じた処理
低機能UA:補助高機能UA:追加
さりげないJavaScriptの実現に貢献した
ヴィジュアルにタッチする部分をCSSに限定した。
メリットデメリット CSSシフト パフォーマンス
Progressive Enhancementの考えに実現したかった。IEでアニメーションをやめた。
メリットデメリット CSSシフト パフォーマンス
それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる
Progressive Enhancementの考えに実現したかった。IEでアニメーションをやめた。
メリットデメリット CSSシフト パフォーマンス
さらなるロジック/ヴィジュアル
分離パフォーマンス改善
それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる
Progressive Enhancementの考えに実現したかった。IEでアニメーションをやめた。
メリットデメリット CSSシフト 画像置換
画像テキストの使いどころが難しい
メリットデメリット CSSシフト 画像置換
画像
画像
画像
画像
デバイステキストブロック デバイステキストブロック
メリットデメリット CSSシフト 画像置換
画像テキストの使いどころが難しい
テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
メリットデメリット CSSシフト 画像置換
柔軟なレイアウト
画像テキストの使いどころが難しい
テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
メリットデメリット CSSシフト 画像置換
柔軟なレイアウト ファイル転送量縮小
画像テキストの使いどころが難しい
テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
メリットデメリット CSSシフト 画像置換
柔軟なレイアウト ファイル転送量縮小 Retina対応簡略化
画像テキストの使いどころが難しい
テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
Responsive Web Design : デメリット
開発コストが割高である?
モバイル向けの”最適化”ではない
プラグイン・広告に注意
メリットデメリット
Responsive Web Design : デメリット
開発コストが割高である?
モバイル向けの”最適化”ではない
プラグイン・広告に注意
メリットデメリット
開発コストメリットデメリット
開発コストが高いという印象を持たれている
開発コストメリットデメリット
開発コストが高いという印象を持たれている
それほど難しいと感じなかった
開発コストメリットデメリット
開発コストが高いという印象を持たれている
それほど難しいと感じなかった
なぜ?
1. 制作者の習熟度に依存する部分が大きい
2. 設計:実装が密に連携する場面がある可能性が強い
開発コストメリットデメリット
Responsive Web Design : デメリット
開発コストが割高である?
モバイル向けの”最適化”ではない
プラグイン・広告に注意
メリットデメリット
モバイル最適化
メリットデメリット
モバイル向けの最適化とは何か?
モバイル最適化
メリットデメリット
モバイル向けの最適化とは何か?
モバイルに適したコンテンツ
モバイル最適化
メリットデメリット
モバイル向けの最適化とは何か?
モバイルに適したレイアウト
モバイルに適したコンテンツ
モバイル最適化
メリットデメリット
モバイル向けの最適化とは何か?
モバイルに適したレイアウト
ファイル転送量の削減
モバイルに適したコンテンツ
モバイル最適化
メリットデメリット
モバイル向けの最適化とは何か?
モバイルに適したレイアウト
ファイル転送量の削減
モバイルに適したコンテンツ
モバイル最適化
メリットデメリット
(実装的な)無理が生じない分にはResponsiveで対応可能
コンテンツレイアウト
モバイルでしかできないことはモバイルでやるべき条件分岐の処理分のパフォーマンスは落ちる
モバイル最適化
メリットデメリット
モバイル向けの最適化とは何か?
モバイルに適したレイアウト
ファイル転送量の削減
モバイルに適したコンテンツ
モバイル最適化
メリットデメリット
不必要な画像の読み込みが発生する?
不必要な画像
モバイル最適化
メリットデメリット
不必要な画像の読み込みが発生する?
imgタグ 背景画像
モバイル最適化
メリットデメリット
imgタグと背景画像の2パターンで実験
ウィンドウサイズ
モバイル最適化
メリットデメリット
imgタグ:ページ読み込み時のリソース
モバイル最適化
メリットデメリット
背景画像:ページ読み込み時のリソース
モバイル最適化
メリットデメリット
非表示の背景画像は読み込まれません
モバイル最適化
メリットデメリット
非表示の背景画像は読み込まれません
データソースとしてのHTML
モバイル最適化
メリットデメリット
非表示の背景画像は読み込まれません
データソースとしてのHTML
表示装飾としてのCSS
モバイル最適化
メリットデメリット
非表示の背景画像は読み込まれません
データソースとしてのHTML
表示装飾としてのCSS
表示すべき=読み込むべき
モバイル最適化
メリットデメリット
不必要な画像の読み込みが発生する?
imgタグ 背景画像
CSSシフト
モバイル最適化
メリットデメリット
背景画像
CSSシフト
ブラウザのハック実装の手間
imgである必要がある
モバイル最適化
メリットデメリット
背景画像
CSSシフト
ブラウザのハック実装の手間
imgである必要がある
不必要な画像の読み込みは発生します
Responsive Web Design : デメリット
メリットデメリット
開発コストが割高である?
モバイル向けの”最適化”ではない
プラグイン・広告に注意
可変サイズに対応できるか見えないときに動作するか
プラグイン広告
メリットデメリット
まとめ
様々なデバイスに適応できる
発行されるURLが一つである
CSSシフト
モバイル最適化 プラグイン
開発コスト
メリット デメリット
Responsive Web Design
とは?
Responsive Web Design
メリット・デメリット
Responsive Web Design
プロセス
Responsive Web Design
設計
Responsive Web Design
プロセス
ブラウザごとの挙動を決定する
IE6 IE7 IE8 IE9 IE10(12. 10/26)
Chrome Firefox(3.5+)
Safari
X X X ▲ o o o o
CSS3 対応表
ブラウザ挙動
プロセス
IE6 IE7 IE8 IE9 IE10(12. 10/26)
Chrome Firefox(3.5+)
Safari
X X X ▲ o o o o
IE6 IE7 IE8 IE9 IE10(12. 10/26)
Chrome Firefox(3.5+)
Safari
default default default ! responsive responsive responsive responsive
CSS3 対応表
ブラウザ挙動
プロセス
IE6 IE7 IE8 IE9 IE10(12. 10/26)
Chrome Firefox(3.5+)
Safari
X X X ▲ o o o o
CSS3 対応表
IE6 IE7 IE8 IE9 IE10(12. 10/26)
Chrome Firefox(3.5+)
Safari
default default default ! responsive responsive responsive responsive
可変カラム不可!!
ブラウザ挙動
プロセス
ヴィジュアルデザインを組む上での制約が決定
IE9 > IE8 モード, default: 1024px fixed
ブラウザ挙動
プロセス
ヴィジュアルデザイン
レイアウト分岐数を決める
0. 1200px +
1. 1024px
2. 768px
3. 480px
4. 320px
ヴィジュアルデザイン
プロセス
例えば5つ
レイアウト分岐数を決める
0. 1200px +
1. 1024px
2. 768px
3. 480px
4. 320px
ページ単位ではなくボックス単位。
レイアウトに変更があれば作成する。
ヴィジュアルデザイン
プロセス
例えば5つ
1. Fixed Layout・固定幅中央揃え
2. Liquid / Fluid Layout・可変幅 横幅目一杯
3. Flexible Layout・可変幅 最大値 / 最小値を固定
4. Elastic Layout・幅を文字数から決定する
レイアウトを決める
ヴィジュアルデザイン
プロセス
1. Fixed Layout・固定幅中央揃え
2. Liquid / Fluid Layout・可変幅 横幅目一杯
3. Flexible Layout・可変幅 最大値 / 最小値を固定
4. Elastic Layout・幅を文字数から決定する
レイアウトを決める1024~768のようにシームレスを前提としてレイアウトを決定。
ヴィジュアルデザイン
プロセス
1. Fixed Layout・固定幅中央揃え
2. Liquid / Fluid Layout・可変幅 横幅目一杯
3. Flexible Layout・可変幅 最大値 / 最小値を固定
4. Elastic Layout・幅を文字数から決定する
レイアウトを決める1024~768のようにシームレスを前提としてレイアウトを決定。
ワイヤーフレームでも同様に、カラムになる場合はレイアウトを考える
ヴィジュアルデザイン
プロセス
実装
シームレスかどうか
実装プロセス
シームレスかどうか
画像
画像
デバイステキストブロック
実装プロセス
シームレスかどうか
画像
画像
画像
画像
デバイステキストブロック デバイステキストブロック
実装プロセス
シームレスかどうか
画像
画像
画像
画像
デバイステキストブロック デバイステキストブロック
はみ出る
折り返す
実装
文章構造と情報構造が一致しているか
実装プロセス
文章構造と情報構造が一致しているか
メニュー1
メニュー2
文言変更
並び順
実装プロセス
文章構造と情報構造が一致しているか
メニュー1
メニュー2
文言変更 �
並び順 ▲
実装プロセス
文章構造と情報構造が一致しているか
メニュー1
メニュー2
文言変更 �
並び順 ▲
隠しておく
実装プロセス
文章構造と情報構造が一致しているか
HTMLデータソース
CSSデータ修飾
JavaScriptUAに応じた処理
実装プロセス
文章構造と情報構造が一致しているか
HTMLデータソース
CSSデータ修飾
JavaScriptUAに応じた処理
ページ読み込みの段階から変更を加える考え方はNG
実装プロセス
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
実装プロセス
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
弊社内で完結したのでスムーズだったが、実際の案件単位では未知数
実装プロセス
まとめ
まとめ
レイアウト挙動
まとめ
ビジュアルデザイン
レイアウト挙動
まとめ
実装協議ビジュアルデザイン
レイアウト挙動
Responsive Web Design
とは?
Responsive Web Design
メリット・デメリット
Responsive Web Design
プロセス
Responsive Web Design
設計
Responsive Web Design
設計
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
情報を構造をふまえて表現する
様々なレイアウトを考慮すると、表層構造と情報構造のミスマッチがおきる
Responsive Designのタイムライン
表層構造 = 情報構造
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
情報を構造をふまえて表現する
様々なレイアウトを考慮すると、表層構造と情報構造のミスマッチがおきる
Responsive Designのタイムライン
表層構造 = 情報構造重要!
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
表層構造 = 情報構造
どのぐらい重要?
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
表層構造 = 情報構造
ユーザーに負荷
非効率な処理実現不可能
どのぐらい重要?
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
表層構造 = 情報構造
ユーザーに負荷
非効率な処理実現不可能
どのぐらい重要?
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
表層構造 = 情報構造
ユーザーに負荷
非効率な処理実現不可能
どのぐらい重要?
事故を前提にするようなもの
コスト スケジュール クオリティ
言い換えると
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE今まで以上に両面から考える必要性
今までのリニアなやり方なら、表層構造はある程度無視できた
高度化
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE今まで以上に両面から考える必要性
今までと同様
どのように高度化するのか。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE今まで以上に両面から考える必要性
表層構造においてあるべき姿を理解する
どのように高度化するのか。
HTML構造 HTMLタグの意味 実装コスト
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE今まで以上に両面から考える必要性
表層構造においてあるべき姿を理解する
どのように高度化するのか。
HTML構造 HTMLタグの意味 実装コスト
それって現実的?
理想的な解決
理想的な解決
・情報設計の担当がもともと知識が超豊富HTMLや最新のJS/CSS事情にも詳しいレベル
・情報設計の担当がそのままデザインと実装を行う自己完結すれば問題が顕在化しない。
・情報設計の必要がないぐらい作るものがシンプル
理想的な解決
・情報設計の担当がもともと知識が超豊富HTMLや最新のJS/CSS事情にも詳しいレベル
・情報設計の担当がそのままデザインと実装を行う自己完結すれば問題が顕在化しない。
・情報設計の必要がないぐらい作るものがシンプル
?
理想的な解決
・情報設計の担当がもともと知識が超豊富HTMLや最新のJS/CSS事情にも詳しいレベル
・情報設計の担当がそのままデザインと実装を行う自己完結すれば問題が顕在化しない。
・情報設計の必要がないぐらい作るものがシンプル
?
?
理想的な解決
・情報設計の担当がもともと知識が超豊富HTMLや最新のJS/CSS事情にも詳しいレベル
・情報設計の担当がそのままデザインと実装を行う自己完結すれば問題が顕在化しない。
・情報設計の必要がないぐらい作るものがシンプル今あるレスポンシブデザインはこういうものが多い
?
?
?
現実的な解決
1:専門知識は専門家に。
2:担当領域の分担と分離。
1:専門知識は専門家に。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
IA担当だけでなくみんなで考える
1:専門知識は専門家に。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
IA担当だけでなくみんなで考える
デザイナーデベロッパーエンジニア
1:専門知識は専門家に。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
IA担当だけでなくみんなで考える
デザイナーデベロッパーエンジニア
反復型チーム開発マネジメント
WFは仕様書ではなくなる
1:専門知識は専門家に。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
IA担当だけでなくみんなで考える
デザイナーデベロッパーエンジニア
反復型チーム開発マネジメント
WFは仕様書ではなくなる
情報設計の不確実性をサポートする体制
2:担当領域の分担と分離
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
素材や分量や優先順位を作り上げる。 料理を仕上げて行く
表層の専門領域を担保しながら
現実的な解決
1:専門知識は専門家に。
2:担当領域の分担と分離。
情報設計のレイヤーで表層領域の専門性を付加。のちの変更を受け入れる意識的なマネジメント。
情報設計の工程を分担し、具体化を分離する。その後の検証も含めて分担できる可能性。
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
コンサル 4D
たとえば
B社A社
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
B社
たとえば
このやり方だとリスクが大きくなる
A社
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
IA担当だけでなくみんなで考える
デザイナーデベロッパーエンジニア
素材や分量や優先順位を作り上げる。 料理を仕上げて行く
表層の専門領域を担保しながら
STRATEGY
SCOPE
STRUCTURE
SKELTON
SURFACE
A社 B社
たとえば
このやり方だとリスクが大きくなる
コラボレーションが生まれるよりよい関係性が求められる
まとめ
Responsive Web Design
とは?
Responsive Web Design
メリット・デメリット
Responsive Web Design
プロセス
Responsive Web Design
設計
ご清聴ありがとうございました!!
ターゲット消費者のインサイトが「見える」リサーチツール
®
Get Insights for Better Design !!
https://www.creativesurvey.jp/
ブログやソーシャルメディアで最新情報を更新しています。
Twitterfacebook
LAB. BLOG
ブログ