学ぶアイコン学ぶ > 身近な事例から学ぶデザイン

ファイナルファンタジーVIIから学ぶチュートリアル設計

Tom Maguire

TomはUKのeコマース会社、Music Glueのプロダクトマネージャー。 @tomdmaguire

この記事はThe UX Boothからの翻訳転載です。配信元または著者の許可を得て配信しています。

Final Fantasy’s Guide to Onboarding (2016-03-08)

1997年の12月25日、私は最愛のメガドライブを卒業し、初代プレイステーションを手に入れました。それから数ヵ月の間、数えきれないほどの時間を史上最高のRPGであるファイナルファンタジーVII(以下FFVII)に費やしました。

それから約20年後にあたる去年、FFVIIはiPadでリリースされ、再度プレイしたときに全く新しい観点からこのゲームを再評価することとなりました。特にオンボーディング(サービスの初期導入プロセス)に関しては学ぶ点が多かったです。


FFVIIに詳しくない人向けに説明すると、このゲームは主人公クラウド・ストライフと反乱軍の仲間が、暴虐な巨大企業から星を守るために戦う一方で、力におぼれた宿敵、セフィロスを追い詰めていくストーリーです。

ノスタルジーに浸ったりながらiPad版におよそ44時間も没頭するうちに、私は10歳の頃と同じようにFFVIIを大好きになりました。しかし、以前とは異なり、より批評的なUX観点からゲームの体験を見ていました。

この記事では、FFVIIのユーザーを没頭させるテクニックについて迫ります。Webやモバイルのアプリケーションの世界でも、このテクニックは適用されると思っていますので、さっそく見ていきましょう。

第一印象に力を入れる

このゲームは、最初の舞台である魔晄都市ミッドガルをユーザーに紹介するムービーから始まります。ミッドガルのさまざまな場所がズームしたり、引きの映像になったりしながら流れていき、最後に電車を降りる場面で私たちは初めて主人公を目にします。この時点から、ゲームが始まるのです。

このオープニングシーンは、ビジュアル的、オーディオ的に魅力的であるだけではなく、効果的にゲームの背景をユーザーに伝え、また、これから関わっていくもののスケールの大きさを感じさせるのです。

オンボーディングの体験デザインには、第一印象の良さが欠かせません。ユーザーに安心感を与え、かなり早めの段階からユーザー自身が関わっているものを理解してもらうことが重要です。もしプロダクトとの初めのインタラクションが退屈だったり、混乱するものであったり、エラーが起こりやすかったりすれば、ユーザーはそのゲームをやめてしまうことでしょう。

また、オンボーディングはユーザー登録の前であるというのも、忘れてはいけない重要なことです。Webサイトのホームページ上、マーケティングキャンペーン、オンライン広告、あるいは他のさまざまな場面であれ、オンボーディングは第一印象が重要なのです。

使用例

DIYのECプラットフォーム、 Shopifyのホームページは、スタイリッシュなデザイン、わかりやすい価値提案、そして明確な行動への呼びかけを一目で強く印象付けるデザインをしています。

洗練されたシンプルなデザインは、プロの空気感や価値提案を感じさせます。また、ユーザーにそのプロダクトが提供するものを明確に伝える情報量のある文章と、アクションボタンに呼びかける魅力的な言葉で、どこから始めればよいのかを的確にユーザーに伝えるのです。

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

チュートリアルはインタラクティブにする

ミッドガルの話に戻ると、主人公は電車を降り、その後、ユーザーはすぐさま最初のバトルに巻き込まれます。バトルはFFVIIの肝心な要素であり、物語の終了まで幾度となく繰り広げられます。バトルの目的は、武器攻撃と魔法を駆使して敵を倒すことにあります。

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

最初のバトルでは、説明がありません。その代わり、FFVIIではバトル自体をトレーニングとして活用しています。この時点でユーザーが使うことのできる限られた数のコマンドで、ユーザーはバトルの流れを直感的に理解し、学ぶことができます。

このテクニックはオンボーディングではぜひ真似したい部分です。ほとんど読まれることのない説明文よりも、実際のコンテンツを使った導入のほうが、「教えず、見せる」ことでユーザーに実際に学んでもらうことができます。

使用例

最近のニュースを探すという新進気鋭のSNSであるPeachは、アプリの特徴を伝えるためにインタラクティブなチュートリアルを採用しています。

登録を完了した後に、ユーザーは「Hello!」と最初に投稿する方法を教わります。これに従うと、画像のアップロード、お絵かき、Gifの投稿方法などを学ぶための一連のステップが用意されています。ユーザーにアクションをする機会を与えることで、のちにそれらのアクションをどのように行うのか思い出してもらえる可能性が高まります。

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

早めの成功体験と進捗状況を演出する

初めてのバトルの後、画面には取得した経験値(EXP)、能力値(AP)、これら2つの値についての説明の3つが表示され、それぞれのキャラクターの成長に影響を与えるということがわかります。

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

例えば、各キャラクターはバトルで十分なEXPを溜めると、「レベルアップ」できます。

