有名飲食メディアの予約フォームを集めて特徴を調べてみました。

かなり久々の記事更新となるのですが、他のメディアで記事を書いていてそちらと本職の方に時間を割いていたのでブログの更新がおろそかになっていました。

今回は、有名飲食メディア(食べログ、ホットペッパーグルメ、ぐるなび、一休、ヒトサラ、ブッキングテーブル)の入力フォームを比較してみたいと思います。仕事柄入力フォームの改修なども担当することがあるのですが今回は自分のためも含めて各媒体の特徴などを分析したいと思います。

有名飲食メディアの予約フォーム 5つ

食べログ

かなりシンプルな構成となっています。共通項目であるヘッダーやフッターも取り除いてあり、気が散るであろう要素を省き入力するというタスクによりフォーカスさせているのでしょう。また、予約する際にユーザーが気にするであろう、店名、日時、人数、利用コース、値段、席タイプを表示しており確認するために前画面に戻らなくて良いように設計されています。

入力フォームの項目数も名前(漢字)、名前(かな)、電話番号、メールアドレス、レストランへの要望と最低限必要な項目で構成されています。

良いなと思ったのは、予約するボタンの付近に日時、人数を再度配置することで確認のために上へスクロールで戻るタスクを極力減らそうという狙いが伺えます。

かなりシンプルであり、必要な情報は盛り込まれている良いフォームだと思います。気になった点は、予約者情報、Tポイント、レストランへの要望とタスクの種別でいうと入力、確認、入力と一度Tポイントの確認するという作業が入っていることです。何か意図があってのことなのでしょう。

ホットペッパーグルメ

Recruitが運営し、CMなどでもおなじみのホットペッパーグルメです。食べログと違いヘッダーは残しています。こちらは必須項目の場合は、必須のテキストがタイトルの帯右に設置されています。タイトルのテキストと離しているのはあえてなんでしょうか。必須かどうかの確認に視線を右端まで移さなければならないので少し疑問です。

また、こちらも食べログのフォームと同じく、来店者情報、コース・席、ご要望事項と入力、確認、入力の順になっています。こちらコースや席タイプを変更できるようですがユーザーがこの時点で変更する割合ってどのくらいなんでしょうか? 中の人しか知りえない情報ですが、個人的に興味があります。

食べログも同じなのですが、同意のチェックボックスではなくボタンにテキストで「同意して予約する」とやるのがベストプラクティスなんですかね。必須のチェックボックスを除くことができるのでEFOをつきつめていくとこのような形になるのでしょう。ただ少しばかりCTAボタンが小さい気がします。また、利用規約やキャンセル規定などのリンク近接しており誤タップを誘発してしまうのではないでしょうか。

予約ボタンの下に、注意事項やキャンセル規定、メールマガジンの項目があるのですがこちらはユーザーからわかりにくいなどのクレームが来ないのか気になるところです。もちろんこの項目を上に移動すればCVRは低下するのでしょうが。

ぐるなび

ぐるなびも割と歴史が長くみなさんもご存知かと思います。画面構成は、予約内容、お客様情報と確認、入力とブロックが分かれているため個人的に良い入力フォームかと思います。予約内容の項目は全て縦に積んでるため全体的に縦長のページとなっているため、予約日、時間、人数はまとめてしまっても良い気がします。また、入力フォームにまでヘッダー上部のバナーは離脱につながるかと思うので表示する必要はないかなと思います。

入力項目のラベルの隣には必須 or 任意が記されており視線の動きが少なくできるのは良いと思います。また、連絡先メールアドレス下の注意書き「迷惑メール対策で〜〜」の部分っていつも思うんですが入力フォームのここに表記する必要があるんでしょうか?
ここでこのメッセージを確認して迷惑メールフィルターを変更するユーザーがどのくらいいるのか気になるところです。※ちなみに食べログはこの注意書きは入れていません。

CTAボタンのしたには、ついでに会員登録もすませるためのフォームが設置されています。このままついでに会員登録できるのは嬉しいのですが会員になった際にどのようなメリットがあるのか簡潔でも良いので記載があるとさらに会員登録につなげることができそうだと思いました。特に会員登録数がKPIに設定されていないのであればその限りではありませんが。

一休

レストラン予約の他に国内宿泊・海外宿泊などを手がける一休。上記3媒体に比べると値段は高めのお店が多く、ユーザー層は異なるでしょう。とくに若者のユーザー層はいないのではないかと推測されます。

そんな一休の入力フォームですが、初めに予約情報であるレストラン名、コース名、席タイプ、日時、人数を配置しており、ヘッダーも小さいためファーストビューで入力フォームの項目が入ってきています。ここは他媒体と違うポイントですね。スクロールなしで入力するようにできています。これがどれだけ数値に影響を与えるのか不明ですが、入力するというタスクにフォーカスさせることができるのではないかと思います。

また、人数のところは男性、女性と分かれているのですがこれは何に利用されているのか気になりますね。分析のために使用しているのは容易に想像ができますが、詳細を入力したことによってユーザーに何か利益があるのでしょうか。それかレストラン側が男女比を把握していないと困るといったこともあるのでしょうか。一休を使用してレストラン利用をしたことがないので皆目見当がつきません。

ページ上部のコース情報のところに料金の項目がないなと思っていたら下の方にありました。これは使用するポイントと連動して変動する?ようなのでここに設置しているのでしょう。

その後はレストランの確認事項があり、注意事項やキャンセルポリシーと続きCTAボタンとなります。CTAボタン上部には予約日時、人数、料金と必要最低限の項目が表示されているのは良いポイントですね。一点気になったのはその下の「注意事項・キャンセルポリシーに同意し、予約する」という文言があるのですが、この表記だとチェックボックスがあるかと思いました。ユーザー側の行動である「〜〜する」と表記されると何か行動を促されているような気がしますね。「〜〜に同意したものとみなします」などのテキストが適切なのかと思います。

また、アンケートを下部に設けているのはデータを取得して分析するためなのでしょうか。こちらを入力するユーザーがどれくらいいるのか気になるところです。

ヒトサラ

料理人の顔が見えるグルメ・レストランサイトのヒトサラですが、その特徴は国内最大級となる料理人11227人の情報を掲載している点ではないでしょうか。そんなヒトサラの入力フォームですが全体的にシンプルです。確認事項はページ上部にまとめて配置、入力項目も必要最低限に抑えられています。

入力フォームのあとは注意事項などの記載があり、その後CTAボタン+戻るボタンが設置されています。注意事項のテキストが多めなのでここで圧倒されて離脱するユーザーがどれくらいいるのか気になりますね。また、戻るボタンのサイズもCTAと同じなためもう少し小さくしても良いのではと思いました。

まとめ

分析というか個人的な感想に近いまとめになってしまいましたが、各媒体の入力フォームを見ることでそれぞれの特徴が理解できたのは良かったです。その媒体のビジネスモデルや姿勢、ユーザー層によって適切な入力フォームというのは異なってくると思いますが、個人的に上記の中で良いと思ったのは食べログですね。

2017/11月現在のキャプチャなため各媒体グロースハックは行っていると思うので改善の変遷を見ていくのが楽しみです。予約をコンバージョンとした場合入力フォームの良し悪しはかなり影響を及ぼしますので、引き続き他媒体を研究したいと思います。今度は飲食以外の媒体で予約をあつかっているサービスも見てみるのも面白そうですね。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。