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

Responsive Web Design について

Responsive Web Design

とは？


メリット・デメリット


プロセス


設計


とは？




プロセス


設計


とは？

ResponsiveDesignとは？

http://www.creativesurvey.jp


http://adaptive-images.com/





http://adaptive-images.com

http://adaptive-images.com




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



レイアウトの話

なぜ注目されているのか？



• 様々なデバイスに適応できる





• 発行されるURLが一つである





• 最新の技術を使用している

特徴なので後述します






特徴なので後述します






• 新しい考え方への転換

Progressive Enhancement


新しい考え方

最新のUA(User Agent)で、最高のUX(User Experience)を。



新しい考え方

Responsive Design ≠ Cross Browser


ProgressiveEnhancement




伝える情報をきちんと伝える




UAに応じたUXを提供する





UAに応じたUXを提供する

ビジュアルエレメントが先行しない




STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE



STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE

Cross Browser / Regressive Enhancement の一般的なタイムライン



STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE

Responsive Designのタイムライン



STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE

情報を構造をふまえて表現する

様々なレイアウトを考慮すると、視覚構造と情報構造のミスマッチがおきる




HTML

HEAD BODY

HEADER ARTICLE FOOTER

一つの幹が複数の枝を持つ

「分木構造」

表層構造 = 情報構造



STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE


様々なレイアウトを考慮すると、視覚構造と情報構造のミスマッチがおきる


Responsive ≠ Liquid / Fluid Layout

混同しやすいイメージ


Webデザインのレイアウト手法1. Fixed Layout

・固定幅中央揃え

2. Liquid / Fluid Layout・可変幅横幅目一杯

3. Flexible Layout・可変幅最大値 / 最小値を固定

4. Elastic Layout・幅を文字数から決定する





Liquid / Fluid Layouthttp://andreagandino.com/

Responsive Web Designhttp://www.creativesurvey.jp/http://adaptive-images.com/

http://andreagandino.com/


http://www.freelenz.at/


http://www.creativesurvey.jp/






Liquid の時もあるFixed の時もある

Liquid / Fluid Layouthttp://andreagandino.com/

Responsive Web Designhttp://www.creativesurvey.jp/http://adaptive-images.com/









レスポンシブデザインのレイアウトは？

CSS3を使って、Fixed / Liquid Layout を使い分ける



CSS3は古いブラウザでは動かないのでは？



Layout使い分け



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に対応できない？



CSS は「使い分け」のスイッチ

Layout使い分け



1. 使い分け前の状態を通常のサイトとする


Layout使い分け



2. 「使い分け」を別の方法で実現する1. 使い分け前の状態を通常のサイトとする


Layout使い分け

CSS3は古いブラウザでは動かないのでは？



CSSによる使い分けを使わない状態も一つの適応例Responsive

Layout使い分け

まとめ


とは？



Layout使い分け



とは？




プロセス


設計



Responsive Web Design : メリット

メリットデメリット

様々なデバイスに適応できる

発行されるURLが一つである

CSSシフト




CSSシフト



様々なデバイス


SmartTV?



SmartTV?SmartGadgets?




特定のデバイスをターゲットとせずに、広く情報を発信できる

「シームレスにレイアウトを適応させる」




特定のデバイスをターゲットとせずに、広く情報を発信できる

「シームレスにレイアウトを適応させる」







UAに応じて+αのUXを余白だった部分に展開できる


UAに応じて+αのUXを余白だった部分に展開できる






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



http://livepage.apple.com/

http://livepage.apple.com/

URLがひとつ


サーバーアプリケーション


URLがひとつ

フルスクラッチ



URLがひとつ



デバイス振り分けロジックデバイス分のテンプレート検証


URLがひとつ




デバイス振り分けロジックデバイス分のテンプレート検証をHTMLに依存させる


URLがひとつ




デバイス振り分けロジックデバイス分のテンプレート検証をHTMLに依存させる

バックエンドとフロントエンドの分離




CSSシフト


