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

2022/04/26
レスポンシブWebデザインとは?メリットとデメリットを徹底解説
  • レスポンシブWebデザインとは何かを知りたい
  • 使用するメリット・デメリットは何があるのか
  • なぜレスポンシブWebデザインをGoogleが推奨しているのか

Web関係に携わった事がある方はレスポンシブWebデザインこの言葉を聞いたことがあるのではないでしょうか?

これからWebの業界に携わろうと考えている方は、今回でレスポンシブWebデザインを理解しましょう!

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

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

レスポンシブWebデザインとはスマホ、タブレット、パソコンといった複数の異なる画面サイズのデバイスに合わせて、ページのレイアウトやデザインを自動的に適切なサイズに合わせることを言います。

例えば、パソコンとスマホで同じサイトにアクセスした場合でも、それぞれの画面サイズに応じて自動的にページのデザインやレイアウトが変わる為、見やすいサイトが表示されます。

パソコンだけにしか対策を取っていないWebサイトを携帯で見た場合はどうなるのでしょうか。

Webサイトを開いた時に、右にスクロールしなければ画像が見えなかったり、文字が正しく表示されなかったり。

上記のように不具合が生じて、見てくれたユーザーが内容を見ずにサイトから離れてしまうのです。

このレスポンシブWebデザインをGoogleが推奨しています。

画面サイズやデザインが適切な幅に合わせて自動的に適切に表示がされるので、ユーザーが快適にサイトを利用できます。

正しく画像が表示されない、文字がおかしくなっているなどの不具合が非常に少ない事があげられます。

見てくれているユーザーがいかにGoogleが重視しているのかがわかります。

また、URLが一つになるため検索エンジンのクローラーが巡回時に確認する部分を少なくすることができます。

後ほど説明しますが、同じサイトでも今まではパソコン用、スマホ用と分かれてWebページを用意していることが多かった為、検索の順位を決めるクローラーも二回巡回しなくてはなりませんでした。

だからこそ、パソコン用もスマホ用も一つのURLで見れるレスポンシブWebデザインが推奨されているのです。

そもそもWebサイトというものは、HTMLファイルとCSSファイルで構築されています。

文字の表記などはHTMLファイルで、デザインなどはCSSファイルで作成し、ブラウザがそれらの情報を構築して画面に表示しています。

普段私たちが何気なく見ているWebサイトは、文字とデザインが別れて作られているのです。

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

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

ここでは、メリットとデメリットを詳しく説明していきます。

レスポンシブWebデザインを採用することのメリット・デメリットを理解していきましょう。

メリット

管理が簡単にできる(面倒な作業が一回で済むようになる!)

冒頭でパソコン用とスマホ用でページを作らなければならなかったとご説明しましたが、このHTMLファイルを、パソコンならパソコン用のHTMLファイル、スマホならスマホ用のHTMLファイルと分けて修正や更新の作業をしなくてはならなかったのです。

レスポンシブWebデザインは、HTMLが一つなのでWebサイトに載せる情報の修正や更新が1回で済ませることができます。

だからこそ、レスポンシブWebデザインを採用することで手間がかかる事が少なくなり効率が上がります。

解析がしやすくなる

先程パソコン用とスマホ用のHTMLファイルが別だと修正が二回必要になることを説明しましたが、解析も同様に一つ一つのURLごとにすることが必要でした。

レスポンシブWebデザインを導入することによりURLが一つで対応できるため、アクセス解析なども一回で見れるようになります。

またURLが一つの為、ユーザーからのシェアもされやすくなるのでこちらもメリットになります。

以前はスマホ用のモバイルサイトとパソコン用のサイトがあった場合、見せたいユーザーのデバイスに合わせて異なるURLを送らなかった為、その不便な点がなくなります。

上位表示されやすくなる

パソコン用、スマホ用と分けてページを持っていた場合、各デバイスごとのHTMLファイル、URLがあり修正も解析も手間がかかると説明しました。

レスポンシブWebデザインにすると、URLが統一となり※検索エンジンの評価もまとまるため、順位が上がりやすくなるのです。

別々のリンクだと、クローラーに違うサイトと認識されてしまい、パソコンは〇位、スマホは〇位と評価をされてしまいます。

URLが一つであれば内容も分散されない為、評価がされやすくなるということです。

検索エンジン…検索窓と呼ばれるボックスにキーワードを入力して検索ボタンを押すと、世界中のWebサイトの中から、そのキーワードへの関連性の高いWebサイトを探し出し、一覧表示してくれるシステムのことです。

普段あなたが、検索で使っているGoogleやYahoo!で調べているそのものが、検索エンジンになります。

デメリット

