レスポンシブWebデザインについて
パソコンとスマホでサイトの表示方法が異なるのはご存知ですか?
1つのホームページですべての端末に対応するレスポンシブWebデザインを採用しています。
マルチデバイスに自動で切り替え表示させる手法をレスポンシブコーディングといいます。
パソコンとスマホでは画面の縦横比率が異なります。
デバイスの画面幅の長さによってレイアウトを切り替える設定をすることで
パソコンで見ると→パソコン用の横長表示
スマホで見ると→スマホの縦長表示
といったように、比率によって自動で切り替えされます。
総務省のサイト上にも下記のように記載があります。
デジタルを活用する際に必要となるインターネットなどに接続するための端末について、2022年の情報通信機器の世帯保有率は、「モバイル端末全体」で97.5%であり、その内数である「スマートフォン」は90.1%である。また、パソコンは69.0%となっている。

出展:総務省 令和2年版情報通信白書
インターネットで検索をしてHPに辿り着きます。
つまり…HPもスマホで見る人が大半ということですね。
パソコンでの閲覧ばかりに気を取られていると、ユーザーの大半が使用しているスマートフォン表示で下記のような問題が起きてしまいます。
- 文字が小さくて見づらい
- ボタンが小さくて押しづらい
- 表示がおかしい
そんなサイトを見てくれる方ってあまりいないと思います…。
せっかく興味を持ってHPを見つけてもらえても、すぐに閉じてしまったらもったいないですよね。
つまり、スマホやパソコン、ガラケー、タブレット等に対応している、
(さらにその中でも種類ごとに画面の比率は異なります)
全ての端末に対応しているマルチデバイス端末対応しているサイトを制作することで、あらゆるユーザーにHPを見てもらえるということになります。
皆さんのサイトをたくさんの人に見てもらえるようにするためには、検索してすぐに出てくるサイトにする必要があります。
検索結果上位に出てくるようにするには、SEO対策=検索エンジン最適化が重要になります。
各ブラウザには検索エンジンに理解しやすいように最適化
皆さんがインターネットで検索するとき、まさに今このサイトを見ているWebブラウザは何でしょうか?
- Google Chrome(グーグルクローム)
- Safari(サファリ)
- Mozilla Firefox
- Internet Explorer
- Microsoft Edge
などなど…様々な種類がありますが、実はこの中で最も使われているのは
Google Chrome(グーグルクローム)です。
Googleでも「モバイル端末を利用したユーザー視点の評価を重視しています」と推奨されています。
そのため、レスポンシブ対応しているサイトというのは最低限の仕組みと考えられています。
コメント