そもそもレスポンシブデザインとは？

そもそもレスポンシブデザインとはどのようなものなのでしょうか。

レスポンシブデザインとはユーザーの画面サイズに合わせてページのレイアウトが最適化されるデザインのことです。つまりスマホで見ている場合にはスマホ向けのデザインが、PCで見ている場合はPC向けのデザインが表示されるような仕組みになっているデザインがレスポンシブデザインであるといえます。

では、なぜこのようなデザインが推奨されているのでしょうか。その理由の1つにGoogleがモバイル向けのページを優先していることが挙げられます。もちろんこれは多くのユーザーがスマートフォンなどのモバイル端末でWebを閲覧するようになったことに起因しています。端的に言えばモバイルユーザーが増えたことでモバイル用のページが求められているためレスポンシブデザインというPCとモバイルのどちらにも対応できる仕様が重宝されているというわけです。

 

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

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

レスポンシブデザインのメリットはいくつもありますが、代表的なものを紹介したいと思います。

 

サイトの修正が簡単

レスポンシブデザインはCSSをデバイス毎に表示するため、ページHTMLを1つ用意するだけでモバイル版とPC版を表示することができます。つまり内容を修正する際も1つのファイルを修正するだけで済むので、モバイル版とPC版それぞれにHTMLとCSSを用意する場合と比較してサイトの修正が簡単に行えます。

 

SEOに有利に働く

レスポンシブデザインを適用するとGoogleからの評価としてモバイルに最適化されていると判断されるため、SEO的にも評価が高くなります。先ほど述べた通り多くのユーザーがスマホを使ってWebサイトにアクセスしているということがこのような効果をもたらす原因となっています。

 

URLが1つになることで良い影響がある

「サイトの修正が簡単」と近い内容になりますが、HTMLだけでなくURLも1つで済むので、別々にページを作る場合と比較してリダイレクトをする必要がなくなります。またユーザーが共有する際も共有するURLによってユーザーの使いやすさが変わってしまうということがなくなりユーザビリティの向上が望めます。

 

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

もちろんレスポンシブデザインを導入するにあたってデメリットもあります。

 

デザインが崩れやすい

レスポンシブデザインに対応させることでデザインに制約がかかる場合があります。特にスマホやタブレットでレイアウトが崩れてしまう場合があり、Webデザインの知識が必要になる場面が出てくるでしょう。

 

時間的コストがかかる

当然ですが追加のCSSが必要になるため、サイト制作のための時間は増えてしまいます。とはいえレスポンシブデザインではなくモバイル版とPC版のサイトを作るのであればどちらにせよ工数は増えてしまうためデメリットというデメリットではないかもしれません。

 

フィーチャーフォンに対応していない

最近では使われることも減りましたが、フィーチャーフォン、いわゆるガラケーに対応していないため、フィーチャーフォン用のサイトを表示するには別途設定する必要があります。

 

レスポンシブデザインの作り方　制作時の注意点は？

ここからは実際にレスポンシブデザインの制作方法を解説していきます。

 

meta viewportタグの記述

HTMLのヘッダー部分にmeta viewportタグを記述します。このタグを記述することで閲覧しているデバイスの情報やその情報からスマホかPCであるのかを判断できるようになります。

以下のように記述します

<meta name =”viewport” content =”width =device-width, initial-scale =1.0”>

 

CSSファイルにメディアクエリの記述

メディアクエリの記述を行うことで特定の画面サイズに応じてページサイズの切り替えを行うことができます。

@media screen and (min-width: ○○px) { }

この記述のmin-width: ○○pxの○○の部分を任意の数字にすることで○○px以上の画面サイズだったときにPC版ページが表示されるようになります。

@media screen and (max-width: ○○px) { }

次にこのような記述をすることで○○px以下の画面サイズではモバイル版が表示されるようになります。{ }内にはその際に使用するCSSを記述していくことになります。

 

レスポンシブデザインを実装するときの注意点

このような方法で実装することができるレスポンシブデザインですが、制作する場合に気を付けなくてはいけないこともあります。

 

画像ファイルを小さくする

サイトの大きい画像ファイルはスマホでの読み込みを遅くする恐れがあります。小さいサイズの画像を使ったり、画面幅によって読み込む画像サイズを切り替えるなどの工夫をすることでユーザーが快適にサイトを利用できるようにしましょう。

 

CSSの軽量化

サイトが重くなる原因としてCSSが重いということも挙げられます。サイトの重さはユーザーのユーザビリティに関わる問題ですのでCSSの見直しは適宜行いましょう。

 

特定のデバイスの情報量を減らさないようにする

特定のデバイスでデザインの関係で文章を表示させないようにもできるのですが、たとえばスマホ版でこれを行ってしまうとGoogleの評価が落ちてしまう恐れがあります。そのため特定のデバイスだけコンテンツの量を減らすということはレスポンシブデザインを実装する際に避けた方がいいでしょう。

 

まとめ

レスポンシブデザインの有用性はユーザビリティ、つまりいろいろな人が便利に利用できるという点にあります。つまりレスポンシブデザインを実装してもページの読み込み時間が長くなってしまったりデザインが崩れてしまったりしたらせっかくのレスポンシブデザインも台無しということです。PCのユーザーが9割なのにモバイル版に注力するというようなことも無駄になってしまうかもしれません。そういう意味ではレスポンシブデザインはWebサイトにどのようなユーザーがやってきているのかというようなSEO的な分析のもとに行う必要があるということが分かります。レスポンシブデザインはしっかりと行えばSEOにも効果がありますので、SEO対策と結び付けて適切なレスポンシブ対応を目指しましょう。