Webページを表示させる際、スマートフォン・タブレット・PCなどの各デバイスに適したページにしておかなければなりません。なぜなら、デバイスによっては広告が見づらくなったりし、ユーザーが他社サイトに流れて行ってしまうためです。
商品やサービスの広告を消費者へ効果的に届けるためには、自社サイトにPCからアクセスしてきたユーザーも、スマートフォンからアクセスしてきたユーザーにも適切に閲覧してもらえるよう対策をすることが大切です。昨今はGoogleがレスポンシブWebデザインを推奨していることもあり、自社サイトを検索上位に表示させるためにも対策が必要とされています。
本記事では、上記のような悩みを解決できるレスポンシブWebデザインの概要や種類、実装方法についてご説明します。
目次
レスポンシブWebデザインとは？
レスポンシブWebデザインとは、スマートフォン・タブレット・PCなど、異なる画面サイズの幅を基準にしてWebサイト表示を柔軟に調整し、見やすくすることを指します。レスポンシブWebデザインのメリットは、同一のファイルですべてのデバイスに対応した表示ができる点にあります。
また、テキストや画像など、ホームページのもととなる要素は共通のものを使用しますので、更新や修正の際にファイルを一元化して管理できるようになります。さらに、GoogleがレスポンシブWebデザインを推奨していることからも、今後はますますレスポンシブWebデザインの重要性が高まっていくと予想されます。
関連記事：初心者でもわかるホームページのレスポンシブ化とは？
レスポンシブWebデザインの種類
では、レスポンシブWebデザインによって自社のホームページを、具体的にどのように見せられるのでしょうか。ここでは、レスポンシブWebデザインの種類である、レスポンシブ・リキッド・フレキシブルといった3種類のレイアウトについてご紹介します。
レスポンシブ
レスポンシブレイアウトとは、画面の幅に応じてCSSを切り替えるレイアウトのことです。
CSSの切り替えを行うピクセル数は「ブレイクポイント」と呼ばれ、このブレイクポイントの値を指定することで、ユーザーの使用デバイスに適した表示をすることができます。
リキッド
次に、リキッドレイアウトは表示するデバイスの画面幅に合わせてサイト全体の幅が変化するレイアウトのことです。たとえばPCで制作したサイトをスマホで表示した際、サイト全体が見えず、何度も横スクロールをして煩わしい思いをされたことのある方も多いかと思います。
リキッドレイアウトは各要素の単位をパーセンテージにより指示するため、自社サイトをどのデバイスからも見やすく仕上げられるメリットがあります。
フレキシブル
最後に紹介するフレキシブルレイアウトも、リキッドレイアウトと同様に、各要素の単位をパーセンテージで表示するものです。ただし、フレキシブルレイアウトではさらに、画面の最大幅と最小幅を設定することができます。
あらかじめ設定した最大幅よりも大きなデバイスで表示した際には、外側に余白を作って見た目を整える機能があります。そのため、PCで表示したときのレイアウトだけ固定したいときには、こちらのフレキシブルレイアウトが最適だと言えるでしょう。
レスポンシブWebデザインのメリット
レスポンシブデザインには、Webサイトを運営する事業者・商品やサービスを購入する消費者・そして検索エンジンといったどの立場から見てもメリットがあります。
● サイト管理の手軽さ
● SEOに有利
● SNSでシェアされやすい
それぞれのメリットを順番にご説明します。
①サイト管理の手軽さ
レスポンシブデザインを導入すれば、サイト運営者は1種類のHTMLファイルを管理するだけで、あらゆるデバイスにサイトを表示させることができます。つまり、サイト管理の手間を削減できることに繋がります。
したがって、サイト管理担当者の人件費など、事業にかかるコストを削減できます。その結果、削減したコストを集客予算に回したり、新規事業へ投資するための予算として確保したりすることもできるでしょう。
②SEOに有利
スマートフォンが急速に普及している現代社会では、事業者のWebページもスマホに対応させてほしいというニーズが高まっています。また、Googleなどの検索エンジンも、モバイルフレンドリーなサイトを優先して表示させるよう取り組んでいます。
この点に関しては、Googleの公式ガイドラインにも明記されているほどですので、いかにレスポンシブWebデザインがSEOにおいて重要であるかわかるのではないでしょうか。
現代は「コンテンツ is キング」と言われているほどコンテンツの重要性が高まっていますが、検索エンジンに評価されるようデザイン面も精査することが大切です。
③SNSでシェアされやすい
レスポンシブサイトは、使用デバイスに関わらず1つのURLで表示されるため、消費者からすればWebページをSNSでシェアすることが容易です。さらに、拡散されたサイトはあらゆるデバイスで表示可能なため、レスポンシブではないURLと比較して拡散数を向上させることができます。
レスポンシブのデメリット・注意点
ここまで、レスポンシブWebデザインのメリットを解説してきました。ここでは、レスポンシブデザインのデメリットや注意しておくべき点をご説明します。
①デザインの制限および崩れやすさ
レスポンシブデザインは、すべてのデバイスで同一のHTMLを使用するため、レイアウトを大幅に変えることはできません。したがって、幅広いデバイスに対応させる必要があるため、デザインやフォントの種類も汎用性のあるものに限られます。
また、Webデザインの知識が十分に備わっていないと、スマートフォンやタブレットでレイアウトが崩れてしまう場合もあります。ゆえに、あまり凝ったデザインにしてしまうとサイトを表示できないデバイスが出てくる可能性があるということです。
そのため、レスポンシブサイトを制作する際は、できる限り簡潔かつ汎用性のあるデザインにて制作することが大切です。
②コーディング所要時間
レスポンシブサイトは、デバイスごとにデザインを考案・コーディングする必要があります。ひとたびコーディングが終わりさえすれば、管理すべきファイルは1つだけであるため、管理コスト自体は削減できます。しかし、複数パターンのデザインを実装するためには、それだけコーディングの手間がかかります。
これからレスポンシブデザインを始める事業者の方は、デザイナーの稼働時間を多めに見積もっておくと、コストや売上に対する認識の乖離が生まれにくいでしょう。
③スマホページの表示遅延リスク
レスポンシブサイトは、HTMLが1つのみであるといった特徴があります。そのため、サイト管理に手間がかからない反面、PCとスマホに同じデータを読み込ませるため、スマホサイトで表示しないデータ（つまり不要なデータ）まで読み込もうとしてしまい、サイト表示速度が低下するケースが多々あります。
実際、Webサイトの表示速度が3秒遅くなると、ユーザーの離脱率がおよそ50％上がるといったデータも出ています。したがって、レスポンシブサイト制作の際はすべてのデバイスで同じデータを読み取ることを考慮し、あまり多くのデータを詰め込みすぎないよう注意することが大切です。
レスポンシブWebデザインの実装方法
ここからは、レスポンシブWebサイトの作り方をご紹介します。難解なイメージを抱く方も多いかもしれませんが、実は非常にシンプルで、以下の2ステップで実装できます。
● meta viewportタグの追加
● CSSファイルで指定
それぞれのステップを順番にご説明します。
meta viewportタグの追加
まずは、meta viewportタグを追加します。HTMLファイルで制作されたWebサイトの場合は、すべてのHTMLファイルのヘッダー部分に追記する必要があります。一方、WordPressで作成されたWebサイトであれば、共通のテンプレートファイルに追記する形で問題ありません。
上記のタグを追加することで、サイト訪問者の使用機器の画面サイズなどを読み取れるようになります。その後、以下のステップ2によって具体的な指示を行います。
CSSファイルで指定
メディアクエリを用いて、CSSでレスポンシブ指定を行います。この方法では、画面サイズに応じてCSSの適用内容を切り替えられるため、PCとスマホで表示やレイアウトを変えることができます。
まとめ：検索エンジンへの対策にはレスポンシブWebデザインの導入が必須 !
冒頭でも述べたように、昨今は検索エンジンがレスポンシブWebデザインを推奨していることもあり、これから自社サイトを検索上位に表示させてより多くの消費者に商品・サービスを知ってもらうためにも、レスポンシブWebデザインを避けては通れません。
この記事でご紹介したメリット、およびデメリットを正確に把握しておき、レスポンシブWebデザインを効果的に取り入れることでSEOを強化しましょう。
