JetB株式会社

JetB株式会社

レスポンシブウェブデザインとは？概要と特徴を解説

ホーム > 豆知識コラム > レスポンシブウェブデザインとは？概要と特徴を解説

画面の大きさが違う2つのパソコン

レスポンシブウェブデザインの概要と特徴について

この記事を読むための時間：7分

スマートフォンの普及により、最近ではウェブを閲覧する際に、PCよりもスマホを使う人の方が増加しています。

それを受けて、Googleは今後サイトの評価の基準をPCサイトからモバイルサイトに移行することを発表しました。そこで、サイト運営者におすすめなのがレスポンシブウェブデザインです。

今回はレスポンシブウェブデザインについて「そもそも何？」という人にも分かりやすいように、概要や事例、メリットや作成方法を解説します。

レスポンシブウェブデザイン（レスポンシブ対応）とは？

レスポンシブウェブデザインとは、サイトを閲覧する際、そのデバイスに合わせて自動で最適なデザインに変わるデザインのことです。

レスポンシブウェブデザインのレスポンシブとは「敏感に反応する」という意味があります。

レスポンシブウェブデザインの仕組み

レスポンシブウェブデザインを採用すると、1つのURL、HTMLを用意すれば、後は自動的にPCやスマホ、タブレットといったデバイスに合わせて画像の幅が変わるなどして見やすくなります。

なぜ1つしかHTMLがないのに、デバイスに合わせてデザインが変わるかというと、画像などの表示幅のデザインを「CSS」でコントロールするからです。

CSS（カスケーディングスタイルシート、英：cascading style sheets）とは、ウェブページの画像の位置や文字、色などの「見栄え」を整える役割を担っています。

このCSSにMediaQueries（メディアクエリ）を記述し、例えば「ウィンドウの幅が〇〇ピクセルならば画像を縦に、それ以外は横に配置する」などの指示を出すことで、デバイスに合わせて最も見やすいデザインに変えられるのです。

レスポンシブウェブデザインの事例

レスポンシブデザインの事例として、名古屋市の公式ホームページを挙げます。左がスマホから見たページ、右がPCから見たページです。

スマホ、PCから見た名古屋市の公式サイト

PCページは右側に「市政に関する情報」と出ていますが、スマホの場合は出ていませんね。スマホから見た場合は、スクロールをしていくと下部に「市政に関する情報」が出てきます。

また、スマホページには右上にメニューがあり、タップするとPCページ上部にある「暮らしの情報」や「観光・イベント情報」を選択できるようになっています。

レスポンシブウェブデザインのメリット

レスポンシブデザインは閲覧するデバイスによってデザインが変わりますが、そもそもなぜデザインを変える必要があるのでしょうか？その理由であるメリットについて解説します。

Googleが推奨しておりSEO対策になる

まず、レスポンシブデザインはGoogleがMFIを進める上で推奨しているデザインで、SEO効果が高いことが挙げられます。

MFI（モバイルファーストインデックス、英：Mobile First Index）とは、サイトの評価の基準が今まではPCサイトであったのが、モバイル用サイトに変わることを指しています。このMFIの背景には、近年の爆発的なスマホの普及があります。

現在、スマホ用サイトが無い、あるいはレスポンシブウェブデザインに対応していないサイトは、スマホから閲覧した際に画像が表示されないなどデザインが崩れて見えにくくなってしまい、ユーザーが満足できないサイトと判断されてしまいます。

すると、今までPCページで上位表示されていたサイトでも、順位が下がってしまう可能性があるのです。

導入が簡単

先述したGoogleのMFIへの移行において、現在モバイルサイトの内容が充実していない場合、モバイルサイトを充実させなければならなくなりました。その方法はいくつかありますが、レスポンシブウェブデザインが最も導入が簡単なのでおすすめです。

作成するページは1つで良い

レスポンシブウェブデザインでは、1つのページを作成すればPC、モバイルのどちらにも対応できるので、モバイル専用のサイトを作らなくても済み、手間が省けます。

