コンサルタントのしおかぜです。ちなみにこの記事も私の情報をもとにClaude codeが私のライターとなり制作してくれています。
---
中小企業・個人事業主のホームページを見ているお客様の8割以上は、スマホからアクセスしています。
でも、多くのサイトでは「予約する」ボタンがページの一番上か一番下にしか置かれていません。つまり、メニューやスタイル写真を見ながら「ここに行こうかな」と気持ちが高まっているまさにその瞬間、予約ボタンが画面のどこにも見当たらない状態になっているんです。
わざわざページの上まで戻ってボタンを探してくれるお客様もいますが、面倒に感じてそのまま別のサイトへ…という方も少なくありません。
今回は、この「予約ボタンが消える問題」を画面下部に固定するバーひとつで解決した実例をご紹介します。
---
## やったこと：画面の下にずっと表示される予約バーを追加
私がこの課題に取り組む際に活用しているのが **Claude Code** です。日々の作業ログや設定ファイルの確認、記事の構成案まで、Claude Codeに相談しながら進めることで、一人でも高速に質の高いアウトプットを出せるようになりました。
今回実装したのは、スマホで見たときだけ画面の一番下に常に表示される予約バーです。
ボタンは2つだけにしました。
- **ホットペッパービューティーの予約ボタン**
- **LINE公式アカウントへのボタン**
中小企業・個人事業主の予約は、この2つの経路でほぼカバーできます。電話ボタンも入れるか迷いましたが、ボタンを3つ以上にするとスマホの小さい画面では押し間違いが起きやすくなるため、あえて絞りました。
どのページを見ていても、どこまでスクロールしても、この予約バーは常に表示されています。お客様が「予約しよう」と思った瞬間に、すぐワンタップで行動に移せる設計です。
---
## ボタンの色を「ホットペッパー色」「LINE色」にした理由
地味に見えて効果が大きかったのが、ボタンの色選びです。
- 予約ボタン → ホットペッパービューティーのロゴと同じ深いワインレッド
- LINEボタン → LINEの公式グリーン
なぜわざわざ各サービスのブランドカラーに合わせたのかというと、「このボタンを押したら何が起きるか」を、文字を読まなくても色だけで直感的に分かるようにするためです。
お客様は普段からホットペッパーもLINEも使い慣れています。だから、その色を見ただけで「あ、これを押せばホットペッパーに飛ぶんだな」と自然に理解できます。
中小企業・個人事業主のブランドカラーで統一したほうがおしゃれに見えるかもしれませんが、予約ボタンに関しては「分かりやすさ」を優先したほうが結果につながります。
---
## 実装で失敗しかけたポイント：フッターが隠れる問題
固定バーを入れてすぐに気づいたのが、「ページの一番下まで見たとき、住所や営業時間がバーに隠れて読めない」という問題でした。
これ、見落としがちなんですがとても大事です。せっかくお客様が住所を確認しようとしたのに、予約バーで隠れていたら本末転倒ですよね。
解決方法はシンプルで、ページ下部に予約バーの高さ分の余白を追加するだけ。ただ、パソコンのプレビューでは問題なく見えていても、実際のスマホで確認すると隠れていた…というケースがあるので、最終確認は必ず実機で行うようにしています。
---
## パソコンでは非表示にした理由
この固定バー、パソコンで見たときは表示されないようにしています。
パソコンは画面が広いので、ヘッダーやサイドバーに予約ボタンを置いても邪魔になりません。逆に、広い画面の下部にずっとバーが出ていると「ちょっとうるさい」と感じる方もいます。
スマホだけに表示を限定することで、必要な場面だけに適切な導線を出すという設計にしました。
---
## まとめ：予約の取りこぼしを減らす、シンプルな改善
今回やったことを整理すると、たった3つです。
1. スマホ画面の下部に、ホットペッパーとLINEの2ボタンを常時表示するバーを追加
2. ボタンの色を各サービスのブランドカラーにして、直感的に押せるようにした
3. フッターが隠れないよう余白を調整し、パソコンでは非表示に設定
特別な技術やツールは使っていません。でも、この「予約ボタンがいつでも見えている状態」を作るだけで、お客様が予約にたどり着くまでの小さなストレスがなくなります。
ホームページの改善というと、写真のクオリティやキャッチコピーの見直しに目が行きがちです。でも、まずは「予約ボタンがいつでも押せる状態になっているか」という基本を確認してみてください。
「うちのサイトも、スクロールすると予約ボタンが消えているかも…」と感じた方は、お気軽にプロフィールからご相談ください。現状の導線を確認して、改善のご提案をさせていただきます。
---
WEBサイト制作・広告運用・業務自動化など、Claude Codeを活用した仕組みづくりをご支援しています。「何から始めればいいか分からない」という方も、お気軽にプロフィールからご相談ください。
.png)
