Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

102,867 views

Published on

Yahoo! JAPAN 社内セミナー用資料

Published in: Design
  • Be the first to comment

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

  1. 1. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウ ブデザイ ェ ン基礎 Responsive Web Design Basic こもりまさあき2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  2. 2. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・自己紹介こもりまさあき http://blog.gaspanik.com  http://protean.im1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行して従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし近著に『レスポンシブ・ウェブデザイン標準ガイド(MdN刊)』『WordPress 高速化&スマート運用必携ガイド(共著・MdN刊)』、などTwitter: @cipher / @proteanbmFacebook: gaspanikInstagram: @cipher2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  3. 3. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ 本日のアジェンダ • レスポンシブ・ウェブデザインとは • レスポンシブ・ウェブデザインのワークフロー • コンテンツファースト & モバイルファースト • 複数の画面サイズを考慮したワイヤーフレーム • レスポンシブ・ウェブデザインの実装方法2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  4. 4. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・レ ポ シ ・ ェ デ イ と ス ン ブ ウ ブ ザ ン は2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  5. 5. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・レスポンシブ・ウェブデザインの概要 • 数年前から注目を集めるコンテンツ配信手法のひとつ • 1ソースを基本とし、多様なデバイスに対応する • 現在は、閲覧デバイスの画面サイズに応じて、 レイアウトを切り替えるような意味に捉えられているが、 もう少し広い意味で考える必要がある2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  6. 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. 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. 8. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・実例紹介 ∼Heathlife http://heathlife.co.uk/ 出典: Media Queries http://mediaqueri.es/2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  9. 9. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・実例紹介 ∼BreakingNews http://www.breakingnews.com/ 出典: Media Queries http://mediaqueri.es/2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  10. 10. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・実例紹介 ∼Pancho Pistolas http://panchopistolas.com/ 出典: Media Queries http://mediaqueri.es/2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  11. 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. 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. 13. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・実例紹介 ∼Momentum http://builtwithmomentum.com/ 出典: Media Queries http://mediaqueri.es/2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  14. 14. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・レスポンシブ・ウェブデザインの向き、不向き • 既存のPCサイトのコンテンツが そのままレスポンシブな仕様に移行できるわけではない • 新規サイトの場合は、コンテンツ内容次第で対応可能 • 単機能のWebアプリ、 コンテンツ量の少ないキャンペーン系のサイトなど • サイト構造が複雑になればなるほど、設計に負担がかかる2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  15. 15. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウェブデザインは万能薬ではない2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  16. 16. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ ただ、多様化するWebの配信手法のひとつにはなりえる2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  17. 17. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・レスポンシブ・ウェブデザインのワークフロー2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  18. 18. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・従来型のワークフローで制作可能? • 企画・設計からデザイン、モックアップ作成、 実装、確認、といったウォータフォール式では問題も • 対象となるデバイスが増えるだけに 実装後に問題が発生した場合は、最初からやりなおし • PC向け以上にパフォーマンスが鍵になる2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  19. 19. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・最悪の場合は、一番最初に戻ってしまう2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  20. 20. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・レスポンシブ・ウェブデザインのワークフロー • 企画・設計、ビジュアルデザインの段階から、 デバイス特性やパフォーマンスへの配慮が必要になる • ワイヤーやラフは大まかにして、 早期段階からモックアップを作り修正する方がよい • ウォーターフォールよりも、 アジャイル、スパイラルに近いワークフローが理想2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  21. 21. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・最初の設計、早めのモックアップ2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  22. 22. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ 開発初期段階から、デバイス特性やパフォーマンスを意識2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  23. 23. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・コンテンツファースト&モバイルファースト2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  24. 24. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・コンテンツ量、データ転送量がキー • レスポンシブ・ウェブデザインは、 既存のPC向けのコンテンツの内容を スマートデバイス向けに「非表示にする」ものではない • コンテンツ量やデータ転送量がキーになる • より多くのブラウザを一度にサポートすることになる2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  25. 25. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・モバイルや古いブラウザでも見えることを • どれでも見た目が同じになることはない • レイアウト切り替えに対応していない、 JavaScriptに非対応の環境でも、 使える、閲覧できることが大事 • 最低限の状態からコンテンツを設計し、 レイアウトやデザインを実装、拡充していく2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  26. 26. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・非対応の環境は、ウィンドウ幅で可変でも スマートフォンサイズ それ以外のデバイスサイズや非対応環境 1 2 3 単にコンテンツの横幅が伸びるだけでもコンテンツの閲覧に問題はない2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  27. 27. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ PCサイトを先行して考えると失敗する可能性が高くなる2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  28. 28. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ どこかで何かをトレードオフする必要がある2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  29. 29. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ コンテンツファースト、モバイルファーストの方が考えやすい2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  30. 30. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・複数の画面サイズを考慮したワイヤーフレーム ©asidemag.com2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  31. 31. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・現在市場に出回るデバイスの画面幅の違い2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  32. 32. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・これらの複数のデバイスが対象 • 画面サイズの異なるデバイスを対象にするため、 PCサイズ以外では大まかなレイアウトを前提に • 特にスマートフォンはサイズだけでなく、 機種の特性やブラウザ実装差異が出てくる可能性 • トリッキーな実装で可能なデザインではなく、 最大公約数をとる形で確実に動作することを優先2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  33. 33. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・レイアウト切り替えの代表的なパターン • サイトの性質や内容、 コンテンツの情報構造によって レイアウトの切り替えパターンは変わってくる • コンテンツによって最適な形を考える2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  34. 34. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・1. 可変することを前提にしたパターン2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  35. 35. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・2. カラムを落としてしまうパターン2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  36. 36. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・3. レイアウトそのものを変えてしまうパターン2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  37. 37. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・4. 1カラムをベースとしたパターン2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  38. 38. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・5. 見えない領域を使うパターン2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  39. 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. 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
  41. 41. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ PXベースのデザインは、PCサイト向けでしか考えにくい2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  42. 42. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・レスポンシブ・ウェブデザインの実装 ©asidemag.com2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  43. 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=122012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  44. 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. 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. 46. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ブレイクポイントの設定方法 • ブレイクポイントとは、 レイアウトの切り替え対象となる横幅のこと • たとえば、960px / 768px / 320px など • メジャーブレイクポイントと マイナーブレイクポイントを組み合わせながら、 より厳密にレイアウトをコントロールしていくことも2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  47. 47. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ブレイクポイントの設定例2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  48. 48. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・さらに細かく設定すると…2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  49. 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
  50. 50. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ ブレイクポイントを複雑にすれば、詳細なデザインコントロールも2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  51. 51. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・環境によってCSSのロードを切り替える最新手法 • Media Queriesでの切り替えではなく、 JavaScriptによってロードするCSSを切り替える • 「eCSSential」 https://github.com/scottjehl/eCSSential2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  52. 52. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウェブデザインのもうひとつの課題2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  53. 53. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・レスポンシブ・ウェブデザインでの画像の扱い • レスポンシブ・ウェブデザインで一番の問題 • 同一画像をすべてで使い回すことは現実的ではない • パフォーマンスを考慮すると、 画面サイズなどで配信画像を切り替える方が理想的 • Retina ディスプレイへの対応はどうする?2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  54. 54. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・環境にあわせた画像配信、現時点での対処方法 • jQueryなどのJSライブラリを使って切り替える • サーバサイドでCookieや.htaccessを使って切り替える • サーバサイドで動的に画像を生成し、 それをブラウザ側に配信する形で実装する2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  55. 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
  56. 56. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・PHP + mod_rewriteを使うAdaptive-Images2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  57. 57. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ <picture>要素があればいいのに…、という流れに2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  58. 58. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウェブデザインは、まだまだ解決する課題がある2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  59. 59. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ パフォーマンスの問題、 レイアウトや画像の問題。 実装前の段階からコンテンツ構造含め、 しっかり考えることが、 現時点での最良の手法2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
  60. 60. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ では、簡単にデモを2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki

×