ユーザーエクスペリエンス設計
利用開始時の操作性は、アプリにとって最も重要な部分の1つです。使用開始時の操作性を向上すると、90%を超えるコンバージョン率も見込め、より積極的な利用が促され、収益性にもつながります。
Facebookログインを使用すると、アプリの利用開始がよりスピーディかつ簡単になり、さらにパーソナライズされた、有意義な操作性を提供できます。このドキュメントでは、Facebookログインで快適な操作性を実現するためのヒントと考慮事項を紹介します。
1. ユーザーにログインを促す前に価値を提示する
利用者にログインを求めるタイミングを決める際は、利用者があなたのアプリの価値を認め、情報を提供してもよいと思えるのはどのタイミングなのかを考えてみるとよいでしょう。
このタイミングは、アプリのダウンロード前の段階ですでに決まっていることもありますが、アプリの設計を工夫することで利用者の心を動かすことも十分可能です。
以下は、利用者のログインを増やすための設計のポイントです。
- アプリの内容を明確かつ簡潔に説明する
- ログイン後に利用できるコンテンツを少しだけ見せる
- 新しいユーザーエクスペリエンスを提供する
- アカウントがなくてもアプリを試せるようにする
アプリの内容を明確かつ簡潔に説明する
そのアプリで何ができるのか、説得力のある言葉で簡潔に説明します。ユーザーがアプリをダウンロードしてから時間が経っていたり、アプリストアで読んだ概要を忘れていたりする可能性もあります。
ログイン後に利用できるコンテンツを少しだけ見せる
この例の背景写真のように、ログイン後に利用できるコンテンツを、ログイン前に少しだけ見せます。詳細に見せる必要はありません。Pinterestのように、ぼかしが入ったボードの画像を表示するだけでも利用者のログインが増えることもあるのです。
新しいユーザーエクスペリエンスを提供する
アプリで最適なエクスペリエンスを得るために補足説明が必要な場合は、ログインボタンの上に詳しい手順付きのデモを表示することもできます。このようにすることで、利用者はすぐにログインすることも、ログインする前に詳細を確認することも選択できます。
ログイン前にアプリを試せるようにする
ログインを促す前にアプリを使用してもらい、内容を確認してもらうことをおすすめします。ZulilyなどのEコマースアプリでは、利用者が精算まで進んだときに初めて、ログインを要求するようにしています。
2. 不要な手順をなくす
不要な手順を減らすことは、コンバージョン率を上げる最も効果的な方法の1つです。
Facebookログインボタンを表示するために「ログイン」や「登録」などのボタンをタップさせるのは避けましょう。Facebookログインでは、このような手順は不要です。利用者は、アカウントがあるかどうかを意識する必要もありません。
また、Facebookでログインした利用者にユーザーネームやパスワードの作成を求めないようにします。Facebookでログインする理由のうち最も多いのは、「早くて簡単で、パスワードを入力しなくて済むから」なのです。Facebookでログインした後はなおさら、利用者はユーザーネームやパスワードの作成をわずらわしく思うはずです。
3. Facebookログインボタン
Facebook SDKに付属しているFacebookログインボタンは統合が簡単で、一貫性のあるデザインや使用感を提供するための説明が含まれています。
アカウント作成を有効にするため、またFacebookログインのため、望ましいラベルは文脈に応じて「Facebookで続行」や「Facebookでログイン」のいずれかです。
承認されている「Facebookでログイン」の用例
承認されている「Facebookで続行」の用例
承認されている「[名前]としてログイン」の用例
望ましいのは上記のログインデザインであり、それらは当社のレビュー担当者により承認されます。しかし、実際のニーズに固有のバージョンをビルドする必要がある場合、以下のガイドラインに従う必要があります。
ロゴ
認知度を高めて信頼を築くために、Facebookブランドリソースセンターで入手可能な承認済みの「f」ロゴを常に使用してください。
ログインボタンのデザインで「f」ロゴを使用する際は、コールトゥアクションの前にロゴが表示されるようにします。「「f」ロゴでログイン」のように、「f」ロゴをコールトゥアクションの一部として使用しないでください。
色
色は常に、利用者に一目で認識してもらう有効な手段となります。使いやすさの観点からは、ボタンの内容をすばやく認識できれば、より速くボタンをタップでき、よりシームレスな操作につながります。
ボタンの色は、白とFacebookブルー(5890FF)です。世界中の利用者がFacebookログインを話題にする際、「ブルーボタン」と呼ぶことが多いようです。Facebookブルーを使用できない場合は、白黒にしてください。
FACEBOOKブルーの色値
- CMYK Coated: 83 / 52 / 00 / 00
- CMYK Uncoated: 77 / 36 / 00 / 00
- PMS 2727C
- PMS 2382U
- Hex #1877F2
- R = 24 G = 119 B = 242
テキスト
望ましいラベルは、「Facebookで続行」または「Facebookでログイン」のうち、文脈に適している方です。コールトゥアクションで「f」ロゴを使用する際は、Facebookブランドリソースセンターからダウンロードできる公式バージョンを使用してください。
コールトゥアクションのコピーはログインボタンの内部に配置し、ボタンの外には配置しないようにしてください。
フォント、フォントの太さ、カーニングなどは、アプリに最も適したものを選び、読みやすさを考慮して最適化してください。
配置
ログインボタンは、できるだけすばやく簡単に認識でき、タップできるように設計します。モバイルデバイスでは、親指の近くに配置し、簡単にタップできるように十分な大きさにしてください。単純なようですが、大きいボタンは小さいボタンよりもコンバージョン率が高いことがわかっています。
ボタンのサイズを変更できるようにさまざまなサイズの「f」ロゴが用意されていますが、比率とタイポグラフィのスタイルは維持する必要があります。
必須事項と禁止事項
必須: Facebookブランドリソースセンターで提供されている承認済みの「f」ロゴを使用ガイドラインに沿って使用してください。
必須: ログインボタンでは、望ましいラベルである「Facebookで続行」または「Facebookでログイン」を文脈に応じて使用し、コピーがボタンデザインの内部に表示されるようにしてください。
禁止: 「f」ロゴは、デザイン、サイズ、色など、いかなる変更も加えないでください。技術的な制約により正しい色を使用できない場合は、モノクロで使用してください。
禁止: 適切なコールトゥアクションを伴わないボタンで「f」を使用しがないでください。望ましいコールトゥアクションは「Facebookで続行」または「Facebookでログイン」です。
禁止: コールトゥアクションのコピー(「Facebookで続行」など)をログインボタンの外に配置しないでください。
4. アクセス許可
必要なアクセス許可のみをリクエストする
求められるアクセス許可が少なければ少ないほど、利用者は安心してアクセス許可を付与できます。Facebookの分析では、一般的に、リクエストするアクセス許可の数が少ないと、コンバージョン率が上がることがわかっています。
利用者にアプリを試す機会を提供し、その後いつでも追加のアクセス許可をリクエストできます。
さらに、リクエストするアクセス許可の数が少なければ、アプリのログインレビューを申請しなくて済む場合があります。ログインレビューの申請は、public_profileでもemailでもないアクセス許可をリクエストする場合にのみ必要になります。
状況に応じたアクセス許可をリクエストし、その理由を説明する
リクエストしたアクセス許可が、アプリが提供するサービスの向上に必要な情報であることを理解できると、利用者がアクセス許可のリクエストを承認しやすくなります。アクセス許可のリクエストは、利用者が特定のアクセス許可を必要とするアクションをアプリ内で実行しようとしたときに開始します。
たとえばFacebookアプリは、利用者が自分のステータスを更新しようとして位置情報ボタンを明示的にタップしたときに限り、位置情報サービスをリクエストします。
5. ログアウトの方法を提示する
利用者がログインしたら、ログアウト、アカウントの解除、アカウントの完全削除の方法も提示する必要があります。これは利用者への配慮であり、Facebookのログインに関する開発者ポリシーの要件でもあります。
たとえば、デートアプリのTinderでは、他の利用者から特定されないためにプロフィールカードを非表示にできるだけでなく、ログアウトしたりアカウントを完全に削除したりすることも選択できます。
6. テストと測定
どれほど優秀なデザイナーでも、初めからスムーズに使用開始時のフローを生み出せるわけではありません。快適な使用感は、何度も試行を繰り返して、練り上げられた設計とテストを行った結果、実現されます。
公開前に、利用者がどのような操作をしてコンテンツを表示させたのかを把握するために、操作性の品質テストを実施します。操作性向上のために型式通りにする必要はありませんが、人々の操作フローを観察するようにしてください。
品質テストに加え、利用者がプロセスを完了するかどうかや、総合的なコンバージョン率を把握するためにアナリティクスサービスを利用してください。ベストプラクティスに従って作成されたアプリのコンバージョン率は90%を超えることがあります。