レスポンシブデザインを正しく理解しないまま闇雲にサイトを構築すると、思わぬところで落とし穴にはまる可能性があります。レスポンシブデザインにはメリットとデメリットが3つずつありますので、それらと解決方法について分かりやすく解説していきたいと思います。
正しい認識を身に付け、SEOに役立てましょう。
レスポンシブデザインは「画面サイズに応じて表示サイズが変わる」
レスポンシブデザインは、
「表示領域のサイズやデバイスの種類にかかわらず、適切に表示されるようにページを設計することで、どんな環境においても最適化された画像や文字を提供できるようにする」
ためのページ設計方法のことです。
つまり、パソコンやタブレット、スマホ、ガラパゴス携帯など、ユーザーの利用デバイスに左右されず、ひとつのURLで画面サイズに応じて適切な画像や文字の表示サイズに変わるサイト設計方法です。
しかし、この方法をきちんと理解せずにデザインすると、レスポンシブデザインが本来解決してくれるはずの問題に悩まされ、作業工数が膨れ上がったり、低品質なページを作り出してしまうことにつながります。
スマホが登場する前はデバイスごとにページを用意していた
スマホが登場し、人々がガラパゴス携帯から乗り換え始める前の時代は、インターネットの閲覧デバイスは基本的に「パソコン」もしくは「携帯電話」でした。
当時はパソコン用の表示設定、ケータイ電話用の表示設定をそれぞれURLで分けて別の形のサイトを用意する手法が主流でした。
やたら縦長でページの左に寄ったページを見たことはありませんか？あれは携帯電話用に用意されたページデザインです。それをパソコンなどで閲覧すると縦長に見えてしまうというわけですね。
しかし、従来のデバイスごとにページを用意するという設計方法では、あらゆるデバイスに対して最適化させることが困難でした。今ではスマホやタブレットなどユーザーの利用するデバイスが多様化して、特定の環境だけに向けて設計することは非効率的になってしまったからです。
レスポンシブデザインなら常に表示領域が最適化される
レスポンシブデザインは、表示領域のサイズやユーザーデバイスの種類にかかわらず適切にページが表示されるようサイトを設計するため、あらゆる環境に対して最適化させることを目的に作られました。
正しい理解のもとにレスポンシブデザインのサイト設計をすると、どのデバイスの表示領域においても、デザインの見え方だけでなく余白やフォントサイズまでが整合性のとれた状態になります。
あらゆるデバイスにおける見え方を想定してサイトを設計できれば、これから新しい表示サイズのデバイスが登場したとしても、サイトを常に最適な形で表示させることができます。
レスポンシブデザインのメリットはこの3つ！
それでは、まずレスポンシブデザインのメリットから見ていきましょう。
レスポンシブデザインには大きく分けて3つのメリットがあります。
ひとつのページなので管理がしやすくユーザビリティも良い
レスポンシブデザインで最もわかりやすいメリットは「画像や文字サイズがユーザーの利用デバイスによって勝手に変わってくれる」という点です。
同じURLで構築された1つのサイトにもかかわらず、閲覧者が利用するデバイスによって表示サイズが自動的に変更されるので、複数のHTMLを増やす手間もなく非常に管理がしやすいです。
また、レスポンシブデザインはユーザビリティの点から見ても優れています。ユーザーの利用デバイスごとに表示サイズが変わるので読みすく、見やすいデザインになるので、ユーザーの評価も高くなりやすいでしょう。
表示エラーが少なくなる！
複数のURL、HTML、CSSを持つサイトを制作すると、例えばパソコン用サイトではちゃんと表示されているのに、スマホ用では表示エラーが起きるといった問題が頻繁に起こります。
しかし、レスポンシブデザインの場合、URL、HTML、CSSファイルが全て同一なので「表示エラー」が圧倒的に少なくなります。
検索エンジンのクローラーの手間を省くことができる
上記のとおり、レスポンシブデザインではURL、HTML、CSSファイルが全て同じなので、Googleの検索エンジンのクローラー（ウェブにある画像や文字などの情報を集めるプログラムのこと）にとっても手間が省けます。
検索順位にはあまり影響はしないようですが、手間が省けるということはより効率的にクローラーにページを拾ってもらいやすいということになります。そのため長い目で見ると、少しは検索順位に影響する可能性もあるかもしれません。
レスポンシブデザインのデメリットはこの3つ！
続いてレスポンシブデザインのデメリットですが、こちらも大きく分けて3つあります。
読み込みに時間がかかり、ユーザーが待ちきれなくなる可能性が
同一のURL、HTML、CSSファイルを利用しているということは、基本的に最も大きいデバイスである「パソコン用」に制作されているため、ユーザーがスマホやタブレットでページを表示しようとしたときにページの読み込みに時間がかかってしまい、待ちきれずにページを閉じてしまう可能性があります。
これは画像においても同様で、容量の大きい画像を多く載せたサイトの場合、表示スピードが遅くなる可能性があります。
画像や文字が多すぎるとスマホ用ページでは見づらくなることも
レスポンシブデザインは基本的にパソコン用サイズに合わせて制作する必要があります。なぜなら、例えば画像1つをとっても「サイズの大きい画像を小さくする」のは画像の画素に問題は生じませんが、「サイズの小さい画像を大きくする」と画素が粗くなったり、文字が潰れてしまったりするからです。
ですからレスポンシブデザインは基本的にパソコン用ページに合わせて制作され、そこからタブレットやスマホ用に縮小していくことになります。ページ内に画像や文字が多すぎるとスマホページではそれらが画面上に収まりきらなくなったり、適切に配置されず見づらい、読みづらいページになってしまうのです。
また、画像を加工したり、画像の上に文字を載せたりしても、それらは縮小されるということを理解しておかなければなりません。画像上に多くの文字を載せていると、文字も画像も両方見づらくなってしまいます。
複雑なページの場合は制作段階の工数が多くなる
シンプルなページであればあまり気にすることはないのですが、ページが複雑になればなるほど、制作段階で工数が多くなります。
上記に挙げたような画像の問題や、あらゆるデバイスでの見え方を考慮して1つのデザインを作り上げる必要性から、複雑なページの場合はどうしても工数が多くなってしまうのです。
デメリットの解決策
それでは、上に挙げたデメリットの解決方法を解説します。
表示スピードの解決策はこの3つ
まず、表示スピードの問題ですが、これの解決策は3つあります。
- ページの構成をできるだけシンプルにすること
- 画像をキャッシュ化するプラグインやツールを利用すること
- できるだけ容量の大きいサーバーを利用すること
この3つが挙げられます。
とにかく「表示スピードを上げること」がレスポンシブデザインを利用する上での大きな課題の一つです。
画像や文字の見え方は「シンプルなページ」「画像のテスト」で解決
この解決策としては、まず「画像は多すぎないようにする」ことが大切です。また、文字も1つのページに無理やり詰め込むのではなく、複数のページに分けて載せるようにしましょう。そもそも、「1つのページでは1つのことだけに焦点を絞って伝える」ことが、SEO的にもユーザーにとっても理想的な状態なります。シンプルで分かりやすく、読みやすいページを目指しましょう。
そして画像のサイズを決める際、1つの画像に対しスマホ用、タブレット用、パソコン用の3つのサイズでテストするのが理想的です。もちろん、最終的に入れる画像はパソコン用に合わせた画像となりますが、その画像をスマホ用やタブレット用に縮小するとどのような見え方になるのか、をテストしておくことが大切です。
具体的には、スマホ用ビューポート幅が320pxから始まり、パソコン用ビューポートは1920pxが最大なので、この幅に収まるサイズの画像を作ってみます。
と言っても、1920pxにするとパソコン画面の端から端までになってしまうので、もっと小さい幅にする場合が一般的です。
例えば、パソコン用画像で幅が1024pxのものを作ったとします。この時に320pxに縮小するとどう見えるのか、また、320と1024の中間地点の数値（670程度）ではどうなるのかをしっかりテストしましょう。
「工数が多い」デメリットの解決策は存在しない！？
実は、「工数が多い」というデメリットに対する具体的な解決策は存在しません。
なぜなら、ページが複雑化すればするほどページの制作工数が上がるのは当然のことだからです。それがレスポンシブデザインの場合、より多くなってしまうというだけのことなんですね。
ですが、ここには、解決策というよりも知っておくべき事実があります。
それは、少し上述しましたが、「複雑なページよりもシンプルで見やすく、読みやすく分かりやすい短いページ」のほうが、検索エンジンにもユーザーにも好まれるという事実です。
これはレスポンシブデザインであろうと、そうでなかろうと変わらぬ事実です。ということは、やたら複雑化したデザインのページを1つ作るよりも、1つのことに関して明確に述べるページを複数作ったほうが良いということになります。
だからこそ、シンプルなページを作成することがまず必要になり、これが「工数の減少」にもつながっていくのです。
レスポンシブデザインでは「シンプルなページ」にすることが大切
サイトを作る際、一概に「レスポンシブデザインにしたほうが絶対に良い」というわけではありません。しかし、制作後の修正や検索エンジンのクローラーの手間などを考えると、やはりレスポンシブデザインを扱ったほうが楽だということがわかります。
この記事ではメリットとデメリット、基本的な解決方法を載せましたが、レスポンシブデザインであれ、なんであれ、ページの制作に最も大切な考え方は「オリジナルで、シンプルで、見やすく、読みやすい、簡潔なページ」です。
この考え方に則って、より効率的に表示させるために作り出された設計方法が「レスポンシブデザイン」になります。
そのため、この考え方に沿ってページ制作をしないと「レスポンシブデザインは正確に機能しない」ということを覚えておきましょう。
コメント