見出し画像

ガチャ告知リニューアル秘話　〜アバターをもっといい感じに見せたい〜

REALITY

こんにちは！REALITYのガチャアイテム企画・バナー制作など担当している焼肉定食です。
REALITYのアバターガチャですが、最近バナーやお知らせページのデザインがリニューアルされたことにお気づきでしたでしょうか？

▲ちょっと前のTwitterバナーとお知らせページ
▲最近のTwitterバナーとお知らせページ

・・・というのも、これまでのガチャバナーは「見た瞬間REALITYのガチャだとわかる」といった利点のある、フォントや配置などの基本デザインを固定したバナーで運用されていました。

色や背景は異なりますが、基本的な配置やデザインは固定です

これはこれで運用上の利点は大きかったのですが、どんどんデザインやコンセプトの幅が広がり多様化していくREALITYのガチャについて、社内でもじわじわとある機運が高まっていました。

ガチャバナーをもっとかっこよくしたい・・・！
アバターを・・・なんかこう・・・いい感じに見せたい・・・！

そんな語彙力のないソワソワした何かを感じる最中、プロダクトデザイナーの超簡単さんとPMのむくどりんさんから「お知らせページのデザイン改善」の話をいただき、４周年のこの機会にアバターをより魅力的に見せる「ガチャ告知のクリエイティブ刷新プロジェクト」が始まりました。

1.必要な情報と工数の洗い出し

「ガチャバナーや告知をいい感じにしよう！」ということで、最初に超簡単さんから既存の画像を利用したお知らせページ構成のサンプル画面をいただきました。

※画像はサンプル用に作成した架空のキャンペーンです

  • アバターの全身を見せるため、縦長の画像を入れる

  • スライドさせることで「おすすめコーデ」の画像も複数枚入れる

  • ガチャサムネイルを利用して、おすすめアイテムを多数紹介する

  • エモートなどがあれば動画を入れる

と、サンプル画面の時点で既存のお知らせページ（Twitterバナーとコーデ画像２枚だけ・・・）よりも情報量がぐぐっとアップしており、お二人の手腕に感動しながら、既存のバナー制作（チェック含め２〜３営業日程度）から工数が爆増しないよう注意しつつリニューアルしていくことにしました。
工数の爆増とは、極端に言うと「バナーのためだけに10営業日かけて背景を描き下ろしました」「ページ用のパーツや新しいサイズのバナーを20点増やしました」みたいなことは避けようね、といった程度の決まりで、デザインには当然全力を尽くしていきます！（闇雲にクオリティだけを求めていくと無限にブラッシュアップできてしまうので、工数や締め切りなどで出来る範囲を決めていくのは大切です）

2.デザインの要素

さあ！おしゃれなバナーを作ろう！と意気込んだのはいいのですが、焼き肉定食は生粋のゲーム業界出身バナーデザイナーのため、「なんかいい感じのおしゃれなデザイン」の要素を紐解くべく、ファッションや書籍・印刷物のデザイン研究を始めました。
すると、ゲーム系バナーとファッション系バナー（および書籍デザインなど）とで、思っていた以上に正反対な要素の違いが見えてきました。

ゲーム系を意識したバナー（というか普段のバナーの作り方）
ファッション系を意識したバナー

※何となくこういう傾向のデザインを多く見かける、というだけでどちらも必ずこう！と偏見で決めつけるものではありません
※この記事のために作った架空のバナーなので内容はお気になさらず・・・

画像に記載の通り、普段のバナーはとにかく「情報」をわかりやすく伝えるため文字の可読性を最優先し、日本向けであれば基本的には日本語を使ったり、立体感をつけて目立たせることで興味を持ってクリックさせようという魂胆があります。
対して、ファッション系のバナーは「人物や画面の美しさ」を惹きに制作されたものを多く見かけます。文字はあまり目立たず訴求内容も省略されていますが、同じアバターでもおしゃれな雰囲気は伝わりますよね。
必ずしもどちらが正しいということはなく、それを目にする場面によって使い分けることが大事なので、ガチャのアバターをより良く魅せるためには文字情報を優先するのではなく、後者のような手法を選んでもいいのではないかと考えました。
もちろん前者の手法を選んでも、両者を混ぜても、まったく他の手法で作ってもOKですし、とりあえず「ガチャバナーはこうでなくてはならない」という概念を一度ぶち壊してみることにしました。

