勝手にEFO比較分析【ライザップ x 24/7workout】(マンツーマンジム 無料カウンセリング申込フォーム編)

はやくも夏を感じるほどの陽気に包まれる今日このごろ、人々の装いも徐々に薄着になり、本格的な夏到来に向け、体型を気にしはじめた方も少なくないのではと思います。

そこで本日は、ともに2ヶ月で結果を出すと謳うマンツーマントレーニングジム2社のフォームを比較分析してみたいと思います。
取り上げるのは、言わずと知れたマンツーマンジムブームの火付け役的存在、「結果にコミットする」のフレーズでおなじみの「RIZAP(ライザップ、https://www.rizap.jp/)」と、リーズナブルな価格ながら比較的店舗数も多く、成果保証もあり注目の「24/7workout、(http://jim-diet.net/all/pc)」の2社です。

それではさっそく比較をはじめていきましょう。
今回も「勝手に」改善ポイントを指摘していきますので、どうぞ最後までお付き合い下さい。
◎○△×と、ユーザー視点での評価を行っていきます。

※本記事の内容は2015年05月27日時点のRIZAP、24/7workout、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2015年05月27日時点)。

基本的項目の確認

いつも通り、まずは基本的項目の確認からです。

RIZAP 24/7workout
ページ数 入力、確認、完了の3ページ 入力、確認、完了の3ページ
入力項目 11種 7種
必須項目入力欄の数 17項目 3~11項目(8項目に初期値あり)
フロー なし なし
オファー あり あり
必須マーク あり なし
送信ボタンのサイズ 幅300px × 高さ44px 幅600px × 高さ80px
入力画面のレイアウト フォーム専用 フォーム専用(ヘッダーやフッターは共通)

以下個別に説明していきます。

項目数に大きな差が

必須項目の入力欄が17種類もあるライザップに対し、24/7workoutでは入力しなくてはならないのは3項目のみとかなり少なめに抑えられていました。
よく注目してみると、名前の姓と名の入力欄を分けたり、メールアドレスの確認を省略するなど、共通の入力内容のなかでも項目数を抑え、ユーザーの手間をおさえる工夫がなされていました。

ok_blue RIZAP 項目数

ライザップは、名前の姓名をはじめ項目の分け方は細かめ

ライザップは、名前の姓名をはじめ項目の分け方は細かめ

efo_double_ring 24/7workout 項目数

対しては、複数項目の統合や、生年月日やフリガナ、メールアドレスの確認など極力項目を削っている印象

対して24/7workoutは、複数項目の統合や、生年月日やフリガナ、メールアドレスの確認など極力項目を削っている印象

レイアウトはどちらも◎

今回はいずれものフォームも、ユーザーの気を散らせるような余計なコンテンツやリンクを含まないシンプルな構成でまとめられていました。
特にライザップのレイアウトのページには、リンクはヘッダーのロゴと運営会社のリンクの合計2つのみ。徹底的に余計なリンクが抑えられていました。

efo_double_ring RIZAP レイアウト

リンクはヘッダーとフッターにそれぞれ1つずつのみ。徹底して余計なリンクが排除されている

リンクはヘッダーとフッターにそれぞれ1つずつのみ。徹底して余計なリンクが排除されている

ok_blue 24/7workout レイアウト

フッターにはサイト共通のナビゲーションが存在するものの、もともとすっきりとしたレイアウトであり、ヘッダーにもリンクがないためフォームには適した構成

フッターにはサイト共通のナビゲーションが存在するものの、もともとすっきりとしたレイアウトであり、ヘッダーにもリンクがないためフォームには適した構成

どちらもしっかりとオファーコンテンツを用意

巷にはオファーコンテンツを用意しないフォームの方が多い中、今回比較の2フォームはいずれもしっかりとオファーコンテンツを用意していたのが印象的でした。
両社とも文字が多めでしっかり読ませる内容となっていました。文字だけの24/7workoutに対し、図版を用いている点でライザップのほうが少し見やすい印象です。

efo_double_ring RIZAP オファー

申込み後の流れにアイコンつきの図版を挿入しており、直感的に理解できるようになっています。

申込み後の流れにアイコンつきの図版を挿入しており、直感的に理解できるようになっています。

ok_blue 24/7workout オファー

語りかけるような独特の文章によるオファー。少し分量が多いため、文字サイズにメリハリや、図版を添えるとなお良いか

語りかけるような独特の文章によるオファー。少し分量が多いため、文字サイズにメリハリや、図版を添えるとなお良いか

