予約システムとホームページの連携設計
予約システムとホームページの連携設計

予約システムとホームページの連携設計 ― 独自機能を作らないという判断

NOTE CATEGORY

美容室のホームページを作るとき、予約をどう扱うかは必ず検討事項になります。サイトの中に予約機能を組み込むべきか、外部のサービスへ送るべきか。結論から言えば、当社はほぼすべてのケースで外部サービスへリンクする形を選んでいます。独自の予約システムを作ることは、まずありません。この記事では、その判断の理由と、実際にどう導線を設計しているかを書きます。

独自の予約システムは作らない

最初に結論を書きます。サイト内に独自の予約機能を実装することは、ほぼ勧めていません。
理由は2つあります。ひとつはコストです。予約の受付、空き枠の管理、変更やキャンセルへの対応、通知の送信。これらを一から作れば、サイト本体と同等かそれ以上の費用がかかります。既存の予約サービスが月額数千円から使えることを考えると、費用対効果が見合いません。

もうひとつは、こちらのほうが重要なのですが、責任の置き所がはっきりしないことです。
予約は、間違えば実害が出る機能です。ダブルブッキングが起きた、予約が反映されていなかった、通知が届かなかった。こうした事態が起きたとき、独自システムであれば原因の切り分けから対応まで、すべてを制作側とサロン側で引き受けることになります。営業中のサロンにとって、これは大きな負担です。

既存の予約サービスを使えば、その部分はサービス提供者が責任を持ちます。障害が起きればサポートがあり、仕様も継続的に改善されます。予約という業務の根幹を、専門の事業者に任せるという判断です。
サイトがすべきなのは、その予約サービスへ、迷わず、スムーズにたどり着かせることです。

どこからでも予約に進める状態をつくる

外部サービスへ送ると決めたら、次に考えるのは、どこに予約への入口を置くかです。
設計の考え方はひとつで、どこを読んでいても予約に進める状態にしておくことです。読み物としてサイトを眺めている途中で「行ってみよう」と思った瞬間に、探させない。そのためには、入口が1箇所では足りません。

実際には、次のような場所に配置しています。

  • ナビゲーション常に視界に入る場所。スマートフォンでは画面下部に固定することも多い部分です。
  • 各ページの下部読み終わったところに置く。内容を読んで気持ちが動いた直後が、最も進みやすいタイミングです。
  • フッターページの最後まで到達した人のための受け皿。営業時間や住所と並べて置きます。

そして、予約サービスが複数ある場合は、ポップアップで選ばせる形にすることが多いです。ホットペッパーからも、LINEからも、電話からも予約できるというサロンは珍しくありません。それぞれを別のページに分けると迷わせるので、ボタンを押したら選択肢が並ぶ、という形が扱いやすいです。

LINEを予約導線にする場合は、もうひと工夫が必要です。スマートフォンであればボタンからそのまま友だち追加に進めますが、パソコンで見ている人はそれができません。そのため、パソコン表示のときはQRコードを併せて出しておきます。細かい部分ですが、ここが抜けていると、パソコンで調べている人が予約にたどり着けません。

booking-design1
booking-design1

実際に連携している予約サービス

これまでに導線を設計してきたサービスを挙げます。いずれも、サイト側からはリンクで送る形です。

ホットペッパービューティー 掲載しているサロンであれば、そのまま予約導線として使えます。新規のお客さまが最も慣れている入口でもあります。
STORES 予約 自社で予約を受けたい場合の選択肢。ポータルに依存しない形で予約を管理できます。
LINE公式アカウント リピーターとのやり取りに向いています。予約だけでなく、その後の連絡も同じ場所で完結します。
ビューティーメリット 美容室向けの予約システム。サロン側の管理機能が整っています。

どれを使うかは、すでにサロンで運用しているものに合わせます。サイトを作るタイミングで予約システムを変える必要はありません。むしろ、慣れた仕組みを続けたほうが現場の負担は少なくて済みます。
サイト側でやることは、その入口を分かりやすく提示することだけです。

booking-design2
booking-design2

予約直前の離脱は、導線だけの問題ではない

