会員限定コンテンツ、見せ方ひとつで反応が変わるUIの話
会員限定コンテンツは、「何を隠すか」だけでなく「どう見せるか」でユーザーの反応が大きく変わります。
続きが読めないことを示すUI、動画の視聴条件、ログイン状態の見せ方など、ひとつひとつの見せ方が、登録のハードルを下げることも、逆に離脱を招くこともあります。
会員限定という制約を「不便さ」として感じさせず、「価値がある証拠」として伝えられるかどうかが、UI設計の分かれ目です。
目次
「続きを読む」で会員登録を促す
コンテンツの途中から先を非公開にし、「続きを読むには会員登録」と促す手法は広く使われています。ただし、見せ方によって印象は大きく変わります。
- 唐突に文章が途切れると、不親切な印象を与えやすい
- 文章がフェードアウトするようなグラデーション処理を入れると、「ここから先がある」ことが視覚的に伝わりやすい
- 「残りはあと◯◯文字」「この続きでは◯◯について解説」など、先にどんな価値があるかを一言添えると、登録の動機になりやすい
ポイントは、「読めない」ではなく「続きがある」ことを伝えるという見せ方です。単に隠すだけでは、ユーザーは「損をした」という感覚になりやすく、登録ではなく離脱を選びやすくなります。
動画コンテンツも「見る前」の見せ方が重要
動画を会員限定にする場合も、考え方は文章と同じです。
- サムネイルや冒頭数秒だけを非会員にも見せることで、内容の見当がつき、登録の動機になる
- 再生時間や内容の概要(「◯分でわかる◯◯」など)を明記すると、視聴のハードルが下がる
- いきなり再生ボタンを押したら会員登録画面に飛ばされる、という体験は「だまされた」感につながりやすいため避けたい
動画は文章以上に「見てみないと価値が分からない」コンテンツです。だからこそ、視聴前にどれだけ興味を引けるかが、会員登録への転換に直結します。
会員登録・ログイン維持のUIは、利用実態に合わせて設計する
会員登録や会員関連のボタンは、デザインの見た目だけでなく、そのサービスのログイン維持期間(ログインしたままどれくらい保持されるか)を踏まえて設計することが大切です。
- ログイン維持期間が長いサービスであれば、ログアウトボタンを目立たせる必要性は低い(頻繁に使う機能ではないため)
- 逆に、頻繁にログイン・ログアウトを行う利用シーン(共用端末での利用など)を想定するなら、ログアウト導線は分かりやすい位置にあるべき
- 「よく使われる操作を目立たせ、あまり使われない操作は控えめにする」という優先順位づけの基本に沿って考える
見た目の一貫性やデザインルールだけでUIの目立たせ方を決めるのではなく、実際の利用頻度や利用シーンに基づいて優先順位をつけることが、使いやすさにつながります。
会員登録前に「価値」をどう見せるか
上記に共通するのは、会員登録の前に「登録すると何が得られるか」を具体的にイメージできるかどうかです。
- 会員限定コンテンツであることを、一覧表示の時点でバッジやアイコンなどで示しておくと、クリック後の期待値のズレを防げる
- 「会員限定」という言葉だけでなく、「会員限定:業界データの詳細版」のように、得られる価値を具体的に示す
- 登録フォームへの導線は、コンテンツを読んでいる文脈を保ったまま(別のデザインに急に切り替わらないように)提示すると、離脱が起きにくい
非会員への見せ方は「制限」ではなく「入口」として設計する
会員限定コンテンツの目的は、非会員を締め出すことではなく、会員登録のきっかけをつくることです。
- 非会員にもある程度の情報を見せることで、検索エンジンからの流入や、シェアされた際の第一印象を保てる
- 全てを隠してしまうと、「何のサイトか分からない」まま離脱されるリスクがある
- 会員向け・非会員向けでコンテンツの見せ方に差をつけつつ、両方にとって迷わないUIにすることが理想
「隠す」ことと「見せる」ことのバランスを設計段階で意識しておくと、会員獲得と情報発信の両立がしやすくなります。
LYZON Designのクリエイティブ・UI/UX
デザインひとつでCVRが変わります
見た目だけでなく成果につながるUI/UX設計を提供。LYZON Designのサービス詳細はこちらからどうぞ。
多言語・グローバル展開のUXに関するよくある質問
Q1. 「続きを読む」の表示位置は、どこで区切るのがいいですか?
明確な正解はありませんが、記事の要点や結論の手前で区切ると、続きへの興味を引き出しやすくなります。冒頭数行だけで区切ると価値が伝わりにくく、逆に大部分を見せてしまうと登録の動機が弱くなるため、バランスを見て調整するのがおすすめです。
Q2. 動画の冒頭を非会員に見せることに抵抗があります。何秒くらいが目安ですか?
決まった秒数はありませんが、内容の雰囲気や質が伝わる範囲(全体の10%程度)を目安にすることが多いです。長すぎると会員登録の動機が弱まるため、「興味を引く」ことを目的とした長さに留めるのがポイントです。
Q3. ログアウトボタンは目立たせない方がいいのでしょうか?
一概には言えません。ログイン維持期間が長く、ログアウトの利用頻度が低いサービスであれば目立たせる優先度は下がります。一方、共用端末での利用が想定される場合は、セキュリティの観点からも分かりやすい位置に置くべきです。サービスの利用シーンに応じて判断してください。
Q4. 会員限定であることは、一覧ページのどこで示すのがいいですか?
サムネイルやタイトル付近に、会員限定であることを示すバッジやアイコンを添えるのが一般的です。クリックしてから初めて会員限定だと分かる設計は、期待値のズレによる離脱を招きやすいため避けたほうがよいでしょう。
Q5. 非会員向けにどこまでコンテンツを見せるべきですか?
全て見せると会員登録の動機が弱まり、逆に何も見せないと検索流入やシェア時の第一印象が悪くなります。コンテンツの要点や導入部分は見せつつ、核心部分を会員限定にするなど、バランスを取るのが基本的な考え方です。
LYZONのWebデザイナー マネージャー。社内案件ではディレクターも担当。
Webデザイン・コーディングとの比率は半々。2015年入社。
ロックンロールを深く愛している。
