0%

Marketingウェブマーケティングブログ

Posted:2018.05.31

「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック

この記事の目次

近年、インターネット通信の割合でついにスマホがPCを上回ったと言われるようになりました。つまり、半数以上はPCからではなくスマホでウェブサイトを見られるケースが多いということでしょう。ですので、これから先のことも考えるとスマホ対応はほぼ必須であると言えます。

 

そこで今回は、現在のウェブサイトがきちんとスマホ対応できているかどうかをチェックする方法についてまとめていきたいと思います。

 

現在のウェブ環境を取り巻く現状

その前に、まずはどれだけスマホ対応が重要とされているかを見るために、現在のウェブを取り巻く現状から考えていきたいと思います。先ほどにもある通り、すでに全世界の半数以上のアクセスがPCではなくスマートフォンなどのモバイル端末からというデータが出ているところもあるようです。

 

これにはスマートフォンが急速に普及してきたというのはもちろんですが、スマートフォン自体の性能も上がり、いろんなアプリが登場してきたというのも考えられます。特にFacebookやTwitter、InstagramといったSNSの利用が浸透するようになってきてからは、若年層を中心にSNSが生活の中心になるといっても過言ではないかと思います。

 

そのため、キーワード検索からの流入に加えてSNSやアプリ経由でのウェブサイト流入も増えてきており、今後この傾向はより強くなってくると言われています。そこでグーグルもSEOの評価としてきちんとモバイル対応ができているかどうかを判断するようになってきました。

 

グーグルが発表したモバイルファーストインデックスとは

SEOの新たな評価基準としてグーグルが2018年の3月から「モバイルファーストインデックス」という指針を発表しました。これは具体的にいうと、検索エンジンのクローラーがPCサイトを基準にした評価だったのが、モバイルサイトを基準にする評価に変更するということです。

 

つまり、モバイルサイトが優先的にインデックスされるようになります。ですので、SEO対策のポイントとなるコンテンツもモバイルサイトの内容が重視されるということです。したがって、PCサイトを充実させていても、モバイルサイトのコンテンツが薄い場合にはSEO上で不利になるという可能性も出てきますね。

 

ウェブサイトがしっかりとモバイルに対応しているかどうかが、これからのウェブサイトの評価軸として重要になってきます。

 

スマホ対応がきちんとできているかをチェック

そこで、運用中のウェブサイトがモバイルサイトとして対応できているかを確認して見ましょう。今回はグーグルが提供しているモバイル対応確認サービスの「モバイルフレンドリーテスト」を利用していきます。もちろん無料で使えます。

 

ページにアクセス(https://search.google.com/test/mobile-friendly?hl=ja)すると中央に調査するサイトのアドレスを入力するフォームが表示されるのでURLを入力し「テストを実行」ボタンをクリックします。

 

「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック

 

サイトの分析が始まりますのでしばらく待ちましょう。

 

「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック

 

少し経過すると分析結果が表示されます。画面上に「このページはモバイルフレンドリーです」と表示されていればひとまず問題ありません。その下にはより詳細の分析について確認できる項目があるのでそこをクリックしてみます。

 

「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック

 

するとサーチコンソールにリダイレクトされますので、対象となるプロパティを選択します。画面が切り替わり、ここではサイト全体におけるモバイルユーザビリティの確認項目が表示されます。UIに問題がある部分が指摘されるので改善するようにしましょう。

 

「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック

 

 

モバイル対応の具体的な対応策は

もし、モバイルフレンドリーテストで不合格になった場合や、そもそもウェブサイトがモバイル対応していない場合にはどうすればいいのでしょうか?

 

まず、ベストプラクティスとして考えられるのが、「レスポンシブデザイン」でウェブサイトを構築することです。レスポンシブデザインは1つのサイトのリソースをディスプレイ幅でレイアウトが切り替わるようになっているもので、これによりPCとモバイル両方で表示の最適化が実現できます。

 

これが難しい場合には、PCサイトとは別にモバイルサイトを作成し、アクセスした端末でPCサイトかモバイルサイトを切り替えて表示する仕組みを取り入れます。ただしこの場合はPCサイトとモバイルサイトが別になるので、サイトメンテナンスのコストが上がるのがデメリットです。

 

上記2点を行なっているにもかかわらず、モバイルフレンドリーに合格しない場合には分析結果の表示にある項目をチェックするようにしましょう。

 

具体的にはこのような項目が多いのではないでしょうか。つまり、画面の小さいスマホでも操作しやすいように、ボタンやテキストが適正なサイズで表示されている必要があったり、画面幅を取得するビューポートと呼ばれる設定も正しく記述しなければなりません。

 

「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック

 

より詳しくはこちらのグーグルデベロッパー向けの記事を参考にするとわかりやすいので、こちらもご覧ください。

 

「そのサイトはスマホでも綺麗に見れますか?」ウェブサイトのモバイル対応チェック

 


 

いかがでしょうか、このようにウェブサイトのスマホ対応はユーザーの為だけでなくSEOの観点からも重要になってきています。今はほとんどのサイトが対応している現状ですが、まだ出来ていないところはそろそろ対応しておかないと、いよいよこれから出遅れてしまうかもしれませんね、、

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】