インターネットは、ニュースやSNSを見たり、ネットショッピングをしたりと多くの人が日常的に利用しています。近年では、インターネットを見る端末がマートフォンやタブレット、パソコンなど多様化してきており、インターネットに表示されるWebサイトも対応が必要になってきています。そこで登場したのが画面幅に応じで表示するデザインが変わるレスポンシブというデザイン手法です。レスポンシブとはどのようなデザイン手法なのか、サイトをレスポンシブ対応にするにはどうすればいいのかをご紹します。
レスポンシブとはどのようなデザイン？
同じWebサイトを見るのに、ディスクトップPCでは文字も見やすく画像もきれいに並んで表示されるのに、スマートフォンで見ると文字が小さく、画像も画面からはみ出してしまっているなど、表示の違いを感じたことはありませんか？
これは、WebサイトがディスクトップPCで見た時を基準にデザインされているときに起きる現象です。しかし、どの端末をつかっていてもデザインはキレイに見たいですよね。そこで考えられたのが端末のサイズに合わせて最適なデザインに自動的で切り替わるレスポンシブデザインです。
レスポンシブデザインのサイトは、画面の幅を広げたり縮めたりしたときに、テキストが画面からはみ出すことなく改行されたり、画像並び方も横並びだったのが縦並びに変化したりするなどして、幅に合わせてレイアウトが変化します。これは、スマートフォンやタブレットで見た時にも情報が伝わりやすくなるように対応したものです。
検索エンジン最大手のgoogleは2015年5月にモバイル検索（スマートフォンやタブレットからの検索）の件数がPCの検索を上回ったと発表しました。その後検索している人がPCよりスマートフォンの方が多くなってきた状況に合わせて、モバイルフレンドリー（スマートフォンやタブレット、パソコンなど、どの端末を使用しても見やすいこと）を実現化するために、googleはレスポンシブデザインを推奨しています。
レスポンシブにするメリット・デメリット
では、Webサイトをレスポンシブにすることにはどのようなメリット・デメリットがあるのでしょうか。
レスポンシブにすることのメリット
Webサイトの管理が簡単
レスポンシブは1つのHTMLファイルに載せる情報がまとめて記述されていますので、ページに修正や変更が発生した場合、修正が1回で済みます。スマホ用サイトやPC用サイトなど端末ごとにWebサイトのデザインが違う場合は、それぞれにHTMLファイルがあるのでHTMLファイルの数だけ修正が発生してしまいます。
リダイレクトの設定が必要ない
スマホで検索した時に検索結果にPCサイトが表示された場合、クリックしてもそのままPCサイトを表示するのではなく、スマホサイトにリダイレクトを設定しているサイトがほとんどです。レスポンシブの場合は、このリダイレクト設定が必要ないので、Webサイトの運営者側にとってはリダイレクト設定の手間が省けますし、ユーザーにとってはリダイレクトを読み込むのを待つ必要がないので早くサイトが表示されます。
URLが1つなのでユーザーにSNSでシェアされやすい
WebサイトをSNSでシェアするときにスマホとPCそれぞれにサイトがあると、見る端末に合わせてURLを案内する必要がありますが、レスポンシブのサイトはスマホとPCが同一のURLなので、SNSで気軽にシェアしやすいメリットがあります。
モバイルフレンドリー対応でSEOに有利
Googleは検索エンジンにサイトを認識させる際、これまでPCサイトの内容をもとに評価してきましたが、今後はスマートフォンサイトをもとに評価すると発表しています。これはモバイルファーストインデックス（MFI）と呼ばれています。したがって、レスポンシブデザインのサイトはスマホに最適化されていると評価が高くなりSEOに有利です。
レスポンシブにすることのデメリット
コーディングに時間がかかる
レスポンシブは1つのHTMLファイルに複数の端末で表示するための設定を行うので、スマホ用やPC用にデザインを反映するのにコーディングが複雑になりやすく、制作にも時間がかかります。
Webデザインに制限がある、デザインが崩れやすい
1つのHTMLファイルに設定したデザインが、各端末で表示される仕組みのため、スマホとPCで大幅にデザインを変更することはできません。画面サイズによって画像の拡大率を変えたり、PCでは横並びに表示していた画像を、スマホでは縦並びにするなど、できることは限られます。
スマホでページの表示速度が遅くなることがある
スマホもPCも同じHTMLコードやCSSファイルを読み込むのですが、両方の記述がされているので、仮にスマホで見たい場合にPC用のHTMLコードやCSSの記述、大きな画像ファイルなども読み込む場合があるため、表示速度が遅くなる場合があります。しかしそれはどのファイルも遅くなるということではなく、画像を軽くしたり、外部ファイルをあまり読み込まないようにしたり、ファイルを設計する段階で工夫することで表示速度が遅くならないようにすることは可能です。
レスポンシブデザインを表示させる仕組み
実際にサイトをレスポンシブ対応にするにはどうすればいいのでしょうか。レスポンシブデザインでは、1つのHTMLファイルに端末ごとの表示設定を記述し、CSSファイルでコントロールして画面サイズに合わせて表示を切り替えます。ここでは、レスポンシブで表示するためにHTMLファイルとCSSファイルに必要な記述を紹介します。
meta viewportタグを追加する
meta viewportは、閲覧する端末の画面の幅に合わせて表示する大きさを調整する情報です。HTMLファイルの<head>タグ内に下記のように記述します。「viewport」は「表示領域」を意味します。
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1″>
「meta name=”viewport”」は文書の表示領域を設定する記述で
「content=”width=device-width,initial-scale=1,minimum-scale=1″」は、
「訪問してきたデバイスの横幅を、特に目的がないかぎり最少倍率1.0の指定で取得する」という意味になります。
メディアクエリを使ってCSSを切り替える
CSSでは、メディアクエリと呼ばれる仕様を設定することによって、画面環境に応じて表示を切り替えることができます。例えば「@media screen and (min-width: 641px) {」と記述すると
「ウィンドウ幅が641px以上の場合に適用」という指定となり、ウィンドウ幅が641px以上にしたときに、その記述の後に記した指定で表示されます。このメディアクエリをスマホ用、PC用とそれぞれに値を指定しておくことによって、その値以上の幅にしたときに表示が切り替わります。
サイトをレスポンシブにするときの注意点
上記以外にもPCサイトをレスポンシブ化するときの注意点がありますのでご紹介します。
画像ファイルは軽く枚数も少なめにする
スマホはPCで表示するときより、画像ファイルの読み込みに時間がかかり、表示速度が遅くなる場合があります。画像ファイルは小さいものを使用したり、同じ画像を使用するページがある場合は、サーバーには1枚の画像をアップロードし、CSSで表示する箇所を指定する「CSSスプラウト」といった方法をとることをおすすめします。
スマホから設計する
情報量の多いコンテンツはPCから設計してしまうと、スマホの画面幅にしたときに窮屈で見にくくなってしまうため、幅が狭くて制約が多いスマホから設計すると、PCを設計するときに楽です。
表示が想定されるデバイスで確認する
レスポンシブのデザインは、指定した数値に対応していない画面サイズで見た時に表示が崩れる可能性があるため、表示が想定される端末で表示を確認することが大切です。
まとめ
レスポンシブデザインはSEOに有利だというメリットが注目されがちですが、ユーザーやサイト運営者にとってもメリットが多い手法です。取り入れる際には、メリットやデメリットをよく理解したうえで有効に利用しましょう。
ブログやコラム記事からのCV数（コンバージョン）が伸びない。
サイトがどういう設計ならコンバージョンにつながるのかがわからないという方へ
課題となるWebサイトをプロが分析し、効果を出す情報設計をご提案します！