今やスタンダードになりつつあるレスポンシブサイトについて、その概要から実際にレスポンシブサイトを構築する際に注意したいポイントまでを解説します。 また、実際にWebサイトをレスポンシブ対応する際のメリット・デメリット、レスポンシブ化するのに有効なサイト、不向きなサイト、最低限押さえておきたいソースコードなどをご紹介します。 授業では以下の様な内容についても語ります。 ・PC,SPと2つサイトを作るのと、レスポンシブサイト1つ作るのじゃ大変さは変わるのか？ ・Googleが推奨してるけど、それはなぜ？ ・なぜレスポンシブサイトが必要なのか？

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

2. ホリグチ セイト
Front-End-Engineer
LIG.inc 所属
Twitter :
@seito_horiguchi

3. アジェンダ
1.レスポンシブサイトとは
2.導入のポイント
3.構築のやり方
4.参考になるレスポンシブサイト
5.まとめ

4. レスポンシブサイトとは

5. レスポンシブサイト概要

6. レスポンシブサイト概要
JOURNAL STANDARD relume：http://journal-standard.jp/special/relume/paper/

7. レスポンシブサイト概要
PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWeb
サイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整
するWebサイトのこと

8. レスポンシブサイト概要
1つのHTMLファイルを、CSS3（Media Queries）で制御し、異なる画
面サイズに応じてページのレイアウト・デザインを調整
引用『必読！5分でわかるレスポンシブWebデザインまとめ』 LIGBLOG（執筆／野田）
http://liginc.co.jp/designer/archives/6154

9. Q.レスポンシブサイト、なぜ必要なんでしょう？

10. 1.デバイスが多様化したから 2.SEO対策に大変効果があるから
3.より安くサイトを制作できるから ４.なんかこう、アレがコレだから

11. 1.デバイスの種類が多様化したから

12. Q.レスポンシブサイト、なぜ必要なんでしょう？
引用 『スマホ・タブレットのサイズ/解像度一覧作ってやんよ!!!』ときどきWeb
http://tokidoki-­‐web.com/2013/01/
←ほんの一部です…

13. Q.レスポンシブサイト、なぜ必要なんでしょう？
もはや
スマホの横幅＝320pxという
常識も消えた

14. デバイスのサイズが多様化
↓
今後も増えていくことは確実
↓
一個一個合わせてつくるのは現実的じゃない
Q.レスポンシブサイト、なぜ必要なんでしょう？
パソコン、スマホ、タブレット、TV、ゲーム機、ウェアラブル、etc…

15. 今あるたくさんのデバイスと、
未来のデバイスに対応するために必要
Q.レスポンシブサイト、なぜ必要なんでしょう？

16. 1ソース
マルチデバイス対応
＝レスポンシブサイト
Q.レスポンシブサイト、なぜ必要なんでしょう？

17. 導入のポイント

18. レスポンシブ化するメリット、デメリット

19. メリット
・今ある複数のデバイスで最適な表示ができる
・今後生まれるデバイスにも対応できる
・一部の運用が楽になる
・バックエンドエンジニアの負担が減る

20. デメリット
・表示スピードが遅くなりがち
・構築が難しい
・デザイナー、フロント＆マークアップエンジニアの
負担が増える
・デザインの幅がある程度限定される

21. 費用、工数ってどれくらい変わるの？

22. 費用、工数ってどれくらい変わるの？
レスポンシブサイト ＞＝ 非レスポンシブサイト
制作の費用、工数はともに
※サイトの仕様や技術者レベルに大きく左右される

23. 費用、工数ってどれくらい変わるの？
ただし、一部の運用コストを削減できる
※サイトの仕様や技術者レベルに大きく左右される
・画像やテキストの更新、変更作業
・作業者同士のコミュニケーションコスト など
運用コスト ＝

24. 向いてるサイト、向いてないサイト

25. 向いてるサイト
・長期に渡って運用するサイト
・簡易的なデザイン、表現をするサイト
・ブログ
・メディア
・Webサービス
・一般的なコーポレートサイト
など

26. 向いてないサイト
・短期的、単発で公開するサイト
・複雑なデザイン、表現をするサイト
・キャンペーンサイト
・ブランディングサイト
など
※ただしデザインや仕様次第

27. SEOに有効といわれる理由

28. SEOに有効といわれる理由
・レスポンシブ対応していれば、URLが1つなので
間違ったリダイレクトを回避するのが簡単
・スマートフォン対応しているかどうかが直接SEOの
ランクに影響するようになった
参考１『間違ったリダイレクト』 Google Developers
https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/faulty-redirects?hl=ja
参考２『検索結果をもっとモバイル フレンドリーに』ウェブマスター向け公式ブログ
http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html

