コラム
萩原印刷クロスメディア部メルマガ vol.024
GoogleがレスポンシブWebデザインを勧める理由（2014年12月24日配信）
クロスメディア部
◎ コラム ◎ ━━━━━━━━━━━━━━━━━━━━━━━━
GoogleがレスポンシブWebデザインを勧める理由
—————————————————————-
Googleは「Google Developers」という開発者向けリファレンスで、
レスポンシブWebデザインを勧める理由を公開しています。
あらためて、レスポンシブWebデザイン（RWD）とは、
「パソコン、タブレット、スマートフォンなど、デバイスごとに
最適なデザインを、単一のHTMLで提供する手法」です。
RWDでは、デバイスのスクリーンサイズを基準に、
CSSでレイアウトを切り替えたり、調整します。
たとえば、パソコンで見ると段組みレイアウトでも、
スマホで見ると段組みのないシンプルなレイアウトで、
読むのにストレスのない文字サイズにするなどです。
デバイスごとに別々のページを用意する必要はありません。
このことが「ユーザーの利便性」と「Googleからの評価」の両面で、
大きなメリットをもたらします。
—————————————————————-
■ スマホのGoogleの検索結果で「スマホ対応」表示がスタート
—————————————————————-
つい先日から、スマホでのGoogleの検索結果で、
RWDで適切にデザインされているサイトには
「スマホ対応」というラベルが表示されるようになりました。
すでにRWDを採用しているサイトで、
きちんと「スマホ対応」が表示されるかどうかは、
次のページでチェックできます。
https://www.google.com/webmasters/tools/mobile-friendly/
次の点も覚えておくとよいでしょう。
・RWDを採用せず、スマホ向けに別サイトを用意しているサイトは、
検索結果ではスマホ向けのサイトが表示されます。
もしパソコン向けサイトが検索結果に出てくるとすれば、
リダイレクト設定などにミスがないか確認するとよいでしょう
・そもそも、スマホに対応していないサイトは、
従来どおりパソコン向けのサイトが表示されます
とにかく、Googleが数年前から標榜している
「モバイルファースト」という考え方をどんどん押し進め、
スマホ対応サイトを優遇する時代に入っています。
—————————————————————-
■ レスポンシブWebデザインの技術的なメリット
—————————————————————-
以下では、技術に詳しい方向けに、
GoogleがレスポンシブWebデザイン（RWD）を勧める理由をまとめます。
スマホ対応を考えている方、すでにスマホに対応しているけど、
Googleの考え方をあらためて押さえておきたい、という方は、
ぜひチェックしてみてください。
１）URLの単一性
URLが1つなので、ユーザーがコンテンツを簡単に共有したり
リンクを貼ることが可能です。
PCで共有されたリンクにスマホでアクセスした場合でも、
スマホ用に最適化されたデザインで閲覧できます。
２）制作や運用の容易さ
パソコン、スマホ、タブレット向けに、
複数のHTML（コンテンツ）を用意する必要がありません。
つまり、二重更新の手間が発生しません。
３）リダイレクトなどの設定ミスが発生しない
パソコン用サイトとスマホ用サイトを別々にしている場合、
アクセスごとにデバイスを判別し、
そのデバイスに合ったほうにリダイレクトさせるのが一般的です。
適切なリダイレクト設定がなされていないと、
Googleからの評価が大幅に下がります。
４）ページの読み込み時間の短縮
デバイス判別によるリダイレクト（振り分け）処理が不要なので、
ページの読み込み時間が短縮できます。
そもそも、デバイス判別は万能ではなく、
新しい端末が出たときに仕様が変わったり、
古い端末ではうまく振り分けされない場合があります。
５）検索クローラーによるページ収集の容易さ
パソコン用ページとモバイル用ページが別々に存在することを
Googleのクローラーやアルゴリズムに伝える必要がありません。
これにより、ページごとのインデックスプロパティ
（リンクの価値など）の割り当てが正確に行われます。
６）検索クローラーのリソースの節約
同じコンテンツのページが、デバイスごとに何パターンもあると、
そのぶん、検索クローラーは何度もクロールする必要があります。
RWDの場合はクロール数が最小限に抑えられるため、
新しいコンテンツを公開したり、更新した際も、
検索結果に早く反映される可能性が高まります。
▼参考
レスポンシブ ウェブ デザイン – ウェブマスター向けモバイルガイド
レスポンシブ デザインにする理由
http://goo.gl/8KaV7d
▼参考
ASCII.jp：レスポンシブWebデザインとは (1/5)｜
ゼロから始めるレスポンシブWebデザイン入門より
http://ascii.jp/elem/000/000/697/697463/
—————————————————————-
以上、今回はRWDのポイントを解説しました。
RWDにはメリットが多い反面、
パソコンだけを考えた従来型のサイトでは、
全体の見なおしが必要になったり、
どのように設計するかを入念に考える必要があります。
気になっている方、もう少し詳しい話が聞きたい方は
ぜひ弊社にお問い合わせください。
萩原印刷株式会社
クロスメディア部 一同
GoogleがレスポンシブWebデザインを勧める理由
—————————————————————-
Googleは「Google Developers」という開発者向けリファレンスで、
レスポンシブWebデザインを勧める理由を公開しています。
あらためて、レスポンシブWebデザイン（RWD）とは、
「パソコン、タブレット、スマートフォンなど、デバイスごとに
最適なデザインを、単一のHTMLで提供する手法」です。
RWDでは、デバイスのスクリーンサイズを基準に、
CSSでレイアウトを切り替えたり、調整します。
たとえば、パソコンで見ると段組みレイアウトでも、
スマホで見ると段組みのないシンプルなレイアウトで、
読むのにストレスのない文字サイズにするなどです。
デバイスごとに別々のページを用意する必要はありません。
このことが「ユーザーの利便性」と「Googleからの評価」の両面で、
大きなメリットをもたらします。
—————————————————————-
■ スマホのGoogleの検索結果で「スマホ対応」表示がスタート
—————————————————————-
つい先日から、スマホでのGoogleの検索結果で、
RWDで適切にデザインされているサイトには
「スマホ対応」というラベルが表示されるようになりました。
すでにRWDを採用しているサイトで、
きちんと「スマホ対応」が表示されるかどうかは、
次のページでチェックできます。
https://www.google.com/webmasters/tools/mobile-friendly/
次の点も覚えておくとよいでしょう。
・RWDを採用せず、スマホ向けに別サイトを用意しているサイトは、
検索結果ではスマホ向けのサイトが表示されます。
もしパソコン向けサイトが検索結果に出てくるとすれば、
リダイレクト設定などにミスがないか確認するとよいでしょう
・そもそも、スマホに対応していないサイトは、
従来どおりパソコン向けのサイトが表示されます
とにかく、Googleが数年前から標榜している
「モバイルファースト」という考え方をどんどん押し進め、
スマホ対応サイトを優遇する時代に入っています。
—————————————————————-
■ レスポンシブWebデザインの技術的なメリット
—————————————————————-
以下では、技術に詳しい方向けに、
GoogleがレスポンシブWebデザイン（RWD）を勧める理由をまとめます。
スマホ対応を考えている方、すでにスマホに対応しているけど、
Googleの考え方をあらためて押さえておきたい、という方は、
ぜひチェックしてみてください。
１）URLの単一性
URLが1つなので、ユーザーがコンテンツを簡単に共有したり
リンクを貼ることが可能です。
PCで共有されたリンクにスマホでアクセスした場合でも、
スマホ用に最適化されたデザインで閲覧できます。
２）制作や運用の容易さ
パソコン、スマホ、タブレット向けに、
複数のHTML（コンテンツ）を用意する必要がありません。
つまり、二重更新の手間が発生しません。
３）リダイレクトなどの設定ミスが発生しない
パソコン用サイトとスマホ用サイトを別々にしている場合、
アクセスごとにデバイスを判別し、
そのデバイスに合ったほうにリダイレクトさせるのが一般的です。
適切なリダイレクト設定がなされていないと、
Googleからの評価が大幅に下がります。
４）ページの読み込み時間の短縮
デバイス判別によるリダイレクト（振り分け）処理が不要なので、
ページの読み込み時間が短縮できます。
そもそも、デバイス判別は万能ではなく、
新しい端末が出たときに仕様が変わったり、
古い端末ではうまく振り分けされない場合があります。
５）検索クローラーによるページ収集の容易さ
パソコン用ページとモバイル用ページが別々に存在することを
Googleのクローラーやアルゴリズムに伝える必要がありません。
これにより、ページごとのインデックスプロパティ
（リンクの価値など）の割り当てが正確に行われます。
６）検索クローラーのリソースの節約
同じコンテンツのページが、デバイスごとに何パターンもあると、
そのぶん、検索クローラーは何度もクロールする必要があります。
RWDの場合はクロール数が最小限に抑えられるため、
新しいコンテンツを公開したり、更新した際も、
検索結果に早く反映される可能性が高まります。
▼参考
レスポンシブ ウェブ デザイン – ウェブマスター向けモバイルガイド
レスポンシブ デザインにする理由
http://goo.gl/8KaV7d
▼参考
ASCII.jp：レスポンシブWebデザインとは (1/5)｜
ゼロから始めるレスポンシブWebデザイン入門より
http://ascii.jp/elem/000/000/697/697463/
—————————————————————-
以上、今回はRWDのポイントを解説しました。
RWDにはメリットが多い反面、
パソコンだけを考えた従来型のサイトでは、
全体の見なおしが必要になったり、
どのように設計するかを入念に考える必要があります。
気になっている方、もう少し詳しい話が聞きたい方は
ぜひ弊社にお問い合わせください。
萩原印刷株式会社
クロスメディア部 一同
