Original

知ってますか?スマホ専用ページとレスポンシブデザインの違いを解説

皆さんはホームページをスマートフォン対応させるには、複数の方法があることをご存知でしょうか。1つは、PC向けのページとスマートフォン向けページをそれぞれ制作する方法で、もう1つはPCでもスマートフォンでも最適な表示を行うレスポンシブデザイン(RWD)のホームページを制作する方法です。

 

ですが、この2つの違いがいまいちわからず、どちらを選べばいいのかわからないという方も少なくないでしょう。

 

そこで今回は、スマートフォン向けページとレスポンシブデザインの違いを解説します。なぜスマートフォン対応が注目されているのか、背景も合わせて解説するので、これからスマートフォン対応を考えている方は参考にしてみてください。

スマートフォン向けページを作成する場合

スマートフォン向けページを作成する場合、PC向けのホームページとは異なるページを新規で作成します。

 

例えば、東京都千代田区の公式ホームページをスマートフォンから開いた場合、画像左の通常のページが表示されます。

 

ページ上には「スマートフォン用トップページを表示する場合にはこちらをタップしてください」という表記があり、こちらをタップすると、画像右のスマートフォン向けページが表示されます。

 

スマートフォン向けページでは、メニューが簡略化され、スマートフォンの縦長の画面でも見やすい表記に変更されています。それに、通常のページにあったトップ画像やメニューの一部も省略されています。

 

また、それぞれのページのURLも下記のように異なります。

 

▼通常のページ

https://www.city.chiyoda.lg.jp/index.html

▼スマートフォン向けページ

https://www.city.chiyoda.lg.jp/smartphone/index.html

 

スマートフォン向けページは、PC向けのページとは異なるホームページを作成するため、異なるコンテンツを表示させるといったことも可能です。一方で、ホームページに掲載する内容に変更がある場合、PC向けとスマートフォン向けの両方のページに変更内容を反映させなければいけないというデメリットがあります。

 

また、ネット上には、PC向けのページとスマートフォン向けのページの、それぞれで似たようなコンテンツが存在することになります。そのため、Googleのような検索エンジンに対して「内容が重複しているのは、PC向けのページとスマートフォン向けのページだからです」と伝わるホームページの構造にする必要があります。

 

参考:

スマートフォン対応サイトの作り方、教えます (1/3)|ASCII.jp

スマホサイトの作り方~スマートフォンサイト作成入門~|あきばれ ホームページ

モバイル(スマホ)のURLが別に存在する場合のSEO上の対策は?|SEO HACKS

 

 

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

レスポンシブデザインについて、Googleでは下記のように定義しています。

レスポンシブ ウェブ デザインは、サーバーからどのデバイスに対しても常に同じ HTML コードを配信し、CSS を使用して各デバイスでのページのレンダリングを変える設定方法です。

引用:

レスポンシブ ウェブ デザイン|Google Developers

 

つまり、ユーザーが見ている環境に合わせてホームページの見せ方を変えるように設定する方法を指します。そのため、ホームページの内容自体は変わりません。

 

総務省ホームページ

 

例えば、総務省では上記のようにPCから見た場合とスマートフォンから見た場合では、メニューの見せ方が変わっています。これは、ホームページ内部に「スマートフォンから見ている人にはこういうデザインで見せてください」という情報を埋め込んであるためです。

 

参考:

レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット|ferret

 

 

スマートフォン向けページとレスポンシブデザインの3つの違い

では、具体的にスマートフォン向けページとレスポンシブデザインにはどういった違いがあるのか、というのを3つのポイントから見ていきます。

 

1.URLが異なる

スマートフォン向けページを作成する場合、PC向けページとは異なるURLを持った別のページを作成することになります。一方で、レスポンシブデザインは新しい別ページを作成するわけではないので、URLは変わりません。

 

2.スマートフォンとPC、それぞれ異なる内容を掲載できるか否か

スマートフォン向けページは、PC向けページと異なるページを新しく作成しています。そのため掲載する内容は、PC向けと全く異なる内容でも対応できます。

 

3.画面サイズに合わせて表示が最適になるか

スマートフォン向けページは、スマートフォンの画面サイズを想定して作られます。ですが、スマートフォンの機種によって画面サイズが異なるため、想定していないサイズに対してはメニューや画像など最適に表示されない可能性あります。レスポンシブデザインでは、見ている環境に合わせて最適なサイズで表示すること可能です。

 

 

