スマートフォンがこれだけ普及した世の中で、サイトへのアクセスの7割がスマートフォンからといわれるようになりました。
よく言われている、サイトを「モバイルフレンドリー」にするためには「レスポンシブデザイン」を導入する必要があります。
モバイルフレンドリーとは、文字通り「携帯端末(モバイル)」からのアクセスで「見やすいサイト(フレンドリー)」の状態を指しています。
この記事ではレスポンシブデザインとは何か、そしてモバイルフレンドリーにする方法について解説しております。
- レスポンシブデザインとは、どの端末からみてもストレスなくサイトを閲覧できるデザインのこと
- WordPressでサイトを作成するときは、多くの場合レスポンシブデザインが採用されている
目次
レスポンシブデザインとは
レスポンシブデザインとは、画面サイズ最適化のことです。
最近はパソコンからウェブページを見るよりも、スマートフォンから見ることが多くなってきているため、レスポンシブデザインの対応はほぼ必須となっていることが多いです。
WordPressで作られているテーマは、レスポンシブ対応しているものが多くあるため、安心して使用することができます。
ただし、デザインの崩れなどがないかを確認するためにも、パソコンからレスポンシブデザインに対応できているかどうかの確認方法を知っておくとよいでしょう。
なぜレスポンシブデザインという考え方が生まれたか
もともと、スマートフォンが登場した当時、ホームページはパソコン用のサイトとスマートフォン用のサイトの2種類を制作していました。
しかし、2種類のサイトを作成するため、費用も時間もかかってしまうことから、1つのCSSでパソコン用のサイトのデザインとスマートフォン用のサイトのデザインが表現できるようになったことで、「レスポンシブデザイン」というものが認識されるようになったそうです。
カスケード・スタイル・シートの頭文字をとったもので、主にホームページのデザインを変更する際に操作される部分です。
レスポンシブデザイン最大の特徴がパソコン用サイトとモバイル用サイトを別々に作らなくてもよい、という点にあるでしょう。
ウカブページを2つ用意する手間がなくなったんだよね
Googleの認識するレスポンシブデザインとは
Googleは2015年4月にモバイルフレンドリーアップデートを行っており、モバイルフレンドリーなページの検索順位を上位に表示させることを発表しております。
Googleはレスポンシブデザインを下記のように認識しています。
ユーザーのデバイス（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）レンダリングを変えることができます。
引用元：モバイル SEO の概要 | 検索 | Google Developers
また、Googleでは以下の3パターンをモバイルフレンドリーサイトとして認識しています。
- レスポンシブデザインで表現されているサイトである場合
- 動的な配信でサイトが表現されている場合(ショッピングサイトのように動的なページで作られている場合)
- 別々の URLでサイトが表現されている場合
特に、Googleはこの中でレスポンシブデザインを推奨しており、
- URLが1つなのでユーザーによるコンテンツの共有などが簡単になること
- Googleのアルゴリズムが正確に認識してくれること
- デバイスごとに最適化したページへ誘導する必要がなくなるので、読み込み時間を短縮でき、かつサイトを運営する手間がなくなること
などの理由からレスポンシブデザインを推奨しています。
ただし、上記の3つの方法(レスポンシブデザイン、動的な配信、別々のURL)のいずれかでモバイルフレンドリーされた場合、レスポンシブデザインでモバイルフレンドリーサイトの判定をされたからと言って検索結果で上位に表示される、ということはないとGoogleは明言しています。
テラスあくまでGoogleはレスポンシブを「推奨している」です
レスポンシブデザインのメリット
どの端末からも見やすい
レスポンシブデザインを導入することで、画像のサイズや画面の表示がスマートフォンやタブレットで見る場合に一番適したデザインへと変化してくれます。
そのため、見やすさだけでなく、使いやすさも大幅に向上することを見込めます。
もしサイトがパソコン用のデザインしか用意していなかった場合、スマートフォンでは非常に見づらく、使い勝手も悪くなってしまいますので、せっかく訪問してくれたユーザーがすぐにサイトを閉じてしまうかもしれません。
また、レスポンシブデザインを導入するためにはパソコン・タブレット・スマートフォンにかかわらず多くのブラウザでサポートされているCSS3を活用しますので、安定した運用が望めます。
テラス常にユーザー第一の考え方は変わりません
URLを1つに統一することができる
サイトのURLがパソコン版とスマートフォン版に分かれていた場合、毎回そのサイトを紹介するために2つのURLを紹介しなければなりませんが、URLが1つであれば紹介しやすいです。
また、サイトのURLが2つに分かれていた場合、まずはユーザーの使っているデバイスがパソコンなのかスマートフォンなのかを判断した後で、適切なデザインのサイトへと飛ばします。
あれは2つのサイトがあることを示しており、リダイレクトという機能を使ってユーザーの閲覧する端末がスマートフォンだった場合にスマートフォン版のサイトへ飛ばします。
URLを統一することでリダイレクトを行う必要もなくなりますので、ユーザーも手間が一つなくなり、スムーズにサイトを閲覧することができます。
URLを統一することで、サイトも2つのサイトを運営することがなくなりますので、HTMLファイルやCSSも一つで完結できますので、サイトを運営する私たちにとっても大きなメリットがあります。
ウカブ管理すべきサイトが1つになることはいいことだよね
Googleのお墨付き
先述した通り、Googleはモバイルフレンドリーを推し進めておりますので、レスポンシブデザインを導入し、モバイルフレンドリーであることが認識されれば上位に表示しやすくなります。
レスポンシブデザインのデメリット
デバイスによってデザインが崩れる恐れ
レスポンシブデザインは、1つのCSSですべてのデバイスに対応させるため、デザイン1つでも変更する場合は慎重にならなければなりません。
場合によってはスマートフォンで見る場合のみならず、パソコンでサイトを閲覧する場合にも影響を及ぼす可能性があります。
WordPressでもデザインは操作することができますので、デザインを変更する場合はレスポンシブにも注意しながら変更するようにしましょう。
スマートフォンでサイトを表示する場合、読み込みに時間がかかることも
どうしてもサイトのデザインはパソコンで見ることを前提として作りやすいですので、あまりパソコンで見る場合のデザインを作り込んでしまうと、スマートフォンで表示させたときに読み込みに時間がかかってしまうこともあります。
ですが、近年はスマートフォン自体の性能も向上してきましたので、そこまで気にする必要はないかもしれません。
テラス読み込みの問題は時代とともに解決する可能性が高いでしょう
初期費用が高額
WordPressで作成する場合はあまり気にしなくてもよいのですが、HTMLファイルで1からサイトを作成する場合、レスポンシブデザインの導入を行うと、どうしても高額になってしまいがちです。
レスポンシブデザインを導入する場合は、最初からデザインの設計を慎重に行わなければなりませんので、仕方のないこととなります。
WordPressだとテーマの存在がありますので、あまり意識はしませんが、レスポンシブデザインは実は実装することが大変なんだ、という認識だけあれば十分なのではないでしょうか。
テラス実はレスポンシブデザインを会社にお願いすると、追加費用を支払わないといけないこともしばしばあります。
レスポンシブデザインかどうかの判断
WordPressで確認する場合
テーマ → カスタマイズ → メニュー右下のスマートフォンマークで切り替えることができます。
1.テーマからカスタマイズを選択
2.カスタマイズ画面の赤枠部分をクリック
3.スマートフォン表示に変わります。
Google Chromeで確認する場合
1.画面の赤枠内で右クリックし、検証を選択（ctrl+shift+iまたはF12キーでも同じ動作になります）
2.画面の赤枠部分をクリック
3.レスポンシブモードに切り替わりますので画面の横幅を伸縮できます。
WordPressでレスポンシブデザインを導入するためには
WordPressで配布されているテーマの多くにレスポンシブデザインが導入されていますので、あまり意識する必要はありません。
特に有料のテーマには必ずと言っていいほどレスポンシブデザインが導入されていますので、安心して使用できます。
テラスそれでも一度確認しておくとよいでしょう
まとめ
パソコンからの表示はきれいでも、レスポンシブデザインに対応してない場合やレスポンシブデザインが崩れている場合、Googleから検索順位を下げられることがあります。
最近ではスマートフォンからの閲覧は7割とも言われており、いかにスマートフォンで綺麗に表示させるかに力を入れる必要があるかお分かりかと思います。
新しいテーマを導入した場合、必ずレスポンシブデザインに対応しているかどうかを確認するようにしてください。
それでは今回のまとめです。
- レスポンシブデザインはパソコンでもスマートフォンでも、どのような画面幅でも見やすく使いやすくするために行うデザインのやり方です。
- WordPressではおおよその場合、テーマにレスポンシブデザインが導入されておりますので、そこまで意識する必要はありません。
- テーマのデザインを変更する場合は、レスポンシブデザインのCSS部分も変更しなければならないことがありますので、注意して行うようにしましょう。
