サイトアイコン 株式会社フルーム

スマホ時代のレスポンシブ対応簡単チェック法

<p>スマホ時代のレスポンシブ対応簡単チェック法<&sol;p>&NewLine;<p>ウェブページをスマホの表示に最適化することをレスポンシブ対応が出来ていると言いますが、<&sol;p>&NewLine;<p>googleではモバイルフレンドリーと呼んでいるようです。<&sol;p>&NewLine;<p>このモバイルフレンドリーなサイトは、検索されたときに上位に表示されるSEO対策の中でも一つの重要な要素になりました。<&sol;p>&NewLine;<p>というのも、googleがアルゴリズムを変更したのが理由なのですが、スマホ利用の検索がここ数年で格段にPCを<&sol;p>&NewLine;<p>上回ってきたことが背景にあります。<&sol;p>&NewLine;<p>ワードプレス他、かなりのテンプレが既にモバイルフレンドリー対応のものになっていますが、<&sol;p>&NewLine;<p>古くからウェブページを依頼して作成されている方は注意が必要です。<&sol;p>&NewLine;<p>ただ、どう確認するのか?モバイルフレンドリーっぽいけど本当にgoogleに判断されているの?か分からない方もいらっしゃると思うので、簡単に調べる方法ををご紹介します。<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;www&period;google&period;com&sol;url&quest;sa&equals;t&amp&semi;rct&equals;j&amp&semi;q&equals;&amp&semi;esrc&equals;s&amp&semi;source&equals;web&amp&semi;cd&equals;1&amp&semi;cad&equals;rja&amp&semi;uact&equals;8&amp&semi;ved&equals;2ahUKEwiMi9eI18beAhWMybwKHV&lowbar;vANMQFjAAegQICRAB&amp&semi;url&equals;https&percnt;3A&percnt;2F&percnt;2Fsearch&period;google&period;com&percnt;2Ftest&percnt;2Fmobile-friendly&percnt;3Fhl&percnt;3Dja&amp&semi;usg&equals;AOvVaw0MxONNO80lTYRay5Fwtzpk"><img class&equals;"alignnone wp-image-498 size-large" src&equals;"http&colon;&sol;&sol;frume&period;net&sol;wp-content&sol;uploads&sol;2018&sol;11&sol;mobilefrinendlytest-1024x569&period;png" alt&equals;"" width&equals;"1024" height&equals;"569" &sol;><&sol;a> &NewLine;&NewLine;<&excl;-- WP QUADS Content Ad Plugin v&period; 3&period;0&period;3 -->&NewLine;<div class&equals;"quads-location quads-ad2" id&equals;"quads-ad2" style&equals;"float&colon;none&semi;margin&colon;0px&semi;">&NewLine;&NewLine;<&sol;div>&NewLine; &NewLine;<&sol;p>&NewLine;<p>google search consoleを利用されている方は、そこでも確認できますが、今回ご紹介する方法は、「他社サイトも確認できる」<&sol;p>&NewLine;<p>ということが面白いところです。<&sol;p>&NewLine;<p>まず、<a href&equals;"https&colon;&sol;&sol;search&period;google&period;com&sol;test&sol;mobile-friendly&quest;hl&equals;ja">モバイルフレンドリーテストページ<&sol;a>に入ります。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-large wp-image-499" src&equals;"http&colon;&sol;&sol;frume&period;net&sol;wp-content&sol;uploads&sol;2018&sol;11&sol;mobilefrinendlytest2-1024x563&period;png" alt&equals;"" width&equals;"1024" height&equals;"563" &sol;><&sol;p>&NewLine;<&excl;-- WP QUADS Content Ad Plugin v&period; 3&period;0&period;3 -->&NewLine;<div class&equals;"quads-location quads-ad2" id&equals;"quads-ad2" style&equals;"float&colon;none&semi;margin&colon;0px&semi;">&NewLine;&NewLine;<&sol;div>&NewLine;&NewLine;<p>次に、調べたいURLを入れ込み、実行。<&sol;p>&NewLine;<p>今回は試しに弊社のサイトを入れ込みました。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-large wp-image-500" src&equals;"http&colon;&sol;&sol;frume&period;net&sol;wp-content&sol;uploads&sol;2018&sol;11&sol;mobilefrinendlytest3-1024x613&period;png" alt&equals;"" width&equals;"1024" height&equals;"613" &sol;><&sol;p>&NewLine;<p>結果が出てきます。<&sol;p>&NewLine;<p>簡単ですよね!?<&sol;p>&NewLine;<p>たまにプレビューでエラーが出ますが、モバイルフレンドリーと検索結果が出れば問題ありません。<&sol;p>&NewLine;<p>ちなみにエラーの場合は、下記のようにコメントが表示され、どこを修正すべきかの案内があります。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-large wp-image-503" src&equals;"http&colon;&sol;&sol;frume&period;net&sol;wp-content&sol;uploads&sol;2018&sol;11&sol;mobilefrinendlytest4-1021x1024&period;png" alt&equals;"" width&equals;"1021" height&equals;"1024" &sol;><&sol;p>&NewLine;<p>この修正が完了すれば、あとは片手でも閲覧や問い合わせ、申し込みがスムーズにいくかのテストが必要です。<&sol;p>&NewLine;<p>ここはUI&sol;UXの観点になってくるので、今回の件とは別の話になってきますが、レスポンシブ対応は、その前に行う前提の対応になってきます。<&sol;p>&NewLine;<p>別で、ページの読み込みの高速化という概念で<span id&equals;"AMPAccelerated&lowbar;Mobile&lowbar;Pages">AMP&lpar;Accelerated Mobile Pages&rpar;というのがありますが、<&sol;span><&sol;p>&NewLine;<p>現在のところこの、高速化についてはgoogleの検索結果に影響を与えることは無いようです。<&sol;p>&NewLine;<p>しかしながら、ページの読み込み速度が明らかに遅いと、直帰率が上がってしまうので、他の人が読み込みづらいなどのコメントが<&sol;p>&NewLine;<p>あった時点では、何らかの対応を打たなければなりません。<&sol;p>&NewLine;<p>ウェブの検索は、お上であるgoogleの究極の利用者目線の追求からドンドンと改善がなされていっています。<&sol;p>&NewLine;<p>逆に、常に利用者目線のサイトを作っていれば、googleからの評価も自然と高くなっていくことでしょう。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS Content Ad Plugin v&period; 3&period;0&period;3 -->&NewLine;<div class&equals;"quads-location quads-ad1" id&equals;"quads-ad1" style&equals;"float&colon;none&semi;margin&colon;0px&semi;">&NewLine;&NewLine;<&sol;div>&NewLine;&NewLine;

モバイルバージョンを終了