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

みなさんはレスポンシブデザインという言葉を知っていますか?言葉は知らなくても、実際に見たことがある人は多いはずです。
今、Webサイトで見かけることの多いレスポンシブデザイン。今回はレスポンシブデザインについて記事を書いていきたいと思います。

 

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

レスポンシブデザインとは、ユーザーの使用しているデバイスに関係なく、表示サイズを自動的に使用している画面サイズに調整することを指します。今、様々なデバイスが登場し、PCからWebサイトを見るだけでなく、スマホやタブレットからも見る方が増えています。PCの表示サイズのままスマホで見ると横幅が合わず、画像も文字も大きくとても見辛いですよね。それを解決するのがレスポンシブデザインです。

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

 

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

まず、Chromeをで確認したいサイトを開きます。空いてるスペースで右クリックをし、検証という項目をクリックしてみてください。コードが書いてある画面が出てきますよね。その画面の左下にあるスマホのマークをクリックします。画面が縮小され、スマホで見たときの画面が表示されます。

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

 

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

一般的にはスマホ用のサイト、PC用のサイトとファイルを分けて作成します。しかし、レスポンシブデザインなら1つのHTMLを使い、CSSをHP用、スマホ用とわけるだけで切り替えることが可能です。

CSSにウィンドウ幅を指定することにより切り替えることができます。例えば、750px以下だったらスマホサイズを適用するなど指定することができます。サイトをわける必要がないので、管理が楽になります。

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

 

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

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

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

 

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

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

また、Googleからモバイルフレンドリーという要素が追加されました。モバイルフレンドリーとはスマホなどから見た際に、ユーザーにとって快適にWebサイト閲覧できるようになっていることです。モバイルフレンドリーはGoogleの検索順位に影響が出ます。レスポンシブデザインはスマホなど様々なデバイスに合うように制作するため、モバイルフレンドリーの条件に当てはまります。そのため、順位が上がりやすくなります。レスポンシブデザインはユーザーにとって使いやすいだけでなく、SEOにも効果があることがわかりますね。

 

まとめ

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

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

筆者

A.Yabe

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

筆者が最近執筆した記事