「PCでは問題ないのに」がスマホ対応の始まりだった

ホームページを作って、PCで確認して、「よし、できた」。ところが、スマホで開いてみると様子が違う。スマホ対応を始めたころの私は、この「PCでは問題ないのに」を何度も経験しました。

このブログには、2015年から2018年ごろにかけて、スマホ対応でつまずいたことを備忘録として書いた記事がいくつも残っています。どれも、そのときは「とりあえず動いた」で終わらせていた小さなメモです。

今回はそれを読み返して、スマホ対応のホームページで私が実際につまずいた5つのこと をまとめてみました。コードの細かい話より、「どんなことが起きるのか」「どう考えればいいのか」を中心に書きます。これからホームページを作る方や、自分のサイトをスマホで見て「なんだか使いにくい」と感じている方の参考になればうれしいです。

1. 指で拡大できないようにしていた

2015年の記事に、正直にこう書いています。スマホサイトを作るとき、ピンチアウト（2本の指で広げて拡大する操作）を想定しておらず、拡大できない設定で作っていた のです。

スマホ用のページでは、<head> の中に「viewport（ビューポート）」という設定を書きます。画面の幅に合わせて表示するための指定です。当時の私は、ここに「拡大・縮小させない」指定（user-scalable=no や maximum-scale=1.0）を入れていました。レイアウトが崩れないようにするには、そのほうが安心だと思っていたのです。

ところが、「拡大できるようにしてほしい」という要望をいただきました。考えてみれば当然です。小さな文字や写真を拡大して見たい人はたくさんいます。指定を width=device-width,initial-scale=1.0 だけにして、拡大できるように直しました。

今ならどうするか

今は最初から 拡大を止めない ようにしています。文字を大きくして読みたい方にとって、拡大できないページはとても不親切です。一般的にも、拡大を禁止する指定はアクセシビリティ（誰でも使いやすいこと）の面で避けたほうがよいとされています。作り手の「崩れたら困る」より、読む人の「見えない」のほうがずっと困るのだと、この件で学びました。

2. メニューボタンの反応が遅かった

2016年、スマホでヘッダーのメニューボタンをタップすると、開くまでに一瞬もたつく ことに気づきました。

原因を調べていくと、サイト全体のリンクに付けていた「hover（マウスを乗せたときの変化）」の指定が関係していそうだと分かりました。スマホにはマウスがないので、タップしたときにhoverの処理が挟まり、反応が遅れていたようです。ヘッダー部分ではhoverの指定を外し、本文のリンクだけに絞ったところ、反応が良くなりました。

今ならどうするか

PCとスマホでは、そもそも操作の仕方が違います。PCは「マウスを乗せる→クリック」、スマホは「いきなりタップ」。PC向けの演出をそのままスマホに持ち込むと、思わぬところで引っかかります。

当時はCSSを個別に直してしのぎましたが、今は「この演出はスマホで必要か？」を最初に考えるようにしています。最近のブラウザではタップの遅れが起きにくくなったものの、スマホでの操作感は実機で触って確かめる という基本は変わりません。

3. PCでも電話番号がリンクになってしまった

スマホで見ているとき、電話番号をタップしてそのまま電話をかけられると便利です。そのために電話番号を tel: というリンクにするのですが、そうすると PCで見たときにもリンクになってしまう のが気になりました。PCでクリックしても電話はかけられないからです。

2016年の記事では、スマホのときだけ電話リンクにする方法を2つ試しています。最初に試したjQueryを使う方法は、サイト内の他のjQueryと競合して動かないことがありました。最終的には、jQueryを使わない小さなJavaScriptで、スマホならリンク付き、それ以外ならただの文字として出し分ける方法に落ち着きました。

今ならどうするか

今の目で見ると、ここは少し考え方が変わりました。当時使った document.write という書き方は、今ではあまり勧められていません。それに、PCでも電話アプリやスマホ連携で tel: リンクが使える環境が増えています。

なので今は、「PCでリンクになっていても大きな害はない」と割り切って、そのまま tel: リンクにすることが多いです。見た目が気になるなら、CSSで画面幅に応じて色や下線を変える程度にしています。仕組みを複雑にするより、壊れにくいほうを選ぶ。これも長くやってきて身についた考え方です。

