ホームページのスマホ対応が済んでいるのに問い合わせが増えない理由と直し方

結論 ホームページのスマホ対応は見た目を整えた先で決まる

ホームページのスマホ対応と聞くと、多くの人は画面幅に合わせて崩れず表示されること、つまりレスポンシブ化を思い浮かべます。制作会社に頼んで、スマートフォンでも崩れない状態になっている。それなのに問い合わせが増えない。この食い違いに戸惑っている経営者は少なくありません。

実のところ、スマホ対応には3つの層があります。崩れずに表示される層、指で迷わず操作できる層、待たずに開く速さの層です。制作会社が納品するのはたいてい最初の層までです。残りの2つは、訪れた人が問い合わせまで進めるかどうかを直接左右しますが、そこまで手が入っている中小企業のサイトは多くありません。

この記事では、表示を整えた先にある導線と速さの層を、スマートフォンで来た人の親指の動きに沿って直していく手順を示します。専門の道具は使いません。自分のスマートフォンで自社サイトを開き、上から順にたどるだけで、次に直す場所が1つ見つかる状態を目指します。読み終えたときには、スマホ対応という言葉が、崩れない表示だけを指す言葉ではないと感じられるはずです。来た人が問い合わせまで進めるかどうかまでを含んでいる、と捉え直せます。その感覚が持てれば、制作会社の納品を受け取るときも、自分で運用するときも、確かめる場所を自分で選べるようになります。

先日こんな相談をQ&Aサイトで見かけました

スマホ対応は済んでいるはずなのに反応が無い

先日、Q&Aサイトで中小企業の担当者の方のこんな悩みを拝見しました。ホームページはスマホ対応済みと言われて納品されたのに、スマートフォンからの問い合わせがほとんど無い。パソコンで見ると問題なく見える。何が足りないのか分からない、という内容でした。技術的には対応しているはずなのに、成果につながらないという困惑が伝わってきました。

この相談で見落とされていたのは、スマホ対応という言葉の中身が、崩れない表示だけを指していたことです。訪れた人がスマートフォンの小さな画面で、読み、指で操作し、待たずに開けるか。その全部が揃って初めて、スマホ対応は成果につながります。表示だけを整えても、残りが放置されていれば、来た人は途中で離れます。

足りないのは技術より相手の目線

相談者に足りなかったのは、新しい技術でも高価な道具でもありませんでした。スマートフォンを持つ相手の目線で、自分のサイトを一度たどることでした。パソコンの大きな画面では気づかない読みにくさや、押しにくい入口が、小さな画面では一気に表面化します。ここから、その表面化する場所を層ごとに直していきます。

スマホ対応という言葉が指す3つの層

スマホ対応を、訪れた人の体験の順に3つの層へ分けます。上から順に、開いて、読んで、操作する。どの層が抜けても、その手前までの努力は成果に届きません。まずは全体像を1枚の図にしました。

制作会社が納品するのは、多くの場合まん中の表示の層までです。速さと導線は、運用する側が直さない限り放置されます。図の右端の問い合わせに届くのは、3つの層が全部そろったときだけです。抜けている層がどれかを、これから順に確かめます。

なぜ表示を直しただけでは問い合わせが増えないのか

表示は入口であってゴールではない

崩れずに表示されることは、スタート地点です。読めるようになった人が、次に何をするかまでは面倒を見ていません。読んだ人が相談したいと思ったとき、その入口が指で押せる場所に、押せる大きさであるか。ここが抜けていると、気持ちが動いた瞬間に操作でつまずき、離れていきます。

パソコンでの確認が盲点をつくる

サイトを作る側も直す側も、作業はパソコンの大きな画面で行います。すると、パソコンでは十分に見える文字が、スマートフォンでは詰まって読みにくい、という差に気づけません。総務省の通信利用動向調査でも、個人がインターネットを使うときの端末はスマートフォンが最も多いと示されています。多数派が見る画面で確認していないことが、盲点を生みます。

遅さは気づかれないまま離脱を生む

