スマホの問い合わせボタンはどこに置くか｜ハンバーガー最下部＋フッター常設に落ち着いた実装判断
スマホの問い合わせボタンはどこに置くか｜ハンバーガー最下部＋フッター常設に落ち着いた実装判断
「ホームページはあるのに、スマホから問い合わせが来ない」という相談を受けて実機で確認すると、原因が文章でもデザインでもなく、そもそもスマホ表示に問い合わせへのリンクが無かった――というケースが実際にあります。PCの画面では問題なく見えるので、制作した側も運営している側も気づきにくいのがこの問題の厄介なところです。
先に結論を書きます。スマホの問い合わせボタンは、次の2箇所に常設するのが基本です。
- ハンバーガーメニューの最下部（ナビ項目の一番下)
- ページ最下部のフッター（ボタン型で、主要アクションと横並び)
この2箇所が揃っていれば、どのページのどの位置で「問い合わせよう」と思っても、メニューを開くか、下までスクロールするかのどちらかで必ずボタンに届きます。画面下に追従する固定バーや、電話・LINEのボタンを足すかどうかは、その次の判断です。
当社（名古屋のWEB制作会社）が約160ページある医療系サイトで実際に行った配置判断をもとに、なぜこの2箇所なのか、PCと同じにしなくてよい理由、ボタンの種類の使い分け、実装後に確認すべき点を順に説明します。
まず「スマホから問い合わせまで辿り着けるか」を実機で確認する
対策の前に、現状確認です。スマホの実機でトップページを開き、メニューとページ下端だけを頼りに、問い合わせフォームの送信完了まで実際に辿り着いてみてください。トップページだけでなく、サービス紹介ページやブログ記事など、検索から人が着地するページからも試します。
「そんなの当然できるはず」と思うかもしれませんが、当社が担当した医療系サイト（約160ページ・利用者の8割超がスマホ）では、運営側から「スマホからも問い合わせできるようにしてほしい」と依頼を受けて調べたところ、PC版はフッターに問い合わせリンクがあるのに、スマホ版は通常ページのどこからも問い合わせページに行けない状態でした。
これは特別に珍しい事故ではありません。PCとスマホでナビゲーションの構成が別々に組まれているサイトでは、PC側にあってスマホ側に無いリンクが構造的に生まれやすいのです。制作中の確認はPCのブラウザで行うことが多く、スマホ表示は「崩れていないか」だけ見て、「導線が揃っているか」までは見ない。その結果、利用者の大半がスマホなのに、その大半が問い合わせに辿り着けないという逆転が起こります。
チェックの観点は2つだけです。
- ハンバーガーメニューを開いたとき、問い合わせへのリンクがあるか
- ページを一番下までスクロールしたとき、問い合わせへのボタンがあるか
どちらも無ければ、そのサイトのスマホ利用者は、問い合わせたくなってもURLを直接知らない限り辿り着けません。
置き場所は「ハンバーガー最下部」＋「フッター常設」の2箇所
ハンバーガーメニューの最下部に置く理由
ハンバーガーメニューを開く人は、何か目的があって探している人です。ページ案内（サービス・料金・アクセスなど）のナビ項目を上から並べ、その一番下に問い合わせを置くと、「探したが該当するページが見つからない」「直接聞きたい」という人の受け皿として自然に機能します。
冒頭の医療系サイトでは、既存のナビ8項目の下に9項目目として「お問い合わせ」を追加しました。実はこの位置は、運営側からの要望が最初から「メニューの一番下に置いてほしい」だったところでもあります。日常的にスマホでサイトを使っている人の感覚と、設計上の定石が一致している場所だということです。
フッターに常設する理由
ページを最後まで読み終えた位置に次の行動が用意されていないと、読者は戻るボタンで離脱します。読み終えた直後は関心がいちばん高い瞬間なので、フッターにはテキストリンクの一覧に混ぜるのではなく、ボタンの形で問い合わせを置きます。フッターメニューの中の1行では、読み飛ばされて機能しません。
この2箇所に共通するのは、サイト内のどのページでも同じ場所にあることです。導線はヘッダーやフッターと同じ「全ページ共通部品」に入れて一括反映するのが基本で、ページごとに個別で足す作りにすると必ず漏れが出ます。冒頭のサイトでも、共通部品2ファイルの修正だけで約160ページ全てに導線が入りました。
PCヘッダーに同じものを足すかは、別の判断でよい
「スマホに足すならPCのヘッダーナビにも」と考えがちですが、揃える必要はありません。冒頭の医療系サイトでは、スマホに導線を2箇所追加する一方で、PCのヘッダーナビには追加しない判断をしました。PC版はフッターに既に導線があり、ヘッダーナビは項目がすでに埋まっていたためです。
ナビゲーションに項目を1つ足すと、大きな画面では余裕があっても、小さめのノートPC幅ではロゴとメニューが接触して崩れることがあります。PCヘッダーへの追加はレイアウトへの影響が大きいわりに、PCにはフッター導線が既にあるなら効果は限定的です。利用の8割がスマホなら、スマホの導線を優先して整え、PCは現状の導線で足りているかだけ確認する。「PCとスマホで同じにしなければならない」という思い込みは要りません。
なお、サイト全体のCTA設計（ヘッダー・記事末尾・補助線の3層で考える方法）は別の記事で詳しく書いています。本記事はそのうちスマホの配置に絞った各論です。
ボタンは1個とは限らない――「問い合わせ」＋「予約」の2ボタン
フッターのボタンは、業種によっては1個では足りません。冒頭の医療系サイトでは、最初に「お問い合わせ」ボタンだけを設置しましたが、最終的に「お問い合わせ」＋「WEB予約」の横並び2ボタンに変更しました。来院予約が主導線のビジネスでは、問い合わせボタンだけだと「今すぐ予約したい」という一番温度の高い人の受け皿が無いためです。
業種別の目安はこうなります。
- 予約で成立する商売（サロン・クリニック・整体など）: 主ボタン＝予約、副ボタン＝問い合わせ
- 相談から始まる商売（制作会社・士業・工務店など）: 主ボタン＝問い合わせフォーム、副＝電話
- LINEを主導線にしている場合: 主ボタン＝LINE友だち追加、フォームは補助
逆に「置いてはいけないボタン」もあります。当社が制作した名古屋の美容室サイトでは、LINE公式アカウントを開設していない状態だったため、テンプレートに含まれていたLINEボタンを全て撤去し、予約導線を「電話」と「ネット予約」の2本に統一しました（ヘッダー・フッター・スマホの固定バー・メニュー内の全箇所）。使っていないサービスのボタンが残っていると、押しても何も起こらない導線になり、そこで問い合わせの意欲ごと失われます。導線は本数を増やすことより、実際に機能する本数に絞って全箇所で統一することの方が効きます。
電話ボタンには1つ注意があります。電話番号のリンク（tel:リンク)はスマホではそのまま発信できますが、PCでは押しても反応しない環境が多いということです。同じ美容室サイトでは、PC向けの表示には番号そのものを文字で載せる形にしました。ボタンにするなら、スマホは発信リンク・PCは番号表示、と表示を分けておくと取りこぼしがありません。
実装時に確認すべき4点
配置が決まったら、実装で起こりがちな見落としを4つ挙げておきます。いずれも冒頭の医療系サイトや当社の他案件で実際に確認・対処した項目です。
1. 先にCSS（スタイル）が用意されていないか確認する。 デザインデータ上は問い合わせボタンが想定されていて、スタイルシートにボタンの装飾が定義済みなのに、HTML側の実装だけが漏れている――ということが実際にあります。冒頭のサイトがまさにこの状態で、フッターボタンのスタイルは最初から定義されており、追加したのはマークアップだけ。スタイルの追加はゼロで済みました。「無いから全部作る」の前に、既存の定義を確認すると実装が数行で終わることがあります。
2. 全ページに入ったことを機械的に確認する。 共通部品に入れたつもりでも、特殊なテンプレートを使うページだけ抜けることがあります。冒頭のサイトでは、反映後に全ページのHTMLを取得して、ドロワー内とフッターの両方に導線が含まれることを約160ページ分すべて確認しました。ページ数が多くても、この確認は自動化すれば数分です。
3. CSSの変更はキャッシュで届かないことを想定する。 ボタンを横並び2個に変更するようなCSSの修正は、利用者のブラウザに古いCSSがキャッシュされていると反映されません。HTMLだけ新しくCSSが古い状態になると、「横並びのはずが縦に積まれて見える」といった中途半端な表示が実際に起こります。CSSファイルの読み込みに style.css?v=20260901 のようなバージョンパラメータを付け、CSSを変更したら必ずこの値を更新する運用にしておくと、この問題を仕組みで防げます。
4. ボタンの文言は既存の表記に揃える。 「お問い合わせ」「お問合せ」のような表記の揺れは、1つのサイト内に両方あると細部の雑さとして伝わります。新しくボタンを足すときは、既に存在するボタンやページ名の表記を確認して合わせてください。
まとめ
- スマホの問い合わせボタンは「ハンバーガーメニュー最下部」＋「フッター常設」の2箇所が基本。どのページからでも「メニューを開く」「下までスクロールする」のどちらかで届く状態を作る
- 対策の前に、スマホ実機で問い合わせ完了まで辿り着けるかを確認する。PC画面の確認だけでは、スマホだけ導線が無い状態に気づけない
- PCと同じにする必要はない。利用の大半がスマホなら、スマホの導線を優先する
- ボタンの本数と種類は主導線で決める。予約商売なら予約ボタンを主に。使っていないサービスのボタンは撤去して、機能する導線だけに統一する
- 実装後は「既存スタイルの確認」「全ページへの反映確認」「CSSキャッシュ対策」「表記統一」の4点を確認する
問い合わせボタンは、置いた瞬間より「利用者が押そうと思った瞬間にそこにあるか」がすべてです。まずはご自身のスマホでサイトを開き、メニューと画面の下端を確かめるところから始めてください。