2016年にGoogleからモバイルファーストインデックスの発表あり、今ではモバイル対応がインデックス順位に影響するのは周知の事実となりました。
SEOだけでなく、実際のユーザー数の多さから、スマートフォンユーザーへの対応は、もはや必須となっています。
モバイルフレンドリーテスト
Overview | Lighthouse | Chrome for Developers
Learn how to set up Lighthouse to audit your web apps.
developer.chrome.com
により現状対応済みか確認できます。
モバイル対応方法
レスポンシブ対応
現在一番主流となる対応方法で、具体的にはどのような画面サイズでも柔軟に対応しやすい性質を持っています。
ページの表示にはスタイルシート(css)という技術が使われています。
そのスタイルシートをブラウザ等を判別(メディアクエリ)して適応する見た目を変える事をレスポンシブ対応といいます。
弊社も基本的にレスポンシブ対応で、ブラウザのサイズや種類に合わせて見た目が変わるように作られています。
PCでご覧の方はブラウザの横幅を変えていただければ理解いただけると思います。
デメリットを強いて言うならば、スタイルシートで対応できる範囲内の変化が基本となる為、著しく変化させたい場合は向いていません。
また、それらの理由からデザイン時にレスポンシブを考慮した範囲のものになります。
別ページ対応
デバイスを判別し、それぞれにあったページを表示します。
同じURLで別のものを表示するか、別のURLに自動ジャンプさせるなどの方法があります。
これらの方法現在はあまり使われていない対応方法となります。
デメリットは、同じ内容のページがPCとモバイルで２つある為、検索エンジンにもそれを把握させる必要がある。
それらをしなければSEO的ペナルティを受けるなどがあるため不利となります。
また、２つのページを作るため、レスポンシブ対応より労力は大きくなります。