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.

3

Share

Download to read offline

レスポンシブデザインってなに?

Download to read offline

レスポンシブデザインってなに?

レスポンシブデザインってなに?

  1. 1. Skill Project 2016年度 技術向上プロジェクト 第三回社内勉強会 2016年2月10日開催 ▲ ResponsiveDesignってなに? 第三回勉強会 後半戦(43ページ)
  2. 2. 222 1. レスポンシブ(Web)デザインとは 2. レスポンシブデザインに注目する背景 3. レスポンシブデザインの4つのポイント 4. レスポンシブデザインのメリットとデメリット 5. レスポンシブデザインサイト構築にあたって 6. フレームワーク( CSS+JavaScript ) 本日の内容
  3. 3. 333レスポンシブ(Web)デザインとは • レスポンシブデザイン 【responsive design】 レスポンシブデザインとは、Webデザインの手法の一つで、 様々な種類の機器や画面サイズに単一のファイルで対応すること。 WebサイトやWebページをパソコンやスマートフォン、 タブレット端末など複数の機器や画面サイズに対応させる際、 内容が同じでデザインや動作をそれぞれに最適化した複数の HTMLファイルやCSSファイルを用意し、HTTPリダイレクト などでアクセスを振り分ける手法がよく用いられる。 ※リダイレクト処理 ユーザーアクセス端末(ユーザーエージェント)に応じて、Webサー バーで設定されたURLへ転送する仕組み。 !
  4. 4. 444レスポンシブ(Web)デザインとは • レスポンシブデザイン 【responsive design】 レスポンシブデザインではこのような対応はせず、表示された 機器の種類やサイズに応じて表示内容が最適な状態に変化する よう設定された単一のファイルを制作し、すべての機器に同じ ように送信する。 複数のファイルを用意する場合に比べ、デザインや機能の自由度 は下がるが、すべての機器に同じ内容を表示でき、更新作業の 簡略化や更新漏れの防止が期待できる。 検索エンジンやアクセス解析に内容が重複した複数の異なるURL が出現することも避けられる。 ※IT用語辞典より
  5. 5. 555レスポンシブ(Web)デザインとは • リダイレクト処理によるレスポンス タブレット だよ~♪ タブレットなら このURLやで http://aaa.com/ http://aaa.com/t/ http://aaa.com/s/ HT ML CSS HT ML CSS HT ML CSS
  6. 6. 666レスポンシブ(Web)デザインとは • レスポンシブデザインによるレスポンス その1 タブレット だよ~♪ どの端末でも 一緒やで http://aaa.com/ CSS HT ML CSS CSSわいが判断 するで
  7. 7. 777レスポンシブ(Web)デザインとは • レスポンシブデザインによるレスポンス その2 タブレット だよ~♪ どの端末でも 一緒やで http://aaa.com/ HT ML CSS わいたちが 判断するで
  8. 8. 888 • ユーザー視点で考えると? 1. コーポレート・プロモーション・EC・業務システム問わず、 サイトを閲覧する端末や解像度が多様化している。 • 開発者視点で考えると? 1. メンテナンス性の向上が図れる。 2. 管理ファイル数の削減により、更新作業の簡略化や更新漏れ の防止が期待できる。 • SEO(検索エンジン最適化)視点で考えると? 1. URLが統一されるのでページランクが分散する心配が少ない。 レスポンシブデザインに注目する背景
  9. 9. 999 • レスポンシブデザインを考える上で重要な4つのポイン ト レスポンシブデザインの4つのポイント アクセス端末の判別 可変レイアウト オートサイジング 要素のON / OFF
  10. 10. 101010 • レスポンシブデザインを考える上で重要な4つのポイン ト レスポンシブデザインの4つのポイント アクセス端末の判別 可変レイアウト オートサイジング 要素のON / OFF
  11. 11. 111111アクセス端末(画面サイズ)の判別 • Webサイトにアクセスしてきた端末の判別方法は? 1. CSS3 Media Queries で判別する。 2. ユーザーエージェント で判別する。
  12. 12. 121212 • CSS3 Media Queries メディアクエリは、CSSスタイルに適用できるシンプルな フィルタである。 メディアクエリを使用すると、デバイスの種類、幅、高さ、向き、 解像度など、コンテンツをレンダリングするデバイスの特性に 基づいてスタイルを容易に変更できるようになる。 ※Google Developersより アクセス端末(画面サイズ)の判別
  13. 13. 131313 • CSS3 Media Queries 【HTML】 <meta name="viewport" content="width=device-width, initial-scale=1"> 【CSS】 @media screen and (min-width: 768px) { /* view portが768px以上の場合に適用される */ div#wrapper { width: 960px; } } @media screen and (max-width: 479px) { /* view portが479px以下の場合に適用される */ div#wrapper { width: 100%; } } アクセス端末(画面サイズ)の判別
  14. 14. 141414 • ユーザーエージェント ユーザーエージェントとは、Webサイトへのアクセスの際に使用 されるプログラムのことである。 HTMLを解釈して画像化し、Webサイトとしてディスプレイに 映し出すためのレンダリングを行い、ディスプレイに画像・文字 などを表示するためのWebブラウザや、検索用データベースを 作成するためにWebサイトを巡回するクローラ、利用している OSなども、ユーザーエージェントに含まれる。携帯電話向け サイトを閲覧する場合にも、この用語が使われる。 ※IT用語辞典より アクセス端末(画面サイズ)の判別
  15. 15. 151515 • ユーザーエージェント 【Javascript】 <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { document.write('<link rel="stylesheet" type="text/css" href="css/smartphone.css">'); }else { document.write('<link rel="stylesheet" type="text/css" href="css/pc.css">'); } </script> アクセス端末(画面サイズ)の判別
  16. 16. 161616 • レスポンシブデザインを考える上で重要な4つのポイン ト レスポンシブデザインの4つのポイント アクセス端末の判別 可変レイアウト オートサイジング 要素のON / OFF
  17. 17. 171717 タイトル 記事 メニュー サブコンテンツ サブコンテン ツ 可変レイアウト • 表示する画面サイズでレイアウトを可変する。 1. PCで見た場合
  18. 18. 181818 タイトル 記事 メニュー サブコンテンツ サブコンテンツ 可変レイアウト • 表示する画面サイズでレイアウトを可変する。 2. タブレットで見た場合
  19. 19. 191919 タイトル 記事 メニュー サブコンテンツ サブコンテンツ 可変レイアウト • 表示する画面サイズでレイアウトを可変する。 3. スマートフォンで見た場合
  20. 20. 202020 • レスポンシブデザインを考える上で重要な4つのポイン ト レスポンシブデザインの4つのポイント アクセス端末の判別 可変レイアウト オートサイジング 要素のON / OFF
  21. 21. 212121 • 表示する画面サイズで要素サイズを可変する。 1. 画像 2. 要素ブロック 3. フォントサイズ オートサイジング
  22. 22. 222222 タイトル とても美味しそうな料理ですね! 画像 オートサイジング • 表示する画面サイズで要素サイズを可変する。 1. PCで見た場合
  23. 23. 232323 タイトル とても美味しそうな料理 ですね! 画像 オートサイジング • 表示する画面サイズで要素サイズを可変する。 2. スマートフォンで見た場合
  24. 24. 242424 • レスポンシブデザインを考える上で重要な4つのポイン ト レスポンシブデザインの4つのポイント アクセス端末の判別 可変レイアウト オートサイジング 要素のON / OFF
  25. 25. 252525 • 表示する画面サイズで要素の表示/非表示を制御する。 1. 画像 2. ナビゲーション 3. 広告 要素のON/OFF
  26. 26. 262626 タイトル 記事 メニュー 関連のうすい サブコンテンツ 広告 要素のON/OFF • 表示する画面サイズで要素の表示/非表示を制御する。 1. PCで見た場合
  27. 27. 272727 タイトル 記事 広告 要素のON/OFF • 表示する画面サイズで要素の表示/非表示を制御する。 2. スマートフォンで見た場合
  28. 28. 282828 • メンテナンス性の向上。 1. 共通ファイルの更新で、全デバイス対応できる。 2. 用途に応じてどのエージェントをターゲットとするか考慮 しないと、デザインの統一性や機能の破綻、最悪エージェン ト別に同一機能を二重実装する事態に陥り、開発やメンテナ ンスのコスト工数の増大に繋がる。 ユーザー要件に基づいてどこまで考慮にいれるか、設計初期 段階で抑えておくべき事項である。 レスポンシブデザインのメリットデメリット
  29. 29. 292929 • 一貫性のあるデザイン。 1. デザインが統一されていることで、ユーザーがどの端末から 閲覧しても、イメージと操作感が保障される。 • デザイン設計に時間がかかる。 レスポンシブデザインのメリットデメリット
  30. 30. 303030 • デバイス別のユーザーのニーズを考慮する必要がある。 1. 例えば「飲食店Webサイト」であれば? レスポンシブデザインのメリットデメリット いろいろな店の メニューや値段 を比較したい! 店の地図や 営業時間を 確認したい! PCから閲覧するユーザー スマフォから閲覧するユーザー
  31. 31. 313131 • Internet Explorer 8以下への対応が必要? 1. 少し古い解説サイトだと、IE8以下への対応にふれているが、 Microsoftのポリシーが変わり、基本的にサポート外となる為、 対応は不要となった。 2014 2015 2016 2017 2018 2019 2020 2021 Internet Explorer 11 Internet Explorer 10 Internet Explorer 9 Internet Explorer 8 Windows7の場合のサポート ※atmarkITより レスポンシブデザインのメリットデメリット
  32. 32. 323232 • 参考)国内Webブラウザシェア(2015年12月) 0 5 10 15 20 25 30 webrage.jpより レスポンシブデザインのメリットデメリット
  33. 33. 333333 • 参考)おすすめ書籍 レスポンシブデザインのメリットデメリット Web担当者よ、古いIEを捨てて モダンブラウザに今すぐ対応せよ 物江修, 春日井良隆, 小山健治, 伊藤秀樹, Web担当者Forum編集部
  34. 34. 343434 • 既存サイトのレスポンシブ化はやめる。 1. すでにPC閲覧などに合わせたスタイル設定などを最適化して いるケースがほとんどなので、ここから他端末展開は逆に 時間がかかるケースが多い。 レスポンシブデザインサイト構築にあたって
  35. 35. 353535 • フレームワークを積極的に利用する。 1. コード的な実装方法を理解していても、ゼロから作ると かなりの難易度と作業量となる。 既存のフレームワークを積極的に活用する。 レスポンシブデザインサイト構築にあたって
  36. 36. 363636 • テストに使用する端末は多ければ多いほど良い。 1. レスポンシブを選択したということは、様々な端末で閲覧 されることを前提としたデザインである。 動作確認を行う端末は、多ければ多いほど良い。 レスポンシブデザインサイト構築にあたって
  37. 37. 373737 • 主にCSS(デザイン面)とJavaScript(機能面)が統合 されたパッケージ。 1. BootStrap 2. Foundation 3. YahooPure 4. Responsive Grid System 5. Material Design Lite フレームワーク(CSS+JavaScript)
  38. 38. 383838 • BootStrapを例にレスポンシブグリッド実装してみる。 1. グリッドシステムとは、デバイスに応じてグリッド構造を 変化させる仕組みである。 フレームワーク(CSS+JavaScript)
  39. 39. 393939 • BootStrapを例にレスポンシブグリッド実装してみる。 1. row内のcolのグリッド数を12とし、どのような割合で 分割するか設定する。 フレームワーク(CSS+JavaScript) 左 <div class="container"> <div class="row"> <div class="col-sm-3">左</div> <div class="col-sm-6">中央</div> <div class="col-sm-3">右</div> </div> </div> 中央 右
  40. 40. 404040 • BootStrapを例にレスポンシブグリッド実装してみる。 1. row内のcolのグリッド数を12とし、どのような割合で 分割するか設定する。 フレームワーク(CSS+JavaScript) <div class="container"> <div class="row"> <div class="col-sm-6">左</div> <div class="col-sm-6">右</div> </div> </div> 右左
  41. 41. 414141 • BootStrapを例にレスポンシブグリッド実装してみる。 2. colのプレフィックスを分岐点にし、グリッドが可変する。 フレームワーク(CSS+JavaScript) <div class="container"> <div class="row"> <div class="col-sm-6">左</div> <div class="col-sm-6">右</div> </div> </div> 右 左 プレフィックス「sm」では、端末が幅が768px未満の場合に可変
  42. 42. 424242 • BootStrapを例にレスポンシブグリッド実装してみる。 3. colのプレフィックスは様々。ターゲットデバイスにより適切 に設定する。 フレームワーク(CSS+JavaScript) デバイス 画面サイズ Prefix デスクトップ 1200px以下 -lg Large デスクトップ 992px~1200px未満 -md Medium タブレット 768px~992px未満 -sm Small モバイル 768px未満 -xs Extra small
  43. 43. 434343最後に 繰り返しになるが、「レスポンシブデザイン」は用途を吟味した うえで採用しなければならない。 レスポンシブWEBデザインは、デバイスに対する適合策であっ て、モバイルサイト全体を最適化する方法ではない。
  • AkiKi1

    Dec. 6, 2019
  • YuutaChikuse

    Apr. 2, 2018
  • techorite

    Oct. 13, 2016

レスポンシブデザインってなに?

Views

Total views

219

On Slideshare

0

From embeds

0

Number of embeds

14

Actions

Downloads

3

Shares

0

Comments

0

Likes

3

×