BLOG
こんにちは！三光の木下です！
今の時代、スマホ片手で全て情報が集めることができます。
料理のレシピ・観光名所の情報・商品の値段などなど…
検索していると、こんなことありませんでしたか？
「ホームページが拡大しないと見えないほど、小さく表示されていた」
「配置やデザインがぐちゃぐちゃで何が書いてあるのかわからない」
というようにスマホの画面では見にくいホームページや記事をいくらか見たことある人がいると思います。
実はそのサイト、レスポンシブ対応がされていません！
「ホームページ活用・改善勉強会 七つの大罪」でも出てきました。
この対策は今の時代とても大切です。
ということで今回は
今時やらないと損！？レスポンシブ対応について解説していきます！
==目次=====================
① レスポンシブ対応について
１-１.レスポンシブ対応とは？
１-２.なぜレスポンシブ対応しなければいけないのか？
② レスポンシブ対応のメリット・デメリット
２-１.レスポンシブ対応のメリット
２-１-１.サイトの管理が簡単になる
２-１-２.Googleによる評価分散を減らせる
２-１-３.UXの向上
２-２.レスポンシブ対応のデメリット
２-２-１.デザインを考慮する必要がある
２-２-２.サイト自体が重くなる可能性
２-２-３.対応していないブラウザがある
==========================
まずレスポンシブ対応とはなに？
レスポンシブ（responsive）とは「外的条件に反応できる」と表す英単語です。
「レスポンシブWebデザイン」とも言われています。
主に、スマホやタブレットなど様々なデバイス機器の画面サイズに対応することを指します。
基本レスポンシブ対応はHTMLとCSSをそれぞれ１つにまとめて書くことが主流です。
レスポンシブ対応とは別に、「アダプティブ対応」というスマホ対応も存在します。
それは、同じ内容でパソコン版とスマホ版で２つのホームページを作成する方法です。
ですが、このアダプティブ対応はデメリットも大きいためあまりオススメはしません。
昔、ネット検索できるデバイス機器はパソコンが主流で、レスポンシブ対応しないサイトがいくつか存在しています。
しかし、時代が進むにつれスマホやタブレットなど他デバイス機器で情報収集する人が増加していきました。
2021年 日本人のスマホの所有率は平均約75％を超えています。
なので、レスポンシブ対応したらスマホユーザーの直帰率が下がる見込みがあります。
レスポンシブ対応することはスマホ・タブレットユーザーの使いやすさだけではなく、私たち会社にとって良い結果になると思います。
ここまで、レスポンシブ対応の説明を行なってきました。
では実際にレスポンシブ対応することで得られるメリット・デメリットについて解説していきます。
２-１-１.サイトの管理が簡単になる
まず１つのサイトにHTMLとCSS、それぞれ１ファイルで制作するため一括で編集することができます。
制作コスト、更新する労力も抑えることができます。
アダプティブ対応ではHTMLとCSSをパソコン版とスマホ版それぞれ２ファイルで制作するためコストが掛かってしまうのがデメリットとして挙げられます。
２-１-２.Googleによる評価分散を減らせる
先ほど言っていたレスポンシブ対応はHTMLとCSSをそれぞれ１ファイルで複数のデバイス機器に合わせて制作しているためGoogleの評価が分散されることはありません
アダプティブ対応ではホームページを２つ作る方法です。
しかし、ホームページを２つ作ってしまったその分Googleの評価が分散され、SEOによる評価が低くなってしまう可能性があります。
２-１-３.UXの向上
UXとは「ユーザー体験」ユーザーの使いやすさを表す言葉です。
たとえホームページができていたとしてもレスポンシブ対応がされていなければスマホユーザーにとって使いづらいサイトになってしまいます。
そのため、どのデバイス機器を使っても快適に利用できることが重要になっています。
というように、レスポンシブ対応するとしないでは大きな差があります。
では、次にレスポンシブ対応のデメリットを解説します。
２-２-１.デザインを考慮する必要がある
HTMLを基盤とし、CSSを当て込んでいくのですが、それぞれのデバイスの画面サイズに合わせて作成していきます。
画像のサイズや文字の配置など…
パソコンから他デバイス機器のサイズに合わせるために、デザインの自由度はある程度制限されてしまいます。
なので、レスポンシブ対応する際デザインに納得がいかない場合もあると思います。
そうならないように制作前に設計・構想を固めておきましょう。
２-２-２.サイト自体が重くなる可能性
先ほど説明しました。HTMLやCSSをパソコンとスマホの両方データを１つにまとめて制作しますので
そのデータ量の多さのせいで最初データを読み込む時に少し遅延が出る可能性があります。
２-２-３.対応していないブラウザがある
ここで注意しなければならないのがブラウザです。
「Google Chrome」「Yahoo!」「Safari」などと…
様々なブラウザがありますが中にはHTMLやCSSのバージョンに対応していないのが少なからず存在しています。
対応していないと「思っていたデザインになってない…」があります。
ですがどのブラウザも基本対応しています。
なので、滅多にないとは思いますが「そういうのも起きるかもしれない」ということを念頭に入れておきましょう。
では、実際にホームページをレスポンシブ対応させるにはどうしたら良いのか？
それは…できません！
ホームページをレスポンシブ対応するにはHTMLやCSSなどWEBの専門的な知識と技術が必要になります。
実際にWEBの知識もない人がホームページをレスポンシブ対応しようものなら思うようにできないのがほとんどです。
なので、レスポンシブ対応するには専門知識のある制作会社に依頼するか、または新しくホームページをリニューアルすることをお勧めします。
以上「レスポンシブ対応のメリット・デメリット」について解説しました。
いかがでしたか？
今の時代、スマホやタブレットなど様々なデバイス機器に対応することはとても重要です。
紹介したメリット・デメリットを把握した上でホームページをレスポンシブ対応しましょう！