2013/07/16

スマートフォンからのアクセスでCSSを切り替える方法。レスポンシブwebデザインの作り方。

レスポンシブwebデザインの作り方。 スマートフォンからのアクセスでCSSを切り替える方法

スマートフォンが爆発的に普及し、タブレットPCも値下げやコンパクト化で徐々に普及し始めています。
いつでもどこでもネットワークにアクセス出来るようになったおかげで、スマートフォンからPCサイトにアクセスする機会も多くなってきています。しかし、スマートフォン用に最適化されていないホームページをスマートフォンで閲覧すると非常に見づらく、せっかく訪れたユーザーを逃してしまう...なんてことになりかねません。

今回は、PC・タブレットPC・スマートフォンからのアクセスを判別してCSSを振り分ける『レスポンシブwebデザイン』について解説を行います。

目次

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

Webサイトは一昔前と違い、PCからのみ閲覧されるものではなくなりました。スマートフォンやタブレットPCなど、様々なデバイスからアクセスされるようになりました。

2013年3月のスマートフォン普及率

2013年3月のスマートフォン普及率のグラフです。

今年3月の時点で約4割の普及率。20代に限れば6割に達しています。
そのため閲覧環境によって最適化したwebサイトを提供する必要性が出て来ました。しかし、数あるデバイスごとにファイルを用意するのは管理が複雑になり、コストもかかります。

そこで生まれたのが『レスポンシブwebデザイン』という手法です。

登場すると国内外で話題となり、広く知られることとなったレスポンシブwebデザインですが、一体どういうことかというと、 デバイスの横幅に合わせてCSSを切り替え、"柔軟に"サイズ調整・デザイン変更を行う手法のことです。

ユーザーエージェントによる振り分け

従来の方法では、デバイスごとにHTMLファイルを用意し、対応していました。

ユーザーエージェントによる振り分け

PCからの閲覧にはPC用HTML
タブレットPCからのアクセスにはタブレットPC用HTML
スマートフォンからのアクセスにはスマートフォン用HTML

というようにそれぞれ別のHTMLファイルへアクセスします。
この方法では他にOSやブラウザの違いを判別して振り分ける方法も可能です。

レスポンシブwebデザインによる振り分け

レスポンシブwebデザインでは、1つのHTMLファイルを用意し、デバイスごとにCSSを切り替えて対応します。

レスポンシブwebデザインによる振り分け

閲覧に利用しているブラウザの横幅を判別し、それぞれCSSを切り替えます。

例えば、
1200pxのブラウザからのアクセスにはPC用のCSS
768pxのブラウザからのアクセスにはタブレット用のCSS
320pxのブラウザからのアクセスにはスマートフォン用CSS

というように1つのHTMLを基に装飾の変更を適応させます。
これがレスポンシブwebデザインの手法です。

アクセスを判別してCSSを振り分ける方法

レスポンシブwebデザインの作り方について具体的に解説していきます。

メディアクエリ

CSSを振り分けるにはCSS3のメディアクエリを使用します。

@media only screen and (max-width: 979px) {
	
	Html{
		Width:100%;
	}

} /*デバイスの横幅が979px以下の場合*/

@media only screen and (min-width: 321px) and (max-width: 768px) {
	
	Html{
		Width:100%;
	}

} /*デバイスの横幅が321以上768以下の場合*/

@media only screen and (max-width: 320px) {
	
	header{
		Width:90%;
	}

} /* デバイスの横幅が320px以下の場合 */

上記のように横幅を○○px以上、○○px以上△△px以下とサイズを指定し、そのサイズのブラウザからのアクセスには中括弧{}の中のCSSを適応させる手法をメディアクエリといいます。

@import

ブラウザサイズごとのCSSを作成し、@importでそれぞれのサイズごとに読み込む方法もあります。

@import url(style.css) screen and (min-width: 769px); /* 769以上 */
@import url(tablet.css) screen and (max-width: 768px); /* 768以下 */
@import url(smart.css) screen and (max-width: 320px); /* 320以下 */

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

HTMLが1つでOK

ワンソースでOK

1つのHTMLが(ワンソース)での管理となるため簡単な変更や更新作業が、1つのファイルを修正するだけで完了します。変更忘れのミスなどが減り、リスクが軽減出来ます。

SEOに強くなる

SEOに強くなる

グーグルの公式ブログで以下のように記述されています。

レスポンシブ・ウェブデザインを使用すると、次のような利点があります。

  • PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
  • ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

従来の方法だと、PC用・タブレットPC用・スマートフォン用と内容の同じHTMLファイルが3つ用意されるので、検索エンジンがクロールした際、構造が把握しづらくなってしまいます。一方、レスポンシブwebデザインはワンソースですので、構造が分かりやすくなり、検索結果にも優位に働きやすいといえます。

構造が複雑になりがちなため、構築に時間がかかり、コストがかかる

構築時間とコストがかさむ

単純に横幅やコンテンツの大きさを調整するだけではなく、それぞれのデバイスごとにカスタムしたデザインなどを適応させる、といったこともあるかと思います。
その場合、どうしても構築に時間がかかってしまい、確認作業の多さと相まって作業時間・コストともにかさみます。

スマートフォンでPC用のページが見れない

スマートフォンでPC用のページが見れない

ブラウザの横幅で判断してCSSを適応させているため、PC用ウェブサイトを閲覧したいと思ってもアクセスができなくなります。

表示が重くなる可能性がある

表示が重くなる可能性がある

PCサイト用に用意した大きな画像をスマートフォンサイトでは非表示にする場合もあるかと思います。
この場合、display:none;で対応する場合がほとんどですが、これは表示させないというだけでHTMLの記述は読み込まれます。つまり非表示にした画像を読み込みに行こうとするので大量の画像や高画質の画像を非表示にしている場合、サイト表示が重くなる可能性があります。
また、現在のスマートフォンは3G回線での利用がほとんどですので、PCと同じように快適なブラウジングが出来ないのも一因です。

レスポンシブwebデザイン構築で役立つサイト

各デバイスの表示確認に

Responsive Web Design Testing Tool(http://mattkersley.com/responsive/

サイズ別の表示結果を一覧で確認出来ます。

Responsive Web Design Testing Tool

RESPONSIVATOR(http://dfcb.github.io/Responsivator/

こちらも上記と同じく、サイズ別の表示結果を一覧で確認出来ます。

RESPONSIVATOR

イメージ画像作成に

Placeit(http://placeit.breezi.com/

スマートフォンやタブレットPCの画面にサイトを表示させ、イメージ画像を作成することが出来ます。URLを入力するだけで作成できます。

RESPONSIVATOR

メディアクエリ スニペット

Media Query Snippets(http://nmsdvid.com/snippets/

さまざまなデバイスのメディアクエリが掲載されています。コピペですぐ使えるようになっていますので、非常に便利です。

Media Query Snippets

まとめ

スマートデバイスの普及で注目された『レスポンシブwebデザイン』は上記の通り、メリット・デメリットが存在しています。
案件によっては適さない場合もありますので、レスポンシブwebデザインは構築手法の一つと考えておきましょう。