表示が重くて開くのに時間がかかると、人は内容を見る前に戻ってしまいます。Googleは、モバイルのページ表示が遅くなるほど離脱が増えると繰り返し示しています。しかも離れた人は何も言い残しません。運用する側からは、ただ問い合わせが少ないという結果だけが見え、原因が速さにあると気づけません。速さは、見えないところで成果を削ります。

3つの層は掛け算で効いてくる

速さ、表示、導線の3つの層は、足し算のようには積み上がりません。掛け算で成果に効きます。開くのが遅ければ、読める表示も押せる導線も見てもらえません。速く開いても文字が読めなければ、その先の導線までたどり着きません。読めても相談の入口が押しにくければ、動いた気持ちが操作でしぼみます。どれか一つが欠けると、その手前までの努力がまるごと無駄になる。だからこそ、3つを別々の課題として順に潰していくことが、遠回りに見えて確実な進め方になります。一つの層を直すたびに、掛け算の一つの項が0から1に変わり、全体の成果がまとめて立ち上がってきます。

多くの人がやってしまう間違ったスマホ対応

スマホ対応を進めるとき、良かれと思ってやったことが、かえって成果を遠ざける場合があります。よくある3つの動きと、その結末を並べます。

やりがちな動き	そのときの考え	スマホで実際に起きること
パソコンで確認して完了とする	崩れていないから大丈夫	スマホでは文字が詰まり、入口が押しにくく、途中で離脱される
情報を減らさず全部を詰め込む	載せた内容は消したくない	小さな画面で縦に長くなり、大事な相談の入口まで届かない
目を引く動きや自動再生を足す	動いたほうが今風に見える	読み込みが重くなり、開く前に戻られる

崩れていないことと使えることは別

崩れずに表示されることと、指で快適に使えることは、別の話です。前者はパソコンでも確認できますが、後者はスマートフォンを手に持って触らなければ分かりません。崩れの有無だけを合格の基準にすると、押しにくさや遅さは検査を素通りします。基準を、見た目から操作へと引き上げてください。

足すより削るほうがスマホでは効く

小さな画面では、載せる情報を増やすほど、大事なものが埋もれます。パソコンなら横に置けた要素が、スマートフォンでは縦に積み上がり、相談の入口まで指を何度も動かすことになります。スマホ対応で成果を出す近道は、足すよりも削ることです。今日読むべきものだけを残し、他は別のページへ逃がします。

売れるサイトはみな謙虚というスマホ対応の考え方

相手の親指の動きを最優先にする

スマホ対応を直すときの物差しになるのが、私が現場でずっと使ってきた「売れるサイトはみな謙虚」という考え方です。謙虚とは、自分が見せたいものより、相手が今その画面でやりたいことを先に置く姿勢のことです。スマートフォンで訪れた人がやりたいのは、短い時間で自分に合うか判断し、合えば相談することです。その動きを邪魔しない形に削ります。

背骨になる一文

「スマホ対応とは、小さな画面の向こうにいる一人が、迷わず親指だけで次の一歩に進める形へ、サイトを引き算することだ」

この一文が、これから示す3つの層の直し方の背骨です。派手な機能を足すのをやめ、相手の親指が届く範囲に、大事なものだけを置き直す。中小企業のサイトほど、この引き算が効きます。運用に手をかけられる人が限られているからです。

層1 表示を整えて迷わず読める状態にする

読める文字の大きさと余白

最初の層は、崩れずに読めることです。ここで大事なのは、文字が小さすぎないこと、行が詰まりすぎていないこと、そして押せる要素の周りに指の分の余白があることです。パソコンでちょうどよく見える設定は、スマートフォンでは小さく感じられがちです。実機で開いて、拡大せずに読めるかを確かめます。

読者が確かめたい	スマホでよくある状態	次にすること
拡大せずに読めるか	文字が小さく、指で広げないと読めない	本文の文字を実機で読める大きさに上げる
どこが見出しか分かるか	本文と見出しの差が小さく、流し読みできない	見出しをはっきり分け、段落を短く区切る
横にはみ出していないか	表や画像が画面からはみ出し、横に動く	画面幅に収め、横スクロールを消す

