こんにちは、ちょこです！ 「スタートリガー」のホーム画面で、装備の強化の導線が配置されていたので紹介します！ こちらです！ ホーム画面で直接装備が並んでいるのは初めて見たかも。 確かにソシャゲの主な遊び方のサイクルとしては、バトル⇒強化⇒バトル⇒…というサイクルが考えられます。 通常は、装備⇒任意のアイテムを選択⇒強化コマンドを実行 という流れです。そこを一手省いて、装備⇒任意のアイテムを選択⇒強化コマンドを実行、としているのは効率的であり、斬新だと感じました。 ▲ホーム画面から装備強化までの遷移 また、ホーム画面で装備のビジュアルが見えることによって、ユーザーの関心をひきつけたり、変化を楽しむことができます。 パーティを組むなどしてキャラクターが複数いる場合には適応できないなど、どこでも使える手法ではないのですが、情報を構造化して考えていると中々出ないアイディアだな、と感じたので事例の一

こんにちは、ちょこです！ 「スタートリガー」をプレイしていて、情報の優先度について気になったので書いてみます。 この画面の左側にある吹き出し…。 この吹き出しが割と常に最上面に表示されます。 ▲ガチャを選択する画面でも… ▲ガチャを引く画面でも… ▲容赦ない 最前面に表示されるだけではなく、下図のような表示のされ方をされると「SHOP」と関連性があるように見えてしまいます。 ▲「SHOP」の附属的な情報に見えてしまう 同じ画面の「ミッション」の吹き出しはミッションに関係ある情報として、吹き出しのデザインを採用している ▲「ミッション」のボタンに使われている吹き出し。こちらは情報に関連がある ▲全体を見てみるとこんな感じ どうしてこういった実装になっているかを想像するのですが、察するにこの吹き出しの機能がチャットだから、という事情が考えられます。 ▲吹き出しをタップするとチャットが開きます

こんにちは、ちょこです！ 「マジカミ」でキャラの誕生日にホーム画面がデコレーションされていました！ 季節感を演出するタイトルはしばしば見かけてきましたが、誕生日で画面を変えるのは初めて見たかも… 以下、ホーム画面で季節感を演出するタイトル例 ▲「ガール・カフェ・ガン」の2019年末デザイン 「ガール・カフェ・ガン」年末にかけてホーム画面やガチャ演出のデザインが変わっていた - アプリゲームUIデザイン ▲「御城プロジェクト：RE ～CASTLE DEFENSE～」2019秋のデザイン 「御城プロジェクト：RE ～CASTLE DEFENSE～」ホーム画面でキャラクターが巨大化する演出の紹介。世界観を活かしてて独創的。(今はハロウィン風になっています) - アプリゲームUIデザイン ▲「リンクスリングス」2019夏のデザイン 「リンクスリングス」季節感を取り入れるのは何のためか考えてみました

こんにちは！ちょこです！ 「マジカミ」のアイコンのカラーがビビットなのに画面がうるさく無かったので、表現の選択肢を学ぶ意味で紹介してみます！ こちらはホーム画面。派手めな色のアイコンが並んでいますね。 ざっと拾ってきました。これで7～8割くらいでしょうか。 ▲色んな画面のアイコン 見て分かる通り、ビビッドな色合いのアイコンであることが分かるかと思います。 画面全体として見たときには小さい面積なので、アクセントとして機能していると感じました。 キャラクター以外は比較的ダークトーンの画面なので、ビビットなカラーのアイコンは非常に目立ちますね。 明るい画面でも使われていますが、異質な世界観が表現されているようにも感じます。 「VOEZ」のようにトーンを統一させるUIもありますが、「マジカミ」は全体的にアクセントが意識されているように伺えます。 強い色も色の面積が小さければ適度なアクセントになりえ

こんにちは！ちょこです！ 「マジカミ」のイベントやキャンペーンバナーの表現が珍しかったので紹介します！ ホーム画面がこんな感じでカラオケルームになっているのですが、キャンペーンバナーがTVモニターに映されています。 ホーム画面に初めて遷移した直後、強制的に広告が表示されるのですが、そこからシームレスにホーム画面に移動しています。 動きで見るとこんな感じです！ ２Dの画面だけで考えてると中々出ないアイデアなのかな、と思います。 ３Dでバナーを配置するのでメジャーなのは白猫を始めとしたコロプラ社のゲームだと思います。「バトルガールハイスクール」もそうだった気がするのですが、訴求する情報なのに画面手前ではなく奥にあるのが興味深いです。 これによりバナーが大きくても気にならない、という特徴があります。 商品の訴求とビジュアルを中心にした没入感に対する考え方のバランスは、UIデザイナーにとっては難し

