指先一つで反応率がガラッと変わる？スマホで押しやすいお問い合わせボタンの作り方

ご覧いただきありがとうございます。

初心者にも親切丁寧なWEBデザイナー

more design officeの樹下です。

---

WEBサイトをスマホで見ていて、

「お問い合わせボタンが小さくて押しにくい」

「ボタンがどこにあるか分からない」

と思った経験はありませんか？

実は、ボタンの「押しやすさ」はサイトの成約率（コンバージョン率）に直結する非常に重要な要素です。どんなに良いサービスでも、最後のボタンが押しにくいだけで、お客様は離脱してしまいます。今日は、スマホユーザーに優しい「親切なボタン設計」について、4つのポイントで詳しく解説します。

1. 「親指」が届く範囲を意識した配置

画面の一番上や、左右の端すぎる場所は、片手操作では非常に押しにくいエリアです。お客様が「申し込もう！」と思った瞬間に、自然と親指の近くにボタンがある。この「無理のない配置」が、お客様のストレスを減らし、スムーズなアクションへと繋がります。

イメージ画像： ボタンはなるべく真ん中に

---

2. 「指の腹」で確実に捉えられる適切なサイズ

スマホのボタンが小さすぎると、隣のリンクを誤って押してしまったり、何度もタップし直したりすることになります。

AppleやGoogleのガイドラインでは、タップ領域は最低でも「44px〜48px以上」が推奨されています。これは、大人の指の腹がしっかりと収まるサイズです。「デザイン的に小さい方が綺麗だから」という理由で小さくせず、まずは「押しやすさ」という機能を最優先しましょう。

イメージ画像： 適切なサイズのボタン

---

3. 「追従（フローティング）ボタン」で迷わせない

縦に長いLP（ランディングページ）やブログ記事では、スクロールしても常に画面の下の方にボタンが表示され続ける「追従ボタン」が非常に効果的です。

お客様が文章を読み進め、「これいいな」と思ったその瞬間にボタンがそこにある。わざわざ一番下までスクロールしたり、メニューに戻ったりする手間を省くことができます。この「いつでも声をかけられる」安心感が、お問い合わせへの心理的ハードルを下げてくれます。

イメージ画像： 右下に固定でボタンを設置

---

4. ボタンの「色」と「言葉」で背中を優しく押す

ボタンは背景色とハッキリ区別できる「目立つ色」にすることが鉄則ですが、ただ目立てば良いわけではありません。

「送信」という事務的な言葉よりも、

「無料で相談してみる」

「空き状況を確認する」

など、そのボタンを押した後に何が起こるのかが具体的に分かる言葉（マイクロコピー）を添えましょう。お客様が次に取るアクションを具体的にイメージさせることで、安心してお申し込みへと進んでいただけます。

イメージ画像： 何が出来るのか具体的に説明したボタン

---

さいごに

ボタン一つ、配置一つを整えることは、お客様を目的地まで優しくエスコートする「親切心」の現れです。あなたの想いが詰まったサービスに、一人でも多くのお客様が辿り着けるよう、指先への優しさを忘れないサイト作りを心がけましょう。

「自分のサイトのボタン、押しにくいかも？」「スマホでの見え方を改善したい」という方は、ぜひお気軽にご相談くださいね。初心者の方にも分かりやすく、効果的な改善案をご提案させていただきます。

▼スマホでの使いやすさにこだわったHP制作はこちら

▼成約率を高めるボタン配置のLP制作はこちら