予約まわりの話になると、「離脱を減らす導線設計」といった言い方がよくされます。ボタンの色、文言、位置。たしかにそれらは効きますし、私も設計しています。
ただ、実際に予約の直前で離脱が起きる一番の原因は、おそらく導線ではありません。希望の日時が空いていないことだと思っています。

カレンダーを開いて、行きたい曜日と時間が埋まっている。それを見た時点で、その人は別の店を探します。どれだけボタンが押しやすくても、どれだけサイトが美しくても、この段階で起きる離脱は防げません。
これはサイトの設計で解決できる問題ではなく、予約枠の設定や営業の組み立ての話です。制作会社が触れる領域ではありませんが、事実として認識しておく必要はあると思っています。

ですので、サイト側でできることは限られます。予約ページにたどり着くまでのストレスをなくすこと。そして、たどり着いた人が正しい情報を持った状態で操作できるようにすること。この2つに集中するほうが、効果は確実です。
「導線を改善すれば予約が増える」という言い方には、少し注意が必要だと考えています。

電話予約とワンオペサロンの設計

オンライン予約が主流になった今も、電話で予約したいという方はいます。数としては多くありませんが、ゼロにはなりません。
ここで問題になるのが、スタッフが一人で運営しているサロンです。施術中は手が離せないので、電話に出られない時間帯が生まれます。かけた側からすると、営業時間内なのに誰も出ないという状態になり、印象が悪くなる。

この場合、サイト側に注意書きを置いておく必要があります。施術中は電話に出られないこと、その場合は留守番電話に残していただければ折り返すこと。一行あるだけで、受け取られ方がまったく変わります。
あわせて、留守番電話の内容も整えておくことをお勧めしています。何を残せばいいのか(名前、希望日時、連絡先)が案内されていれば、折り返しの手間が減り、行き違いも起きません。

サイトの設計といっても、画面の中だけで完結するわけではないという例だと思います。電話に出られないという現場の事情を、注意書きと留守電の内容で受け止める。ここまで含めて予約の導線です。

booking-design3
booking-design3

公開前に実機で確認していること

サイトを公開する前に、テスト環境で実際の端末を使って確認する工程があります。予約まわりで見ているのは、主に次の4点です。

  1. 電話番号が正しいか実際にかけて確認します。原稿の転記ミスは起こりうるもので、しかも公開後に気づきにくい種類の間違いです。
  2. リンク先が正しいか予約サービスのURLは長く、複雑です。すべてのボタンを実際に押して、正しいページに着くか確認します。
  3. メインの予約導線が主張できているかデザインに馴染ませすぎて目立たなくなっていないか。スマートフォンで、初めて見る人の目線で確認します。
  4. 注意事項が明記されているか電話に出られない時間があること、予約の変更やキャンセルの連絡方法など。書いておくべきことが漏れていないか確認します。

地味な作業ですが、ここを飛ばすと公開後に困ります。特に電話番号とリンク先は、間違っていても見た目には分からないので、目視だけでは発見できません。必ず実際に操作します。
オープン前のサロンであれば、この確認の時期を開業日から逆算して設定します。公開してから直すより、公開前に潰しておくほうが安全です。

booking-design4
booking-design4

予約は、任せられるところに任せる

予約システムの連携と聞くと、技術的に複雑なことをしているように思われるかもしれません。実際にやっているのは、その逆です。
予約という業務は専門のサービスに任せ、サイトはそこへ確実に送り届けることに徹する。作り込まないことが、結果として安定した運用につながります。

見積もりで「予約システム連携」という項目を見たときは、何を指しているのか確認してみてください。リンクを設置するだけなのか、サイト内に組み込むのか。費用も、公開後の責任の範囲も、まったく違います。
組み込む提案を受けた場合は、それが本当に必要なのか、障害が起きたときに誰が対応するのかまで含めて、確認しておくと安心だと思います。

pic-shimizu4

淸水 和豊 Kazutoyo Shimizu

DELAUNAY Inc. Founder / Direction / Design / Front-end

1983年生まれ。都内のWeb制作会社を経て2017年に株式会社ドロネーを設立。美容学校卒業後、都内のヘアサロンに勤務した経験を活かし、美容室専門のWebサイト制作プロジェクト【Salon from DELAUNAY】を立ち上げる。