はじめまして。「ガールフレンド(仮)」のUIデザインを担当している西戸(@satomi0403)です。
「ガールフレンド(仮)」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲームです。ちなみに「(仮)」も含めて正式タイトルです(笑)。
今回はその「ガールフレンド(仮)」における、運用デザインについてお話をさせていただきたいと思います。
クリスマス、お正月、節分、チアリーダー、ネココス、バレンタイン等等。
そのテーマに沿った世界観をロゴ等で表現します。
毎回違ったテーマとキャッチフレーズに、きちんとロゴを付けてあげる事で、新鮮さと、特別感、そして楽しさをユーザーに感じてもらえるようにします。
ただし、ガールフレンドの世界観から逸脱しないように制作するのがポイントです。
ロゴだけ見てもカードの世界観が伝わってわくわくできるような工夫をしています。
①イベントの世界観を優先して伝える
②ユーザーにとってオトク情報を優先して出す
※この二つをどう出し分けるかというと、
上記で作ったようなロゴがある時、(ガチャ追加時、イベント)は①の世界観を前面に押し出すようにしています。特別感を感じてもらう為、オトク情報が一緒にあったとしても、世界観を優先します。
逆に、そういったものがなければオトク情報をとにかくめいっぱい出してあげます。
またこの２パターンを分ける事で、多く並ぶバナーの差別化をはかります。
パターン1 イベントの世界観を伝える
例）にゃんこのお願いキューピッド
①世界観→にゃんこのお願いキューピッド
②オトク情報→追加SR4倍
③オマケ情報→期間限定
パターン2 ユーザーにとってオトク情報を優先して出す場合
例）2012年大感謝キューピッド
①オトク情報→元気炭酸12個
②世界観→2012年大感謝キューピッド
③オマケ情報→10連限定
一番大事な「元気炭酸12個」を目立たせるため、他の情報は小さな文字だったり、イラストのみで表示しています。
強弱をつけずにたくさん情報を載せすぎると、大事な事が一瞬で頭に入ってこないのでNGです。
表現の方法は様々です。
例えばこのように、わくからはみ出したように見せたり、
gifアニで「レア鬼出現」のところを点滅させました。その理由として、要素が多くてごちゃごちゃして静止にすると情報の優先度がわかりづらいということと、また、世界観を大事にした上で大事な情報として目立たせるためです。
ここですべての情報を提供しますが、情報を羅列するだけではありません。デザインの見せ方のポイントが３つあります。
①上に大事な情報を持ってくる
②要点で区切る
③文字は少なく、目立たせたい情報は大きく表示
例）にゃんこのお願いキューピッド
①ヘッダー
世界観を全面に出し、ページのタイトルを表します。女の子達はみんな、バラバラの状態で描かれているので、距離感や角度等気をつけて、同じ空間にいるようにみせたり、配置を施します。
②ボタン
ファーストビューに一番大事なボタンを配置します。これはとても重要なことで、ユーザーを迷わせないようにするためと、煩わしさをなくすためです。
③報酬
メインでもらえるものを一番大きく配置します
④一覧
もらえるものを一覧で見せます。
⑤もらえるおまけ
オマケのオトク情報を記載します。文字をたくさん書くより、絵やメインとなる文字を端的において、わかりやすくする工夫をしています。
この他にも、キューピッドのページ自体にも、上部にLPを凝縮したヘッダーをおいたり、アイコンをイベント用に変更して、変化を感じてもらう工夫をしています。
この他にもイベントの開催や、常にユーザーがより楽しく使いやすいゲームになるべく、日々UIの改善や、機能追加を行っております。
最後までお読みいただき、ありがとうございました。
ガールフレンド(仮)はこちらから⇒http://vcard.ameba.jp/
「ガールフレンド(仮)」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲームです。ちなみに「(仮)」も含めて正式タイトルです(笑)。
今回はその「ガールフレンド(仮)」における、運用デザインについてお話をさせていただきたいと思います。
ちなみに運用とは
ガールフレンドは2012年11月にリリースされました。晴れてリリースされたサービスですが、ユーザーをいかに楽しませられるか、いかに飽きずに続けてもらえるか、常に改善と新しさが求められます。それに対して、ゲームをよりよくしていく為に行う事を運用と呼びます。
運用デザインの主なものは下記の点です。
・既存ゲームの改善と機能追加
・新カード(ガチャ)の追加
・イベントの開発と運用
今回はその中から「新カード(ガチャ)の追加」を、デザインの視点からいかにユーザーをわくわくさせるような魅せ方ができるかを私なりにご説明させていただきます。
カード追加やイベントをもりあげるロゴ
ガールフレンドでは登場人物の女の子が色々なテーマに沿って登場します。クリスマス、お正月、節分、チアリーダー、ネココス、バレンタイン等等。
そのテーマに沿った世界観をロゴ等で表現します。
毎回違ったテーマとキャッチフレーズに、きちんとロゴを付けてあげる事で、新鮮さと、特別感、そして楽しさをユーザーに感じてもらえるようにします。
ただし、ガールフレンドの世界観から逸脱しないように制作するのがポイントです。
ロゴだけ見てもカードの世界観が伝わってわくわくできるような工夫をしています。
一瞬で伝えるバナーの制作
ゲームの情報を伝える上で欠かせないゲーム内バナー
①イベントの世界観を優先して伝える
②ユーザーにとってオトク情報を優先して出す
※この二つをどう出し分けるかというと、
上記で作ったようなロゴがある時、(ガチャ追加時、イベント)は①の世界観を前面に押し出すようにしています。特別感を感じてもらう為、オトク情報が一緒にあったとしても、世界観を優先します。
逆に、そういったものがなければオトク情報をとにかくめいっぱい出してあげます。
またこの２パターンを分ける事で、多く並ぶバナーの差別化をはかります。
パターン1 イベントの世界観を伝える
例）にゃんこのお願いキューピッド
①世界観→にゃんこのお願いキューピッド
②オトク情報→追加SR4倍
③オマケ情報→期間限定
パターン2 ユーザーにとってオトク情報を優先して出す場合
例）2012年大感謝キューピッド
①オトク情報→元気炭酸12個
②世界観→2012年大感謝キューピッド
③オマケ情報→10連限定
一番大事な「元気炭酸12個」を目立たせるため、他の情報は小さな文字だったり、イラストのみで表示しています。
強弱をつけずにたくさん情報を載せすぎると、大事な事が一瞬で頭に入ってこないのでNGです。
表現の方法は様々です。
例えばこのように、わくからはみ出したように見せたり、
gifアニで「レア鬼出現」のところを点滅させました。その理由として、要素が多くてごちゃごちゃして静止にすると情報の優先度がわかりづらいということと、また、世界観を大事にした上で大事な情報として目立たせるためです。
全部伝えるわかりやすいランディングページ
バナーという看板から入って来たら、メニューを見せてあげる場所がこちらランディングページ、通称「LP」です。ここですべての情報を提供しますが、情報を羅列するだけではありません。デザインの見せ方のポイントが３つあります。
①上に大事な情報を持ってくる
②要点で区切る
③文字は少なく、目立たせたい情報は大きく表示
例）にゃんこのお願いキューピッド
①ヘッダー
世界観を全面に出し、ページのタイトルを表します。女の子達はみんな、バラバラの状態で描かれているので、距離感や角度等気をつけて、同じ空間にいるようにみせたり、配置を施します。
②ボタン
ファーストビューに一番大事なボタンを配置します。これはとても重要なことで、ユーザーを迷わせないようにするためと、煩わしさをなくすためです。
③報酬
メインでもらえるものを一番大きく配置します
④一覧
もらえるものを一覧で見せます。
⑤もらえるおまけ
オマケのオトク情報を記載します。文字をたくさん書くより、絵やメインとなる文字を端的において、わかりやすくする工夫をしています。
この他にも、キューピッドのページ自体にも、上部にLPを凝縮したヘッダーをおいたり、アイコンをイベント用に変更して、変化を感じてもらう工夫をしています。
最後にまとめ
長くなりましたが、以上がガールフレンド(仮)における運用デザインの一部です。この他にもイベントの開催や、常にユーザーがより楽しく使いやすいゲームになるべく、日々UIの改善や、機能追加を行っております。
最後までお読みいただき、ありがとうございました。
ガールフレンド(仮)はこちらから⇒http://vcard.ameba.jp/