こんにちは！ちょこです！ 「マジカミ」の画面遷移が変化に富んでいて、自然と心地よいテンポになっていると感じたので紹介します！ ロードが多いのを逆手に取ってる感じ。 いくつかパターンがある。 １：親階層に遷移 2：親階層から子階層に遷移 3：異なる空間に遷移 ４：ADVパート専用 １：親階層に遷移 機能が切り替わるような場面では上から下に流れます。 2：親階層から子階層に遷移 画面が進む場合は右から左へ。戻る場合は反対に左から右に画面が流れます。 ▲進む場合 ▲戻る場合 3：異なる空間に遷移 ガチャやバトル、ストーリーなど、大きめのロードが入るような画面に遷移する時は画面の中央に視線がいくような演出になります。 ▲ガチャ画面に遷移する時 ４：ADVパート専用 アドベンチャーパートは可愛い星型のマスクデザインになっています。 以上です。 最近のゲームアプリでは画面遷移時にロードを挟むことは少な

こんにちは、ちょこです！ 「魔界ウォーズ」でガチャ画面でしばらくしていると店員が色々とアニメーションをしてくれます！ ざっと見た感じは以下の3パターンでした。 ▲おじぎ ▲歌う ▲あくび 以上です。 ショップ店員がいる画面で待機しているとキャラクターが演技をする仕様は、過去には「リボルバーズエイト」でも同じようなデザインでした。 ▲「リボルバーズエイト」より、リーゼル嬢 ▲彼女も時々眠そうでした 同じ画面で何もせずにいる、ということはあまり想定していないと思いますが、こういった遊び心が隠されていると楽しくなります。 余談ですが、ヘルプを見ると「マリーさん」という名前だそうです。 ▲「ガチャ子について」という項目があるのが衝撃

こんにちは！ちょこです！ 「魔界ウォーズ」でフッターのボタンがホーム画面とそれ以外の画面で変化する挙動になっていたのが気になりました。 フッターの左側に注目していただきたいのですが、ホーム画面では『クエスト』になっています。 しかし、他の画面に遷移すると『ホーム』ボタンに変わってしまっています。 動きで見ると以下のようになります。 フッター部分を拡大します。 察するに… ボタンがフッターに入りきらなかった ホーム画面では『ホーム』への導線は不要であるから『クエスト』を配置した のかな…。 これだとホーム画面経由でしかクエストに遷移できません。 クエストはメインのゲームサイクルなので頻繁に遷移する画面です。 なので、ホーム画面に遷移する分、不要な手数が発生してしまいます。 その手数によってゲームが面白くなるケースを除き、基本的には手数は省略できる部分は省略する方が望ましいです。 フッターに含

こんにちは！ちょこです！ 「魔界ウォーズ」のエンプティステートを紹介するッス！ 今回は、 プレゼント フォロー一覧 装備一覧 で見かけました。 『キャラ+吹き出し』の組み合わせになっています。 多分、一番スタンダードなデザインじゃなかろうか…。 吹き出しがあるとキャラクター性、引いてはゲームの世界観の表現に寄与しています。 他のゲームだとこういったデザインになっていました。 ▲ 「ガール・カフェ・ガン」 ▲「キャプテン翼～たたかえドリームチーム～」 必ずしもエンプティステートが必要だとは思いませんが、ちょっとした遊び心をゲームの中に入れてみたいと思った時は表現の参考になればと思います。 以下にこれまでプレイしたゲームで見かけたエンプティステートの事例をまとめてあります。ご参考までに。 appgameui.hatenablog.com