色の濃さで読みやすさが変わる

文字の大きさと同じくらい効くのが、文字と背景の色の濃さの差です。薄い灰色の文字を白い背景に置くと、パソコンの明るい画面では読めても、屋外でスマートフォンを見る人には読めなくなります。スマートフォンは、電車の中や日差しの下など、明るさの条件が悪い場所で使われることが多い道具です。本文の文字は、条件が悪くても読める濃さにしておきます。装飾のための薄い色は、読ませたい本文には使いません。

この層が整うと、来た人はまず内容を読める状態になります。読めない状態では、その先の導線をどれだけ工夫しても届きません。土台なので、最初に確かめます。

層2 導線を親指だけで押せるようにする

相談の入口を指の届く場所に置く

2つめの層は、読んだ人が相談まで進める導線です。スマートフォンは片手で、親指だけで操作されることが多い道具です。相談の入口が画面のいちばん下の隅にだけ小さくあると、気持ちが動いた瞬間に押しにくくて離れます。各見出しの近くや、読み終えた位置に、押せる大きさの入口を置きます。

導線の場所	放置するとどうなる	直す一手
相談への入口	下の隅に小さくあり、押しにくい	読み終えた位置に、指で押せる大きさの入口を置く
電話やメールの起点	番号が画像で、押しても発信できない	触れると発信や送信が始まる形にする
入力する項目	項目が多く、小さな画面で入力が続かない	初回に必要な項目だけへ減らす

入力の負担を減らす

相談の入口を押した先が、長い入力欄だと、そこでまた人は離れます。スマートフォンでの文字入力は、パソコンより手間がかかるからです。初回のやり取りに本当に必要な項目だけへ減らし、残りは相談が始まってから聞きます。入力の短さは、そのまま相談数に効いてきます。

誤って隣を押さない間隔をあける

親指での操作は、指先より広い範囲に触れます。押せる要素どうしが近すぎると、狙った入口の隣を誤って押してしまいます。誤って別の場所に飛ばされた人は、戻る操作を強いられ、その一手間でうんざりして離れます。相談の入口や電話の起点は、周りに指の分の余白を取り、隣の要素と間隔をあけて置きます。小さな余白が、誤った操作による離脱を防ぎます。

押せるかどうかは実機でしか分からない

押しやすさは、画面の設計図を見ても分かりません。実際にスマートフォンを片手で持ち、親指だけで入口まで届くか、届いた入口を誤って隣を押さずに押せるかを、自分で試します。この一往復で、机の上では見えなかった押しにくさが必ず出てきます。

層3 速さを整えて待たずに開く状態にする

重い画像を軽くする

3つめの層は、開く速さです。速さを最も重くしているのは、たいてい大きすぎる画像です。パソコン用の大きな写真をそのまま載せていると、スマートフォンの回線では読み込みに時間がかかります。表示に必要な大きさまで画像を小さくするだけで、開く速さは目に見えて変わります。

速さを重くする原因	起きていること	直す一手
大きすぎる画像	表示に必要な何倍ものデータを読み込んでいる	表示サイズに合わせて画像を軽くする
自動再生の動画	開いた瞬間に重い読み込みが走る	自動再生をやめ、押したら再生する形にする
飾りのための機能	成果に関係しない動きが速さを削る	成果につながらない動きを外す

回線が細い場所を想定する

速さを確かめるときは、家や職場の速い回線だけで見ないようにします。訪れる人は、電波の弱い建物の中や、移動中の細い回線でサイトを開くこともあります。速い回線では一瞬で開くページも、細い回線では重い画像の読み込みで何秒も待たされます。自分のスマートフォンで、電波が弱い場所や、速度を絞った状態でも試しておくと、いちばん条件の悪い人の体験が分かります。その人が待てる速さに整えれば、誰にとっても速くなります。

