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

Responsive Web Design について

Responsive Web Design

とは？

メリット・デメリット

プロセス

設計

とは？

プロセス

設計

とは？

ResponsiveDesignとは？

http://www.creativesurvey.jp

http://adaptive-images.com/

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

レイアウトの話

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

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

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

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

特徴なので後述します

• 新しい考え方への転換

Progressive Enhancement

新しい考え方

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

新しい考え方

Responsive Design ≠ Cross Browser

ProgressiveEnhancement

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

UAに応じたUXを提供する

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

Responsive Designのタイムライン

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

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

HEAD BODY

HEADER ARTICLE FOOTER

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

「分木構造」

表層構造 = 情報構造

STRATEGY

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/

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

Liquid / Fluid Layouthttp://andreagandino.com/

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

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

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

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

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シフト

様々なデバイス

SmartTV?

SmartTV?SmartGadgets?

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

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

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

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

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

CSSシフト

URLがひとつ

複数の最適化ページの場合

URLがひとつ

複数の最適化ページの場合 Responsive Web Designの場合

URLがひとつ

修正 / 更新作業

URLがひとつ

修正 / 更新作業

URLがひとつ

データ / ヴィジュアルが分離していればデータのみの変更ですべてに適応できる

HTMLデータソース

CSSデータ修飾

JavaScriptUAに応じた処理

ただし、

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

URLがひとつ

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

URLがひとつ

フルスクラッチ

URLがひとつ

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

URLがひとつ

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

URLがひとつ

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

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

CSSシフト

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

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

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

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

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

ロジックビジュアル分離

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

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

CSSデータ修飾

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

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

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

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

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

分離パフォーマンス改善

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

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

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

画像

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

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

柔軟なレイアウト

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

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

Responsive Web Design : デメリット

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

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

プラグイン・広告に注意

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

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

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

なぜ？

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

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

モバイル最適化

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

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

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

ファイル転送量の削減

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

コンテンツレイアウト

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

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

不必要な画像

imgタグ背景画像

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

ウィンドウサイズ

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

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

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

データソースとしてのHTML

表示装飾としての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

STRUCTURE

SKELTON

SURFACE

実装プロセス

STRATEGY

STRUCTURE

SKELTON

SURFACE

弊社内で完結したのでスムーズだったが、実際の案件単位では未知数

実装プロセス

まとめ

レイアウト挙動

まとめ

ビジュアルデザイン

まとめ

実装協議ビジュアルデザイン

とは？

プロセス

設計

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

表層構造 = 情報構造重要！

STRATEGY

STRUCTURE

SKELTON

SURFACE

どのぐらい重要？

STRATEGY

STRUCTURE

SKELTON

SURFACE

ユーザーに負荷

非効率な処理実現不可能

STRATEGY

STRUCTURE

SKELTON

SURFACE

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

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

言い換えると

STRATEGY

STRUCTURE

SKELTON

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

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

高度化

STRATEGY

STRUCTURE

SKELTON

今までと同様

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

STRATEGY

STRUCTURE

SKELTON

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

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

STRATEGY

STRUCTURE

SKELTON

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

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

それって現実的？

理想的な解決

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

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

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

理想的な解決

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

現実的な解決

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

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

WFは仕様書ではなくなる

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

WFは仕様書ではなくなる

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

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

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

現実的な解決

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

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

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

コンサル 4D

たとえば

B社A社

STRATEGY

STRUCTURE

SKELTON

SURFACE

たとえば

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

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

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

STRATEGY

STRUCTURE

SKELTON

SURFACE

A社 B社

たとえば

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

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

まとめ

とは？

プロセス

設計

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

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

Get Insights for Better Design !!

https://www.creativesurvey.jp/

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

Twitterfacebook

LAB. BLOG

ブログ

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

Technology

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

No.20 InInfo! NO. 20 03 新ウェブデザイン 「Info!」No.16で述べたように新しいウェブデザインは京都大学ヴィジュアルアイデンティティ（VI）・ガイドブック

Responsive Design - Responsive UX Strategy

レスポンシブWebデザイン ワークフロー

Dreamweaver CS6で作るレスポンシブWebデザイン

ウェブデザインにおける動きの演出について - WCAN 2014 Autumn

レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~

Building Responsive Layoutsxiemin.me/wp-content/uploads/2012/11/Building-Responsive-Layouts… · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by .

HTML5＆CSS3、レスポンシブWebデザインに対応！ 月Web ...mw2pa9wekp.bizmw.com/images/kunren/pdf/r3/r3_1_webd.pdfHTML5＆CSS3、レスポンシブWebデザインに対応！令和2年度職業訓練のご案内

Responsive & Responsible: Implementing Responsive Design at Scale

· Web viewDJAG is responsive and high performing DJAG is responsive and high performing DJAG is responsive and high performing DJAG is responsive and high performing DJAG is responsive

Techniques for Flexible Responsive Visualization Designjhoffs/website/... · alization, visualization authoring, and responsive web design. Responsive Web Design While responsive

WISS 2019 レスポンシブ Web デザインのための画像形式及び制 … › WISS2019Proceedings › longteaser › 01.pdf · WISS 2019 レスポンシブWebデザインのための画像形式及び制作用インターフェース

ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう！実装編』

Responsive eLearning Design and Developmentsifytechnologies.com/.../2017/06/Responsive-Design-and-Development... · Responsive eLearning Design and Development ... Enter Responsive

About ResponsiveAdsaddemos.responsiveads.com/responsive-web-design-and... · 2013-03-12 · Responsive Web Design and implement Responsive Advertising solutions now. In short, responsive

151117 レスポンシブECサイトの設計方法と運用改善について

Cloud Circus · ・レスポンシブ化 ・見たまま編集機能 ・カテゴリ・タグ管理機能 ・レスポンシブ化 ・簡単公開機能 ・閲覧者管理（企業・個人）機能

Responsive Design - Magento · Responsive Design . 16-fold growth in responsive ecommerce . Responsive Design is a won debate •3 types of audience •Tried and tested base responsive

Culturally Responsive Differentiated Instruction ...educ625spring2011.pbworks.com/f/Culturally+Responsive...Culturally Responsive Differentiated Instruction: Narrowing Gaps ... include

Responsive Designchochev.eu › html › 6. Responsive-Design-and-animations.pdf4 RESPONSIVE DESIGN •Responsive design (adaptive design) is an approach to optimize the viewing experience

No.20 InInfo! NO. 20 03 新ウェブデザイン「Info!」No.16で述べたように新しいウェブデザインは京都大学ヴィジュアルアイデンティティ（VI）・ガイドブック

レスポンシブWebデザインワークフロー

レスポンシブ基礎　~Webサイトをレスポンシブにする方法とそのメリット~

HTML5＆CSS3、レスポンシブWebデザインに対応！月Web ...mw2pa9wekp.bizmw.com/images/kunren/pdf/r3/r3_1_webd.pdfHTML5＆CSS3、レスポンシブWebデザインに対応！令和2年度職業訓練のご案内

ADC OnAir 第5回『レスポンシブ Web デザインを学ぼう！実装編』

Cloud Circus · ・レスポンシブ化・見たまま編集機能・カテゴリ・タグ管理機能・レスポンシブ化・簡単公開機能・閲覧者管理（企業・個人）機能