【少し専門的なWeb知識】正確に覚えよう!「レスポンシブWebデザイン」

こんにちは、BONDs編集部で、Webユニットの小畑です。

 

いまさら感のあるWebの話題ですが、あえて取り上げたいと思います。

というのも、最近のHPでは当たり前になりつつある「レスポンシブWebデザイン」は、皆さん何となく理解されているとは思いますが、今後も度々打ち合わせ議題に挙がる事も多いと思いますので、ここで改めて、正確な意味やメリット・デメリットなどを正しく覚えてみませんか。

 

つまり今回は、HPを検討する機会のあるアカウントやデザイナーの方のための内容とさせて頂いております。

レスポンシブWEBデザイン イメージ

正確な意味

ブラウザの横幅サイズをWebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調整できる表現手法の事を言います。

 

今までは、Webサイトのパソコンやスマートフォン、タブレット端末など複数の機器や画面サイズに対応させる際、内容が同じでデザインや動作をそれぞれに最適化した複数のHTMLファイルを用意し、HTTPリダイレクトなどでアクセスを振り分ける手法がよく用いられていました。

 

「レスポンシブWebデザイン」では、1つのHTMLファイルをCSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。

メリット

  1. 1つのHTMLファイルで複数デバイスに対応できるので、制作後はメンテナンス等が容易になり、作業工数の軽減になります。つまり、メンテナンスを外部委託している場合、メンテナンス費用が抑えられることが多くなり、ランニングコストの軽減が期待できます。
  2. 人的なミスの減少も期待できます。
    更新対象のHTMLファイルが複数から1つに減少するのですから、確率的にも人的ミスの減少効果が期待できます。
  3. コンテンツ情報の整理が行いやすく、今後のコンテンツ追加・削除・更新などの変更の対応がスムーズに行えます。
  4. SEO対策にも効果的です。
    検索エンジンGoogleが検索結果の表示順位を判断するアルゴリズムの中に、【モバイルフレンドリー】判断基準がありますが、レスポンシブWebデザインのサイトは、このモバイルフレンドリーサイトとして認定され評価されやすい傾向がありますし、各デバイスのURLが統一化されるため、SEO効果を集約させる事も出来ます。逆に、レスポンシブ対応していないサイト構築だと、HTMLがPC用とスマホ用でそれぞれ存在しており、Googleクローラーが「これは不正なミラーサイトか?」と判断に迷ってしまうこともありますし、SEO効果が分散される可能性もあります。

デメリット

  1. 構築に工数がかかる。
    つまり、制作時間が掛かりますし、人的コストも高くつきます。私の経験値だと、PCサイトに比べて1.5倍程度かと。

  2. スマホ表示が重くなる。
    例えば、横幅1,200ピクセルのときは【××画像】を表示して、480ピクセルのときは【××画像】を非表示、というようにサイト構築するとします。その場合、もし480ピクセルの非表示時端末だとしても、切り替えのスタイルシート内にはタグが打ちこまれていますので、一旦そのソースを読み込もうとします。そのために、サイズが重い画像をサイト上で使用していた場合、スマホサイト上では表示速度が落ちてしまうことがあり、レスポンシブサイトのデメリットと言えます。

  3. IE8以下の古いブラウザに対応していない。
    レスポンシブデザインは古いブラウザを使用している端末には対応しておりません。また、ガラケーと一般的に呼ばれているフューチャーフォンにも未対応です。とはいえ、以下のグラフ通り、IE8以下の古いブラウザのシェアはかなり少ないです。
<参考:ブラウザシェア>

まとめ

数年前に彗星の如く現れた「レスポンシブWebデザイン」。

上記の通り、メリットとデメリットの双方がございますので、それぞれを踏まえた上で、レスポンシブ対応が必要か検討して頂ければと思います。

 

私の個人的な意見は、多少のデメリットはあるものの、Googleの評価を鑑みると、時代の流れに向いてるのかなぁと思いますので、是非、レスポンシブWebデザインを導入したサイト提案を行って頂ければ幸いです。

 

小畑