ボタンが圧倒的に目立っていた24/7workout

今回印象的だったのは24/7workoutの送信ボタン。ボタンそのもののサイズ、文字の大きさ、色使いの派手さに加え、カーソルマークの横移動、ボタンが光るなどのアニメーションを加えてさらにボタンデザインが強調されていました。ユーザーに一切迷う余地を与えません。
ライザップのボタンは至って普通のフラットデザインですが、色味も充分に目立ち申し分ないと思います。

ok_blue RIZAP ボタン

シンプルなデザインですが色も目立ち、充分なボタン。進む/戻るの差別化もしっかりされている

シンプルなデザインですが色も目立ち、充分なボタン。進む/戻るの差別化もしっかりされている

efo_double_ring 24/7workout ボタン

大きめサイズ、太いウェイトの文字に「無料」の赤文字。さらに三角のカーソルが動いたり、ボタン全体を光らせるなどのアニメーションも。

大きめサイズ、太いウェイトの文字に「無料」の赤文字。さらに三角のカーソルが動いたり、ボタン全体を光らせるなどのアニメーションも。

次に、入力支援機能を見ていきます

機能名 RIZAP 24/7workout
ガイド

未入力の残り必須項目数などをリアルタイムで表示する機能

なし なし
離脱ブロック

ページを閉じようとするとアラートを出してOKしないと閉じることができない機能

なし なし
サブミットブロック

送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能

なし なし
項目ごとのアラート表示

入力についての説明をリアルタイム表示する機能

フォーカス時:ありエラー時:なし フォーカス時:なしエラー時:なし
項目ごとに入力完了後の動作 なし なし

エラーはいまひとつ

今回どちらのフォームも、エラー内容を別ページで表示し、戻って修正する形式でした。
この形ですと、どこにエラーがあるかをユーザーが覚えておき、ページに戻り、項目の場所を探して修正する。という手間が発生する上に、修正箇所の取りこぼしが発生する可能性もあります。
なるべくエラーは入力画面上の該当箇所に表示し、ユーザーがそのまま修正を開始できるようにするのが親切です。

さらにライザップの例では、エラー表示が確認画面と同じレイアウトになっており紛らわしいのと、修正のために再度入力画面に戻った場合にすべて入力内容がクリアされてしまっているようでした。
これはユーザーに多大なストレスを与えてしまう可能性があるので、すぐにでも入力内容を保持するようにしたいところです。

ng_bw RIZAP

エラー内容は確認画面のなかに表示されるため、ユーザーは画面を戻って修正しなくてはならない。 また、入力内容がクリアされてしまう問題も。

エラー内容は確認画面のなかに表示されるため、ユーザーは画面を戻って修正しなくてはならない。
また、入力内容がクリアされてしまう問題も。

ng_bw 24/7workout

シンプルなエラー表示ページ。必須項目が3つだけであるため、そこまでストレスはないものの、画面に戻る手間は手間

シンプルなエラー表示ページ。必須項目が3つだけであるため、そこまでストレスはないものの、画面に戻る手間は手間

ライザップには入力支援機能が

ライザップには、項目フォーカス時の背景色の色付け、補足メッセージの表示、住所の自動入力機能などの入力支援機能が導入されていました。
24/7workoutには入力支援機能がありませんでしたが、もともと項目数が少ないために入力支援機能がなくともそこまでストレスを感じることが少ないようにも思いました。

efo_double_ring RIZAP 入力支援機能

項目フォーカス時に項目へ色付け、吹き出しで入絵よくに対する補足(入力例など)が表示される

項目フォーカス時に項目へ色付け、また吹き出しで入力に対する補足(入力例など)が表示される

郵便番号を入力し終えると、自動的に住所が入力される機能

郵便番号を入力し終えると、自動的に住所が入力される機能

最後に、勝手にアドバイス

今回はプライベートジム2社の申し込みフォームについて比較分析を行いました。
それではいつも通り、最後に勝手なアドバイスをして締めくくりたいと思います。

RIZAP

デザインはわかりやすくまとまっていて素晴らしいのですが、エラーページのユーザビリティは早急に対応したいところ。
入力支援機能の導入はありますが、可能であればもう少し必須項目数を減らせると大幅にユーザーの手間を軽減できそうです。

24/7workout

同じくエラーのユーザビリティには配慮が必要です。
できれば必須項目がどこかを表示して、最低限どこに入力すればよいかユーザーに知らせるようにしましょう。
また、フォーム後半はデフォルト値をなくし、任意項目として見せるとユーザーにやさしいかもしれませんね。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です