ブログ

ブログ

2021.02.09 ホームページの基礎知識

レスポンシブデザインとは|ホームページの基礎知識

  • このエントリーをはてなブックマークに追加

多くのホームページで活用されているレスポンシブデザインについて、活用することによってどのようなメリット、またはデメリットが発生するのか理解できていますか?「Google推奨」や「単純な流行」、という理由でレスポンシブデザインを導入するのではなく、長所短所を見極めたうえで、
自社のホームページに最適だと判断したうえで利用するのが良いでしょう。


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


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


そもそもレスポンシブデザインとは何を指すのでしょう。

Googleは、
ユーザーの デバイス(パソコン、 タブレット、モバイル、非視覚的 ブラウザ)に関係なく、同じURL(アドレス)で同じHTMLコードを配信しますが、
画面サイズに応じて(つまり「レスポンシブ」に)表示を変えることができます。
引用元:Google Developers

と定義しています。

Google検索エンジンは以下の3種類のモバイルサイトを認識しています。

・レスポンシブデザイン
・動的に作成されるページ(更新機能などによって作成されるページ。実態は存在しない)
・別々のURL(PC向けとスマホ向けのページを別々に用意し、URLも分けられている状態)
この3種類のなかで、Googleはレスポンシブデザインの使用を推奨しています。
レスポンシブデザインの場合、どのデバイスに対しても共通のURL・HTML・CSSファイルを使用しているため、例えばスマホでは通常に表示されているのにタブレットでは表示エラーが起きる、という事象を避けることができます。

Google検索エンジンのクローラーの巡回の手間が少なくなるという利点やユーザビリティの向上もあるため、Googleはレスポンシブデザインの使用を推奨しているのです。

ただ、レスポンシブデザインの使用を推奨しているものの、検索順位には特に影響は無いとGoogleは明言しています。
具体的にはどのようなメリットがあり、どのようなデメリットがあるのでしょうか。


メリット

 

・ユーザーが見やすいサイトになる
デバイスによって最適化されたレイアウトになっているので、見やすいWEBページになります。
「見やすい=利用しやすい」サイトは、コンバージョンにもつながる大きなメリットです。

・更新性が優れている
どのデバイスで見ても同じHTMLを表示するので、変更するファイルが少なくて済み、作業効率が良くなります。
また、1つのHTMLのみで更新漏れが少ないという点でも優れています。

・費用が抑えられる
ケースバイケースですが、比較的費用は抑えられると考えられます。
パソコン/スマートフォン/タブレットと3ページ作るよりも、レスポンシブデザインは1ページのみ作ればいいので安価になることがあります。
ただし、どのデバイスで見てもキレイに表示されるようにCSSを書く必要があるので、その分レスポンシブデザインのページ単価は高くなります。

 

デメリット

 

・1つのファイルに対するコードの記述量が多くなる
1つのファイルにさまざまなデバイス用の記述をしますので、コードが多くなってしまいます。

・レイアウトの自由度が減る
共通のHTMLを表示するので、デバイス毎に大きく変わるレイアウトは難しいです。

 


あくまでデザイン選択肢の一つ


Googleが推奨しているとはいえ、レスポンシブデザインが最も正しいということはありません。
上記で紹介したようにデメリットも存在するため、あくまでデザインの選択肢の一つとして捉え、自社のターゲットユーザーがどのようなデバイスを使い、どのようなシーンで自社ホームページを利用するかを考え、最適なデザインを選択しましょう。

また、タブレットやスマホの新商品が次々と発売され、ディスプレイサイズもまだまだ多様化していくことは明らかです。
どのような表示サイズ、表示方法がトレンドなのか、ではそれに合った見せ方は何なのかも常に模索する必要があります。

  • このエントリーをはてなブックマークに追加
このページのトップへ