Googleのモバイルフレンドリー2

前回ご紹介しました「Googleのモバイルフレンドリー」の続編記事です。

前回は、自社のホームページのモバイルフレンドリーについて書きましたが、今回は「Mobile Plus」という弊社のモバイル予約システム紹介のホームページについてスマホ対応をして、モバイルフレンドリーチェックを行う一連の流れを紹介します。

まず「MobilePlus」のホームページは、サービス立ち上げ時にPC用のページを作成して、更新が一時期止まっている状態でした。

まずはスマートフォン最適化をするために、PCのレイアウトはそのままにCSSの変更でスマホ最適化を進めましました。

site

この状態でウェブマスターツールで確認してみると、「ユーザビリティ上の問題が検出されました」と表示されていました。

master

詳しく見てみると、

master2

1.タップ要素同氏が近すぎます(リンクやボタン同士が十分に離れている状態にしてください。)
2.ビューポートが設定されていません(ビューポートにより、モバイル ブラウザ用の適切なサイズにページが拡大縮小されます。)
3.フォントサイズが小です(すべてのフォントサイズがモバイル ユーザビリティの標準に準拠しているようにしてください。)
の3点を指摘されていました。

1.については、フッターの下図の箇所が該当していそうだったので、そちらを修正。
footer

2.は<head>内に、
<meta name="viewport" content="width=device-width,user-scalable=no">
を追加しました。
こちらは、幅はデバイスに準拠、ズームはさせないという設定となります。

3.はスマートフォン表示時に全体のフォントサイズを一括で大きくしました。

こちらの修正を反映後、モバイルフレンドリーのチェックサイトで確認しました。

friend

ようやくお友達です。

【スマートフォン最適化サービスのご紹介】
スマートフォン最適化

ホームページ制作や運営、ショッピングサイト出店、システム構築、空中動画・画像撮影などのご相談・お問い合わせは無料でご対応させていただきます!
お問い合わせ 制作実績

PAGE TOP