悩めるWEB担当者様のための最新ノウハウをお届け

レスポンシブWebデザインとは?メリットとデメリット、作り方まで紹介!

business-computer-design-34125

みなさんはWebサイトを何で見ますか?パソコン?スマホ?それともタブレットですか?
Webサイトを様々なデバイス(パソコンやスマホなど)から見るようになったため、どのデバイスからでも見やすいものを作らなくてはなりません。
この時に必要なのがレスポンシブWebデザインです。
今回はレスポンシブWebデザインについて紹介します。

レスポンシブWebデザインとは

レスポンシブWebデザインとは、どんな大きさの画面でも見やすく、使いやすいWebサイトにするために必要なものです。
1つのHTML(Webサイトに載せる情報)で配信し、CSS(情報の大きさや位置など表示の指定)はデバイスごとに用意して表示を変えさせます。
内容は全て同じですが見せ方が違うということです。
responsive

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

では、レスポンシブWebデザインにはどんなメリットとデメリットがあるのでしょうか。

メリット

管理が楽

HTMLが1つなのでWebサイトに載せる情報を修正や更新する時に作業が1回で済みます。
デバイスごとにHTMLがあると修正や更新の作業をHTMLの数だけしなくてはなりません。

シェアされやすい

URLが1つなのでWebサイトを見るユーザーにシェアされやすくなります。
スマホ用のモバイルサイトとパソコン用のPCサイトがあった場合、見せたいユーザーのデバイスに合わせて異なるURLを送らなければなりません。

検索エンジンの上位に表示されやすい

スマホに対応したWebサイトが検索結果の上位に表示されやすくなる「モバイルフレンドリー」や、スマホ用のページが順位の決め手になる「モバイルファーストインデックス」に対応できます。
「モバイルフレンドリー」や「モバイルファーストインデックス」について詳しくはこちらの「【全部わかる】モバイルフレンドリー・モバイルファーストインデックスなどややこしいモバイルSEO用語」をご覧ください。

デメリット

スマホでの表示に時間がかかる

HTMLが1つなのでパソコンと同じデータをスマホにも読み込ませます。
そのためスマホで表示しないデータも読み込まれ、表示完了するまで時間がかかってしまいます。
どれくらい時間がかかるのかはGoogleのPageSpeed Insightsで測定できます。

デザインに制限がある

HTMLが1つなのでスマホとパソコンでコンテンツの順番を変えるなど、大幅に見せ方を変えることはできません。

工数がかかる

デバイスごとにデザインを制作し、それに合わせたコーディングをするので複雑になります。
そのため制作工数がかかってしまいます。

レスポンシブWebデザインの作り方

それでは実際に作るためにレイアウトや表示の設定方法、注意点を紹介します。

「どんな見せ方にするか?」レイアウトの種類

まずはレイアウトの紹介をしていきます。

レスポンシブレイアウト(レスポンシブデザイン)

レスポンシブレイアウト(レスポンシブデザイン)とはブレイクポイント(CSSが変わる画面幅の数値)でレイアウトが変わるものです。
例えば「770px~959pxはこのレイアウトで」と指定します。
パソコンでウィンドウサイズを小さくしていくと途中でガクンとレイアウトが変わります。
例えばFESSIダンススクールがこのレイアウトになってます。

FESSI

リキッドレイアウト

リキッドレイアウトとは画面幅に合わせて全体の表示サイズも変わるものです。
エアロファシリティ株式会社がこれで作られています。

AERO

フレキシブルレイアウト

フレキシブルレイアウトとはリキッドレイアウトにコンテンツの最大幅と最小幅を指定したものです。
最大幅より大きな画面幅の場合は余白が生まれます。
三井不動産株式会社のレイアウトがそうです。

Mitsui Fudosan Story

「どうやって表示するのか?」メディアクエリについて

実際にHTMLやCSSにどんなコードを書くのか紹介します。

viewport