更新・メンテナンスが楽

作成するページが1つで良いので、更新やメンテナンスも非常に楽であるメリットがあります。

クローラーが巡回しやすい

レスポンシブウェブデザインは、サイトの構造がシンプルで、URLの転送（リダイレクト）が不要です。そのため、クローラーが巡回しやすく、SEO評価が上がりやすいこともメリットのひとつです。

レスポンシブウェブデザインのデメリット

レスポンシブウェブデザインにはいくつかのデメリットもあります。導入を考えているのであれば、デメリットについても詳しく知っておきましょう。

CSSが複雑でデザインが難しく、制約がある場合がある

レスポンシブデザインはCSSでコントロールするため、必然的にCSSが複雑になります。また、どのデバイスからも見やすいサイトにするためには、各実機でどのように見えるかを確認しながら少しずつ進めるしかありません。

そのため、素人がレスポンシブウェブデザインにしようとしても難しく、かと言って業者に依頼すれば高額な費用がかかりがちです。

スマホからの読み込みが遅くなりやすい

レスポンシブウェブデザインでは、スマホから閲覧する場合もPCページと同じデータを読み込まなければならないため、読み込みが遅くなりやすい傾向にあります。

Googleは読み込み速度も評価の要素のひとつとしているので、あまりに読み込み速度が遅いと、レスポンシブウェブデザインであっても評価が下がってしまう可能性があります。

レスポンシブウェブデザインが向いている・向いていないサイト

レスポンシブウェブデザインのメリットとデメリットをご紹介しました。これらを踏まえて、レスポンシブウェブデザインが向いているサイトと向いていないサイトの特徴を見てみましょう。

レスポンシブウェブデザインが向いているサイトの特徴

  • スマホ、タブレット、PCなどマルチデバイスからの閲覧が多い
  • 更新頻度が高い
  • 検索エンジンからの流入を重視している
  • どのようなデバイスでも高いCVR（コンバージョンレート）が要求される
  • 古いブラウザへの対応が重要ではない

更新頻度が高く、ユーザーがマルチデバイスから閲覧することが多いようなサイトや、SEO効果やCVRを上げたいサイトは、レスポンシブウェブデザインが向いていると言えます。

レスポンシブウェブデザインが向いていないサイトの特徴

  • デバイスごとにユーザーの利用方法、ユーザー層が異なる
  • サイトの情報量が多過ぎてモバイルでは表示速度が遅くなる
  • そのデバイスでのデザインを活かしたいランディングページ

このようなサイトはレスポンシブウェブデザインが向いていないサイトです。また、検索エンジン対策の優先順位が低い、つまりウェブサイトからの集客にそこまで頼らなくて良いようなサイトは、わざわざレスポンシブウェブデザインにこだわって導入する必要はないでしょう。

レスポンシブウェブデザインでのサイトの作り方

レスポンシブウェブデザインの種類

レスポンシブウェブデザインには3つのレイアウトの種類があります。

レスポンシブレイアウト（レスポンシブデザイン）

レスポンシブレイアウトとは、ブレイクポイント（CSSが変わる画面幅の数値）でレイアウトが変わるレイアウトです。

例えば「500px～1000pxはこのレイアウトで」と指定しておくと、この数値外になった途端に画像の位置が上下するなどし、レイアウトが変わります。

具体例：inborn

レスポンシブデザイン例

リキッドレイアウト

リキッドレイアウトは、画面の幅（＝デバイス）に合わせてサイト全体の表示サイズが変わるレイアウトです。

具体例：wota

リキッドレイアウト例

フレキシブルレイアウト

フレキシブルレイアウトとは、先に説明したリキッドレイアウトにコンテンツの最大幅と最小幅の指定を足したレイアウトです。もし、最大幅より大きなデバイスから閲覧した場合は余白が生まれます。

具体例：ホンマタカシ監督「建築と時間と妹島和世」

フレキシブルレイアウト例