ゲームデザイナーが初期のEXPをうまい具合に調節し、プレイヤーは初バトルに勝利すると初のレベルアップを迎えるようにできています。これにより、EXPのシステムを学べるとともに、プレイヤーは達成感をすぐに味わうことができるのです。

これはアプリのオンボーディングにおいて、よく使われるテクニックです。ユーザーに早めの成功体験を味わってもらうことで、はじめのステップを完走してもらい、さらにプロダクトを使い続けてもらえるよう後押しをするのです。また、プロセス全体のどのあたりにいるのかを示すことで、ユーザーがプロセスを完走する可能性が高まるでしょう

使用例

Couchsurfingは、旅行者が無料の宿泊場所を探すための、旅行者とホストを繋ぐマッチングサービスです。Couchsurfingのオンボーディングのプロセスは、早期の成功体験と進捗表示のいい例です。登録後、ユーザーは遂行しなければならないタスクや、それらのタスクがどのように進捗に影響するのかが記載された「プロフィールの完成度」を提示されます。

登録プロセスの際、ユーザーは必ず最初にメールアドレスを認証しなければなりません。つまりこれはすべての新規ユーザーがこの画面を見るとき、最初の項目を既に達成済みとなっていることを意味します。すでにプロセスの10パーセントが終わっているという、とてもポジティブなメッセージがもらえるということなのです。

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

データをとるタイミングにこだわる

初バトルのすぐあと、主人公(この時点ではまだ「元ソルジャー」と表示されています)の名前を聞かれ、ユーザーは主人公の名前を自由に入力することができます。

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

この名前入力のフローは、ゲームの一番最初に持ってくることもできたはずです。しかし、その代わりに、よりふさわしく、より重要な「内容に関係のある」タイミングを選んだのです。

ユーザーから情報を収集するとき、ユーザーに違和感を覚えさせずに進めることが重要です。仕組み上の効率よりも、文脈に沿ったタイミングを見計らうべきです。ユーザーの観点からみると、そのほうが初回登録の敷居が格段に下がるのです。

使用例

リアルタイムなメッセージサービスである Slackのアカウントを作るとき、初めのステップはメールアドレスを入力することです。

従来のサービスなどでは、ユーザーはこの段階でパスワードを入力する必要がありました。しかし、Slackでは登録のプロセスの流れをスムーズにするために、データの収集を後回しにしているのです。それどころか、アプリを開いてすぐに、ユーザーへ次のメッセージが書いてあります。

「現在、パスワードの設定はしませんが、ご安心ください。後程、パスワードを作るためのリンクをメールにて送信いたします。」

デフォルト値を活用して入力をスマートにする

主人公に名前をつけようとすると、すでに文字が入力してあることに気づくでしょう(下図参照)。主人公の本当の名前はクラウドなのです。

このように、デフォルトで入力してあることにより、プレイヤーがキャラクターの名前を変更することに興味がない場合、入力のプロセスを短縮することができます。

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

ユーザーが入力しなければならないデータ量を減らすために、このテクニックはほとんどのオンボーディングに適用できます。

デフォルト値はもっとも普遍的な値が入力されているべきであり、必ずユーザーが入力するであろう部分にのみ適用するということが重要です。

ユーザーがデフォルト値を気に入らないとき、自分の好きなデータにすぐ変えられるようにすることも必須です。上記のキャラクターの名前の例だと、ユーザーは文字を消すための「Delete」ボタンがスクリーンの右端にあり、好きな名前を入力する前にそれを5回選択しなければなりません。これは、FFVIIのオンボーディングにおける間違いの一つです。

使用例

Music Glue(音楽業界に焦点をあてたECプラットフォーム)は、アーティストの登録フォームがとてもスマートです。

まずプロフィールのURLは、入力したアーティストの名前から動的に生成されます。

次に通貨設定のドロップダウンは、ユーザーの現在位置からあらかじめ検出され、選べる形になっています。こうすることで、登録のプロセスが大多数のユーザーにとって非常にシンプルになるのです。3つの必要な情報を提供するためにユーザーが入力しなければならないのは、実質アーティスト名一つだけなのです。

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

まとめ

プロダクトとの初めての接点を素晴らしいものにするため、オンボーディングのデザインには、十分な時間と労力を費やしましょう。この記事に列挙されているテクニックを使ってみたり、オンボーディングに関する他の資料も検索してみたりしましょう。

オンボーディングに興味がある方は、Sam Hulik氏のUserOnboard(幅広いサービスについてのケーススタディが載っています)というサイトをぜひ調べてみてください。このサイトで、Sam氏はTwitter、NetflixそしてApple Musicといった有名なアプリケーションのオンボーディングを、洞察力にすぐれ、かつ、ウィットに富んだナレーションで分析しています。また、UX Archiveでも、数多くのサービスのオンボーディングのフローが多く載っています。

ここまで読んでくださり、ありがとうございました。この記事がお役に立ちますように。

ゲームになじみのある読者の方々、私の美しい金チョコボのスナップでお別れです。『クエッ!』

http://www.uxbooth.com/articles/final-fantasys-guide-to-onboarding/

 

イベント