4. 地図を通り過ぎようとしたら地図が動いた

これは、私が個人で作っている相模原の飲食店情報サイト「食！相模原」で起きたことです。お店のページにGoogleマップを埋め込んでいたのですが、スマホでページを下へスクロールしようとすると、指が地図の上に来たところで、ページではなく地図が動いてしまう のです。地図が画面の大部分を占めていると、なかなか先へ進めません。

参考記事を見て、地図（iframe）に pointer-events:none を付けて操作を受け付けないようにしました。すると今度は、PCでも地図が動かせなくなって しまいました。

最終的には、画面幅が769px以下のとき（スマホ・タブレット）だけ地図の操作を止め、PCではいつも通り操作できるようにして解決しました。地図の設定を変える方法はたくさん見つかったのに、埋め込み（iframe）のままで解決する方法はなかなか見つからなかった、と当時の記事にも書いています。

今ならどうするか

この件で覚えたのは、「スマホで困ること」を直すと、PCで別の困りごとが出ることがある という点です。直したら、両方で確認する。当たり前ですが、つい片方だけ見て終わりにしがちです。

なお、今のGoogleマップの埋め込みは、スマホでは2本の指で地図を動かす仕組みになっていて、当時ほど困らなくなっているようです。それでも、地図の高さを画面いっぱいにしない、地図の下に住所の文字も書いておく、といった配慮は今も役に立ちます。

5. 古い作りのページをスマホ対応にしたかった

最後は、新しく作るページではなく 古いページ の話です。

普段はHTML5でレスポンシブ（画面幅に応じてレイアウトが変わる作り）にしていますが、2018年には、HTML 4.01 Transitionalという古い書き方のページでもレスポンシブにできるかを調べました。このときは「Respond.js」というJavaScriptを使い、CSSを読み込んだ あとに 読み込まないと動かない、という順番の注意点をメモしています。

今ならどうするか

Respond.jsは、もともと古いブラウザでもレスポンシブ用のCSSを効かせるための道具でした。今のスマホのブラウザなら、そうした補助なしでも動きます。

古いページをスマホ対応にするなら、今は部分的な継ぎ足しより、作り直しも含めて検討する ほうが結局早いことが多いと感じています。以前このブログでも、古いサイトのスライダーが動かなくなって入れ替えた話を書きましたが、古い部品を延命し続けるより、どこかで区切りをつけたほうが後々楽になります。

5つを振り返って思うこと

読み返してみると、5つとも共通していることがあります。

• 作る側の都合で決めたことが、使う人を困らせていた（拡大禁止、PC向けのhover）
• 片方を直すと、もう片方で問題が出た（地図のスクロール）
• 当時の正解が、今は正解ではないこともある（document.write、Respond.js）

スマホ対応というと「画面幅に合わせてレイアウトを変えること」と思われがちですが、実際につまずくのは、こうした細かい操作感の部分でした。そして、どれもPCで確認しているだけでは気づけないことばかりです。

だから今も、ホームページを作ったら必ず 自分のスマホで実際に触ってみる ようにしています。読むだけでなく、拡大してみる、スクロールしてみる、ボタンを押してみる、電話番号をタップしてみる。地味ですが、これが一番確実なチェックです。

まとめ

• スマホ対応では「PCでは問題ないのに」が必ず起きる
• 拡大を禁止する設定は、読む人にとって不親切。最初から拡大できるようにしておく
• PC向けのhoverなどの演出は、スマホの操作感を悪くすることがある
• 電話番号のリンクは、仕組みを複雑にするより壊れにくい方法を選ぶ
• 地図などの埋め込みは、スマホで直したらPCでも確認する
• 古いページの延命策は、当時の正解でも今は不要になっていることがある
• 最後は「自分のスマホで実際に触る」のが一番のチェック

10年前の備忘録は、どれも小さな失敗の記録です。でも、その小さな失敗の積み重ねが、今の「最初からこうしておこう」につながっています。自分のホームページをスマホで開いて、一度ゆっくり触ってみてください。思わぬところに、使いにくさが隠れているかもしれません。