BLOG ブログ
ホームページの基礎知識 2019.12.26
Googleが推奨するレスポンシブWebデザインとは?スマホ対応は必要です!
皆さんがスマホでネットサーフィンをしている時に「このサイト見にくいな〜」と思ったことはないですか?
そのサイトはもしかしたらスマホ画面対応(以下レスポンシブ化)されていないのかもしれません!
レスポンシブって何?
「レスポンシブWebデザイン」とは、PCやタブレット、スマートフォンなど、異なる画面サイズに応じて、レイアウト・デザインを調整することを指します。
つまり、同じwebページを見ていても、それぞれのデバイスに合わせた表示対応されているので、拡大・縮小することなく快適に閲覧することができます。
なぜ必要なの?
「パソコンでもスマホでも表示される情報がかわるわけでもないのに・・・」と疑問を感じる方もいるかもしれません。
しかしスマートフォンが普及している現在では、パソコンよりもスマートフォンでサイトを閲覧する機会が多いのではないでしょうか?
レスポンシブ化されていないサイトでは、以下のような悪影響がおきる可能性があります。
情報がみにくいのでユーザーが離脱してしまう
ユーザーは視認性・操作性の悪さにストレスを感じ、すぐにホームページから離脱してしまう可能性が高まってしまいます。
SEO(検索エンジン)にも悪影響がでる
検索エンジン最大手であるGoogleは、スマートフォンからの閲覧に最適化していないサイトは、検索結果の表示順位を下げる対応をとることを2015年2月26日に発表しています。
以上のことからも、スマホ対応しておいたほうが良いでしょう。
レスポンシブ化の仕組み
レスポンシブ化するには大きく2つの方法があります。
- CSSでデバイスごとに調整する
- HTMLファイルをわけてデバイスごとに表示をかえる
一般的には、CSSで調整する方法をよく使用されています。
CSSでデバイスごとにレスポンシブ化するメリット
- 1つのHTMLでPCにもスマートフォンにも対応しているので、管理が簡単
- Googleのランキングアルゴリズムにも対応できる
- URLが統一されるのでシェアされやすい
ただ、HTMLファイルを分けて表示する方法に比べて、1つのファイルに記載するコードが長くなってしまいます。
結果的に、表示速度が遅くなってしまう可能性もでてくる、というデメリットがあります。(筆者的には気にならない程度の速度ですが。笑)
レスポンシブWebデザインのメリットとデメリット
サイトをレスポンシブ化すれば、こんなメリットとデメリットがあります!
メリット
メリット① 管理が簡単
先程も記載したとおり、HTMLが1つなのでWebサイトに載せる情報を修正や更新する時に作業が1回で済みます。
デバイスごとにHTMLがありますと修正や更新の作業をHTMLの数だけしなくてはなりません…
メリット②SEO(検索エンジン)の上位に表示されやすい
スマホに対応したWebサイトが検索結果の上位に表示されやすくなる「モバイルフレンドリー」や、スマホ用のページが順位の決め手になる「モバイルファーストインデックス」に対応できます。
デメリット
デメリット① デザインに制限がある
HTMLが1つなので、スマホとパソコンといったデバイスごとにコンテンツの順番を変えるなど、大幅に見せ方を変えることは基本的に難しいです。
デメリット② 工数がかかる
デバイスごとにデザインを制作し、それに合わせたコーディングをしますので、PC表示のみよりも制作工数がかかってしまいます。
まとめ
世界中のサイトの3分の1がWordPressで作成されていますが、そのほとんどがレスポンシブ化されています。
どの閲覧デバイスでもユーザーにとっての視認性・操作性の快適化はとっっっっても大切なことです!!!
「リニューアルにあわせて、スマホ対応にしようかな・・・」「コーポレートサイトをWordPress化したいな・・・」とお考えでしたら
是非一度お気軽にアンジップまでお問い合わせくださいませ〜!
私達と一緒により良いサイトを制作いたしましょう!(*^^*)
- 記事が気に入ったらシェアお願いします。
この記事は参考になりましたか?
ホームページ制作のことアンジップへなんでもご相談ください。
- 人気記事
2019.11.07
2019.12.26
2019.11.08
2021.02.19
CONTACT お見積もり・相談
どんな小さな相談でも構いません、一度お話ししましょう。
サイト制作のお見積り・ご相談は、メールにてお気軽にご連絡ください。
サイト制作のお見積り・ご相談は、
メールにてお気軽にご連絡ください。
- メールでのご相談は24時間受け付けております。返信までに1~2営業日ほど頂戴致します。