メリットデメリット CSSシフト

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


ロジック/ヴィジュアル分離



ロジック/ヴィジュアル分離パフォーマンス



ロジック/ヴィジュアル分離パフォーマンス

レイアウト変更に関わる画像変更



ロジックビジュアル分離

ヴィジュアルにタッチする部分をCSSに限定した。



さりげないJavaScriptの実現に貢献した










CSSデータ修飾






CSSデータ修飾







CSSデータ修飾


低機能UA：補助高機能UA：追加　



メリットデメリット CSSシフトパフォーマンス

Progressive Enhancementの考えに実現したかった。IEでアニメーションをやめた。


それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる



さらなるロジック/ヴィジュアル

分離パフォーマンス改善

それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる


メリットデメリット CSSシフト画像置換

画像テキストの使いどころが難しい


画像

画像

画像

画像

デバイステキストブロックデバイステキストブロック



テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した


柔軟なレイアウト




柔軟なレイアウトファイル転送量縮小




柔軟なレイアウトファイル転送量縮小 Retina対応簡略化



Responsive Web Design : デメリット

開発コストが割高である?

モバイル向けの”最適化”ではない

プラグイン・広告に注意







開発コストメリットデメリット

開発コストが高いという印象を持たれている



それほど難しいと感じなかった



それほど難しいと感じなかった

なぜ？

1. 制作者の習熟度に依存する部分が大きい

2. 設計:実装が密に連携する場面がある可能性が強い







モバイル最適化


モバイル向けの最適化とは何か？




モバイルに適したコンテンツ




モバイルに適したレイアウト






ファイル転送量の削減










（実装的な）無理が生じない分にはResponsiveで対応可能

コンテンツレイアウト

モバイルでしかできないことはモバイルでやるべき条件分岐の処理分のパフォーマンスは落ちる









不必要な画像の読み込みが発生する？

不必要な画像




imgタグ背景画像



imgタグと背景画像の２パターンで実験

ウィンドウサイズ



imgタグ：ページ読み込み時のリソース



背景画像：ページ読み込み時のリソース



非表示の背景画像は読み込まれません




データソースとしてのHTML





表示装飾としてのCSS





表示装飾としてのCSS

表示すべき=読み込むべき




imgタグ背景画像

CSSシフト



背景画像

CSSシフト

ブラウザのハック実装の手間

imgである必要がある



背景画像

CSSシフト

ブラウザのハック実装の手間

imgである必要がある

不必要な画像の読み込みは発生します






可変サイズに対応できるか見えないときに動作するか

プラグイン広告


まとめ



CSSシフト

モバイル最適化プラグイン

開発コスト



とは？




プロセス


設計


プロセス

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

IE6 IE7 IE8 IE9 IE10(12. 10/26)


Safari

X X X ▲ o o o o

CSS3 対応表

ブラウザ挙動

プロセス

IE6 IE7 IE8 IE9 IE10(12. 10/26)


Safari

X X X ▲ o o o o

IE6 IE7 IE8 IE9 IE10(12. 10/26)


Safari

default default default ! responsive responsive responsive responsive

CSS3 対応表

ブラウザ挙動

プロセス

IE6 IE7 IE8 IE9 IE10(12. 10/26)


Safari

X X X ▲ o o o o

CSS3 対応表

IE6 IE7 IE8 IE9 IE10(12. 10/26)


Safari

default default default ! responsive responsive responsive responsive

可変カラム不可!!

ブラウザ挙動

プロセス

ヴィジュアルデザインを組む上での制約が決定

IE9 > IE8 モード, default: 1024px fixed

ブラウザ挙動

プロセス

ヴィジュアルデザイン

レイアウト分岐数を決める

0. 1200px +

1. 1024px

2. 768px

3. 480px

4. 320px


プロセス

例えば５つ

レイアウト分岐数を決める

0. 1200px +

1. 1024px

2. 768px

3. 480px

4. 320px

ページ単位ではなくボックス単位。

レイアウトに変更があれば作成する。


