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

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

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

サイトリニューアルを検討されている方は、こちらの記事をご覧ください。

【見積付き】Webサイトリニューアルの費用を決めるときに担当者が検討すべき5つのポイント


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

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

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

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

メリット

管理が楽

HTMLが１つなので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デザインにはメリットがたくさんありますが、同時に気をつけなければならないこともあります。ユーザーのことをよく考えて最高のコンテンツを届けられるようにしましょう！

また、弊社ではサイトリニューアルをご検討されている方向けにRFPサンプルの無料配布を行っております。是非下記リンクからお申し込みください。

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

サービス資料はこちら無料相談はこちら

自社サイトのウェブアクセシビリティ状況、診断してみませんか？

株式会社デジタルアイデンティティでは、ウェブアクセシビリティ診断サービスを提供しています。

2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されています。
これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、対応を進める企業が増えています。

こんなお悩みはありませんか？

  • どこからウェブアクセシビリティ対応に手をつければ良いかわからない…
  • 今のサイトで問題のあるページを一覧化して欲しい…
  • ウェブアクセシビリティの具体的な改善方法を知りたい…

WCAG2.2に準拠した診断項目・達成基準で、問題のあるページをリスト化してページ単位で問題点をリストアップ。
課題点が明確になるので、具体的な改善アクションに繋げることができます。

また、診断後の改善作業を弊社にワンストップでご依頼いただくことも可能です！
ぜひお気軽にご相談ください！

ウェブアクセシビリティ診断のお申し込みはこちら

成功するWebサイト設計から制作チームの運用体制まで! サイトリニューアルを成功させるためのプロセス 「無料eBookでダウンロード」

関連記事

[無料] webサイトに関するお悩みを解決! webサイト診断【期間限定】「UI/UX分析」「EFO診断」「ページ表示高速化診断」詳しくはこちら
成功するWebサイト設計から制作チームの運用体制まで! サイトリニューアルを成功させるためのプロセス 「無料eBookでダウンロード」
ウェブマーケティングの最新情報が満載! リリースノート最新号 「無料eBookでダウンロード」

Category

Keywords

Google (34)スマートフォン (14)検索結果画面 (10)Pardot (9)Yahoo (9)SEO (8)Webデザイン (7)ツール (6)アクセシビリティ (5)Webサイト (5)表示速度 (4)画像 (4)Google Analytics (4)アトリビューション (3)レスポンシブ (3)まとめ (3)MT (3)ユーザビリティ (3)UI/UX (3)YDN (2)カスタマージャーニー (2)SSL (2)速報 (2)CSS (2)制作 (2)SNS (2)ローカライズ (2)HTML (2)ABテスト (2)Instagram (2)

Webサイトリニューアル費用はどのくらい？