そろそろ海や川、プールといったレジャーシーズンの到来ですね。
それにあわせ、魅せるための体づくりをしている方も少なくないのではないでしょうか。
ジムに通い筋肉トレーニング、整体・マッサージに通い体のゆがみの正常化、エステに通ってダイエットやスキンケア、脱毛で美容に力を入れるなど、人によってスタイルはそれぞれだと思います。
今回は全国100店舗以上を展開するエステティックサロンの「エルセーヌ」(http://www.elleseine.co.jp/)(以下本記事では「エルセーヌ」)と大阪発のエステティックサロンの「ミス・パリ」(http://www.miss-paris.co.jp/)(以下本記事では「ミスパリ」)の体験申込みフォームを比較分析していきます。
それでは「勝手にEFO分析」していきます。
今回も「勝手に」改善ポイントを指摘していきますので、どうぞ最後までお付き合い下さい。
◎○△×と、ユーザー視点での評価を行っていきます。
基本的項目の確認
それではいつも通り、基本項目から見ていきましょう。
エルセーヌ | ミスパリ | |
ページ数 | 申し込み、申し込み内容確認、ご予約完了の3ページ | 申し込み、申し込み内容確認、お申込完了の3ページ |
入力項目 | 14種 | 15種 |
必須項目入力欄の数 | 17項目 | 13項目 |
フロー | あり | あり |
オファー | なし | あり |
必須マーク | あり(「必須」文字表示) | あり(「必須」マーク表示) |
送信ボタンのサイズ | 幅156px × 高さ32px | 幅351px × 高さ41px |
入力画面のレイアウト | 他ページと共通 | フォーム専用 |
入力項目の種類はどちらもほとんど変わりません。
どちらも「コースの選択」「体験店舗」「予約希望日」の優先度を高くしており、顧客情報入力項目は、優先度が低い状態となっています。
以下個別に説明していきます。
レイアウトの違い
入力項目をひとつの表にまとめ、情報を集約したエルセーヌ。
入力欄のサイズを大きめにし、マージンを広くとることで見やすさに重点を置いた、ミスパリ。さらに、入力項目をカテゴリ分けすることで、テンポの良い入力を可能とさせています。
エルセーヌ ページレイアウト
入力項目を表形式に統一することで、「今どういった内容を入力しているのか」が分かりやすくなっています。
しかし、フォントサイズや行間が若干小さく感じられます。マージンやフォントカラーを調整して視認性と可読性を上げていきたいですね。
また、サイト共通のナビゲーションが離脱を生む可能性が。こちらもできれば除いておきたい所。
ミスパリ ページレイアウト
項目を種類ごとに分けることでユーザーに入力行程の進行感を持たせています。
余計なナビゲーションが削除された、シンプルなフォーム専用レイアウトを採用しています。
必須マークは両社ともあり
お手本は「必須」文字を使い、色背景を敷くなどして四角にしたマークを先頭につけた状態です。
エルセーヌ 必須マーク
エルセーヌは文字のみの必須マークです。
文字だけでは印象が薄いので、お手本の様なマーク形式にしましょう。
ミスパリ 必須マーク
一方ミスパリはお手本のような必須マークを使用しています。
ただ入力欄の背景色が任意項目と変わらないので、必須項目のみ目立つ色に変えてあげると、より入力しやすくなると思います。
どちらもフローあり
エルセーヌは、フォーム送信も含めた申込から予約完了までの全体の流れをフローで説明するものとなっています。
対して、ミスパリはフォーム内の情報入力ステップを表示する横型のフローになっています。
エルセーヌ フロー
ミスパリ フロー
WEBサイト以外の予約方法の提示
フォーム入力が苦手で電話での予約を望んでいるユーザーを想定し、電話への導線も併記しておくことでサービスの利便性を向上させることができます。
エルセーヌでは電話番号を表記したサイト共通のヘッダーが表示されているためというのもありますが、この点をクリアしています。
ミスパリでは表示はありませんでした。
エルセーヌ 電話予約用の番号表示
安心感を醸成するバッジ表示
フォームはどちらもSSL環境ですが、バッジの表示があるのはエルセーヌのみでした。
セキュリティバッジを表示しておくだけで、ユーザーが感じる安心感はアップします。ぜひ取り入れておきたい所です。
エルセーヌ セキュリティバッジの表示

個人情報の安全性をバッジを表示することで強調している
次に入力支援機能の比較です
機能名 | エルセーヌ | ミスパリ |
---|---|---|
ガイド
未入力の残り必須項目数などをリアルタイムで表示する機能 |
なし | なし |
離脱ブロック
ページを閉じようとするとアラートを出してOKしないと閉じることができない機能 |
なし | なし |
サブミットブロック
送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能 |
あり | なし |
項目ごとのアラート表示
入力についての説明をリアルタイム表示する機能 |
フォーカス時:なし
エラー時:あり |
フォーカス時:あり
エラー時:あり |
項目ごとに入力完了後の動作 | なし | 完了時に入力欄がグリーンの配色に変化 |
入力支援機能の有無
今回いずれもリアルタイムアラート、住所自動入力を実装していました。
入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。ぜひさらなる入力支援機能の導入・拡充をご検討いただきたいですね。
リアルタイムアラート
今回いずれもリアルタイムにエラー判定する「リアルタイムアラート機能」が導入されていました。
どちらも吹き出しでエラー内容を表示するようになっています。
エルセーヌ リアルタイムアラート

項目同時にエラーを吹き出しで表示。
一度表示されると☓マークを押すまで吹き出しが消えず、重なってしまう
ミスパリ リアルタイムアラート

こちらも、吹き出しが重なる現象が。さらにエラー判定されるタイミングがよくわからなかった。
ミスパリはフォーカス時、完了時の入力支援機能も
ミスパリは項目フォーカス時には背景色が黄色に変化。マウスオーバー時には緑色の吹き出しで入力例などの補足説明を表示。
さらにエラーない状態で入力を終えると該当の背景色が緑色に変化する入力成功サインのような機能もありました。
ややカラフルすぎるのが気にはなるものの、ユーザーがフォーム項目一つづつに達成感を持って入力を進めることができますね。
ミスパリ 必須マーク

入力完了時は緑色、入力中は黄色に背景色が変化。
また入力中にはふきだしを表示して補足を表示。
エラー画面
ユーザーにとって見やすいエラー画面の条件は下記の2点です。
・冒頭にエラーに関するメッセージがある
・各エラー箇所に分かりやすい配色で注記がある
今回いずれも、エラー注記を吹き出しにし、該当箇所に表示させつつ、背景色を変化させて強調する形をとっています。
しかし、冒頭に何もないのは少し残念ですね。上部には一言メッセージがほしいところです。
またいずれもピンク色を基調とするページデザインであるところに、さらにエラーもピンク系で強調しているため、結果としてあまり強調されにくいように思います。
エラーが引き立つように、もともとのページの色を抑えておくか、異なる色を用いるなどの工夫があると、よりわかりやすいエラー表示が実現できるのではと思います。
エルセーヌ エラー表示

吹き出しでエラーを表示。また該当箇所の背景色を強調。
ミスパリ エラー画面
最後は勝手ながらフォーム改善アドバイスを
今回はエステティックサロンサイトの体験予約フォームについて分析を行いました。
最後は勝手にフォーム改善のアドバイスをして締めくくります。
エルセーヌ
強弱を付けるためのデザイン調整と入力支援機能の拡充が必要
現状のフォームタイトルやフォントサイズだと全体的にのっぺりとしていて、メリハリがありません。
そこで強弱を付けるためのサイズやマージン、配色調整を行うと今までより分かりやすいフォームになっていくと思います。
また、サイト共通のナビゲーションが表示されていると、ユーザーの離脱を引き起こしてしまう場合があります。できれば余計なリンクはすべて削除しておくと良いのではないでしょうか。
ミスパリ
エラー、必須、入力項目の工夫ででさらに快適なフォームに
ページレイアウトや項目の整理のされかた、フォーカス時や完了時の入力支援機能など、細やかに配慮がある良質なフォームだと思います。
しかしすべての必須項目にマーク表示がないことや、エラー表示のわかりやすさと配色が気になりました。とくに、リアルタイムアラートの判定のタイミングはわかりやすくしておきたいところです。これらの点に改善があると、さらにユーザーに優しいフォームになるのではと思います。
勝手にEFO比較分析【エルセーヌ x ミス・パリ】(エステサロン 体験予約フォーム編) | EFO・フォーム改善ブログ https://t.co/yMsjyvI2WM