レスポンシブデザインとは、「ユーザーが使用するデバイスに応じて表示を最適化するデザイン」のことを指します。
PC、スマートフォン、タブレット。端末の大きさによって見え方が変わり、どんな環境のユーザーにもストレスを与えません。
スマートフォンやタブレットでインターネットを利用するユーザーが増え、さまざまなデバイスへの対応が必要になったことによって一般化しました。
レスポンシブデザインは、どんな環境でもHTMLは同じです。PC版サイト、スマートフォン版サイトというように複数のHTMLを用意することはありません。
デバイスによってCSSを切り替えることで、表示を変えています。
目次
レスポンシブデザインのメリット
レスポンシブデザインには、いくつものメリットがあります。
SEOの効果がある
デバイスごとにページを用意している場合は、URLがそれぞれ別のものになってしまいます。
検索エンジンは被リンクが多いページを評価しますが、別々のページだとその評価も分散してしまうのです。
レスポンシブデザインはデバイスによってHTMLが変わらないので、URLが統一できます。そのため、どのデバイスから被リンクを受けても評価が分散しません。
また検索エンジンは、モバイル端末を利用するユーザーにとってフレンドリーなサイトかどうかを重要視しています。レスポンシブデザインのサイトは、モバイル端末用の対策を行っていないサイトに比べて検索エンジンの評価が高くなりやすいということです。
ただしこれは、間違いなく検索順位が上がるというわけではありません。レスポンシブデザインだとしても、分かりずらいサイトであれば評価はされないからです。レスポンシブデザインするとモバイル端末のユーザーにとってフレンドリーなサイトになり、結果として評価が上がるということです。
取り合えず対応すればいいというものではありません。常にユーザー目線を心掛けてください。
表示速度が速くなりやすい
デバイスごとに別々のページを用意している場合は、異なるURLに転送するリダイレクトという処理が必要です。
レスポンシブデザインはリダイレクトが不要なので、表示が速くなる傾向があります。
単純に閲覧の際のストレスが減るだけでなく、ユーザーにとっていかに快適であるかを重視する検索エンジンからの評価も上がるかもしれません。
また、リダイレクトのミスも起きません。転送に失敗してしまうと、ユーザーがページにたどり着けなくなり、重大な機会損失につながる可能性があります。
修正・更新が簡単
デバイスによってページを分けていると、変更があった場合、すべてのページに対応する必要があります。
新規で製作するページは内容の変更がつきものです。タイトなスケジュールの中で、1つの修正に複数の作業が発生してしまうのは、大きな負担となるでしょう。公開してからも、更新がある度に、ページごとの対応を行うのは非効率的です。
レスポンシブデザインはページが1つだけなので、1度の作業で済みます。効率の差は圧倒的です。費用の節約にもなるでしょう。
レスポンシブデザインのデメリット
さまざまなメリットがあるレスポンシブデザインですが、デメリットも存在します。
構築に労力やコストがかかる
レスポンシブデザインは、さまざまなシチュエーションで効率化に貢献しますが、初期段階ではむしろ手間がかかってしまう場合もあります。
1つのHTMLでデバイスごとに最適化されたデザインを作るというのは、それなりのスキルや知識が必要です。
CSSの記述が複雑になり、場合によってはデバイスごとにページを作る方が簡単かもしれません。レスポンシブデザインにすれば、その分費用も発生します。
シンプルに1ページを作るだけとは、難易度が大きく異なるということは覚えておきましょう。
レスポンシブデザインは、さまざまなシチュエーションで効率化に貢献しますが、初期段階ではむしろ手間がかかってしまう場合もあります。
1つのHTMLでデバイスごとに最適化されたデザインを作るというのは、それなりのスキルや知識が必要です。
CSSの記述が複雑になり、場合によってはデバイスごとにページを作る方が簡単かもしれません。レスポンシブデザインにすれば、その分費用も発生します。
シンプルに1ページを作るだけとは、難易度が大きく異なるということは覚えておきましょう。
表示速度が遅くなる可能性がある
メリットの項目で表示速度が速くなると書きましたが、実は遅くなる可能性も持っています。特にモバイル端末では注意が必要です。
PC用に制作された大きな画像が、モバイル端末で読み込むには負担が大きいということがあります。
そうならないよう、画像の容量には気を付けてください。画像を圧縮するなどの対策をとりましょう。無料で画像を劣化させず容量を小さくするサービス「TinyPNG」などがおすすめです。
また、PC版とモバイル端末版では表示できる情報量が異なります。PC版で表示させているものを、モバイル端末版ではcssで非表示にするという方法が使われていますが、これは容量までを減らすことはできません。
「PageSpeed Insights」などを使って、モバイル端末版の表示速度に問題がないか、チェックするようにしましょう。
デザインに多少の制限がある
デバイスごとに表示を最適化するとはいえ、1つのHTMLを使用しているので似たものになることは避けられません。
CSSで大きさや背景を変えることはできても、テキストや画像はそのままです。表示/非表示の切り替えという方法がありますが、多用すると容量が大きくなってしまいます。配置する要素の順番の入れ替えも困難です。
最初からレスポンシブデザインであるということを念頭に置いて、デザインをしてください。
レスポンシブデザインの作り方
レスポンシブデザインの具体的な方法を解説します。大きく分けると、ステップは2つです。
1.HTMLのヘッダー部分にmeta viewportタグを記述する
HTMLのheadタグの内側か、WordPressを使用している場合はheader.phpに以下のコードを記述します。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>これによって、ユーザーが使用しているデバイスの画面サイズなどの情報が入手できます。デバイスごとに最適化されたデザインを表示させるために必須の記述です。
「width=device-width」がデバイスの横幅を取得するという意味です。
「initial-scale=1.0」は表示する倍率で、特別な意図がない限りは1.0で問題ありません。
2.cssを記述する
実際に表示を分けるための、それぞれのデバイス用のcssを記述します。cssも1つのファイルで完結させることが可能で、ファイル内にデバイスごとの記述を行います。
メディアクエリを使えば、画面のサイズに応じて読み込む内容を変えることができるのです。
以下のような記述を行います。
@media screen and (min-width: 481px){ }これは画面幅が481px以上のときに｛｝内の内容を読み込むという記述です。つまり、スマートフォンのときは読み込まず、タブレットやPCのときには読み込むということになります。このようにして画面幅に応じて読み込む記述を変えることで、デバイスごとのデザインの最適化を行います。画面幅の数字の指定は任意で変更可能です。この数字のことをブレイクポイントといいます。
min-widthだけでなく、max-widthという記述もあります。
@media screen and (max-width: 480px){ }これは画面幅が480pxの時に｛｝内の内容を読み込むという記述です。
スマートフォン版とPC版のみの作成であればこの2つのメディアクエリだけで事足りますが、タブレット版を作成する場合はブレイクポイントを増やす必要があります。
@media screen and (max-width: 767px) { }これが767px以下でタブレット版です。
@media screen and (min-width: 768px) { }768px以上でPC版です。このようにブレイクポイントを3つにすることで3つのデバイスに対応できます。優先順位は通常のcssと同じで、下にある記述ほど強くなります。
まずはスマートフォン版のデザインから作成することをおすすめします。デザインに制限があるため、PC版より先に作った方が不都合が起きにくいからです。スマートフォンからのアクセスの方が多いので優先した方がよいという理由もあります。
スマートフォン版用のcssはメディアクエリを使わず、タブレット版用、PC版用にスマートフォン版と異なる部分だけメディアクエリを使って記述していくという方法もあります。
背景や文字の色など、全体に共通する要素は毎回メディアクエリ内に記述していたのでは手間がかかります。共通の記述はメディアクエリの外に記述するのは理にかなっていると言えるでしょう。
まとめ
モバイル端末でのアクセスがPCを大きく上回っている昨今、WEBサイトのデバイスごとの最適化は必須であると言えます。
レスポンシブデザインは素晴らしいメリットがいくつもあり、大変有効な手法です。デメリットも存在しますが、しっかりと把握した上で制作に着手すれば大きな問題にはならないでしょう。
方法を把握し、無駄のないレスポンシブデザインを作ってください。
コメント