スマホ時代の対応するためのレスポンシブデザイン

2016.10.20 ウェブサイト制作

スマートフォンが普及するまでは、PCでの表示のみを想定してウェブサイトを制作していました。

モバイルサイトを用意する場合は、別にモバイル用のソースを作成しユーザーの端末(PCか携帯電話か)によってJavaScriptで振り分けるという方法が一般的だったように思います。

現在のスマートフォン対応でも、PC用とスマホ用を別々に用意して振り分けることもできますが、その場合は重複コンテンツと判定されてペナルティを受けないように対策したり※、単純に同じ内容のソースが2つあるために修正・更新の際の手間が増えるなどの問題がありました。

これらの問題を解決するために、1ソースでPCやスマホ、タブレットなど、どんな端末からのアクセスにも対応できるように制作する方法をレスポンシブデザインといいます。

※PC用ページとスマホ用ページでURLが異なる場合、それらが重複コンテンツだと検索エンジンに判断されてペナルティの対象になる場合があります。この場合、双方のページソースにお互いのページの関係性が分かるような記述をしておくなどの対策が必要になります。

1 業者に頼らず自分で作る！初心者のためのウェブサイト制作ガイド【全10回】
2 もはやユーザーの半数以上がスマホからアクセスしている！
3 レスポンシブデザインのメリット・デメリット
- 3.1 レスポンシブデザインのメリット
- 3.2 レスポンシブデザインのデメリット
4 レスポンシブデザインのコツ
5 レスポンシブデザインに必要なメディアクエリ
6 メディアクエリの書き方
7 ブレイクポイントとは？

業者に頼らず自分で作る！初心者のためのウェブサイト制作ガイド【全10回】

もはやユーザーの半数以上がスマホからアクセスしている！

現在、ウェブサイトへのアクセスの半数以上がスマホからだというデータもあります。

私の運営しているウェブサイトの中でも、実に80％以上がスマホからのアクセスというものもあります。もちろん、ウェブサイトで扱うテーマにもよるのですが、もはやスマホ対応は必須だと言ってもいいでしょう。

特に女性向けのテーマを扱うウェブサイトでは、スマホでのアクセス比率が高くなる傾向にあります。

Google Analyticsなどのアクセス解析で、端末ごとのアクセス比率が分かるようになっています。スマホからのアクセスが多い場合には、スマホでの閲覧を想定してコンテンツを作成するなどの対応を考えましょう。

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

現在のウェブサイト制作では主流ともいえるレスポンシブデザインですが、デメリットもあります。ここではレスポンシブデザインのメリット・デメリットについてまとめてみたいと思います。

これらのメリット・デメリットを確認した上で、レスポンシブデザインを採用するのか、それともPC用・スマホ用と別々に用意するのかを検討しましょう。

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

1ソースですべての端末に対応できる

レスポンシブデザインで制作する上での最大のメリットですが、PC用・スマホ用などソースを別々に用意せずとも、すべての端末に対応できます。

PC用・スマホ用で別々にソースを用意した場合、例えば既存ページ内のテキストを変更したければ、それぞれのソースを修正する必要があります。こうした二度手間が発生すると、サイト内のコンテンツを増やす際の心理的負担が大きくなります。

ウェブサイトを収益化させるためには、サイト内のコンテンツ(ページ数)を増やしていくのはとても重要です。その際にこうした負担が発生するのは大きなデメリットと言えるでしょう。

Googleにとって都合がいい

Googleはモバイルフレンドリーの(＝スマホ対応された)ウェブサイトを推奨しています。

PC用サイト・スマホ用サイトを別々に用意した場合、それぞれのページが違うURLを持つことになります。

そうなると、Googleはそれらを検索結果に表示する際、どちらのURLのページを表示すればいいかわからなくなります。また、それらが重複コンテンツとしてペナルティを受ける恐れもあります。

ウェブサイトを収益化させる上では、検索エンジンはもっとも重要なアクセスの入り口の1つです。Googleの都合に合わせてウェブサイトを構築することも、SEO対策の1つと考えてもいいでしょう。

端末ごとの振り分け設定が不要