飾りの動きは成果を削る

目を引くための動きや、開いた瞬間に走る自動再生は、今風に見せてくれます。ただ、その裏で読み込みが重くなり、開く前に戻られていることがあります。成果につながらない飾りは、速さと引き換えになっていないかを見直します。速いサイトは、それだけで離脱を減らします。

スマホ対応が進むと検索でも見つかりやすくなる

検索する人の多くもスマホから来る

スマホ対応の3層を整えると、問い合わせが増えるだけでなく、検索から見つけてもらいやすくなります。理由は単純で、検索する人の多くもスマートフォンから調べているからです。検索する側の画面に合っていて、待たずに開き、読みやすいサイトは、検索する人にとって満足度が高い。その満足度は、見つけてもらえる度合いにも跳ね返ってきます。表示と速さの改善は、集客の入口を静かに広げます。

速さと読みやすさは評価の土台になる

Googleは、モバイルでの表示の速さや、画面のがたつきの無さ、押せる要素の間隔といった体験の質を、検索での評価の材料にしていると公表しています。つまり、開く速さを軽くし、読める文字にし、押せる導線を整える作業は、来た人のためであると同時に、来る前の検索での見つかりやすさにもつながります。スマホ対応は、集めた後の受け皿と、集める前の入口の両方に効きます。

地図や地域の検索に強くなる

店舗や地域密着の事業では、スマートフォンで近くの店を探す動きが多くあります。地図や地域の検索から来た人は、その場で連絡したい、道を知りたいという急いだ気持ちで訪れます。電話や地図の起点が指で押せる形になっていれば、その勢いを取りこぼしません。スマホ対応の導線の層は、地域の検索から来る人の取りこぼしを直接減らします。

スマホで自分のサイトを点検する順番

友人になったつもりで上からたどる

3つの層を、自分のスマートフォンで順に点検します。初めてその事業を知る友人になったつもりで、検索やサイトの入口から入り、上から指でたどります。読めるか、押せるか、待たずに開くか。途中で読みにくさや押しにくさに当たったら、そこが直す場所です。

点検する層	確かめること	つまずいたら
開く速さ	入口を押してから待たされないか	大きい画像と自動再生を疑う
読める表示	拡大せずに読めて横にはみ出さないか	文字を大きくし、はみ出しを収める
押せる導線	相談の入口へ親指だけで届いて押せるか	入口を読み終えた位置に置き直す

点検は、上から下へ一往復するだけで十分です。全部を一度に直す必要はありません。つまずいた場所を1つ直すごとに、来た人が問い合わせまで進める確率は上がります。

業種別に効くスマホ対応の直し所

来る人の動きで力点が変わる

3つの層はどの業種でも共通ですが、いちばん効く直し所は、来る人の動きで変わります。代表的な業種を例に、最初に見る場所を示します。

業種の例	スマホで最初に効く直し所	理由
店舗や施術業	電話や地図の起点を指で押せる形にする	その場で行きたい人が、すぐ連絡や道案内に進むから
士業や相談業	相談の入口を各見出しの近くに置く	読んで納得した瞬間に相談へ進めるようにするため
製造や卸の会社	問い合わせ項目を初回に必要な分へ減らす	担当者が移動中に片手で送れるようにするため
教室や講師業	体験の申込みを読み終えた位置に置く	気持ちが動いた直後に申し込めるようにするため

自分の業種の行を見て、その直し所が今のサイトでスマートフォンから快適にできるかを、この場で試してください。できなければ、そこが最初の作業です。

どの業種でも共通しているのは、来た人が急いでいるという前提です。スマートフォンで調べる人は、机に向かってじっくり比べるより、移動中や隙間の時間に、片手で素早く判断しています。その急いだ気持ちに、待たせず、読ませ、押させる。この3つが噛み合ったときに、業種を問わず問い合わせは動き始めます。逆に、どこか一つでも急いだ気持ちを裏切ると、来た人は静かに戻っていきます。自分の業種の直し所を選んだら、急いでいる人の指の動きを思い浮かべながら、その一手を仕上げてください。