こんにちは！ちょこです！ 「魔界ウォーズ」の訴求バナーが限界突破してた…！ ホーム画面の訴求バナーが数が多い…!! 数えてみたら18個あります。 カルーセルの訴求効果に関して疑問視されているはずなんだけど、効果があるのかな…。 uxmilk.jp カルーセルは５枚以下のスライドにしてください。ユーザーはそれ以上は関わりを持つことはないからです。数を制限することで、ユーザーがコンテンツを発見する可能性を高め、また、あとからカルーセルを参照しやすくします。 5枚以下でないとダメかというと、そこまで厳しいものではないかと思います。 ただ、18枚ほどになってくると積極的にタップされることは期待できません。 カルーセルの効果に関しても知った上で表示しているので考えられる意図としては…、 数が少ないとコンテンツ量も少ないと感じてしまう 賑やかし、飾りとしての役割として見ている どれも訴求したいと本気で

こんにちは！ちょこです！ 「TTEPPEN」のデッキを編集する方法に『QRコードの読み取り』が使われていました！ 最近増えて来てますよね、QRコードを使ったデータの管理。 流れで見るとこんな感じです。 デッキ編集画面からQRコードが生成できます。 それをデッキ新規作成時に参照することが可能である、という仕様です。 手数が掛からないので大変便利な機能だと感じます。 デッキ編集画面から… デッキのQRコードが生成することができます。 あとはこのQRコードをスクリーンショットで保存すればOK。 デッキ作成画面からQRコードを読み取って、デッキを作成することが可能です。 QRコードを使う仕様は増えてきているように感じます。 文字列だと長くなる情報もQRコードのように画像化することによって表示、管理が容易になります。 こういう方法もあるんですね…。発想という意味で勉強になりました。 QRコードは何気

こんにちは、ちょこです！ 「TEPPEN」のオプションで『自身の名前を表示するかどうかのオプション』があるのが特徴的だな、と感じました。 ▲オプション画面 音とワーク対戦だけではなく、e-sportsを絡めた配信を見越していくと想定されるユーザーのペルソナの構成要素も変化していきます。 名前の表示に配慮することにより、ユーザーの意図しないタイミングで名前が表示されてしまう事故の防止、開発用のテストアカウントやゲストアカウントでプレイしやすい、などが考えられます。 ホーム画面の話になりますが、一般的にユーザー名が表示されるホーム画面でも名前が表示されていません。 ▲このように、対戦中の画面以外でもユーザー名を表示しない方針が取られています。 なぜ、ユーザー名の表示にここまでの配慮をしているのか分からなかったので、念のためインタビュー記事も読んでみたのですが、よくわからず…。 「TEPPEN」

こんにちは、ちょこです！ 「フィッシングスーパースターズ」にて 倉庫からアイテムを出し入れした際に、移動させたアイテムが表示されるように、リストがスクロールしていました！ ▲倉庫からアイテムを出し入れするとスクロールする ▲タブを横断して移動するアイテムにフォーカスされます このように、ちゃんとスクロールして移動したことが示されています。 「移動しました」みたいな文言を表示するケースも選択肢としては存在します。 文言で見せるのも良いのですが、文字を読むのはストレスなので、直感的に理解出来るのは良いですね。 ちょっとした工夫ですが、文字を無くしたり、ダイアログを表示させたくないデザイン案を検討している方の参考になればと思います！

こんにちは、ちょこです！ 「フィッシングスーパースターズ」にてスクロールがスナップする挙動になっていました！ スナップ…って伝わりますかね…。 挙動としては、項目をスクロールした際に、いい感じのところでスクロールが止まって項目が見やすくなっています。 ▲スクロールしてても項目が見切れたりしない こんな感じの挙動です。 項目をしっかりと見せよう！という意図が感じられて素敵です！ 余談ですが、図鑑画面が縦スクロールになっていて驚きました。 手数が少なく時短になっている設計です。 ▲縦スクロールなので素早く各ページが横断できる 図鑑というとなんとなく左右でスクロールさせがちですが、こっちの方が時短になります。「図鑑」というラベリングと、違和感の無いスキューモーフィズムなデザインにすると尚良さそうです。 派手なことは無いのですが、こういった細かい調整の積み重ねがUIの便利さ、快適さといったものに繋