PC用・スマホ用を別々に用意した場合、ユーザーの端末に合わせてJavaSciptなどでどちらのページを表示させるかを振り分けなければなりません。また、振り分け設定をミスすれば、目的のページが表示されないためにユーザーの離脱にもつながります。

こうした手間・リスクを回避することができるのもメリットだと言えるでしょう。

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

ページの表示速度が遅くなる

これはレスポンシブデザインのデメリットとしてよくあげられるものです。スマホからアクセスした際にPC用に作成したコンテンツまで読み込まれるので、ページの表示速度に影響が出るというわけですね。

レスポンシブデザインのウェブサイトの場合、あるコンテンツをPCでの閲覧の際には表示させるが、スマホでの閲覧の際には表示させないというような方法をとる場合があります。

スマホでアクセスした際にもPC用のコンテンツは(表示はされなくても)読み込まれることになるので、その分ページの表示が遅くなるというわけです。

制作にスキルが必要になる

レスポンシブデザインでウェブサイトを制作するには、そのためのスキルや知識が必要になります。また、各端末やブラウザでの表示・動作の確認なども必要になるため、その分開発に時間がかかります。

余談ですが、レスポンシブデザインでの構築にはそのための技術が必要になるため、制作会社の中にはレスポンシブデザインでの構築を避けたがる業者もあります。業者がレスポンシブでの構築を提案してこない場合、なぜレスポンシブデザインを採用しないのか理由をはっきりしてもらった方がいいでしょう。

古いブラウザに対応できない: レスポンシブデザインは言ってみれば新しい技術ですので、IE8以前などの古いブラウザでの表示には対応できません。古いブラウザにも対応するためには、専用のCSSを作成するなどの対応が必要になります。

レスポンシブデザインのコツ

レスポンシブデザインでのウェブサイト構築にはいくつかコツがあります。

以下のポイントを押さえておくだけで作業がグッとラクになりますので、ここで押さえておきましょう。

レスポンシブ可能なレイアウトでデザインする

レスポンシブデザインでは、PC表示時には横並びになっているコンテンツをスマホ表示時には全幅で縦並びにしたり、PCでは表示させるコンテンツをスマホでは表示させないようにしたり…　などしてページを構成します。

そのため、PC表示とスマホ表示の際でコンテンツの並び順を自由に配置しなおすことができるわけではなく、レイアウトに一定の制約があります。レスポンシブで構築する場合には、デザインの段階からPC・スマホ双方でのレイアウトを想定して制作するようにしましょう。

画像ファイルのサイズを軽くしておく

PCでの閲覧に比べ、スマホでの閲覧時には回線速度が遅い(3G/4G回線)場合も考えられます。

そのため、ページに使用する画像ファイルのサイズもできるだけ小さくしておくなどの対策をしておくといいでしょう。

Photoshopなどで画像を制作した際には保存するときに画質を落とすとか、TinyPNGなどの画像軽量化サービスを利用するなどしてみましょう。

また、ページ上で使用する画像の数を極力少なくする、CSSで対応できるものはCSSで実装するという対策も考えておきましょう。

シンプルなデザインを心がける

上でも言ったように、ページに画像を多用するとその分ページの読み込みに時間がかかります。あまりウェブサイトをゴテゴテと飾ると、その分画像を多く使うことになってしまいますので、できるだけシンプルなデザインを心がけましょう。

またシンプルですっきりしたデザインは、ユーザーにコンテンツを集中して読んでもらうのにも適しています。飾りばかりでどこが重要なのか分かりづらいサイトより、注目してほしい部分は大きく、関連したコンテンツごとにまとめて十分な余白と確保したデザインの方がよっぽど成果は上がりやすいです。

たまに「シンプルなデザインでは『自分らしさ』を表現できない」という話も耳にしますが、そもそも収益化を目指すウェブサイトで自分らしさを表現する必要はありません。

収益化を目指すウェブサイトでは「自分の持っている情報を、それを求めているユーザーに分かりやすく伝える」ことがもっとも重要です。

ここを勘違いしているために、多くの人が見栄えだけよくて収益の上がらないウェブサイトの制作を業者に依頼してしまいます。しかも高いお金を払って。

そんなことにならないよう、ウェブサイトの目的を常に意識し、その達成のために最適な選択ができるよう心がけましょう。

レスポンシブデザインに必要なメディアクエリ

