レスポンシブ・ウェブデザイン基礎

レスポンシブウェブデザイン基礎 Responsive Web Design Basic
・

レスポンシブ・ウブデザイ
ェン基礎
Responsive Web Design Basic

こもりまさあき

2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki

・

自己紹介
こもりまさあき http://blog.gaspanik.com http://protean.im

1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後
そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し
て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容
や立ち位置が異なるため、職域的な肩書きはなし

近著に『レスポンシブ・ウェブデザイン標準ガイド（MdN刊）』
『WordPress 高速化＆スマート運用必携ガイド（共著・MdN刊）』、など

Twitter: @cipher / @proteanbm
Facebook: gaspanik
Instagram: @cipher


・

本日のアジェンダ

• レスポンシブ・ウェブデザインとは

• レスポンシブ・ウェブデザインのワークフロー

• コンテンツファースト & モバイルファースト

• 複数の画面サイズを考慮したワイヤーフレーム

• レスポンシブ・ウェブデザインの実装方法


・

レポシ・ェデイと
スンブウブザンは


・

レスポンシブ・ウェブデザインの概要

• 数年前から注目を集めるコンテンツ配信手法のひとつ
• 1ソースを基本とし、多様なデバイスに対応する
• 現在は、閲覧デバイスの画面サイズに応じて、
レイアウトを切り替えるような意味に捉えられているが、
もう少し広い意味で考える必要がある


・

実例紹介 ∼The Boston Globe

http://www.bostonglobe.com/

出典: Media Queries http://mediaqueri.es/


・

実例紹介 ∼We Cant Stop Thinking

http://wcst.com/



・

実例紹介 ∼Heathlife

http://heathlife.co.uk/



・

実例紹介 ∼BreakingNews

http://www.breakingnews.com/



・

実例紹介 ∼Pancho Pistolas

http://panchopistolas.com/



・

実例紹介 ∼Google News

https://news.google.com/



・

実例紹介 ∼Golden Isles, GA

http://www.goldenisles.com/



・

実例紹介 ∼Momentum

http://builtwithmomentum.com/



・

レスポンシブ・ウェブデザインの向き、不向き

• 既存のPCサイトのコンテンツが
そのままレスポンシブな仕様に移行できるわけではない

• 新規サイトの場合は、コンテンツ内容次第で対応可能
• 単機能のWebアプリ、
コンテンツ量の少ないキャンペーン系のサイトなど

• サイト構造が複雑になればなるほど、設計に負担がかかる


・

レスポンシブ・ウェブデザインは万能薬ではない


・

ただ、多様化するWebの配信手法のひとつにはなりえる


・

レスポンシブ・ウェブデザインのワークフロー


・

従来型のワークフローで制作可能？

• 企画・設計からデザイン、モックアップ作成、
実装、確認、といったウォータフォール式では問題も

• 対象となるデバイスが増えるだけに
実装後に問題が発生した場合は、最初からやりなおし

• PC向け以上にパフォーマンスが鍵になる


・

最悪の場合は、一番最初に戻ってしまう


・

レスポンシブ・ウェブデザインのワークフロー

• 企画・設計、ビジュアルデザインの段階から、
デバイス特性やパフォーマンスへの配慮が必要になる

• ワイヤーやラフは大まかにして、
早期段階からモックアップを作り修正する方がよい

• ウォーターフォールよりも、
アジャイル、スパイラルに近いワークフローが理想


・

最初の設計、早めのモックアップ


・

開発初期段階から、デバイス特性やパフォーマンスを意識


・

コンテンツファースト&モバイルファースト


・

コンテンツ量、データ転送量がキー

• レスポンシブ・ウェブデザインは、
既存のPC向けのコンテンツの内容を
スマートデバイス向けに「非表示にする」ものではない

• コンテンツ量やデータ転送量がキーになる

• より多くのブラウザを一度にサポートすることになる


・

モバイルや古いブラウザでも見えることを

• どれでも見た目が同じになることはない

• レイアウト切り替えに対応していない、
JavaScriptに非対応の環境でも、
使える、閲覧できることが大事

• 最低限の状態からコンテンツを設計し、
レイアウトやデザインを実装、拡充していく


・

非対応の環境は、ウィンドウ幅で可変でも
スマートフォンサイズそれ以外のデバイスサイズや非対応環境

1

2

3

単にコンテンツの横幅が伸びるだけでもコンテンツの閲覧に問題はない


・

PCサイトを先行して考えると失敗する可能性が高くなる


・

どこかで何かをトレードオフする必要がある


・

コンテンツファースト、モバイルファーストの方が考えやすい


・

複数の画面サイズを考慮したワイヤーフレーム

©asidemag.com


・

現在市場に出回るデバイスの画面幅の違い


・

