レスポンシブデザインってどんなデザイン? その特徴とメリット&デメリット

レスポンシブデザイン

スマートフォンやタブレットなど、インターネット閲覧用の端末がますます多様化する中、webサイト制作の現場では、どんなサイズの端末でも見やすいページデザインを設計することが求められています。
スマートフォンが出始めたばかりのころは、PC表示用とスマホ表示用の2種類のデザインファイル(htmlファイル)を用意し、ユーザーがサイトにアクセスする時に、自動的に最適なデザインファイルに振り分けて表示させる方法が主流でした。
しかし最近ではその方法にかわり、1種類のデザインファイルであらゆるサイズのデバイスに対応させる「レスポンシブデザイン」が主流となってきています。

レスポンシブデザインで作られたwebページは、基本的には1つのデザインファイル(htmlファイル)だけを使用するのですが、デバイスの画面サイズに合わせて流動的にレイアウトや画像サイズなどが変化し、デザインが最適化されます。
たとえば、PCでは横3列で表示されていた写真がスマホでは縦1列に並んだり、フォントの大きさが異なったりなど、デザインは変化するのですが、掲載されている写真や文章などのコンテンツ内容そのものは変わりません。

レスポンシブデザインは、Googleが2021年3月にモバイル・ファースト・インデックスへ完全移行する発表したことで、ますます関心が高まっています。

レスポンシブデザインのメリット

webサイトの更新や管理が楽

従来のスマホ対応サイトでは、PC版とスマホ版の2つのhtmlファイルを用意していたため、コンテンツの内容を修正する際には、PC版とスマホ版の2つのファイル両方を修正する必要がありました。
しかしレスポンシブデザインで作られたサイトの場合は、デザインファイルは1つだけですので、修正作業は1回で済みます。
つまり、更新費用が抑えられるということです。

SEO(検索エンジン最適化)に有利

レスポンシブデザインで作られたサイトは、Googleから「モバイルフレンドリー(スマホ対応になっているサイト)」とスムーズに認定されやすく、検索結果の上位に表示されやすくなります。

また、PC版とスマホ版の2つのファイルを用意している場合と異なり、URLが1つに統一されますので、SNSや他サイトから貼られるシェアリンクのURLが分散せずに済みます。そういったことも、SEOに有利に働きます。

レスポンシブデザインのデメリット

デザインに制限がある

レスポンシブデザインでは、どんなデバイスで閲覧しても綺麗なデザインになるように慎重にバランスを取る必要がありますので、特定のデバイスだけを対象にしたデザインと比較しますと、実現できるデザインの自由度がかなり低くなります。
また、PCやスマホなどのメジャーな端末での見え方を最優先して作成するため、一般的ではないサイズのデバイスで表示したときに、完璧に美しいデザインにはなっていない場合があります。

基本的には、内容は同じで見た目だけを変化させるという作り方ですので、PCとスマホで内容を大きく変えることは困難です。
できないことはないのですが、非常に手間がかかる作業となるため、むしろレスポンシブにはせずにPC版とスマホ版のデザインを別に用意した方が良いでしょう。

スマホ表示の読み込みに時間がかかる

PC表示用と共通のファイルを使っているため、スマホで表示したときには非表示と設定している要素も、一緒に読み込まれてしまいます。そしてその分、読み込み時間が長くなります。
また、コンテンツそのものが、スマホページとしては縦に長くなりすぎてしまう傾向にあることも、デメリットのひとつと言えます。

まとめ

レスポンシブデザインにはメリットが多いですが、サイトのターゲットユーザーがモバイルユーザーのみであったり、PCとスマホとで内容を大きく変えたい場合などには、デメリットの方が多くなるケースもあります。
そのようなサイトの場合は、PC版とスマホ版と2つのデザインを用意する方が良いでしょう。

レスポンシブを採用するかどうかについては、サイトを制作する前にターゲットや目指すゴールなどについて検討した上で、慎重に決めていくことをおすすめいたします。

デザインに関することはこちら

WORKS