レスポンシブデザインの基本とメリット・デメリット

Web制作

2016年04月18日

レスポンシブデザインの基本とメリット・デメリット

レスポンシブデザインの仕組みについて、ビギナーの方を対象に解説します。仕組みについて理解していると、レスポンシブデザインをもっと活用できます。メリットやデメリットについてもまとめているので、あわせて参考にしていただければと思います。

レスポンシブデザインの基礎

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

パソコンだけでなく、スマホやタブレットなどさまざまな端末でインターネットが使われるようになった昨今。ホームページも、スマホなどの端末に対応することが急務になってきています。2015年4月には、Googleもスマホ対応を検索順位の決定要因としてとりいれています。

今回のテーマであるレスポンシブデザイン(レスポンシブウェブデザイン)は、スマホ対応するためのWebデザイン手法のことです。端末の画面サイズによって、自動でレイアウトを調整できます。スマホやタブレットなどの端末でも、見やすく使いやすいかたちでページが閲覧できるのです。

レスポンシブデザインの仕組み

レスポンシブデザインは自動でレイアウトを調整するのですが、その時に使うのがCSS3のメディアクエリです。メディアクエリとは、指定した画面サイズによってCSSを切り替える機能のこと。一つのページに対してHTMLは一つなのですが、CSSは複数あることになります。

ちなみに、CSSを切り替えるサイズのことをブレークポイントと呼びます。ブレークポイントごとにCSSファイルを分けてもいいですし、一つのCSSファイルにまとめてしまっても大丈夫です。

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

それではレスポンシブデザインの方法について、具体的にみてみましょう。

@media screen and (max-width: 640px) {
	.text {
		color: #f00;
	}
}

上のように記載すると、640pxまでの画面サイズだけに適用させるスタイルが指定できます。ブレークポイントは640px、ということですね。

max-widthという記述がありますが、これは指定した数値より小さい画面サイズに適用させるCSSを書くためのものです。逆に、指定したサイズより小さい画面サイズに適用させるCSSはmin-widthを使って記述します。max-widthとmin-widthを同時に使って、640px以上1024px以下、のように指定することも可能です。

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

メリット

レスポンシブデザインを導入すると、サイトの制作コストが抑えられることがあります。ページごとのHTMLファイルが一つで済むことがその理由。端末ごとにHTMLファイルを用意する必要がないので、管理の手間が減るのです。

またHTMLが一つになることで、SEOにもプラスの効果があります。ページのURLが一つになるのでアクセスが分散しませんし、TwitterやFacebookなどのSNSでのシェアもされやすくなります。

デメリット

レスポンシブデザインは、ページに使うCSSを切り替えているだけで、CSS自体は読み込んでいます。スマホでページを表示している場合でも、パソコン用のCSSやタブレット用のCSSが読み込まれているのです。こういったことが理由で、ページの表示速度に影響する場合があります。

また、すでにあるサイトにレスポンシブデザインを導入する場合、制作に時間がかかってしまう場合があります。制作コストが上がってしまう場合もあるので、レスポンシブデザインはサイトの制作時に導入した方がよいです。

あとがき

スマホに対応する方法は、レスポンシブデザインだけではありません。あえてレスポンシブデザインを避けることもありますし、プログレッシブエンハンスメントなどの考え方も登場しています。自社のWeb方針に沿った方法を選択していってください。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。