「スマホ対応は当たり前」についての解説と抑えておきたいポイント

スマホ対応とはそもそもどういうこと？

スマホ対応とはPCでアクセスした際に表示されるページとスマートフォンでアクセスした際に表示されるページの表示方法を変え、小さな画面でも適切な文字サイズ、デザイン、ユーザインターフェースに切り替えることを言います。

見た目を整えたらいい場合もありますが、実際にはそれだけではなくホームページの役割、意味を理解してスマートフォン対応することでスマホでアクセスしたユーザーに対してより最適なアプローチをしていくことが可能になります。

またこうしたスマートフォン対応をしたサイト、サービスを作成することによってもたらされるメリットも複数あります。

「スマホ対応は当たり前」の意味

スマホの世帯保有率は９割近い

総務省が出している情報通信白書によればここ数年でPCの世帯保有率をスマートフォンの世帯利用率が抜いており、今後も差は広がっていくように思われます。令和３年版 情報通信白書

これから先…いや今もうすでにスマホ対応をしておかないとホームページを制作した意味はなくなってきています。（制作するサイトの特性にもよるので100%対応すべきとは言い切れません）

「スマホ対応は当たり前」はこうした理由から対応して当たり前だと言われがちで、実際に重要ですが、それだけがスマホ対応する理由ではありません。

PCとスマホの両方でしっかり情報を伝えられる

小さな画面でも分かりやすく文字サイズや画像、メニューを適切な見せ方をする。
PCとスマホ等のモバイル端末で利用するユーザーが違うのでユーザーに合わせたアプローチを考える。

これによりスマホでもPCと同じように個々のサイトで伝えたいことをしっかり伝えることが可能になります。

検索への影響

ホームページを制作する以上見てもらわなければ意味がありません。
知ってもらう入り口の１つとして検索結果からの流入があります。
その検索結果に載るには様々な要因がありますが、その中にスマホ対応が含まれています。

スマートフォンでみた際に

• 文字サイズが小さすぎないか
• クリック可能な要素が近すぎないか
• 端末の幅に収まるよう設計されているか

このリストのような指標を元に利用するユーザーが困らず快適に利用できるかを測りその評価に基づいて検索順位を変更しています。

検索へ影響を及ぼし始めたモバイルファーストインデックスは2018年から開始されており、当初の予定だともう移行完了している予定でしたが延期が重なり今は無期限延長となっています。

スマホ対応でここは抑えておきたい

まずはこちらのサイトでモバイルサイトとしてGoogleに認識されているのかお確かめください！
モバイルフレンドリーテスト

こちらのサイトでエラーが出た場合以下の問題点があげられます。

• 互換性のないプラグインを使用している
• ビューポートが設定されていない
• ビューポートが「デバイスの幅」に収まるよう設定されていない
• コンテンツの幅が画面の幅を超えている
• テキストが小さすぎて読めない
• クリックできる要素同士が近すぎる

互換性のないプラグインを使用している

ほとんどのスマホ等モバイル端末のブラウザでサポートされていないプラグイン（Flash など）がページに含まれていることが原因です。

ビューポートが設定されていません

画面サイズに合わせてページのサイズと拡大縮小を調整する方法を指定する viewport タグがページに含まれていないのが原因です。

ビューポートが「デバイスの幅」に収まるよう設定されていません

ページに固定幅の viewport プロパティが定義されているため、異なる画面サイズに合わせて調整できません。

コンテンツの幅が画面の幅を超えています

表示環境の横幅よりも大きなテキストや画像を表示するために水平スクロール（横スクロール）が必要なサイトに表示されます。

テキストが小さすぎて読めません

ページ上のテキストの大部分が、ページの幅と比べて小さすぎます。これにより、テキストがスマホ等モバイル端末で読みにくくなっているのが原因です。

リックできる要素同士が近すぎます

ボタンやナビゲーション リンクなどのタップ要素が互いに近すぎて、ユーザーが目的の要素をタップしようとすると隣の要素に指が触れてしまうような構造になっていることが原因です。

サイトのURLを入力しもし対応されていないのであれば対応、修正することをおすすめします。

スマホ対応に関するご相談、お問い合わせ

スマホ対応に関するご相談、ホームページ制作全般に関するご相談を受け付けています。お気軽にご相談ください！