こんにちは、ちょこです！ 「アズールレーン」のUIでいくつか気になった箇所があったんですよね…。ちょっとまとめて考えてみます。 なるべく主観によらず普遍的な部分での話でまとめたつもりですが、考察不足であればすみません。 1：情報の扱い方 2：ボタンのラベルと遷移先のラベルが一致していない 3：ボタンの使い分けがチグハグに見えます 4：押せるボタンと押せないボタンの区別がない 5：色覚多様性対応が不十分 6：ラベルが同じボタンが並んでいる 7：文字のマージンが取られていない箇所がある 8：ボタンがズレています 1：情報の扱い方 早速ですが、見出しの情報の扱い方が気になりました。こちらの画面はショップ画面です。 よく見ると左上の見出しと下タブの情報が被っており、冗長な印象を受けます。 ▲見出しのラベル ▲下タブのラベル 情報の階層としてタブは見出しの子階層です。タブを切り替えて見出しが変わって

こんにちは、ちょこです！ 「アズールレーン」のショップUIが大分思い切りが凄かったのでデザインの参考までに紹介してみます！ 見て分かる通り、商品の一覧性や価格以上にキャラクターのプレビューの面積が圧倒的に大きく取られています。 商品の一覧性や価格を犠牲にしてまで訴求にバランスを振り切るデザインは私の頭の中にはなかったので、そういった面でかなり振り切ったデザインだと感じています。 ▲非選択以外の商品を隠して、価格の表示も見えなくなっている これほどまでに訴求している思い切りの良さが凄い…。なんというか…勢いを感じます。 ちなみに衣装を切り替えるとこんな感じで切り替わります。 ▲キャライラストが切り替わってから、遅れて背景が切り替わっている 同じYoster社がサービスを展開している「アークナイツ」の衣装ショップはこんな感じです。 ▲パララックスの表現が用いられている キャラクターを訴求する、

こんにちは、ちょこです！ 「アズールレーン」でキャラのレビューを付けられるのですが、評価軸ではなく共感軸だったのが興味深かったです！ アズールレーンのキャラレビューの特徴として星による相対評価がなく、コメント数、いいねの数で評価されています。 これにはいくつか背景がありそうですが… キャラクターを魅せるコンテンツ ユーザーの感情に配慮している 評価値が参考にされていない 評価値が参考にならない 手に入れたキャラをどう運用するか、というニーズが強くなっている …などが関係しそう。 少し補足すると… 数値化されると序列が決まるけど、アズールレーンのようなキャラクターを魅せるコンテンツの場合、ユーザー同士の軋轢を生んでしまう可能性があるのを懸念。 既存ゲームを見るとレビューの数値が必ずしもユーザーの判断に影響を与えていない可能性があると考えたため 純粋な性能ではなくビジュアルを含めたキャラクター

こんにちは、ちょこです！ 「アズールレーン」で伝えたい内容がよく分からない情報ポップアップがあったのが気になりました！ 「オート戦闘ではこうなることも…」 と注意が表示されますが、これだと伝えたいことが伝わりません…。 表示される流れはこんな感じです。 ▲バトルに入る前にオート戦闘で出撃する際のリスクを説明している様子が伺えます。 個人的に気になる部分としては… オート戦闘だとどうなるのか？ その結果ユーザーにどういった影響があるのか？ ユーザーは何を判断すれば良いのか？ などです。 それらがこの情報からだけだと推測で解釈するしかありません。 ▲高度な解釈が求められる 恐らく個々人で解釈は異なると思うので、運営が伝えたいことって割と曖昧な挙動だったり、文字だと伝えづらい挙動になるのかな…。 手法としてはかなりイレギュラーですが、うまく活用すればファジーな挙動であることは伝えられるので、ユー

こんにちは、ちょこです！ 「アズールレーン」設定画面の中の【アセット】という項目があるのですが、この機能により初回データDL時の時間短縮に貢献しているのだと感じました！ まず「アセットって何？」という話ですが… アセットとは？意味、使い方やリソースとの違いを解説！ | kuguru［クグル］ 映像やゲームの製作、システム開発などの現場では、構成要素となる画像や音源を指して「素材」のことを「アセット」と呼びます。 とあります。この場合は追加データのようなものです。 ゲーム開始した後、ユーザーの好きなタイミングで追加データをDLできるようになります。 この機能があることによりゲームデータ更新時に必要最低限のデータ更新に留めることが出来ます。 分かりやすいメリットとしては… データ更新時のファイルサイズの軽量化 DL時間の短縮化 ですかね。副次的には… 通信量を節約したい 早くゲームをプレイした