Más contenido relacionado
La actualidad más candente (20)
Similar a レスポンシブ・ウェブデザイン基礎 (20)
Más de masaaki komori (20)
レスポンシブ・ウェブデザイン基礎
- 2. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
自己紹介
こもりまさあき http://blog.gaspanik.com http://protean.im
1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後
そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し
て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容
や立ち位置が異なるため、職域的な肩書きはなし
近著に『レスポンシブ・ウェブデザイン標準ガイド(MdN刊)』
『WordPress 高速化&スマート運用必携ガイド(共著・MdN刊)』、など
Twitter: @cipher / @proteanbm
Facebook: gaspanik
Instagram: @cipher
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 3. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
本日のアジェンダ
• レスポンシブ・ウェブデザインとは
• レスポンシブ・ウェブデザインのワークフロー
• コンテンツファースト & モバイルファースト
• 複数の画面サイズを考慮したワイヤーフレーム
• レスポンシブ・ウェブデザインの実装方法
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 5. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
レスポンシブ・ウェブデザインの概要
• 数年前から注目を集めるコンテンツ配信手法のひとつ
• 1ソースを基本とし、多様なデバイスに対応する
• 現在は、閲覧デバイスの画面サイズに応じて、
レイアウトを切り替えるような意味に捉えられているが、
もう少し広い意味で考える必要がある
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 6. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
実例紹介 ∼The Boston Globe
http://www.bostonglobe.com/
出典: Media Queries http://mediaqueri.es/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 7. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
実例紹介 ∼We Cant Stop Thinking
http://wcst.com/
出典: Media Queries http://mediaqueri.es/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 8. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
実例紹介 ∼Heathlife
http://heathlife.co.uk/
出典: Media Queries http://mediaqueri.es/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 9. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
実例紹介 ∼BreakingNews
http://www.breakingnews.com/
出典: Media Queries http://mediaqueri.es/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 10. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
実例紹介 ∼Pancho Pistolas
http://panchopistolas.com/
出典: Media Queries http://mediaqueri.es/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 11. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
実例紹介 ∼Google News
https://news.google.com/
出典: Media Queries http://mediaqueri.es/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 12. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
実例紹介 ∼Golden Isles, GA
http://www.goldenisles.com/
出典: Media Queries http://mediaqueri.es/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 13. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
実例紹介 ∼Momentum
http://builtwithmomentum.com/
出典: Media Queries http://mediaqueri.es/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 14. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
レスポンシブ・ウェブデザインの向き、不向き
• 既存のPCサイトのコンテンツが
そのままレスポンシブな仕様に移行できるわけではない
• 新規サイトの場合は、コンテンツ内容次第で対応可能
• 単機能のWebアプリ、
コンテンツ量の少ないキャンペーン系のサイトなど
• サイト構造が複雑になればなるほど、設計に負担がかかる
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 18. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
従来型のワークフローで制作可能?
• 企画・設計からデザイン、モックアップ作成、
実装、確認、といったウォータフォール式では問題も
• 対象となるデバイスが増えるだけに
実装後に問題が発生した場合は、最初からやりなおし
• PC向け以上にパフォーマンスが鍵になる
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 20. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
レスポンシブ・ウェブデザインのワークフロー
• 企画・設計、ビジュアルデザインの段階から、
デバイス特性やパフォーマンスへの配慮が必要になる
• ワイヤーやラフは大まかにして、
早期段階からモックアップを作り修正する方がよい
• ウォーターフォールよりも、
アジャイル、スパイラルに近いワークフローが理想
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 24. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
コンテンツ量、データ転送量がキー
• レスポンシブ・ウェブデザインは、
既存のPC向けのコンテンツの内容を
スマートデバイス向けに「非表示にする」ものではない
• コンテンツ量やデータ転送量がキーになる
• より多くのブラウザを一度にサポートすることになる
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 25. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
モバイルや古いブラウザでも見えることを
• どれでも見た目が同じになることはない
• レイアウト切り替えに対応していない、
JavaScriptに非対応の環境でも、
使える、閲覧できることが大事
• 最低限の状態からコンテンツを設計し、
レイアウトやデザインを実装、拡充していく
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 26. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
非対応の環境は、ウィンドウ幅で可変でも
スマートフォンサイズ それ以外のデバイスサイズや非対応環境
1
2
3
単にコンテンツの横幅が伸びるだけでもコンテンツの閲覧に問題はない
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 32. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
これらの複数のデバイスが対象
• 画面サイズの異なるデバイスを対象にするため、
PCサイズ以外では大まかなレイアウトを前提に
• 特にスマートフォンはサイズだけでなく、
機種の特性やブラウザ実装差異が出てくる可能性
• トリッキーな実装で可能なデザインではなく、
最大公約数をとる形で確実に動作することを優先
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 33. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
レイアウト切り替えの代表的なパターン
• サイトの性質や内容、
コンテンツの情報構造によって
レイアウトの切り替えパターンは変わってくる
• コンテンツによって最適な形を考える
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 39. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
デスクトップのレイアウト
出典: Responsive Layouts, Responsively Wireframed http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 40. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
モバイルのレイアウト
出典: Responsive Layouts, Responsively Wireframed http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 43. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
レスポンシブ・ウェブデザインの確認ツール
• 「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
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 44. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
レスポンシブ・ウェブデザインの実装方法
• 現在の主流は、CSSのMedia Queriesを使った手法
• 従来のようなUAによる切り替えも可能
• Media Queriesとサーバサイドを組み合わせる
「RESS(REsponsive + Server Side )」もある
• レイアウト幅は、可変をベースに「%」や「em」で
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 45. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
Media Queries に非対応の環境をどうするか
• Media Queriesを使う場合、
非対応のIE 8以前をどのように扱うか
• 「Respond.js」や「css3mediaqueries.js」を用いる
• IEのみにスタイルシートをわけて提供する
• そもそも対応する必要があるか?
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 46. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
ブレイクポイントの設定方法
• ブレイクポイントとは、
レイアウトの切り替え対象となる横幅のこと
• たとえば、960px / 768px / 320px など
• メジャーブレイクポイントと
マイナーブレイクポイントを組み合わせながら、
より厳密にレイアウトをコントロールしていくことも
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 49. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
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">
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 51. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
環境によってCSSのロードを切り替える最新手法
• Media Queriesでの切り替えではなく、
JavaScriptによってロードするCSSを切り替える
• 「eCSSential」
https://github.com/scottjehl/eCSSential
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 53. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
レスポンシブ・ウェブデザインでの画像の扱い
• レスポンシブ・ウェブデザインで一番の問題
• 同一画像をすべてで使い回すことは現実的ではない
• パフォーマンスを考慮すると、
画面サイズなどで配信画像を切り替える方が理想的
• Retina ディスプレイへの対応はどうする?
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 54. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
環境にあわせた画像配信、現時点での対処方法
• jQueryなどのJSライブラリを使って切り替える
• サーバサイドでCookieや.htaccessを使って切り替える
• サーバサイドで動的に画像を生成し、
それをブラウザ側に配信する形で実装する
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 55. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
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/
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
- 59. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic
・
パフォーマンスの問題、
レイアウトや画像の問題。
実装前の段階からコンテンツ構造含め、
しっかり考えることが、
現時点での最良の手法
2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki