白瀬ヒカリです。今日はモバイル対応の話をします。
企業サイトを初めて訪れる人の多くは、パソコンではなくスマートフォンから入ってきます。ですからHPは、パソコン画面ではなくスマホ画面から先に設計します。押しやすいボタンの大きさ、読み進めやすい余白、勝手に拡大されない入力欄の文字サイズ。この3点を最初に決めておくと、パソコン版へ広げるときに崩れにくくなります。パソコン版を先に作ってスマホへ縮めると、文字が小さくボタンも押しにくい画面になりがちです。
モバイルファースト設計とは何か
モバイルファースト設計（スマホ優先）とは、スマートフォンの画面を先に設計し、そこからパソコン向けへ広げていく設計手順です。狭い画面で成立する情報量・文字サイズ・操作の大きさを最初に確定させ、画面が広くなったときに要素を足していく考え方をとります。似た言葉と混同されやすいので、先に整理しておきます。
- モバイルファースト設計（スマホ優先）＝スマホ画面から先に設計する「手順」のこと
- レスポンシブ＝1つのHPが画面幅に合わせて自動で並び替わる「つくり」のこと
- ブレークポイント＝レイアウトが切り替わる画面幅の境目のこと
- タップ領域＝指で押せる範囲。見た目のボタンより広く取ることがある
- ファーストビュー＝ページを開いた直後にスクロールなしで見える範囲のこと
レスポンシブに対応していても、設計の起点がパソコン画面のままだと、スマホでは情報が詰まって読みにくくなる場合があります。
なぜスマホ画面から先に設計するのか
企業のHPでも、企業向け（BtoB）のサイトでも、はじめて訪れる人の60%前後はスマートフォンからです。「パソコンで見やすければOK」は過去の話。名刺交換の後にスマホで社名を検索する、移動中に資料請求先を探す、といった行動が入口になっている場合があります。最初にスマホ画面を設計し、そこからパソコン版へ広げていく「スマホ優先（モバイルファースト）」が基本です。
制作の順序を逆にすると、削る作業が発生します。パソコン版で作った要素をスマホに収める調整（縮める、隠す、並べ替える、別ページに分けるなど）は後追いになり、判断が後手に回りやすくなります。狭い画面から始めれば「何を残すか」を最初に決めることになり、優先順位が自然に決まります。
どう進めるか：実際に行った4つの調整
指で押す部分を48ピクセル以上にする
ボタンやリンクの押せる範囲を、最低48ピクセル（指の腹で無理なく押せる大きさ）確保しました。指で押しにくい画面は、それだけで離脱の原因になります。
下にスクロールしていく流れの設計
スマホでは「タップ」より「スクロール」が自然な操作です。かたまりごとの余白を適切に取り、読み進めやすいように設計しました。ページの途中にも小さな問い合わせボタンを差し込み、どこを読んでいても問い合わせできるようにしています。
スマホ用メニュー（三本線のボタン）の調整
スマホのメニューは、押すと画面いっぱいに開く形にしました。背景をぼかし、メニュー項目を大きく表示。ページを移動したら自動で閉じる動きも入れてあります。
入力フォームのスマホ対応
入力欄の文字サイズを16ピクセル以上にしました（iPhoneで勝手に画面が拡大されるのを防ぐため）。選択式の項目はスマホに元から備わっている操作画面をそのまま使い、入力の煩わしさを最小限にしています。
| 確認項目 | 基準 | 確認する理由 |
|---|---|---|
| タップ領域 | 48ピクセル以上 | 指の腹で押せる幅を確保するため |
| 入力欄の文字 | 16ピクセル以上 | iPhoneで画面が自動拡大されるのを防ぐため |
| 行間と余白 | かたまりごとに間隔を取る | 主な操作がスクロールになるため |
| メニュー | 全画面で開き、移動後に自動で閉じる | 閉じる操作の手間をなくすため |
| 問い合わせ導線 | ページ途中にも設置する | 読んでいる位置から問い合わせへ移れるようにするため |
どこでつまずくか
スマホ対応で手が止まるのは、デザインそのものではなく「確認の抜け」である場合があります。実際の画面で触らずにパソコンの縮小表示だけで済ませると、次のような見落としが起きます。
- ボタンが2つ並ぶ箇所で、指が隣のボタンに触れてしまう
- 表を横幅そのまま載せてしまい、スマホで文字が読めない
- ファーストビューに画像を敷き詰め、要件が伝わる前にスクロールが必要になる
- 電話番号がテキストのままで、タップして発信できない
- フォームの必須項目が多く、スマホの入力量が負担になる
- 画面が切り替わる幅（ブレークポイント）の前後で、見出しだけ折り返しが崩れる
ミオ（デザイナー）と連携して、画面サイズの切り替わるポイントごとにデザインを確認しています。見た目の美しさと使いやすさの両立が肝心です。
よくある質問
スマホ対応とモバイルファースト設計は同じですか？
別のものです。スマホ対応は「スマホで表示が崩れない状態」を、モバイルファースト設計は「スマホ画面から先に設計する手順」を指します。
既存のHPを作り直さずにスマホ対応できますか？
部分的な改善はできる場合があります。タップ領域の拡大、入力欄の文字サイズ調整、メニューの開閉、問い合わせボタンの追加は、既存のHPのままでも手を入れやすい箇所です。一方で、ページ構成そのものがパソコン前提で組まれている場合は、作り直しのほうが早いこともあり、企業ごとの要件によります。
どこから手をつければいいですか？
問い合わせに一番近い画面から見直すのが順当です。問い合わせフォーム、サービス紹介ページ、トップページのファーストビューの順で、実機で触って確認します。
表示速度とデザイン、どちらを優先すべきですか？
表示速度を先に整えるほうが無難です。開くまでに時間がかかると、デザインを見てもらう前に離脱につながる場合があるためです。画像の容量を落とす、読み込みを後回しにする（遅延読み込み）といった調整は、見た目を変えずに実施できます。
まとめ
スマホ画面から先に設計すると、限られた画面に何を残すかを最初に決めることになり、問い合わせまでの導線が短くなります。押せる大きさ（48ピクセル以上）、拡大されない入力欄（16ピクセル以上）、スクロールを止めない余白の3点は、実機で確認すればその場で判断できます。自社のHPがどこでつまずいているか整理したい場合は、AI活用度診断（無料・10問・約3分）もあわせてご利用ください。
