スマホ対応の実務｜レスポンシブでも縮めるだけでは成立しない
PCデザインを縮めるだけでは、読めない・押せないページになります。
BtoBサイトでもスマートフォンからのアクセスは半分前後を占めます。 それでも制作の現場では、PCのデザインだけ作って スマートフォンは「縮めておいてください」で済まされることがあります。
結果として、文字が小さい、表が横にはみ出す、電話番号が押せない、といった 実際に離脱を生む問題が残ります。
レスポンシブとは何を意味するか
レスポンシブは1つのHTMLを、画面幅に応じて並べ替える作り方です。 自動で「いい感じ」になるわけではなく、 どの幅で何をどう並べ替えるかは、人が決めています。
| 作り方 | HTML | 特徴 |
|---|---|---|
| レスポンシブ | 1つ | 現在の標準。保守が1本で済む |
| URL分離（PC／SP別） | 2つ | 更新漏れが起きる。古いサイトに多い |
| PC版のみ | 1つ | スマートフォンで拡大しないと読めない |
現在のリニューアルはほぼすべてレスポンシブです。 既存サイトがURL分離方式なら、統合するだけでも保守の手間が半分になります。
スマートフォンで作り直しになる要素
PCのレイアウトをそのまま縮めると成立しない要素があります。 ここはSP用に設計し直す必要があり、その分が費用に乗ります。
| 要素 | PCでの形 | SPでの対応 |
|---|---|---|
| グローバルナビ | 横並び | ハンバーガーメニューに格納 |
| 横に広い表 | そのまま表示 | 横スクロール、またはカード型に組み替え |
| 3〜4カラムの並び | 横並び | 1カラムに縦積み（順序の指定が必要） |
| 横長のメインビジュアル | そのまま | 縦長にトリミングした別画像を用意 |
| PDFの資料 | そのまま閲覧 | 拡大しないと読めない。HTML化を検討 |
| 入力フォーム | 2カラム | 1カラム。入力キーボードの種類も指定 |
メインビジュアルのトリミングは軽視されがちです。 横長の写真をそのまま縮めると、 スマートフォンでは被写体が小さすぎて何の写真か分からなくなります。 撮影時からSP用の縦構図を想定しておくと、追加費用が発生しません。
表とグラフの扱い
BtoBサイトでは仕様表・料金表・比較表が要になることが多く、 ここがスマートフォンで読めないと問い合わせに繋がりません。
- 横スクロールにする：情報を落とさない。ただしスクロールできると気づかせる工夫が必要
- カード型に組み替える：1行を1ブロックとして縦に並べる。項目数が少ない表に向く
- 列を減らす：SPでは主要な列だけ出し、詳細は別ページに送る
画像化された表は避けてください。 拡大しないと読めず、検索エンジンにも内容が伝わらず、 修正のたびに画像を作り直すことになります。
タップされる前提で作る
マウスと指では精度が違います。 PCで問題なく押せるものが、スマートフォンでは押せません。
- タップ領域を十分に取る（およそ44px四方が目安）
- リンク同士を近づけすぎない（隣を押してしまう）
- 電話番号は発信できるようにする（テキストのままだと押しても何も起きない）
- ホバーでしか出ない情報を作らない（指にはホバーが無い）
ホバー前提のメニューは実際に事故を起こします。 PCではマウスを乗せると下層メニューが開く作りにしていると、 スマートフォンでは下層ページに到達できません。
実機で確認すべきこと
ブラウザの開発者ツールによる表示確認では、次の点が再現されません。
| 確認項目 | 実機でしか分からない理由 |
|---|---|
| 読みやすさ | 実際の画面サイズと明るさで印象が変わる |
| 固定ヘッダーの挙動 | スクロール時のアドレスバーの伸縮で位置がずれる |
| フォームの入力体験 | キーボードが出た状態での表示は実機でしか分からない |
| 表示速度 | モバイル回線とPCの速度差は大きい |
| タップの反応 | 押しづらさは触らないと分からない |
検収時には自分のスマートフォンで全ページを一度は見てください。 制作会社が確認していても、実際に使う人の目で見ると気づく点が必ず出ます。
発注時に決めておくこと
- SP用のデザインカンプを作るか（作らない場合、SPの見た目は実装者の判断になる）
- 対応する最小幅（375px 前後が一般的）
- 表をどう見せるか（横スクロールかカード型か）
- メインビジュアルのSP用画像を用意するか
- 確認する実機（機種とOSバージョンを合意しておく）
SP用カンプの有無が、見積もり差の大きな要因です。 安い見積もりはPC版だけデザインし、SPは実装で調整する前提になっていることがあります。 比較するときは、この条件を揃えてから金額を並べてください。
よくある質問
レスポンシブにすればスマホ用のデザインは不要ですか？
不要にはなりません。レスポンシブは「1つのHTMLを画面幅で出し分ける」手法で、スマートフォンでどう見せるかは別途デザインが必要です。PCデザインだけ作って「あとは自動で縮む」と考えていると、文字が小さすぎる・表が読めないといった問題が必ず起きます。
スマホ対応で費用はどれくらい上がりますか？
PC版のみと比べて2〜4割増しが目安です。ただし現在はレスポンシブが標準なので、「スマホ対応込み」で見積もられていることがほとんどです。見積もりを比べるときは、SP専用デザインを作るかどうかで差が出ます。
PC用とスマホ用でURLを分ける方式はどうですか？
現在は推奨されません。2つのHTMLを保守する手間が倍になり、更新漏れで内容がずれます。既存サイトがこの方式なら、リニューアル時にレスポンシブへ統合するのが一般的です。
スマホでの表示確認はどこまでやるべきですか？
実機で主要2〜3機種は必ず見てください。ブラウザの開発者ツールでのシミュレーションでは、フォントの太さ、タップの反応、固定ヘッダーの挙動などが実機と異なります。iPhone と Android を1台ずつ、可能なら画面の小さい機種を1台入れると確実です。
掲載している金額は、一般的な発注で見かける水準をもとにした目安です。 実際の費用は要件・地域・体制によって変わります。必ず複数社から見積もりを取り、 「何が含まれていて、何が含まれていないか」を比べたうえでご判断ください。