レスポンシブデザインの効果とは?メリットとデメリットを知ろう!

記事公開日:2018.05.22

最終更新日:2018.05.23

887 PV

みなさんはレスポンシブデザインという言葉を知っていますか?言葉は知らなくても、実際に見たことがある人は多いはずです。レスポンシブデザインにすれば、管理も楽になり、SEOの効果も出ますが、同時にデメリットも存在します。

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

レスポンシブデザインとは、ユーザーの使用しているデバイスに関係なく、レイアウトを自動的に使用している画面サイズに調整することを指します。

今、様々なデバイスが登場し、PCからWebサイトを見るだけでなく、スマートフォンやタブレットからも見る方が増えています。PCの表示サイズのままスマホで見ると横幅が合わず、画像も文字も大きくとても見辛いですよね。見辛さを解決するのが、レスポンシブデザインです。

スマホならスマホのレスポンシブデザインのWebページが表示され、タブレットならタブレットのレスポンシブデザインのWebページ、そしてPCは、デスクトップPCやノートパソコンのレスポンシブデザインのPCサイトのWebページが画面に表示されます。PCからもレスポンシブデザインになっているか確認することが可能です。

レスポンシブデザインの確認方法

まず、Chromeで確認したいサイトを開きます。空いてるスペースで右クリックをし、検証という項目をクリックしてみてください。コードが書いてある画面が出てきますよね。

画面の左上にあるスマホのマークをクリックします。画面が縮小され、スマホで見たときの画面が表示されます。

うまく画面に収まっていれば、レスポンシブデザインが適応されているということになります。

 

メリットとは?

一般的にはスマホ用のサイト、PC用のサイトとファイルを分けて作成します。しかし、レスポンシブデザインなら1つのHTMLを使い、CSSをHP用、スマホ用とわけるだけで切り替えることが可能です。CSSにウィンドウ幅を指定することにより切り替えることができます。メディアクエリを指定し、大きさを決めていきましょう。例えば、750px以下だったらスマホサイズを適用するなど指定することができます。

管理が楽になる!

サイトをわける必要がないので、管理が楽になります。例えば、一部分の文章を変えたいとなった時に、サイトを分けていると、PC用とスマホ用にそれぞれ変更を行う必要があります。短い変更なら、時間も手間もかからず問題はありませんが、長い文章だったらどうでしょうか?手間もかかりますが、書き忘れなど漏れがでてくる可能性があります。レスポンシブWebデザインならば、1つの変更だけでPCもスマホも適用されます。

デメリットとは?

レスポンシブデザインにもデメリットがあります。例えば、レスポンシブ化でスマホ用の画像を表示していても、見えない部分としてPC用の画像データが残っているためサイトが重くなってしまいます。不要な要素が残ってしまうということです。ユーザーにとってかなりのデメリットですよね。どんなに見やすくなったサイトでも、サイト自体が重くなってしまったのでは意味がありません。コンテンツの量を把握する必要があります。

工数が増えてしまう

様々なデバイスに対応するため、細かく設定する必要があります。デバイスによっては画面が崩れてしまう場合があります。崩れを修正する技術が必要となるため、工数がかかってしまいます。デメリットも存在することを頭におき、レスポンシブデザインをする必要があるのか?デザインをどうするのか?など考えて制作する必要があるということがわかります。

レスポンシブデザインの効果

見やすさだけでなく、レスポンシブデザインはSEOにも効果が現れます。サイトをわける場合だと、検索エンジンが混乱してしまう場合があります。検索エンジンが混乱してしまうと、SEOに影響が出てきてしまいますよね。レスポンシブデザインならば、1つのサイトをデバイスによって見え方だけを変えているため、検索エンジンが巡回しやすくSEOにとって良い効果があらわれます。

検索の順位にも影響がでる

また、Googleからモバイルフレンドリーという要素が追加されました。モバイルフレンドリーとはスマホなどから見た際に、ユーザーにとって快適にWebサイトを閲覧できるようになっていることです。モバイルフレンドリーはGoogleの検索順位に影響が出ます。

レスポンシブデザインは、スマホなど様々なデバイスに合うように制作するため、モバイルフレンドリーの条件に当てはまり、順位が上がりやすくなります。ユーザーにとって使いやすいだけでなく、SEOにも効果があることがわかりますね。

レスポンシブデザインのまとめ

レスポンシブデザインは見た目だけでなく、SEOなどの効果があることがわかりました。もちろんデメリットも存在し、デメリットも含めて制作をしなければなりません。技術が必要となりますが、大変な分メリットもあるので、しっかりレスポンシブ化ができるように更に技術も身につけていきたいと思います。

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

筆者

A.Yabe

Bigmac制作部に所属。まだまだひよっこなので、早く一人前になれるよう、勉強の日々です。覚えることは沢山ありますが、新しい知識が増えることがとても楽しいなと感じます。ぼんやりと空を見上げていると、気持ちがリフレッシュし、新しいアイデア浮かんだりするので好きです。好きなデザインに出会えると、恋をしたようにドキドキが止まりません。人の心を射止めるようなデザインができるように頑張っていきたいです。よろしくお願いします。

筆者が最近執筆した記事