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.

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

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

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

  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デザインは、デバイスに対する適合策であっ て、モバイルサイト全体を最適化する方法ではない。

    Be the first to comment

    Login to see the comments

  • techorite

    Oct. 13, 2016
  • YuutaChikuse

    Apr. 2, 2018
  • AkiKi1

    Dec. 6, 2019

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

Views

Total views

214

On Slideshare

0

From embeds

0

Number of embeds

14

Actions

Downloads

3

Shares

0

Comments

0

Likes

3

×