なぜスマートフォン対応が必要だと言われているのか

スマートフォン向けページとレスポンシブデザインは、どちらもスマートフォンから見やすくするための方法です。では、そもそもなぜスマートフォンからの見やすさを意識する必要があるのでしょうか。主たる2つの理由をご紹介します。

 

理由1.スマートフォンを利用する人が、PCよりも多いから。

LINE株式会社が2017年7月に行った調査によると、スマートフォンでインターネットを利用している人は全体の85%いるのに対して、PCでインターネットを利用している人は46%に止まっています。また、総務省が2016年に行った調査でも、PCよりスマートフォンでのインターネット利用の方が長い時間利用していることがわかりました。

特に休日1日のうち、PCでインターネットを利用している時間は全年代平均で27.7分なのに対してスマートフォンでの利用時間は87.3分にも上り、3倍以上もの差が開いていることがわかります。2013年から比べて年々スマートフォンからの利用時間が増える中、スマートフォンからでも見やすいホームページ作りが求められているのでしょう。

 

参考:

【LINE】〈調査報告〉インターネットの利用環境 定点調査(2017年上期)|LINE Corporation

「平成28年情報通信メディアの利用時間と情報行動に関する調査報告書」の公表|総務省

 

理由2.Googleがスマートフォン対応を推奨しているから。

スマートフォンからの利用が増えているのに合わせて、世界最大の検索エンジンであるGoogleもホームページに対してスマートフォン対応を推奨しています。

 

実際、Googleでは、検索結果に表示する順位を決める際に、PC向けのページではなく、スマートフォン向けのページを評価対象にするモバイルファーストインデックスという仕様にすると宣言しています。モバイルファーストインデックスが導入されると、PC向けのページは評価されなくなります。

 

そのため、PC向けページより、スマートフォン向けページの内容が少ない・充実していない場合、検索順位が下がる可能性があります。なお、レスポンシブデザインの場合は検索結果に影響はありません。

 

参考:

乗り遅れるな!Googleが推奨するモバイルファーストインデックス(MFI)の注意点|ferret

 

 

標準機能でレスポンシブがついている ferret One のご紹介

Webマーケティングの問題を解決するために生まれたサービス「ferret One(フェレットワン)」では、レスポンシブデザインが標準で利用できます。実際にどのようなデザインになるかferret Oneの管理画面を利用しご説明します。

マウス操作で簡単にページが作れるページ編集画面(詳しくはこちら)。右上の「プレビュー」ボタンを押すと、編集画面のPC用、スマートフォン用がレスポンシブデザインで表示されます。

プレビュー画面で見たPC用の表示デザイン。

右上の「PC」「MOBILE」ボタンで表示が切り替えられます。「MOBILE」ボタンを押すと、該当ページのレスポンシブデザインで表示されます。

ブログページも同じ機能があります。右上の「プレビュー」ボタンを押すと、編集画面のPC用、スマートフォン用がレスポンシブデザインで表示されます。

ブログページも使い方は一緒です。プレビュー画面で見たPC用の表示デザイン。

こちらも同じですが、右上の「PC」「MOBILE」ボタンで表示が切り替えられます。「MOBILE」ボタンを押すと、該当ページのレスポンシブデザインで表示されます。

 

 

まとめ

今後今以上に必要になってくるスマートフォン対策。レスポンシブ対応の必要性が理解できたかと思います。ferret One CMSでは、レスポンシブ対応が標準装備で実装しております。これからホームページを作る、もしくは本格的に対応していくようでしたら、ferret Oneを検討いただければと思います。

 

機能を詳しく知りたい、画面を見ながら説明を聞きたいなどありましたら、下記のページからご連絡お願いいたします。今でしたら、お問い合わせいただけた企業様に「ホームページ無料診断」を行っております。貴社ホームページの課題点を、弊社コンサルタントからアドバイスさせていただきます。

※ご希望の方はお問い合わせに時に、「ホームページ無料診断を希望しています」と記載ください。

 

また、実際にferret Oneに触れていただき、どのような課題を解決できるのか、についてご説明するセミナーも実施しておりますので、お気軽にお問い合わせください。

 

 

ferret Oneは、月々5万円からご利用できるサービスです。
すぐにでもホームページを公開したい企業様には、一部制作代行サービスも承っております。