【レスポンシブが反映されない？】その答えは初期設定とGoogleにあり！

こんにちは、Rumiです。
今回はPC用のサイトをレスポンシブにしたはずなのに、Googleではレスポンシブとして認識されない現象について解説していきたいと思います。

はじめに

もともとPCサイトしかなかったものを、デザインはそのままにしてレスポンシブ対応にするのってとっても難しいですよね。
ただでさえ難しいのに、できたと思ったらGoogleに読み込まれないと今までの苦労は何だったんだ…となりかねません。
今回は、メディアクエリでレスポンシブの設定をしたにも関わらずレスポンシブにならない（ブラウザの画面の幅を変えても表示が変わらない）現象について、いくつか解決方法を示していきたいと思います。

viewportは設定していますか？

まずは、viewportメタタグを入れているか確認してください！
コードは以下の通りです。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>

このコードがタグ内に入っているでしょうか。
このコードがないと、スマホ画面で見たときにもPCと同じレイアウトの画面が出てしまい、せっかくレスポンシブのコードを書いたのに適応されてない！なんてことになってしまいます。古いサイトならなおさらvirewport自体が入っていない可能性がありますので、そこを確認してみてください。

画面全体の幅はスマホ画面に指定していますか？

これは実際に私自身もやらかしてしまったミスなのですが…
そもそも、レスポンシブにする場合は、最初にmax-width, min-widthの指定をします。
この幅の指定がうまくCSSに効いていないと、PCの幅に合わせてレスポンシブデザインを実装していくことになります。
全て完成したと思ったら、最初の幅の指定が間違っていた、なんて悲劇には遭遇したくありません。
なので、メディアクエリでレスポンシブをする際は、vewportの確認の後に必ず幅の指定を確認してください。
検証ツールを開いて、max-widthがスマホ画面サイズ（360~480px）になっていればOKです。

Googleに認識されるまでにはタイムラグがあるのを知っていますか

viewportも画面の幅も合っている。なのになぜレスポンシブの表示にならないんだ…！
とお困りのあなた。
１日待ってみてください。反映されていることがあります。
これは実際に経験したことがあるのですが、Googleが変更を反映させるまでには少し時間がかかります。
私の場合はローカル環境・開発あ環境で確認して問題がなかったので本番環境にupしたらレスポンシブになっていない…と絶望しました。
しかhし、次の日見てみると「あれ、レスポンシブになってる！」ということがありました。
なので、全てをやり尽くしてそれでも反映されない場合は１日待ってみてください。

まとめ

せっかくレスポンシブの指定をしたのに反映されないとかなりショックですよね。
この記事を読んですこしでも解決に近づけることを祈ります！Good Luck🍀