ここからはデメリットを解説していきます。

メリットも踏まえつつ、どのような支障があるのかも含めて今後の採用基準にしてみてくださいね。

表示されるまで時間がかかる

レスポンシブWebデザインはHTMLファイルが1つなのでパソコンと同じデータをスマホにも読み込ませます。

HTMLが一つで管理がしやすいメリットがありました。

しかし、ここではそこが懸念点になります。

例えば携帯でレスポンシブWebデザイン対応のサイトを見たとします。

HTMLファイルが一つである為、パソコンで対応する用のHTMLコードやCSS、画像など大きいファイルも同時に読み込んでしまい、サイトが表示されるまで多少の時間がかかってしまうのがデメリットと言えるでしょう。

自身のサイトの読み込み時間はどれくらい?

自身が持っているサイトは読み込みがどれくらい時間がかかるのか気になる方はいらっしゃるのではないでしょうか?

そんな方は、GoogleのPageSpeed Insightsで測定することができます。

評価の基準は、スコアが100点に近いほど、高い評価となります。

0~49点は赤(遅い)、50~89点は黄色(普通)、90~100点は緑(速い)と表示されます。

またページ下部の詳細には、改善案も表示されます。

ここで赤い表示が出ている箇所は早急に改善が必要。

オレンジは改善が必要という目安など、どこが原因で遅くなっているのかも確認することができます。

90点以上がユーザーが利用しやすいサイトになりますので、90点以上を目指せるように日々よりよいサイトにしていきましょう。

現状がどの数値にあたるのか、一度調べてみてはいかがでしょうか。

下記Googleより引用

あらゆるデバイスでウェブページの読み込み時間を短くしましょう
PageSpeed Insights

デバイスごとにデザインや文章量などを変えることができない

HTMLファイルが1つなのでスマホとパソコンでコンテンツの順番を変えること、大きくレイアウトを変えることはできません。

また、デバイスごとに文章量を変えたりすることもできません。

レスポンシブ化することでスマホやタブレットで表示したときの画像が正しく反映されていなかったりと、様々な問題も起こる可能性があります。

HTMLファイルが一つになっており情報が複雑化されている為、Webデザインに必要な知識をもっていないと対処できないこともあるので注意が必要です。

費用と時間がかかる

HTMLファイルが一つで管理できる便利さがありますが、だからこそサイト制作は難しくなります。

まずレスポンシブWebデザイン用のcss等、必要に応じて新たなファイルや記述が必要となります。

その結果、費用と構築にも時間がかかることになります。

時代はスマホに向けたサイト作成へ

時代はスマホに向けたサイト作成へ

では、なぜレスポンシブWebデザインをGoogleは推奨しているのでしょうか?

現在インターネットの利用状況がパソコンよりも、スマホの方が高いからになります。

総務省が平成22年~平成30年にかけて調査した「主な情報通信機器の保有状況(世帯)」によると平成29年にパソコンが72.5%、スマホが75.1%と7年目にして初めて3.4%上回りました。

平成30年には、パソコンが74.0%、スマホが79.2%と5.2%増加しています。

前年比と比べると1.8%増加しています。

今後もますますスマホの保有率が上がることが考えられるため、いかにスマホにWEBサイトが対応できるかが重要となってきます。

下記、総務省より引用

総務省では、この度、平成30年9月末の世帯及び企業における情報通信サービスの利用状況 等について調査した「通信利用動向調査」の結果を取りまとめました。
平成 30 年通信利用動向調査の結果

また、2021年3月からGoogleが全てのホームページをMFI(モバイルファーストインデックス)に移行されています。(※以下MFI)

MFIとはパソコンではなくスマホでのWEBサイト表示や使いやすさを基準に、Webサイトの評価や検索順位の決定を行う仕組みのことを言います。

2021年3月からは基本的に全Webサイトがスマホなどのモバイル端末が検索順位の評価対象となっています。

それに伴い、SEO対策もスマホを中心に行う必要不可欠となっています。

下記、Googleより引用

Google がモバイルファースト インデックスに取り組み始めてから数年がたちました。
モバイルファースト インデックスへの対応準備(移行期間延長)

もし仮に、パソコン用のみの対策をしていないWebサイトがあったとします。

このWebサイトをスマホで見た場合どうなるでしょうか。

適切に画像が表示されなかったり、どこかで不具合が起こり、スマホユーザーに快適なサイトを提供できていない状態になります。

このMFIの仕組みにより上記のようなサイトはSEO的には評価されず、検索の上位に上がってくることはありません。

それはなぜか、GoogleがスマホのWebサイトを重視して評価しているからです。

レイアウトを紹介

