レスポンシブWebデザイン（以下RWD）は、スマートフォンやタブレット、PCなどあらゆるデバイスに対応できる魅力的な手法です。しかし、安易にRWDを選択することは、弊害を産むこともあり、また実装者の負担を倍増させる危険があります。まず作る前に何を持って判断するか、負担を減らすにはどうするかについて発表させていただきます。

1. レスポンシブWebデザインの
サイトを作る前に
2013年11月16日 第10回Creators MeetUp
中根悠樹 @yuki_naka18

2. 自己紹介
中根 悠樹
モンハンとフロントエンドエンジニアやってます。
Twitter: @yuki_naka18
Facebook: yuki.naknane.16
blog: http://code-plus.jp
※首絞めてるわけじゃないよ

3. 本日の内容
• レスポンシブウェブデザインとは？
• レスポンシブウェブデザインの必要性？
• 実装面から考えるレスポンシブウェブデザイン

4. レスポンシブウェブデザインとは？

5. What is RWD ?
• HTMLの切り替えがない(ワンソース)
• CSSのMedia Queryを使用する
• ウインドウサイズによってレイアウトが変わる
※RWD=Responsive Web Design

6. RWDのメリット
• HTMLがワンソースで済む
• 未来的なデバイスに対応可能
• SEOに有利？

7. HTMLが1つで済ん
でSEOに有利なんて
RWDサイコー
これから作るサイトは
全部RWDにしてこう
スマホ専用サイ
トとかオワコン
www

8. レスポンシブウェブデザイン
の必要性？

9. 全てのサイトをRWDにするべき？
• 情報に差異がないことを考えれば理想
• コンテンツの更新も楽になる

10. でも…

11. 悲しいけどこれ
現実なのよね。

12. HTMLがワンソースで済んだり、
SEOに有利だったり言われてますが、
これって…

13. 制作する側の目線でしかないですよね？

14. ユーザーからしたらRWDだろうが、
専用サイトだろうが、
使いやすければなんでもいいんです。

15. RWDの問題点
• ユーザーは多種多様
• 状況によって求める情報は違う

16. 検索流入から考える(1/2)
• 69%のユーザーがスマートフォンで毎日検索
を行っている
• スマホは検索利用者の現在地に関連した検索（地
域情報検索）が多い
• サイト全体の検索流入数に対するスマートフォ
ンからの検索流入の割合は概ね3∼8％前後の
シェア構成

17. 検索流入から考える(2/2)
• アルファベットはあまり使われない
( Yahoo ○ヤフー 等)
• サジェスト機能の影響で複数語句による検索も
見られる (半角スペース空け)
• ユーザーの目的が明確で「その場で必要な情
報」、即時性の高い検索キーワードが多く見ら
れる
引用元： ・スマートフォンからの検索流入キーワードが物語るユーザーの検索行動
・スマホとPCで変わる、検索・来訪意図の違いを正しく捉えよ

18. このようにスマートフォンでの検索には、
大きな特徴がある。

19. レスポンシブWebデザインにする場合、
サイト内の情報の構成を厳密に考えないと、
スマートフォンユーザーの離脱率が
上がる可能性が高い。

20. でも、RWDに
しないとSEOに不利に
なるんじゃ…

21. そもそもGoogleは、
RWDがSEOに有利なんて一言とも
言っていません。

22. Googleのスマートフォンサポート
• レスポンシブウェブデザインを使うサイト
• 同じ一連のURLですべてのデバイスに動的に配
信するがそれぞれのURLが異なるHTML（お
よび CSS）を配信するサイト
• 携帯端末用と PC 用の別々の URL があるサイ
ト

23. Google自身も、
「しかしGoogleは、レスポンシブウェブデザイ
ンを使用することが適切とはいえない状況がある
ことを理解しています。」
と宣言しています。

24. また、一方でスマートフォンサイトを
廃止した企業なんかもあります。
「BEAMS」「GAP」「三菱自動車」など
参考URL：日本のスマホサイトは2年間でこんなに変わった

25. サイトの目的を考え、
適切なコンテンツの配信方法を考えましょう

26. 実装面から考える
レスポンシブウェブデザイン

27. RWDは多種多様のデバイスに対応すること
を踏まえると、
実装側には大きな負担が伴います。

28. 実装を楽にするには
• サイトの設計は綿密に行っておく
• デザイナーはコーディングの知識があるのが好
ましい
• 無理をしない

29. サイトの設計は綿密に行っておく

30. スマホもタブレッ
トも、全部調整が
必要に…。
ほぼ作り直し。
PCレイアウト
のそこ変えっちゃ
たら…

31. デザイナーはコーディングの知識が
あるのが好ましい

32. Media Queryを使用したレイアウトに
理解がないと、実装者の負担は増えます。
仮に理解がない場合は、
コーダー(フロントエンド)との積極的な
摺り合わせが必要不可欠です

33. 無理をしない

34. 無理をしない、例えば
• 動画再生などは極力Youtubeに
• IE6.7.8のレスポンシブ対応はしない
• レイアウト切り替わり時にアニメーションなど
いれない

35. エゴでしょ！！
レイアウト切り
替わり時のアニメー
ションとか

36. レスポンシブウェブデザインは
確かに理想的な手法ではありますが、
本当にRWDにする必要があるのか、
ケースバイケースで考えていきましょう。
※大人の事情はあると思いますが…

37. ご清聴ありがとうございました