frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

モバイルフレンドリー対策とは?

スポンサードリンク


スポンサードリンク


近年モバイルファーストが叫ばれていますが、googleではモバイルファーストではない(スマートフォン対応していない)サイトには検索結果で「ページがモバイル フレンドリーではありません。」という文言が表示されるようになってしまいました。

SEO順位も影響するようですね。

自分はサイト制作を仕事にしているので、このコメントはピンときますが、そうでない人からしたらセキュリティ的に問題あるのかなと直感が働いてアクセスが減少する可能性もありますよね。

スマートフォン対応しておくのは、言わずもがなですが今後必須の作業であると言えるでしょう。

ではスマートフォン非対応サイトを作ってしまったらどうするか?

そう簡単にはレスポンシブデザインに仕様変更できないですよね。

モバイルフレンドリーのテスト項目は4つあります。

テキストが小さすぎて読めません

googleが定める推奨テキストサイズは16pxです。
しかしPCの状態で16pxにしていたらその分縮小している為意味はありません。
縮小しない状態でのテキストサイズが望まれます。

  • コンテンツの幅が画面の幅を超えています

画面の幅というのはiphone5であれば320pxでしょう。
PCのコンテンツサイズが320pxよろ大きいことは明白なので、max-widthを使用してレスポンシブ対応しなければいけないということです。

  • ビューポートが設定されていません

つまりはこんなやつです。表示領域をデバイスに合わせることができます。
こちらもレスポンシブデザインでは必須のソースですね。

<meta name="viewport" content="width=device-width,initial-scale=1"> 
  • クリック可能な要素同士が近すぎます

クリック可能な要素が近いとミスタップが起きてユーザビリティが損なわれてしまいます。

そのためスマホサイズに合わせたデザイン設計が必要となります。

まとめ

スマートフォン非対応サイトを作った場合のモバイルフレンドリー対策をしようと思いましたが、上記4つはレスポンシブデザインにシフトしないと解決できなそうでした。。

もちろんSP専用にマークアップしても構いません。

スマートフォンユーザーを意識したコンテンツ作りを心がけましょう!