3.コンセプトとストーリーのヒアリング

（前置きが長くてすみません・・・）
ガチャはそれぞれ「コンセプト」を決めてから企画をスタートさせています。これは過去の記事でも少し触れているのでよかったらご覧ください！

ガチャごとのバナーデザインについてもコンセプトをより上手く伝えるため、「ガチャのストーリーを作成する」というフローをアバター制作チームおよび運用チームにお願いすることにしました。出来上がったストーリーを見て世界観に想いを馳せながら、バナーを制作していきます。
各ガチャのエモいストーリーはお知らせページに掲載されているので、是非読んでみてください！！

TOP画像の下にあります！

そうしてリニューアルしたバナーデザインの一部がこちらです！

「ネイル」を見せたかったので、アバターの手をインパクトある構図で載せました。普段なかなか見られない背中や小物もピックアップ！これまでのガチャバナーでは出来ない細部の魅力を伝えられています。
こちらはバナー制作チームのデザイナーに作ってもらいました！思い切ってストーリーを画像に全て載せることで物語性がより伝わっています。
右下の大型犬はデザイナーの手描き！左のM型アバターは大型犬が擬人化して秘密の書庫へと案内しているのだそうです（天才か？）
リニューアル前の同ガチャの画像は上にも掲載しているので、見比べてみてください！
逆に「ゲーム感」を意識してタイトルと画面を作った例です。「現代に暮らす半妖の学生が、夜になったら妖怪を退治しにいく」というコンセプトで作られたガチャなので、現代×和風のバトル漫画のような雰囲気が伝わればと・・・
お知らせページのアイテム紹介画像もリニューアル！カラコンや靴、星3・星2アイテム、アクセなどもピックアップできるようになりました。（こちらはTwitter掲載を意識して、今後7:8比率のサイズに微改修予定です）
お知らせページに縦長のTOP画像を入れたことによって、アバターアイテムをこんな大迫力で見せることも可能に！
「満ちる夜、月下美人の示す道標によって天女が舞い降りてくるだろう」のストーリーを再現しています。

4.制作後の反響

当初の目標通り工数がオーバーすることもなく、無事にバナーのリニューアルを終えることができました。
社内、おもにアバターチームからは「念願のなんかこう・・・かっこいい感じになった！」と好評でしたが、ユーザーさんからも好評のお声を頂戴しており、有難い限りです。

ありがとうございます・・・（涙）
「新しい人入った？」というお声は割と聞くのですが、むくどりんさん・超簡単さん・焼肉定食と比較的古株のメンバーがメインとなってデザイン改修を進めています！

まだまだこれからもアバターの魅力を伝えられるようなUI・デザイン改修や、もちろん魅力的なアバターアイテム制作にも励んでいきますので、どうぞよろしくお願いいたします！

5.現在募集中のポジション

超簡単さんの在籍するプロダクトデザインチームでは、以下のポジションのデザイナーを募集しています。（※焼肉定食の在籍する2Dバナーデザインとはまた別のチームです）
この記事を読んで、REALITYのお知らせの出し方もっと改善できそう！と思った方のご応募をお待ちしております！

↑こちらはフルタイムのプロダクトデザイナー募集要項です。

↑お知らせページやランディングページのデザイン・コーディングを行っていただける方を募集しています。
（現在要項準備中なのでこちらのオープンポジションからご応募ください）

プロダクトデザインチームの働き方については、こちらの記事も是非ご覧ください！

↓アバター制作につきましては、下記のポジションでもメンバーを募集しています。一緒に魅力的なアバターアイテムを作りませんか？