トップページへ戻る

サイトをレスポンシブ対応にするには

この記事を書いた人 :

サイトをレスポンシブ対応にするには

インターネットは、ニュースやSNSを見たり、ネットショッピングをしたりと多くの人が日常的に利用しています。近年では、インターネットを見る端末がマートフォンやタブレット、パソコンなど多様化してきており、インターネットに表示されるWebサイトも対応が必要になってきています。そこで登場したのが画面幅に応じで表示するデザインが変わるレスポンシブというデザイン手法です。レスポンシブとはどのようなデザイン手法なのか、サイトをレシポンシブ対応にするにはどうすればいいのかをご紹します。

関連タグ:
今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ

レスポンシブとはどのようなデザイン?

同じWebサイトを見るのに、ディスクトップPCでは文字も見やすく画像もきれいに並んで表示されるのに、スマートフォンで見ると文字が小さく、画像も画面からはみ出してしまっているなど、表示の違いを感じたことはありませんか?

これは、WebサイトがディスクトップPCで見た時を基準にデザインされているときに起きる現象です。しかし、どの端末をつかっていてもデザインはキレイに見たいですよね。そこで考えられたのが端末のサイズに合わせて最適なデザインに自動的で切り替わるレスポンシブデザインです。

レスポンシブデザインのサイトは、画面の幅を広げたり縮めたりしたときに、テキストが画面からはみ出すことなく改行されたり、画像並び方も横並びだったのが縦並びに変化したりするなどして、幅に合わせてレイアウトが変化します。これは、スマートフォンやタブレットで見た時にも情報が伝わりやすくなるように対応したものです。

検索エンジン最大手のgoogleは2015年5月にモバイル検索(スマートフォンやタブレットからの検索)の件数がPCの検索を上回ったと発表しました。その後検索している人がPCよりスマートフォンの方が多くなってきた状況に合わせて、モバイルフレンドリー(スマートフォンやタブレット、パソコンなど、どの端末を使用しても見やすいこと)を実現化するために、googleはレスポンシブデザインを推奨しています。

レスポンシブにするメリット・デメリット

では、Webサイトをレスポンシブにすることにはどのようなメリット・デメリットがあるのでしょうか。

レスポンシブ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に有利です。

レスポンシブWebデザインにすることのデメリット

コーディングに時間がかかる

レスポンシブは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に有利だというメリットが注目されがちですが、ユーザーやサイト運営者にとってもメリットが多い手法です。取り入れる際には、メリットやデメリットをよく理解したうえで有効に利用しましょう。

レスポンシブデザインでは、HTMLとCSSにレスポンシブ対応専用のコードを設定すると、ユーザーがサイトにアクセスしたデバイスの画面幅の値に応じてレイアウトを使い分けことができます。このときCSSにはアクセスが想定されるデバイスとそのデバイスで見るたときの画面幅を書くのですが、それがCSSブレイクポイントと呼ばれる値です。レスポンシブのWebサイトを作る時にCSSのブレイクポイントの値をどのようにするかは、そのサイトをどのようなデバイスで見る人がいるかの情報が必要です。data maisonでは、業界ごとにデバイスの割合やその業界内のサイトがどのような値のブレイクポイントを設定しているかを見ることができます。

気になる業界のWebスタンダードを知りたい

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