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.

レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~

11,787 views

Published on

今やスタンダードになりつつあるレスポンシブサイトについて、その概要から実際にレスポンシブサイトを構築する際に注意したいポイントまでを解説します。

また、実際にWebサイトをレスポンシブ対応する際のメリット・デメリット、レスポンシブ化するのに有効なサイト、不向きなサイト、最低限押さえておきたいソースコードなどをご紹介します。

授業では以下の様な内容についても語ります。
・PC,SPと2つサイトを作るのと、レスポンシブサイト1つ作るのじゃ大変さは変わるのか?
・Googleが推奨してるけど、それはなぜ?
・なぜレスポンシブサイトが必要なのか?

Published in: Technology
  • Login to see the comments

レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~

  1. 1. レスポンシブ基礎 Webサイトをレスポンシブに する方法とそのメリット
  2. 2. ホリグチ セイト Front-End-Engineer LIG.inc 所属 Twitter : @seito_horiguchi
  3. 3. アジェンダ 1.レスポンシブサイトとは 2.導入のポイント 3.構築のやり方 4.参考になるレスポンシブサイト 5.まとめ
  4. 4. レスポンシブサイトとは
  5. 5. レスポンシブサイト概要
  6. 6. レスポンシブサイト概要 JOURNAL STANDARD relume:http://journal-standard.jp/special/relume/paper/
  7. 7. レスポンシブサイト概要 PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWeb サイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整 するWebサイトのこと
  8. 8. レスポンシブサイト概要 1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画 面サイズに応じてページのレイアウト・デザインを調整  引用『必読!5分でわかるレスポンシブWebデザインまとめ』 LIGBLOG(執筆/野田)  http://liginc.co.jp/designer/archives/6154
  9. 9. Q.レスポンシブサイト、なぜ必要なんでしょう?
  10. 10. 1.デバイスが多様化したから 2.SEO対策に大変効果があるから 3.より安くサイトを制作できるから 4.なんかこう、アレがコレだから
  11. 11. 1.デバイスの種類が多様化したから
  12. 12. Q.レスポンシブサイト、なぜ必要なんでしょう?  引用 『スマホ・タブレットのサイズ/解像度一覧作ってやんよ!!!』ときどきWeb    http://tokidoki-­‐web.com/2013/01/ ←ほんの一部です…
  13. 13. Q.レスポンシブサイト、なぜ必要なんでしょう? もはや スマホの横幅=320pxという 常識も消えた
  14. 14. デバイスのサイズが多様化 ↓ 今後も増えていくことは確実 ↓ 一個一個合わせてつくるのは現実的じゃない Q.レスポンシブサイト、なぜ必要なんでしょう? パソコン、スマホ、タブレット、TV、ゲーム機、ウェアラブル、etc…
  15. 15. 今あるたくさんのデバイスと、 未来のデバイスに対応するために必要 Q.レスポンシブサイト、なぜ必要なんでしょう?
  16. 16. 1ソース マルチデバイス対応 =レスポンシブサイト Q.レスポンシブサイト、なぜ必要なんでしょう?
  17. 17. 導入のポイント
  18. 18. レスポンシブ化するメリット、デメリット
  19. 19. メリット ・今ある複数のデバイスで最適な表示ができる ・今後生まれるデバイスにも対応できる ・一部の運用が楽になる ・バックエンドエンジニアの負担が減る
  20. 20. デメリット ・表示スピードが遅くなりがち ・構築が難しい ・デザイナー、フロント&マークアップエンジニアの  負担が増える ・デザインの幅がある程度限定される
  21. 21. 費用、工数ってどれくらい変わるの?
  22. 22. 費用、工数ってどれくらい変わるの? レスポンシブサイト >= 非レスポンシブサイト 制作の費用、工数はともに ※サイトの仕様や技術者レベルに大きく左右される
  23. 23. 費用、工数ってどれくらい変わるの? ただし、一部の運用コストを削減できる ※サイトの仕様や技術者レベルに大きく左右される ・画像やテキストの更新、変更作業 ・作業者同士のコミュニケーションコスト など 運用コスト =
  24. 24. 向いてるサイト、向いてないサイト
  25. 25. 向いてるサイト ・長期に渡って運用するサイト ・簡易的なデザイン、表現をするサイト ・ブログ ・メディア ・Webサービス ・一般的なコーポレートサイト など
  26. 26. 向いてないサイト ・短期的、単発で公開するサイト ・複雑なデザイン、表現をするサイト ・キャンペーンサイト ・ブランディングサイト など ※ただしデザインや仕様次第
  27. 27. SEOに有効といわれる理由
  28. 28. SEOに有効といわれる理由 ・レスポンシブ対応していれば、URLが1つなので  間違ったリダイレクトを回避するのが簡単 ・スマートフォン対応しているかどうかが直接SEOの  ランクに影響するようになった  参考1『間違ったリダイレクト』 Google Developers  https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/faulty-redirects?hl=ja  参考2『検索結果をもっとモバイル フレンドリーに』ウェブマスター向け公式ブログ  http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html
  29. 29. SEOに有効といわれる理由 = 以下の条件を満たしていれば、   非レスポンシブサイトでもSEOのランクが   下がることはない ・サイトが正しく構築されている ・スマートフォンサイト用のサイトがある
  30. 30. 構築のやり方
  31. 31. 構築のポイント
  32. 32. 構築のポイント ・ブレイクポイントを設けて要素の表示&非表示や、  スタイルの変更を操作する ・横幅は%指定で柔軟に可変するようにする  引用『必読!5分でわかるレスポンシブWebデザインまとめ』 LIGBLOG(執筆/野田)  http://liginc.co.jp/designer/archives/6154
  33. 33. studio-yoggy http://www.studio-yoggy.com/
  34. 34. HTML,CSS,JS
  35. 35. viewport <meta name="viewport" content=“width=device-width, minimum-scale=0,maximum-scale=10">
  36. 36. //PC
 
 //スマートフォン
 @media screen and (max-width: 767px) {
 
 }
 
 //タブレット
 @media screen and (min-width: 768px) and (max-width: 1080px) {
 
 } media queries
  37. 37. displayプロパティ display: block; // or none @media screen and (max-width: 767px) {
 
 
 .header {
 display: none;
 }
 
 .sp-header {
 display: block;
 }
 } 例)
  38. 38. box-sizing: border-box; .hoge {
 box-sizing: border-box;
 width: 100%;
 border: 1px solid #ccc;
 padding: 0 10px;
 } box-sizingプロパティ 例)
  39. 39. JSプラグイン どうしてもIE8以下に対応したい場合は、 以下のプラグインを導入するとよい(非推奨) ・respond.js https://github.com/scottjehl/Respond ・css3-mediaqueries.js https://code.google.com/p/css3-mediaqueries-js/
  40. 40. 画像とか
  41. 41. SVG メリット ・ベクター画像なので、拡大縮小しても劣化しない ・色を変更したり、JSで動き  をつけたりもできる  引用画像 wikipedia  http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
  42. 42. SVG デメリット ・IE8以下は非対応(́・ω・`) ・画像が複雑すぎると逆効果  引用画像 wikipedia  http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
  43. 43. Web フォントアイコン メリット ・SVGデータをフォントデータ化したアイコン ・SVG同様、色やサイズを変更しやすく、劣化しない  引用画像 Font-Awesome  http://fortawesome.github.io/Font-Awesome/icons/
  44. 44. Web フォントアイコン デメリット ・導入がそれなりに面倒  (Webサービス「icomoon」を使うと手っ取り早い  https://icomoon.io/) ・Androidでちょいちょい不具合アリ  引用画像 Font-Awesome  http://fortawesome.github.io/Font-Awesome/icons/
  45. 45. 参考になるレスポンシブサイト
  46. 46. 完全なレスポンシブサイト
  47. 47. codrops codrops http://tympanus.net/codrops/ ブログ
  48. 48. DeNA ディー・エヌ・エー DeNA ディー・エヌ・エー http://dena.com/jp/ コーポレート、メディア
  49. 49. litrois EC、サービス litrois http://litrois.jp/
  50. 50. Haruki Murakami ブランディング Haruki Murakami http://www.harukimurakami.com/
  51. 51. ちょいレスポンシブサイト
  52. 52. twitter twitter https://twitter.com/ SNS、サービス
  53. 53. マンガボックス マンガボックス https://www.mangabox.me/ サービス
  54. 54. まとめ
  55. 55. 最初に制作するコストはかかるけど ・一部の運用コストが減らせる ・未来も見据えて多様なデバイスに対応できる = 未来への投資 まとめ
  56. 56. 提案するかどうか、判断材料を揃えよう ・サービスなのか、メディアサイトなのか…etc ・短期運用 or 長期運用か ・予算と工数はとれるのか など = プロジェクトの内容を考慮 まとめ
  57. 57. レスポンシブサイトにもやり方が複数ある ・完全なレスポンシブサイト ・一部のみレスポンシブなサイト = 実際にあるサイトを参考にしてみよう まとめ
  58. 58. Special Thanks 林先生 Twitter : @frontainer http://frontainer.com/
  59. 59. Thank you! @seito_horiguchi (質問とかあれば気軽に聞いてくだせえ)
  60. 60. 告知
  61. 61. https://www.wantedly.com/campaign/ real_wantedly_3 リアル・ウォンテッドリー 2015年3月25日(水) 12:00∼15:00 渋谷マークシティ13階
  62. 62. https://poole-job.jp/Poole
  63. 63. 上野 永寿総合病院 面会時間 (平日) 14:00∼20:00 (日・祝日) 10:00∼20:00

×