90日でスマホ対応の3層を整える進め方

速さ 表示 導線の順で30日ずつ

3つの層を一度に直そうとせず、90日を3つに区切ります。先に開く速さを軽くし、次に表示を整え、最後に導線を仕上げます。速さを先にするのは、遅いままだと他の直しが見てもらえないからです。

時期	やること	終わったと分かる目印
最初の30日	大きい画像を軽くし、自動再生を外して速さを整える	入口を押してから待たされずに開く
次の30日	文字を大きくし、はみ出しを収めて読める表示にする	拡大せずに最後まで読み通せる
最後の30日	相談の入口を置き直し、入力項目を減らす	親指だけで相談まで進める

目印は数字より自分の指で確かめる

各期間の目印は、問い合わせ数のような結果で測るのをやめ、自分の指で確かめられるものにしています。結果は自分では動かせませんが、待たずに開くか、読めるか、押せるかは、自分のスマートフォンで判断できます。自分で確かめられる目標は、続けられる目標です。

スマホ対応を外注に頼むときに確認すること

納品の合格ラインを表示より操作に置く

スマホ対応を制作会社に頼むとき、合格の基準をどこに置くかを最初に決めておきます。多くのやり取りでは、崩れずに表示されることが暗黙の合格ラインになっています。しかし、それだと読んだ人が相談まで進める導線や、待たずに開く速さは、頼んだ範囲の外に落ちます。頼む前に、崩れないことに加えて、相談の入口へ親指だけで届くこと、いちばん大きい画像が軽いことまでを合格の条件に入れておくと、納品後に自分で直す手間が減ります。表示の見た目より、来た人が最後まで進めるかどうかで受け取る。この一言を先に共有しておくだけで、仕上がりの意味が変わります。

実機で一緒に確かめる場を作る

納品を受け取るときは、設計図や説明の資料だけで判断せず、自分のスマートフォンで一緒に開いて確かめる場を作ります。その場で、検索の入口から入って上からたどり、読めるか、押せるか、待たずに開くかを一緒に試します。目の前で試すと、資料の上では気づけなかった押しにくさや遅さが、その場で共有できます。直しが必要な箇所も、後から言葉で伝えるより早く正確に伝わります。実機で一緒にたどる一手間が、やり直しの往復を減らします。

運用でどこまで自分で直せるかを聞く

納品後、文字の大きさや画像の差し替え、相談の入口の位置を、自分でどこまで直せるのかを最初に聞いておきます。スマホ対応は一度きりの作業では終わりません。載せる情報が増えたり、写真を差し替えたりするたびに、また重くなったり読みにくくなったりします。自分で軽い修正ができる状態で受け取っておくと、そのたびに外注へ頼まずに済み、速さと読みやすさを保てます。運用まで見据えて受け取ることが、長く効くスマホ対応につながります。

ホームページのスマホ対応でよくある質問

Q スマホ対応済みと言われたのに反応が無いのはなぜですか

多くの場合、スマホ対応済みは崩れずに表示される層までを指しています。読んだ人が指で相談まで進める導線と、待たずに開く速さは、運用する側が直さない限り放置されがちです。自分のスマートフォンで相談の入口まで親指だけで進めるかを試すと、抜けている層が分かります。

Q 作り直さないとスマホ対応は直せませんか

多くは作り直しまで必要ありません。文字の大きさ、画像の重さ、相談の入口の位置は、今のサイトのまま直せる場合がほとんどです。まずは実機でたどり、つまずいた場所を1つずつ直します。土台から作り直す判断は、その点検の後で十分に間に合います。

Q スマホとパソコンでどちらを優先すべきですか

来る人の多くがスマートフォンから見るなら、スマートフォンを先に整えます。総務省の調査でも、個人のインターネット利用はスマートフォンが最も多いと示されています。パソコンでの見え方も大事ですが、多数派が最初に触れる画面から確かめるほうが、成果に直結します。