レイアウトを紹介

PC、タブレット、スマホ、各デバイスに対応しているレイアウトはいくつかあります。

ここではレスポンシブ・リキッド・フレキシブルの3種類のレイアウトについてご紹介します。

レスポンシブレイアウト

今回ご紹介している、レスポンシブレイアウト(レスポンシブWebデザイン)になります。

画面の幅に応じてcssを切り替えるレイアウトのことを言います。

簡単に説明すると、パソコンで見ていたWebサイトをスマホで見た時に、デザインや背景色や文字などは変わらずにスマホでも見やすく表示されます。

ですが実は、デザインや文字の幅などが調整され見やすくなっているというような感じです。

cssの切り替えを行うピクセル数は「ブレイクポイント」と呼ばれ、このブレイクポイントの値を指定して、ユーザーの使用デバイスに適した表示をすることが可能になります。

この数値だったらこの画面サイズで表示する。

というような形です。

デバイスごとに画面サイズを用意しておいて、そのデバイスに合った画面サイズを表示させるのがレスポンシブレイアウトになります。

リキッドレイアウト

リキッドレイアウトとは、画面のサイズに合わせて表示されるレイアウトのことです。

さっきのレスポンシブと変わらないのでは、と思った方もいるかと思います。

大きく違う点は、表示されるデザイン(見方)が変わるか変わらないかです。

文章、デザインを全く変えずにできるのがこのデザイン。(レスポンシブは不要なものを非表示に出来たりする)

画面のサイズ幅に合わせて液体のように広がっていき、どのデバイスの画面にピッタリにすることができるのがリキッドレイアウトになります。

イメージしてみてください。

あなたの目の前には、新品の小さめで木目調の机があります。その机に爪楊枝4本で四角を作って置きました。

その上から水のしずくを4滴ほど垂らします。

そうすると徐々に雫は広がっていき、爪楊枝ピッタリに広がりますよね。

その広がりを表すのがリキッド(液体)レイアウト、画面ピッタリに表示することになります。

フレキシブルレイアウト

リキッドレイアウトの便利版と考えておくのがいいでしょう。

リキッドレイアウトと同様に、各要素の単位をパーセンテージで表示するものになります。

それに加えて、最小幅、最大幅を指定することができます。

設定した最大幅よりも大きい画面で表示した場合には、まわりに余白を作って見やすいサイトにすることができるレイアウトなります。

レスポンシブデザイン以外でスマホ対応にする方法

レスポンシブデザイン以外でスマホ対応にする方法

レスポンシブWebデザインの他にスマホ対応する方法は何があるのでしょうか?

メリット・デメリットも交えてご紹介します。

スマホ用のホームページを別で用意する

メリット

パソコンのページとは別のURLとなるため、 デザインやレイアウトなどを自由に作成することができます。

既存のURLをレスポンシブ対応するとなると全体的な見直しをする必要がある為、時間がかかります。

スマホのページを新しく作る時は、既存のURLに追加するだけなので簡単です。

デメリット

レスポンシブデザインに対応していないWebサイトのデメリットと変わらないので、ポイントだけご紹介します。

・ページのURLが別になるので修正を二度しなくてはならなくなり手間がかかる。

・ページのURLが別になるので、情報が分散されSEOの効果も弱まってしまう。

上記のレスポンシブWebデザイン以外のスマホ対応ができる方法もある点を踏まえて、Googleが推奨してるのはレスポンシブWebデザインであり、いま最も採用されているスマホ対応のレイアウトになっているのは事実です。

ただ、それぞれの会社のWeb戦略に合うようなスマホ対応のWebサイト、最適なデザインを選択し採用することが大切です。

まとめ

まとめ

いかがだったでしょうか?今回はレスポンシブWebデザインについて説明して参りました。

PCよりも、スマホの使用率が高くなっており、今後もスマホに適したサイト制作が不可欠になってくることでしょう。

メリット・デメリットを把握し、この機会にレスポンシブWebデザインを取り入れてみてはいかがでしょうか。

株式会社ティーエルマーケティング

株式会社ティーエルマーケティング

SEO対策に必要な機能や設定がされたホームページを制作しており、多種多様な業種のホームページ制作実績が1,000社以上あります。
SEO検定1級やライティング検定1級、ウェブ解析士などの資格取得者が在籍し、集客・求人に関する課題を解決しています。

会社概要

この記事のタイトルとURLをコピーする
女性

無料相談・無料見積もり受付中!

1,000社以上の制作実績があり、様々な業種のお客様の結果を出してきました。
集客・求人に結びつくホームページを制作します!

0120-983-828

9:00~18:00(土日祝日は除く)