29. SEOに有効といわれる理由
＝ 以下の条件を満たしていれば、
非レスポンシブサイトでもSEOのランクが
下がることはない
・サイトが正しく構築されている
・スマートフォンサイト用のサイトがある

30. 構築のやり方

31. 構築のポイント

32. 構築のポイント
・ブレイクポイントを設けて要素の表示＆非表示や、
スタイルの変更を操作する
・横幅は%指定で柔軟に可変するようにする
引用『必読！5分でわかるレスポンシブWebデザインまとめ』 LIGBLOG（執筆／野田）
http://liginc.co.jp/designer/archives/6154

33. studio-yoggy
http://www.studio-yoggy.com/

37. HTML,CSS,JS

38. viewport
<meta name="viewport" content=“width=device-width,
minimum-scale=0,maximum-scale=10">

39. //PC
//スマートフォン
@media screen and (max-width: 767px) {
}
//タブレット
@media screen and (min-width: 768px) and (max-width: 1080px)
{
}
media queries

40. displayプロパティ
display: block; // or none
@media screen and (max-width: 767px) {
.header {
display: none;
}
.sp-header {
display: block;
}
}
例）

41. box-sizing: border-box;
.hoge {
box-sizing: border-box;
width: 100%;
border: 1px solid #ccc;
padding: 0 10px;
}
box-sizingプロパティ
例）

42. JSプラグイン
どうしてもIE8以下に対応したい場合は、
以下のプラグインを導入するとよい（非推奨）
・respond.js
https://github.com/scottjehl/Respond
・css3-mediaqueries.js
https://code.google.com/p/css3-mediaqueries-js/

43. 画像とか

44. SVG
メリット
・ベクター画像なので、拡大縮小しても劣化しない
・色を変更したり、JSで動き
をつけたりもできる
引用画像 wikipedia
http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

45. SVG
デメリット
・IE8以下は非対応（́・ω・｀）
・画像が複雑すぎると逆効果
引用画像 wikipedia
http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

46. Web フォントアイコン
メリット
・SVGデータをフォントデータ化したアイコン
・SVG同様、色やサイズを変更しやすく、劣化しない
引用画像 Font-Awesome
http://fortawesome.github.io/Font-Awesome/icons/

47. Web フォントアイコン
デメリット
・導入がそれなりに面倒
（Webサービス「icomoon」を使うと手っ取り早い https://icomoon.io/）
・Androidでちょいちょい不具合アリ
引用画像 Font-Awesome
http://fortawesome.github.io/Font-Awesome/icons/

48. 参考になるレスポンシブサイト

49. 完全なレスポンシブサイト

50. codrops
codrops
http://tympanus.net/codrops/ ブログ

51. DeNA ディー・エヌ・エー
DeNA ディー・エヌ・エー
http://dena.com/jp/ コーポレート、メディア

52. litrois
EC、サービス
litrois
http://litrois.jp/

53. Haruki Murakami
ブランディング
Haruki Murakami
http://www.harukimurakami.com/

54. ちょいレスポンシブサイト

55. twitter
twitter
https://twitter.com/ SNS、サービス

56. マンガボックス
マンガボックス
https://www.mangabox.me/ サービス

57. まとめ

58. 最初に制作するコストはかかるけど
・一部の運用コストが減らせる
・未来も見据えて多様なデバイスに対応できる
＝ 未来への投資
まとめ

59. 提案するかどうか、判断材料を揃えよう
・サービスなのか、メディアサイトなのか…etc
・短期運用 or 長期運用か
・予算と工数はとれるのか
など
＝ プロジェクトの内容を考慮
まとめ

60. レスポンシブサイトにもやり方が複数ある
・完全なレスポンシブサイト
・一部のみレスポンシブなサイト
＝ 実際にあるサイトを参考にしてみよう
まとめ

61. Special Thanks
林先生
Twitter : @frontainer
http://frontainer.com/

62. Thank you!
@seito_horiguchi
（質問とかあれば気軽に聞いてくだせえ）

63. 告知

64. https://www.wantedly.com/campaign/
real_wantedly_3
リアル･ウォンテッドリー
2015年3月25日(水) 12:00∼15:00
渋谷マークシティ13階

65. https://poole-job.jp/Poole

66. 上野 永寿総合病院
面会時間
(平日) 14：00∼20：00
(日・祝日) 10：00∼20：00