レスポンシブデザインは1ソースですべての端末に対応できるという話をしていますが、では実際にどのように対応しているのか？　という話をしていきたいと思います。

レスポンシブデザインの肝(きも)は、CSSの書き方にあります。

ユーザーの端末に合わせて、ディスプレイのサイズが何pxの場合はこのように表示し、それ以上で何pxまでははこう、それ以上はこう…　という感じでCSSでスタイルを指定します。

そして、この「何pxから何pxまで」という指定をするために「メディアクエリ」というものを使用します。

メディアクエリの書き方

メディアクエリを使用するには、HTML、CSSに下記のように記述します。

<html>
<head>
<!-- viewportの設定 -->
<meta name="viewport" content="width=device-width">
</head>
<body>
…
……
………
</body>
</html>

@media (max-width: 767px) {
/* 横幅767pxまではここに記述したスタイルが適用される(主にスマホでの表示用) */
}
@media (min-width: 768px) and (max-width: 1023px) {
/* 横幅768px～1023pxまではここに記述したスタイルが適用される(主にタブレットでの表示用) */
}
@media (min-width: 1024px) {
/* 横幅1024px以上はここに記述したスタイルが適用される(主にPCでの表示用) */
}

head要素内にviewportを設定するための記述をし、CSSにて端末のディスプレイ幅(正確にはブラウザの幅ですが)に合わせて3パターンのレイアウトが適用されるようにしています。

viewportとは、表示領域を設定するためのmetaタグで、これを上記ソースのようにデバイスの幅(device-width)に設定しておくことでウェブサイトの表示領域がデバイスの幅に合わせて可変になります。

またCSSについてですが、レスポンシブデザインで構築する場合、従来はウェブサイト上の各要素に対して1パターンのスタイルを指定すればよかったものが、「767px以下の場合はこう、768～1023pxの場合はこう、1024px以上の場合はこう…」という感じで複数パターンのスタイル指定を施す必要があります。

先ほど「レスポンシブデザインのデメリット」の項で「レスポンシブデザインは開発に時間が掛かる」という話をしましたが、それはこういう理由からなんですね。

またPCでの表示を想定したスタイル指定(ここでは1024px以上)の場合は、従来のようにpxで幅などの値を指定すればいいのですが、スマホ・タブレットでの表示に関しては%でサイズを指定する方が都合がいい※ので、慣れるまでに少し時間が掛かるかもしれません。

※スマホやタブレットは機種によってディスプレイのサイズが様々です。そのため、タブレット表示用の最小幅を想定して要素のサイズをpxで指定してしまうと、大きめのタブレットで表示したときには余白が大きくできてしまったりということが起きます。そのような理由から、要素のサイズ指定には%を使う方がいいでしょう。

ブレイクポイントとは？

上記のソースでは、768pxと1024pxでウェブサイトのレイアウトが切り替わるようになっています。この切り替えポイントのことを「ブレイクポイント」といいます。

このブレイクポイントの数値には決まりがあるわけではなく、それぞれのウェブサイトで自由に決めることができます。ですので、例えばスマホ用の表示とPC用の表示しか切り替える必要がないと判断するのであればブレイクポイントは1つでいいですし、反対にスマホ(縦の状態)、スマホ(横の状態)、小さめのタブレット、大きめのタブレット＆小さめのPC、大きめのPCなどのようにもっと細かくブレイクポイントを設けてもいいわけです。

また、最適とされるブレイクポイントは、流通している端末によって常に変わります。現在流通しているスマホやタブレットのディスプレイサイズから考えてブレイクポイントを設定したとしても、将来リリースされるスマホやタブレットには対応しきれない可能性も十分あり得ます。

定期的(たとえば1年ごとなど)に現在出回っている端末のサイズを調べ、ブレイクポイントを微調整していくなどの作業も必要になってくるでしょう。

とはいえ、あまり神経質になると制作自体がストップしてしまうことにもなりかねません。そうなってしまうくらいなら「iPhone、iPadなどのApple製品を基準に考える」という感じで、自分なりの基準を決めて制作を進める方がいいかと思います。

≫ 第7回：ワイヤーフレーム(ウェブサイトの設計図)を作ろう

WordPressテーマ『HIGHLAND』公開しました