モバイルファースト最適化
モバイルファーストとは
モバイルファーストは、Webサイト設計においてスマートフォンでの表示・体験を最優先で設計し、その後にタブレット・PCへ展開していく考え方です。Googleは2018年から「モバイルファーストインデックス」を本格運用しており、現在はスマホ版のサイトを基準にインデックス・ランキング評価が行われています。国内のWeb閲覧の70〜80％がスマホ経由となった現代では、PC表示は美しくてもスマホ表示が崩れているサイトは、検索順位とユーザー体験の両方で深刻なダメージを受けます。「PCで作ってからスマホ対応する」発想は時代遅れで、最初からスマホ画面の設計から始めるべきです。
モバイル最適化の主要要素
モバイル最適化の主要要素は、①レスポンシブデザイン（画面幅に応じて自動調整）、②タップしやすいボタンサイズ（44×44px以上）、③スマホ画面で読みやすい文字サイズ（16px以上）、④縦スクロールに最適化されたレイアウト、⑤画像の自動リサイズ、⑥ハンバーガーメニューの実装、⑦ポップアップを最小限に（モバイルでは邪魔になりやすい）、⑧読み込み速度の最適化（モバイル回線でも3秒以内）、⑨タッチ操作対応（ホバー機能を使わない）、⑩フォーム入力の簡素化（モバイル入力は時間がかかる）、です。
モバイル表示の確認方法
モバイル表示を正しく確認する方法は、①Google Chromeの開発者ツール（F12→デバイス切替）でスマホサイズを確認、②実機（iPhone・Android）で複数機種テスト、③Googleモバイルフレンドリーテスト（無料、URL入力で問題点抽出）、④Googleサーチコンソールの「モバイルユーザビリティ」レポート、⑤PageSpeed Insightsでモバイル別の速度指標、⑥BrowserStackでブラウザ別表示確認、です。とくに「実機での確認」が最も大事で、開発者ツールではわからない実際のタップ感・スクロール感は、実機テストでしか把握できません。
スマホファーストのコンテンツ作り
スマホファーストのコンテンツ作りのコツは、①導入文を短くする（PCの3倍は離脱しやすい）、②結論を先出し（スクロールせずに要点が伝わる）、③1段落を3〜4行で改行（スマホ画面の縦長を意識）、④見出しを多用してリズム感を作る、⑤箇条書き・表で視覚的に整理、⑥画像・動画を多用（テキストより伝わる）、⑦CTAボタンは画面下部に固定表示、⑧フォームは縦並びで入力しやすく、⑨タップ可能な領域を大きく取る、⑩情報の優先順位を明確に、です。「電車の中でスマホ片手にスクロール読みするユーザー」を常に想像して設計することが、現代Webコンテンツの正解です。
— Belle Work 取材ライター / 菊池 ゆり
