BLOG

ホームページ制作、エリアマーケティング、WEB勉強会イベントなどに関することをブログで紹介します
2022.07.06
レスポンシブ対応?ホームページをスマホで快適に見る方法

こんにちは!三光の木下です!


今の時代、スマホ片手で全て情報が集めることができます。
料理のレシピ・観光名所の情報・商品の値段などなど…


検索していると、こんなことありませんでしたか?


「ホームページが拡大しないと見えないほど、小さく表示されていた」
「配置やデザインがぐちゃぐちゃで何が書いてあるのかわからない」


というようにスマホの画面では見にくいホームページや記事をいくらか見たことある人がいると思います。



実はそのサイト、レスポンシブ対応がされていません!



「ホームページ活用・改善勉強会 つの大罪」でも出てきました。
この対策は今の時代とても大切です。



ということで今回は
今時やらないと損!?レスポンシブ対応について解説していきます!



==目次=====================


① レスポンシブ対応について
 1-1.レスポンシブ対応とは?
 1-2.なぜレスポンシブ対応しなければいけないのか?


② レスポンシブ対応のメリット・デメリット
 2-1.レスポンシブ対応のメリット
  2-1-1.サイトの管理が簡単になる
  2-1-2.Googleによる評価分散を減らせる
  2-1-3.UXの向上
 2-2.レスポンシブ対応のデメリット
  2-2-1.デザインを考慮する必要がある
  2-2-2.サイト自体が重くなる可能性
  2-2-3.対応していないブラウザがある


③ レスポンシブ対応するには


④ 最後に


==========================


1.レスポンシブ対応について


1-1.レスポンシブ対応とは?


まずレスポンシブ対応とはなに?
レスポンシブresponsiveとは「外的条件に反応できる」と表す英単語です。


レスポンシブWebデザインとも言われています。
主に、スマホやタブレットなど様々なデバイス機器の画面サイズに対応することを指します。
基本レスポンシブ対応はHTMLとCSSをそれぞれ1つにまとめて書くことが主流です。



レスポンシブ対応とは別に、アダプティブ対応というスマホ対応も存在します。
それは、同じ内容でパソコン版とスマホ版で2つのホームページを作成する方法です。


ですが、このアダプティブ対応はデメリットも大きいためあまりオススメはしません。




1-2.なぜレスポンシブ対応しなければいけないのか?


昔、ネット検索できるデバイス機器はパソコンが主流で、レスポンシブ対応しないサイトがいくつか存在しています。
しかし、時代が進むにつれスマホやタブレットなど他デバイス機器で情報収集する人が増加していきました。


2021年 日本人のスマホの所有率は平均約75を超えています。
なので、レスポンシブ対応したらスマホユーザーの直帰率が下がる見込みがあります。
レスポンシブ対応することはスマホ・タブレットユーザーの使いやすさだけではなく、私たち会社にとって良い結果になると思います。




2.レスポンシブ対応のメリット・デメリット


ここまで、レスポンシブ対応の説明を行なってきました。

では実際にレスポンシブ対応することで得られるメリット・デメリットについて解説していきます。



2-1.レスポンシブ対応のメリット


2-1-1.サイトの管理が簡単になる
まず1つのサイトにHTMLCSS、それぞれ1ファイルで制作するため一括で編集することができます。

制作コスト、更新する労力も抑えることができます。


アダプティブ対応ではHTMLCSSをパソコン版とスマホ版それぞれ2ファイルで制作するためコストが掛かってしまうのがデメリットとして挙げられます。



2-1-2.Googleによる評価分散を減らせる
先ほど言っていたレスポンシブ対応はHTMLCSSをそれぞれ1ファイルで複数のデバイス機器に合わせて制作しているためGoogleの評価が分散されることはありません


アダプティブ対応ではホームページを2つ作る方法です。

しかし、ホームページを2つ作ってしまったその分Googleの評価が分散され、SEOによる評価が低くなってしまう可能性があります。



2-1-3.UXの向上
UXとは「ユーザー体験」ユーザーの使いやすさを表す言葉です。
たとえホームページができていたとしてもレスポンシブ対応がされていなければスマホユーザーにとって使いづらいサイトになってしまいます。
そのため、どのデバイス機器を使っても快適に利用できることが重要になっています。
というように、レスポンシブ対応するとしないでは大きな差があります。



では、次にレスポンシブ対応のデメリットを解説します。




2-2.レスポンシブ対応のデメリット


2-2-1.デザインを考慮する必要がある
HTMLを基盤とし、CSSを当て込んでいくのですが、それぞれのデバイスの画面サイズに合わせて作成していきます。


画像のサイズや文字の配置など…

パソコンから他デバイス機器のサイズに合わせるために、デザインの自由度はある程度制限されてしまいます。
なので、レスポンシブ対応する際デザインに納得がいかない場合もあると思います。

そうならないように制作前に設計・構想を固めておきましょう。



2-2-2.サイト自体が重くなる可能性
先ほど説明しました。HTMLCSSをパソコンとスマホの両方データを1つにまとめて制作しますので

そのデータ量の多さのせいで最初データを読み込む時に少し遅延が出る可能性があります。



2-2-3.対応していないブラウザがある
ここで注意しなければならないのがブラウザです。
「Google Chrome」「Yahoo!」「Safari」などと…
様々なブラウザがありますが中にはHTMLCSSのバージョンに対応していないのが少なからず存在しています。

対応していないと「思っていたデザインになってない…」があります。


ですがどのブラウザも基本対応しています。
なので、滅多にないとは思いますが「そういうのも起きるかもしれない」ということを念頭に入れておきましょう。




3.レスポンシブ対応するには


では、実際にホームページをレスポンシブ対応させるにはどうしたら良いのか?


それは…できません!


ホームページをレスポンシブ対応するにはHTMLCSSなどWEBの専門的な知識と技術が必要になります。

実際にWEBの知識もない人がホームページをレスポンシブ対応しようものなら思うようにできないのがほとんどです。
なので、レスポンシブ対応するには専門知識のある制作会社に依頼するか、または新しくホームページをリニューアルすることをお勧めします。


以上レスポンシブ対応のメリット・デメリット」について解説しました。




4.最後に


いかがでしたか?


今の時代、スマホやタブレットなど様々なデバイス機器に対応することはとても重要です。
紹介したメリット・デメリットを把握した上でホームページをレスポンシブ対応しましょう!



Contact Us

お気軽にお問い合わせください

お気軽にお問い合わせください

050-3816-5280

受付時間:平日8:10~17:40(日曜・祝日定休)