プロセス

例えば５つ

1. Fixed Layout・固定幅中央揃え




レイアウトを決める


プロセス





レイアウトを決める1024~768のようにシームレスを前提としてレイアウトを決定。


プロセス





レイアウトを決める1024~768のようにシームレスを前提としてレイアウトを決定。

ワイヤーフレームでも同様に、カラムになる場合はレイアウトを考える


プロセス

実装

シームレスかどうか

実装プロセス


画像

画像

デバイステキストブロック

実装プロセス


画像

画像

画像

画像


実装プロセス


画像

画像

画像

画像


はみ出る

折り返す

実装

文章構造と情報構造が一致しているか

実装プロセス


メニュー１

メニュー２

文言変更

並び順

実装プロセス


メニュー１

メニュー２

文言変更　�

並び順　▲

実装プロセス


メニュー１

メニュー２

文言変更　�

並び順　▲

隠しておく

実装プロセス



CSSデータ修飾


実装プロセス



CSSデータ修飾


ページ読み込みの段階から変更を加える考え方はNG

実装プロセス

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





STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE





事故を前提にするようなもの

コストスケジュールクオリティ

言い換えると

STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE今まで以上に両面から考える必要性

今までのリニアなやり方なら、表層構造はある程度無視できた

高度化

STRATEGY

SCOPE

STRUCTURE

SKELTON


今までと同様

どのように高度化するのか。

STRATEGY

SCOPE

STRUCTURE

SKELTON


表層構造においてあるべき姿を理解する


HTML構造 HTMLタグの意味実装コスト

STRATEGY

SCOPE

STRUCTURE

SKELTON


表層構造においてあるべき姿を理解する


HTML構造 HTMLタグの意味実装コスト

それって現実的？

理想的な解決

理想的な解決

・情報設計の担当がもともと知識が超豊富HTMLや最新のJS／CSS事情にも詳しいレベル

・情報設計の担当がそのままデザインと実装を行う自己完結すれば問題が顕在化しない。

・情報設計の必要がないぐらい作るものがシンプル

理想的な解決




？

理想的な解決




？

？

理想的な解決



・情報設計の必要がないぐらい作るものがシンプル今あるレスポンシブデザインはこういうものが多い

？

？

？

現実的な解決

１：専門知識は専門家に。

２：担当領域の分担と分離。


STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE

IA担当だけでなくみんなで考える


STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE


デザイナーデベロッパーエンジニア


STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE



反復型チーム開発マネジメント

WFは仕様書ではなくなる


STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE



反復型チーム開発マネジメント

WFは仕様書ではなくなる

情報設計の不確実性をサポートする体制

２：担当領域の分担と分離

STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE

素材や分量や優先順位を作り上げる。料理を仕上げて行く

表層の専門領域を担保しながら

現実的な解決


２：担当領域の分担と分離。

情報設計のレイヤーで表層領域の専門性を付加。のちの変更を受け入れる意識的なマネジメント。

情報設計の工程を分担し、具体化を分離する。その後の検証も含めて分担できる可能性。

STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE

コンサル 4D

たとえば

B社A社

STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE

B社

たとえば

このやり方だとリスクが大きくなる

A社

STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE



素材や分量や優先順位を作り上げる。料理を仕上げて行く

表層の専門領域を担保しながら

STRATEGY

SCOPE

STRUCTURE

SKELTON

SURFACE

A社 B社

たとえば

このやり方だとリスクが大きくなる

コラボレーションが生まれるよりよい関係性が求められる

まとめ


とは？




プロセス


設計

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

ターゲット消費者のインサイトが「見える」リサーチツール

®

Get Insights for Better Design !!

https://www.creativesurvey.jp/

ブログやソーシャルメディアで最新情報を更新しています。

Twitterfacebook

LAB. BLOG

ブログ





https://twitter.com/CREATIVE_SURVEY

















http://www.facebook.com/creativesurvey














https://www.creativesurvey.jp/blog/






Technology

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