工務店のホームページを見る人の多くは、スマホで見ています。見学会のチラシを手にした人も、知人に名前を聞いた人も、その場でスマホを取り出して検索します。そのとき、電話とお問い合わせのボタンが「いま見ている画面の中」に無いと、そこで終わります。この記事は、スマホの画面で押せるボタンの置き方を、当社のデモサイトの画面で見ていきます。
スマホの画面は、パソコンの3分の1しか無い
パソコンでは右上に電話番号とお問い合わせのボタンが並んでいても、スマホではメニューの中に畳まれます。畳まれたボタンは、見ている人が「メニューを開いて、下のほうまで探す」という2回の操作をしないと押せません。見学会の帰り道に、片手でスマホを見ている人は、その2回をしません。
スマホの画面は縦に長く、横は狭い。だから「どこを見ていても、画面の中に押せるものが1つある」状態を作るのが基本です。よく使われるのは、画面の下端に固定した帯です。
置き方1｜画面の下に、2〜3個の帯を固定する
スクロールしても画面の下に残る帯に、「資料請求」「見学会予約」のように2〜3個だけ置きます。指が届く位置は画面の下側なので、上ではなく下です。並べるのは、いちばん軽い一歩（資料をもらう）と、会う約束（見学会・相談）の2つ。電話は帯の中に入れるか、帯の右端に受話器の印で置きます。
置き方2｜帯の中身は3つまで。4つ以上は押し間違える
帯に「施工事例」「コンセプト」「会社案内」「お問い合わせ」と4つも5つも入れると、1つの幅が親指より狭くなります。押し間違えが増えると、人は押すのをやめます。目安は3つまで、1つの高さは44px以上（指の腹の大きさ）です。文字は「資料請求」「見学会予約」のように、押した先で何が起きるかが分かる言葉にします。「詳しくはこちら」は、何が起きるか分からないので押されません。
どう見えるかは、実物のデモで確かめられます
公開中のデモ30件。工務店・リフォーム・平屋・多世代など、自社に近い業種の仕上がりを見られます。
置き方3｜電話は「押すとかかる」形にしておく
スマホで電話番号を見た人は、番号を押せばそのまま電話がかかることを期待します。番号が文字として書いてあるだけだと、覚えて電話アプリに打ち直すことになり、ほとんどの人はしません。番号にリンク（tel:）を付けるだけで、押した瞬間に発信画面が開きます。ホームページの制作会社に「電話番号を押せる形にしてください」と一言伝えれば済みます。
もう1つ。受付時間を番号のそばに書いておきます。「9:00〜18:00（水曜定休）」と添えてあれば、夜に見た人は翌日にかけ直すか、お問い合わせフォームに切り替えます。書いていないと、かけてつながらず、そのまま離れます。
置き方4｜最初の画面にも、1つだけ置く
下の帯とは別に、開いた瞬間の画面（写真と見出しの所）にもボタンを置きます。ここは「見学会のご案内」のように、いま一番来てほしい行き先を1つ。添えるなら「資料請求」のような軽い一歩をもう1つまで。3つ以上並べると、どれを押すか迷って、どれも押されません。色は、来てほしいほうを濃く、軽いほうを白くして差をつけます。
自社のホームページで確かめる3つ
- 自分のスマホで自社のホームページを開き、途中まで下にスクロールして、画面の中に押せるボタンが残っているか
- 電話番号を押して、発信画面が開くか
- ボタンの文字が「資料請求」「見学会予約」のように、押した先で何が起きるか分かる言葉になっているか
まとめ
スマホの画面では、ボタンは「どこにあるか」より「いま見ている画面の中にあるか」で決まります。画面の下に2〜3個の帯を固定し、電話は押すとかかる形にし、最初の画面には1つだけ置く。この3つで、見学会の帰り道にスマホを見た人が、そのまま予約や資料請求まで進めます。
ホームページに問い合わせが来ないときに見直すところは、こちらにまとめています。→ 工務店のホームページに問い合わせが来ない共通点3つ
この記事に出てくる会社名・人物・数字は、当社が制作したデモサイトのもので、実在の会社・人物ではありません。ページの作りを見ていただくための見本です。
