⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？

多くのホームページに導入されているレスポンシブデザインですが、レスポンシブ化することによってどのようなメリット、またはデメリットが発生するか把握できていますか？

「Googleが推奨しているから」、「流行しているから」、という単純な理由でレスポンシブデザインを導入するのではなく、長所短所を見極めたうえで、自社のホームページに最適だと判断したうえで利用するのが良いでしょう。

今回は、レスポンシブデザインのメリットとデメリットを解説します。

1．レスポンシブデザインとは

レスポンシブデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指します。

従来の検索ユーザーの多くはPC画面からコンテンツを閲覧していましたが、検索ユーザーの使用デバイスがスマートフォン・タブレット・PCなど、画面サイズの異なるデバイスに変化したため、それぞれの画面サイズに対応するレスポンシブデザインに注目が集まっているのです。

また、レスポンシブデザインは1つのHTMLで配信され、デバイスごとにCSSを用意して表示を変える仕組みをとっています。

この仕組みのおかげで、いずれのデバイスに対しても同じURL・HTML・CSSを使用できるため、「モバイル版ページでは表示されるが、PC版ページではエラー表示になる」といったユーザビリティを低下させる事態を回避することができます。

Googleはモバイル版ページを作る方法として以下の3つを想定していますが、実装と維持が最も容易であるレスポンシブデザインの実装を推奨しています。

レスポンシブデザイン：検索ユーザーのデバイスの種類に応じて画面サイズが変化

動的な配信：同じ URL で異なる HTML（および CSS）をサーバーから返す

別個のURL：PC版・モバイル版それぞれのHTMLを用意し、URLも別個で作成

2．レスポンシブデザインが求められる背景

レスポンシブデザインは以前から存在していましたが、Googleが2021年3月にMFI（モバイル・ファースト・インデックス）へ完全移行する旨を発表したことから、さらに関心が高まっています。

MFIとは、Googleのクローラーがモバイル版ページをインデックスすることを意味していますが、従来のPC版ページのインデックスからモバイル版ページのインデックスに完全移行することで、モバイル版ページを作成していないWebサイトの検索順位下落が危惧されているのです。

つまり、モバイル版ページの準備ができていないWebサイトは、モバイル版ページの作成が必要な状況となっています。

3．レスポンシブデザインのメリットは？

レスポンシブデザインのメリットとしては、どのデバイスでも同一のファイルを利用できるため、管理が非常に簡単になることと、デバイス毎の表示エラーを減らせることにあります。以下、主なメリットを並べておきます。

  • 現在多くのブラウザによってサポートされているCSS3を使用しているため、汎用的である。より多くの人に見てもらえる。
  • カラムや画像が、スクリーンサイズに合わせて自動的に適切なサイズになる。そのため、サイト上の情報を適切に得ることができる。
  • HTMLを分けるモバイルサイトでは、デバイスの数だけHTMLを増やしていかなければならないが、レスポンシブで制作すればHTMLファイルは同一なので管理がしやすい。修正も1つのHTMLだけでよいので、モバイルサイトは古いままといった事態を防げる。

4．レスポンシブデザインのデメリットは？

レスポンシブデザインを導入した際のデメリットは、スマホサイト上で起こるものが多くあります。パソコン用の情報をスマホで読み込むというのは、パソコンよりもスペックが劣るスマホにとっては、データ読み込みなど負荷のかかる作業になります。

スマホでの読み込み時間の遅さは、ユーザビリティに大きく影響するため、掲載する情報はシンプルにしてできるだけ読み込みに時間がかからないようにすることが重要です。以下に主なデメリットを並べておきますのでご確認ください。

  • PC用のHTMLコードやCSSも読み込むため、表示に時間がかかる。CSSで画面に表示しないようにしても、読み込みは行われるため、ユーザーが待ちきれなくなる恐れがある。
  • 画像も同様。PC用の大きい画像では携帯用の3G/4G回線で読み込むのに時間がかかる。
  • シンプルなページであればよいが、レスポンシブサイトの制作は通常より工数がかかる場合が多い。
  • PCサイトのテキストや画像が多すぎる場合、スマホページでは文字が溢れてしまうなどレスポンシブ化は難しくなる

5．レスポンシブWebデザインの作り方

レスポンシブデザインを作るには、ページのHTMLとCSSファイルにそれぞれ「meta viewportタグ」と「メディアクエリ」を記述する必要があります。記述自体は簡単な作業なので覚えておくと便利です。

5-1．meta viewportタグを追加する

HTMLファイルで作成したWebサイトの場合は「すべてのHTMLファイルのヘッダー部分」、WordPressで作成したWebサイトの場合は「header.php」に以下のコードを記述します。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

meta viewportタグを記述することにより、

①閲覧ユーザーの使用デバイス情報の取得、

②取得情報から画面横のサイズを把握してPC版・スマホ版を判断、ができるようになります。

meta viewportタグの記述に加えてCSSファイルにメディアクエリを記述することで、デバイスごとの画面表示を変えることができます。

5-2．CSSファイルにメディアクエリを記述する

メディアクエリを使うことによって、閲覧ユーザーの画面サイズに応じたページサイズの切り替えができるようになります。まずは、PC版ページを表示する値（ブレイクポイント）を指定していきます。

@media screen and (min-width: 481px)　{ }

「min-width: 481px」と指定することで、画面横のサイズ（CSSピクセル）が481pxに達した時に、モバイル版ページからPC版ページへと画面サイズが切り替わるようになります。また、{ }内には通常使用するCSSコードを記述していきます。

次に、画面サイズが0px～480pxの場合に表示するモバイル版ページの設定を行っていきます。CSSファイルには以下のコードを記述しましょう。

@media screen and (max-width: 480px)　{ }

「max-width: 480px」と指定することで、480px以下の画面サイズではモバイル版ページが表示されるようになります。

6．レスポンシブデザインのおすすめテンプレート

1つのHTMLで様々なデバイスに対応できるレスポンシブデザインですが、1つのデザインを作成することに変わりはないため、制作に時間がかかってしまいます。自社サイトの方針もよりますが、予め作成されているテンプレートを使用して効率化したい方は「無料ホームページテンプレート.com」を活用してみてはいかがでしょうか。

無料ホームページテンプレート.com　https://f-tpl.com/category/HTML%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88/

無料かつ商用利用可能なテンプレートとなっているため、時間がない方に特におすすめです。

また、WordPressを自社サイトに導入している方は「WordPressのレスポンシブデザイン対応テーマ」を購入することによって、自動的にレスポンシブデザイン実装を完了させることが可能です。

7．まとめ

総務省の統計にもあるように、現状では個人のインターネット利用は、PCよりスマホの割合が上回っています。そのためWebサイトの管理者は、スマホ対応のサイト運営が必須となってきました。

モバイル版ページを準備していないWebサイトは今後検索順位が下落してしまう可能性があるため、今のうちに対策を講じておきましょう。

⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？