<<お知らせ>> 期間限定でキャンペーン実施中!

あなたのホームページは大丈夫?スマホ表示が問題ないかを確認する方法

一般的に普及する前から私は「スマホ」を持っていますが、以前からとても気になっていることが1つあります。それは、ある一定数の「スマホでは見づらいサイト(ホームページやブログ)がある」ということ。

というのも、従来のサイト制作では「スマホ」による閲覧が想定されていなかったので、「PC」ではちょうど良くても「スマホ」で見るとデザインが崩れて見づらくなっているケースがあります。

2017年の調査では、「7割」以上の人が「スマホ」を持っているのだとか。おそらく、今ではもっと多くの人が持っているでしょう。

参考 数字で見たスマホの爆発的普及総務省

しかも、最近では「PC」を持たず「スマホ」のみを持っている人も増えているので、より「スマホで見やすいサイト」が求めらるようになってきています

自分の「サイト」が「スマホ」ではどう見えているのかチェックする人はあまりいないと思いますが、昔に「サイト(ホームページ、ブログ)」を作ったという人は特に確認してみた方が良いでしょう。

モバイルフレンドリーテストで確認!

Google が提供するサービスの1つに、「モバイルフレンドリーテスト」というものがあります。「モバイル=携帯」「フレンドリー=親切」かをテストできるサイトになります。
mobile

サイトが「スマホ」に適した表示になっているのかを誰でも確認できるので、自分では判断が難しいと思う人は利用してみることをオススメします

利用方法はいたって簡単で、下記のリンクからサイトへアクセスし、自分が所有するサイトのアドレスを入力欄に入れて「テストを実行」を押すだけ。すると、約1分くらい分析した後に結果が表示されます。

参考 モバイルフレンドリーテストGoogle Search Console

問題なければ「このページはモバイルフレンドリーです」と表示されますが、「スマホ」での閲覧に適さないと判断された場合には「このページはモバイルフレンドリーではありません」と表示されます

「スマホ」の閲覧に適さないと判断される理由としては、文字の大きさが適切ではなかったり、画像やサイトの位置がずれていたりすることがあげられます。

PCからスマホ画面をチェックしてみる

「モバイルフレンドリーテスト」で確認するのも良いですが、実際に自分の「スマホ」で確認すると一目瞭然だったりもします。ただ、持っていないという人はこれから紹介するサイトで確認することもできます。

Responsive Design Testing

「Responsive Design Testing」では、一般的なスマホサイズの画面をサクッと表示してくれます。利用方法は簡単で、「Test your own site…」のところに自分のサイトアドレスを入力するだけです。
mobile
参考 Responsive Design Testinghttp://mattkersley.com
注意
1点だけ注意点が…

サイトを常時SSL化している場合は、httpss を削除してから検索(enter)しないと、読み込んでくれません。

designmodo

「designmodo」では、様々なスマホ・タブレット・PCの大きさで確認することができます。利用方法は、サイト上部の入力欄に自分のサイトアドレスを入れて、右上にあるスマホのマークなどクリックすると機種の一覧が表示されます。
mobile
参考 Responsive Web Design Test Tooldesignmodo.com

若干海外向けという感じは否めないですが、iPhone や Galaxy ではどう見えるのかを確認することができます。

さいごに

紹介したサイト以外でも、ブラウザ「Chrome」を使っている人であれば「デベロッパーツール」を使って確認することもできますが、上部で紹介したサイトの方が簡単なのではないかと思います。

もし「スマホで見づらいサイト」になっている場合には、「モバイルフレンドリー」なサイトに変えることを検討してみてくださいね

「どこに相談したら良いのか分からない…」という方は、ぜひ私たちまでご相談ください。

ご相談はこちらからどうぞ