ホームページを作ったあと、
「ちゃんとスマホ対応できているのか不安…」
と感じたことはありませんか？
パソコンではきれいに見えていても、スマホで見ると文字が小さかったり、
横スクロールが出ていたりするケースはとても多いです。
そこで、この記事では、初心者の方でもすぐできる確認方法をわかりやすくまとめました。
レスポンシブ対応しているか簡単に確認したい場合は、ぜひ最後までお読みくださいね！
まず知っておきたいレスポンシブ対応とは
レスポンシブ対応とは、画面サイズに合わせてホームページの表示が自動で調整される仕組みのことです。
パソコン・スマホ・タブレットなど、どの端末でも見やすく表示される状態を目指します。
今はスマホからのアクセスがとても多いため、レスポンシブ対応できているかどうかは集客にも大きく影響します。
方法① 実際にスマホで確認する（一番確実）
一番おすすめなのは、実際にスマホで自分のホームページを見る方法です。
確認するときは、次のポイントをチェックしましょう！
チェックポイント
・文字が小さすぎないか
・横スクロールが出ていないか
・画像がはみ出していないか
・表（テーブル）が画面内に収まっているか
これだけでも、多くの問題に気づけますよ。
方法② パソコンで簡単に確認する方法（Chrome使用）
スマホが手元になくても、パソコンで簡単に確認できます。
手順
- Chromeでホームページを開く
- 右クリック →「検証」をクリック
- 画面上部のスマホアイコンをクリック
- スマホサイズに切り替わる
これで、さまざまな画面サイズで表示を確認できます。
iPhoneサイズやAndroidサイズもワンクリックで切り替えられるのでとても便利です。
方法③ 無料チェックツールを使う
スマホ対応を確認できる無料ツールもあります。
たとえば、
・Googleサーチコンソール
・表示チェックツール
・ページ表示速度チェック
URLを入れるだけで、スマホ対応できているか自動で判断してくれます。
もちろん、一番良い方法は「実際にスマホで表示を確認すること」ですが、
１つの方法として知っておいてくださいね。
チェック時によくある見落としポイント
ここでは、チェック時によくある見落としポイントをお伝えします。
確認するときに、特に見落としやすい部分をお伝えしますね。
よくある問題
・表が横にはみ出している
・画像が途中で切れている
・一部だけ横スクロールが出る
・文字が極端に小さい
ホームページを最後までスクロールして、しっかりと見るようにしましょう。
崩れていたときの簡単な対処の考え方
もし崩れている部分が見つかったら、原因はだいたい次のどれかです。
・画像サイズが固定されている
・横幅が固定されている
・スマホ用CSSが入っていない
パソコンとスマホの大きな違いは、画面サイズ（特に横幅）です。
そのため、横幅を固定で指定している箇所を、100％という形に変更することで、
スマホでもきれいに表示されるようになりますよ。
ぜひチェックしてみてくださいね。
まとめ
「レスポンシブ対応しているか簡単に確認する方法」の内容はいかがでしたでしょうか？
レスポンシブ対応できているかどうかは、
・スマホで確認
・パソコンで確認
・無料ツールで確認
この3つを使えば、初心者でもすぐチェックできます。
でも、やっぱり一番良い方法は、「スマホで実際に確認すること」です。
スマホでの表示は、実際にスマホで見ることが一番確実になりますよ。
そして、もし崩れている部分（ページ）が見つかったら、
原因と思われる個所を１つずつ確認するようにしましょう。
ほとんどは、画像や表を固定幅で指定していることが原因なので、
まずはこの辺りから確認するようにしましょうね。
私も、スマホでのチェックは面倒でやらないときもあるのですが、、、
でも最近は、スマホからのアクセスがとても多いです。
むしろ、スマホでの確認こそ、しっかりとやっておいた方が良いので、
ここでお伝えした内容をぜひ参考にしてくださいね！