レスポンシブウェブデザインで使うHTML・CSS

レスポンシブウェブデザインで使用する具体的なHTML、CSSについて解説します。

meta viewport

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

例：<meta name=”viewport” content=”width=device-width,initial-scale=1″>

メディアクエリ

メディアクエリは、適用されるCSSの指示内容を画面サイズによって切り替えるためのもので、書き方は以下の2種類があります。

  • 1つのCSSファイル内に入れる
    例：@media screen and (min-width: 450px)　{ p{color:#FFFFFF} }
    指示内容：画面幅が450px以上の時に、p要素（段落）を#FFFFFFの色にする
  • デバイス毎にそれぞれのCSSファイルを用意する
    例：<link rel=”stylesheet” media=”(max-width: 500px)” href=”AB.css”>
    指示内容：画面幅が0px～500pxの時にAB.cssファイルを適用する

注意点

レスポンシブウェブデザインにする上での注意点を解説します。

画像ファイルは小さく・少なめを意識する

パソコンでは簡単に読み込める画像でも、スマホでは時間がかかってしまう場合があります。そのため、画像ファイルはできるだけ小さく、容量を少なめにするようにしましょう。

具体的には以下のポイントに注意みてしてください。

  • CSS、webフォントを使用する
  • 複数の画像を1枚の画像に載せ、CSSによって表示する場所を指定する「CSSスプライト」を使用する

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

最近はスマホのディスプレイの解像度も大きく上がってきています。解像度が高いディスプレイで低密度の画像を表示させると粗い画像が表示されてしまい、美しくありません。そのため、高解像度に対応できるように画像は2～3倍のサイズのものを用意しましょう。

必ずスマホ・タブレット実機で確認を

レスポンシブウェブデザインを導入する場合、必ずスマホやタブレットと言った実機で実際にデザインがどうなっているかを確認しながら進めましょう。

レスポンシブウェブデザインのテンプレート

「レスポンシブウェブデザインを導入したいけれど、HTMLやCSSにそこまで詳しくない」「かといって業者に頼むのにはお金がかかり過ぎる」

とお悩みの方は、テンプレートから作るのがおすすめです。ここでは無料で使えるレスポンシブウェブデザインのテンプレートサイトをご紹介します。

TEMPLATE PARTY

webサイト制作会社も利用可能なテンプレートが1,000点以上揃うサイトです。

企業向け、不動産向け、居酒屋向け、ビジネスサイト向けなど、ジャンルによってテンプレートが分かれているので、初心者でも自分の業種に合ったホームページを作成することができます。

TEMPLATE PARTY

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

商業利用・webサイト制作会社も利用可能のサイトです。

HTMLテンプレートやワードプレステーマが豊富で、全て無料で利用することができます。デモサイトやシュミレーターが使えるので、より具体的な導入後の様子が確認できますよ。

さらにテンプレート内の素材もそもまま無料で使用可能なので「ホームページを作るにしても全くの初心者なんだけど・・・」という人も簡単にホームページを作ることができるでしょう。

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

TempNate

商用利用も可能なレスポンシブウェブデザインのテンプレートを全て無料で配布しているサイトです。

ファイルのダウンロードから困ったときの対応方法まで、非常に分かりやすく詳しく説明してくれるので、初心者でも簡単に設置することができるでしょう。テンプレート内の素材は全て無料で使用可能です。

さらに「それでも自分でホームページ製作やデザインの移行をするのは難しそう」と感じるのであれば、3万円からの格安料金で製作・移行代行を行ってくれるサービスもあります。

TempNate

まとめ

世界でのモバイル端末ユーザーが増え、GoogleもMFIへの移行を発表した今、サイトをモバイルフレンドリー化することは必須です。

その中でもレスポンシブウェブデザインは比較的簡単にモバイルフレンドリー化することが可能です。無料のテンプレートなどもあるので、MFIに完全移行する2021年の3月までには対策をしておきましょう。

関連記事Related article