viewportとはそれぞれのデバイスの画面幅に合わせて表示する大きさを調整するコードです。
HTMLの<head>部分にこのコードを入れると文字などがデバイスごとに見やすい大きさになります。

<meta name="viewport" content="width=device-width,initial-scale=1">

メディアクエリ

メディアクエリとは適用するCSSを変更するコードです。
書き方は2種類あります。

  • 1つのCSSファイル内で指定する
    CSSにこのコードを入れると

    @media screen and (min-width: 480px) { p{color:#FFFFFF} }

    「画面幅が480px以上の時にp要素を#FFFFFFの色にする」ようになります

  • デバイスごとにCSSファイルを用意する
    CSSファイルをデバイスごとに用意し、HTMLの部分にこのようなコードを入れると

    <link rel="stylesheet" media="(max-width: 640px)" href="A.css">

    「画面幅が0px~640pxの時にA.cssファイルを適用する」ようになります。

「どんなことに気を付ければいい?」制作時の注意点

様々なデバイスに対応させるには気を付けなければならないことがあります。

対応デバイスをよく考える

「パソコンとスマホに対応すれば良い」となった時に言われたまま作るとタブレットで見るとデザインが崩れてしまうことがあります。
ユーザーは様々なデバイスからWebサイトを見るので配慮が必要です。

スマホから設計する

横幅のあるコンテンツ、文章量の多いコンテンツがスマホの画面幅になると非常に見にくく、使いにくくなります。
画面幅に余裕のあるパソコンより、制約の多いスマホから設計すると楽です。

画像ファイルは小さく少なく

スマホは読み込みに時間がかかるため、画像を作る時にこんなことに気をつけるといいです。

  • 画像ファイルは小さいもの
  • CSSやWebフォントを使う
  • CSSスプライト(複数の画像を1枚の画像に載せ、CSSで表示する箇所を指定する方法)を使う
  • 画面幅に合わせて読み込む画像を小さいものに切り替える

高解像ディスプレイに対応する

iPhoneはRetinaディスプレイという今までより高解像度で表示されるものです。
Retinaディスプレイで見た時に美しく見えるように縦横2倍のサイズの画像を用意すると良いでしょう。
ですが、3倍の画像が必要なスマホも出てきているので注意が必要です。

レスポンシブwebデザインのテンプレート紹介

「HTMLやCSSに自信がないけど、レスポンシブWebデザインのサイトが欲しい…」という方にはテンプレートを配布しているサイトもあります。
今回は日本語の無料サイトを紹介していきます。

TEMPLATE PARTY

業種ごとにテンプレートがあります。

  • 商用利用可
  • 会員登録不要
  • 制作会社でも利用可
  • カスタマイズ可
  • 著作表記が必須(外す場合は2,900円のライセンス契約が必要)
  • サンプル表記がある画像は使用不可

https://template-party.com/temp_responsive.html
Template Party

無料ホームページテンプレート.com

テンプレート内の写真、イラストも使用できます。

  • 商用利用可
  • 会員登録不要
  • 制作会社でも利用可
  • カスタマイズ可
  • 著作表記が必須(外す場合は2,980円のシリアルキーが必要)

http://f-tpl.com/
Free_Template

TempNate

ダウンロード後の操作手順が丁寧に説明されています。
また、Webサイトで使える画像素材も配布しています。

  • 商用利用可
  • 会員登録不要
  • 制作会社でも利用可
  • カスタマイズ可
  • 著作表記が必須(外す場合は3,900円のライセンス発行が必要)
  • 著作表記の場所や色は自由

http://tempnate.com/responsive/
TempNate

まとめ

レスポンシブWebデザインにはメリットがたくさんありますが、同時に気をつけなければならないこともあります。
ユーザーのことをよく考えて最高のコンテンツを届けられるようにしましょう!

DIではレスポンシブWebデザインの制作も行っております。
新規制作やリニューアルをご検討中の方、お気兼ねなくお問い合わせください!

関連記事