これらの複数のデバイスが対象

• 画面サイズの異なるデバイスを対象にするため、
PCサイズ以外では大まかなレイアウトを前提に

• 特にスマートフォンはサイズだけでなく、
機種の特性やブラウザ実装差異が出てくる可能性

• トリッキーな実装で可能なデザインではなく、
最大公約数をとる形で確実に動作することを優先


・

レイアウト切り替えの代表的なパターン

• サイトの性質や内容、
コンテンツの情報構造によって
レイアウトの切り替えパターンは変わってくる

• コンテンツによって最適な形を考える


・

1. 可変することを前提にしたパターン


・

2. カラムを落としてしまうパターン


・

3. レイアウトそのものを変えてしまうパターン


・

4. 1カラムをベースとしたパターン


・

5. 見えない領域を使うパターン


・

デスクトップのレイアウト

出典: Responsive Layouts, Responsively Wireframed http://www.thismanslife.co.uk/projects/lab/responsivewireframes/


・

モバイルのレイアウト

出典: Responsive Layouts, Responsively Wireframed http://www.thismanslife.co.uk/projects/lab/responsivewireframes/


・

PXベースのデザインは、PCサイト向けでしか考えにくい


・

レスポンシブ・ウェブデザインの確認ツール

• 「Responsive.is」
http://responsive.is/

• 「The Responsinator」
http://www.responsinator.com/

• 「ScreenQueri.es」
http://screenqueri.es/

• 「Aptus」
http://itunes.apple.com/gb/app/aptus/id510487565?mt=12


・

レスポンシブ・ウェブデザインの実装方法

• 現在の主流は、CSSのMedia Queriesを使った手法

• 従来のようなUAによる切り替えも可能

• Media Queriesとサーバサイドを組み合わせる
「RESS（REsponsive + Server Side ）」もある

• レイアウト幅は、可変をベースに「%」や「em」で


・

Media Queries に非対応の環境をどうするか

• Media Queriesを使う場合、
非対応のIE 8以前をどのように扱うか

• 「Respond.js」や「css3mediaqueries.js」を用いる

• IEのみにスタイルシートをわけて提供する

• そもそも対応する必要があるか？


・

ブレイクポイントの設定方法

• ブレイクポイントとは、
レイアウトの切り替え対象となる横幅のこと

• たとえば、960px / 768px / 320px など

• メジャーブレイクポイントと
マイナーブレイクポイントを組み合わせながら、
より厳密にレイアウトをコントロールしていくことも


・

ブレイクポイントの設定例


・

さらに細かく設定すると…


・

Media Queriesを使った設定例

<link rel="stylesheet" media="screen" href="css/base.css">

<link rel="stylesheet" media="only screen and
(min-width:767px) " href="css/tablet.css">

<link rel="stylesheet" media="only screen and
(min-width:768px)" href="css/desktop.css">


・

ブレイクポイントを複雑にすれば、詳細なデザインコントロールも


・

環境によってCSSのロードを切り替える最新手法

• Media Queriesでの切り替えではなく、
JavaScriptによってロードするCSSを切り替える

• 「eCSSential」
https://github.com/scottjehl/eCSSential


・

レスポンシブ・ウェブデザインのもうひとつの課題


・

レスポンシブ・ウェブデザインでの画像の扱い

• レスポンシブ・ウェブデザインで一番の問題

• 同一画像をすべてで使い回すことは現実的ではない

• パフォーマンスを考慮すると、
画面サイズなどで配信画像を切り替える方が理想的

• Retina ディスプレイへの対応はどうする？


・

環境にあわせた画像配信、現時点での対処方法

• jQueryなどのJSライブラリを使って切り替える

• サーバサイドでCookieや.htaccessを使って切り替える

• サーバサイドで動的に画像を生成し、
それをブラウザ側に配信する形で実装する


・

JavaScriptを使った画像の切り替え

• 「Responsive-Images」
https://github.com/filamentgroup/Responsive-Images

• 「responsive_image_tag」
https://github.com/futurechimp/responsive_image_tag

• 「Retina.js」
http://retinajs.com/

• 「Retina Images」
http://retina-images.complexcompulsions.com/


・

PHP + mod_rewriteを使うAdaptive-Images


・

<picture>要素があればいいのに…、という流れに


・

レスポンシブ・ウェブデザインは、まだまだ解決する課題がある


・

パフォーマンスの問題、
レイアウトや画像の問題。
実装前の段階からコンテンツ構造含め、
しっかり考えることが、
現時点での最良の手法


・

では、簡単にデモを


レスポンシブ・ウェブデザイン基礎

More Related Content

What's hot

Similar to レスポンシブ・ウェブデザイン基礎

More from masaaki komori

レスポンシブ・ウェブデザイン基礎