スマホファースト
Web サイトの設計・制作において、「スマートフォンでの表示と操作を最優先(起点)に考える」という方針のことです。
PC 版を基準に作ってからスマホ用に縮小するのではなく、画面の小さいスマホで成立するように情報の優先順位を決め、そこから PC 版へと展開していきます。
※Google の検索エンジンも、PC ではなくスマホサイトを基準に評価する「MFI(モバイルファーストインデックス)」を採用しています。
設計の要：「スマホで成立しないものは作らない」
限られた画面(ファーストビューなど最初に目に入る領域)で何を最優先に見せるか、指で押しやすいボタンサイズか、無理なく読める文字量かを先に決めることが、結果的に PC 版でもスッキリと整理された設計に繋がります。(※PC・スマホの両対応には「レスポンシブデザイン」という手法が一般的です)
実務で押さえるべき確認ポイント
閲覧環境がスマホ中心か PC 中心かは、思い込みではなく「アクセス解析の実数」で確認します。その上で、以下の点を考慮します。
- 操作性：PC ではなく、必ず「スマホの実機」で表示や操作を確認する。
- 導線設計：お問い合わせ(CV)までの導線を、スマホで最短距離にする。
- 負荷軽減：電話番号はタップで発信できるようにし、フォームの入力項目を極力減らす。
初心者が陥りがちな「5 つの落とし穴」
- PC 基準で進めてしまう：PC 画面でデザインを作り込んでしまい、後からスマホ対応しようとしてレイアウトが破綻する。
- 情報の詰め込みすぎ：画面の小さいスマホに情報を詰め込みすぎて、文字が細かく読みにくくなる。
- 誤タップの誘発：ボタンやリンク同士の隙間が狭く、指で押した時に隣のリンクを誤タップしてしまう。
- 表示速度の悪化：PC の光回線を前提とした重い画像をそのまま使い、外出先のスマホ(通信が遅い環境)でサイトがなかなか開かない。
- アクセス比率の未確認：BtoB など「実は PC からのアクセスが 8 割」という自社サイトの現状を確認せず、盲目的にスマホファーストにしてしまう。
言葉をよく利用する人
- Web 担当者(発注側)
- デザイナー
- コーダー / フロントエンドエンジニア
- マーケター
- ディレクター
会話上での使用例
サイトデザインの起点をPCとスマホどちらにするか決める場面
-
Web担当者
デザインはPC版から作り始める感じでしょうか。
-
デザイナー
アクセスの8割がスマホなので、今回はスマホファーストでいきましょう。狭い画面で何を優先して見せるかを先に固めて、そこからPCに広げる順番の方が、結局どちらも整理された設計になります。
スマホからの問い合わせが伸びない原因を探る場面
-
マーケター
スマホからの問い合わせが思ったより少ないんです。
-
Web担当者
スマホファーストの視点で導線を見直しましょう。最初の画面に電話とフォームのボタンを置いて、押しやすいようにボタンを大きくして、入力項目も思い切って減らしてみます。