Q 表示速度はどこまで速くすればいいですか

秒数の目標を追うより、入口を押してから内容が見えるまでに待たされないか、という体感を基準にします。大きい画像を軽くし、自動再生を外すだけで、多くのサイトは体感で十分速くなります。数字の前に、自分の回線でのもたつきを消すことを先にしてください。

Q 情報を減らすと必要な内容まで削れてしまいませんか

減らすのは、初めての人が今日読む必要のないものです。詳しい説明や補足は消さずに、別のページへ逃がします。1ページに全部を積むと、小さな画面では大事な相談の入口まで埋もれます。今日読むべき数点を残し、残りは行き先を用意して移す。これで必要な内容は失われません。

Q 古いサイトでもスマホ対応は間に合いますか

数年前に作ったサイトでも、多くの場合は間に合います。土台から作り直さなくても、いちばん大きい画像を軽くする、本文の文字を大きくする、相談の入口を読み終えた位置に置き直すといった直しは、今のサイトのまま進められることがほとんどです。まずは自分のスマートフォンで一度たどり、つまずいた場所を書き出してください。その一覧を見てから、部分的に直すか、土台から作り直すかを判断すれば十分に間に合います。古さそのものより、来た人が最後まで進めるかどうかを基準にしてください。

Q スマホ対応を直したのに問い合わせが増えたか分かりません

直した効果は、直したその日には表に出ません。次に人が訪れたときから少しずつ現れます。まずは、自分が確かめられる目印で進み具合を見てください。待たずに開くか、拡大せずに読めるか、親指だけで相談まで進めるか。この3つが自分のスマートフォンでできるようになっていれば、来た人の体験は確実に良くなっています。問い合わせ数のような結果は後からついてくるので、前半は自分で確かめられる目印を頼りに続けると、途中で手が止まりません。

まとめ スマホ対応は表示の先の導線と速さで決まる

ホームページのスマホ対応がうまくいかない原因の多くは、崩れない表示までで止まっていることでした。訪れた人が問い合わせまで進むには、待たずに開く速さ、迷わず読める表示、親指だけで押せる導線という3つの層が全部そろう必要があります。制作会社が納品するのは表示の層までで、残りは運用する側が直します。

直すために特別な道具はいりません。自分のスマートフォンで自社サイトを開き、初めての人になりきって上からたどる。読みにくい、押しにくい、開くのが遅いと感じた場所が、次に直すところです。今日は新しい機能を探すのをやめて、手元のスマートフォンで自分のサイトを一度たどってみてください。そこに直す場所が1つ見つかります。

スマホ対応を、崩れない表示という技術の話で終わらせず、来た人が問い合わせまで進めるかという体験の話まで広げると、直す場所は自分の指で見つけられるようになります。制作会社に任せきりにせず、多数派が使う画面で自分のサイトを確かめる習慣が身につくと、載せる情報が増えても、写真を差し替えても、そのつど自分で軽く整えられます。派手な機能より、待たずに開き、読めて、押せること。この地味な3つが揃っているサイトが、スマートフォンから来た人を静かに問い合わせまで運びます。今日の一往復が、その最初の一歩です。手元のスマートフォンで自社サイトを開き、読めるか、押せるか、待たずに開くかを一度確かめる。その小さな習慣が積み重なると、来た人を取りこぼさないサイトへ少しずつ近づいていきます。特別な道具も、大きな作り直しも、最初から必要ではありません。まずは自分の指で一度たどるところから始めてください。

今日できる点検

点検する場所	いま起きていること	今日できる一手
開く速さ	入口を押してから表示までもたつく	いちばん大きい画像を軽くする
本文の文字	拡大しないと読めない	実機で読める大きさまで上げる
相談の入口	下の隅に小さくあるだけ	読み終えた位置に押せる入口を足す
問い合わせ項目	項目が多く片手で入力が続かない	初回に必要な分へ減らす
自動再生の動画	開いた瞬間に重い読み込みが走る	押したら再生する形に変える