こんにちは、ちょこです。 「ヴァンガード ZERO」のデッキのUIが良くない、という意見を見かけたので何が原因か考えてみました。 ▲デッキ画面のデザインはこちら.。 デジタルカードゲームのUIの不満は大体デッキ編集画面の使いづらさに対する不満とバトルテンポに集約されがちです。 逆に言えば「バトルのテンポ」「デッキ編集画面の使い勝手」が良ければ、大体大丈夫。 では早速見ていきます。 1：カードを置く場所が分からない 2：どうやってデッキに入れるか分からない 3：カードをスワイプすることが分かりづらい 4：スクロールの向きが分からない 1：カードを置く場所が分からない これはアフォーダンスが不十分なのかな、と感じました。 「ここにカードを配置してください」というのが分かるデザインになって欲しかったです。 画面上部のこの部分にデッキに入れるカードを並べるのですが、カードの置き場所に見えません。

こんにちは、ちょこです。 「ヴァンガード ZERO」のオプションの項目が少ないので驚きました。 サウンドはほぼ何も考えずに入れるとして、あとは通知だけ…？これだけで足りるのかな。 ちなみに前日紹介したゼノンザードはこんな感じでした。 このように色々と確認フェーズの省略などがあります。 例えば軽量版など、端末の負荷を抑えた機能や、テンポよくバトルを進めるための演出の省略などはあっても良いのかなと思いました。 というのも、マッチングするためには出来るだけ多くのユーザーがいた方が良いです。 多くのユーザーに遊んでもらうためには対応端末を増やすのが良いです。 なので、端末の負荷を減らして快適に遊べるような設定を入れることが重要なのかな、と思っていました。 実際、ヴァンガードでは高ランク帯でマッチングしづらい期間があったようです。 絶対数が少ないとこういったことが起きます。 直接の原因として、対戦す

こんにちは、ちょこです。 「ヴァンガードzero」にて、お手本となるデッキのレシピに対して、自分がどれくらい所持しているかが割合で表示されています。 このデザインは便利だなと感じました。 どういうこと？と思うかもですが、画面を見ていただくと分かりやすいかもです。 ▲デッキを構成するために必要なカードをどれほど所持しているか割合で表示されています このゲームはデッキ作成にいくつか方法があります。大別すると… ・ゼロから自分で作る ・自動作成機能を利用する ・既にあるデッキレシピを利用する ・既にあるデッキレシピを編集する が、あります。 今回紹介したのは「既にあるデッキレシピを利用する」です。 ただ、手持ちのカードでは不足があり、デッキが完成できません。 その割合を示す数字が表示されています。 1:完成までのコストの把握 これがあると完成までにどれくらいのコストが必要になるのか目安になります

こんにちは、ちょこです。 パレパレの作り込みで面白かった部分を紹介します。 部屋のデザインをキャラクターごとに変えているんですよね。 この二人は同じ部屋…？史実では懇親があったようなのでそれをデザインに活かした？ と言っても、全て個別に作るのではなく、いくつかの間取りのパターンを用意し、あとは細部の違い、という実装です。 おそらく、この画面専用の背景ではなく、元々会話シーンなどで使う背景を流用しているのだと思います(そうであってほしい)が、丁寧な作りだな、と感じました。 デザインの 細部に設定が活かされていたり作り込みがあると、キャラクターがそこにいるような気持ちにさせてくれたり、色々と妄想できたりするので捗ります。 こういったUXはキャラクターを推すゲームの場合はほぼ必須な実装だと思うので、注意深く見ておく必要があるな、と思いました。

こんにちは、ちょこです。 「パレットパレード」のフィルタ機能ですが、どういったデザインなのかコレ…。 全部にチェックが入っているように見えますが、実は違います。 黒いチェックマークは未チェック状態を示しており、チェック状態はピンク色のチェックマークで表されています。 更にこれ、色覚多様性(Ｐ型)対応が出来てないんですよね… このように分かりづらいです。 こうなってしまうので、色だけで情報を示す際にはピンクと灰色の組み合わせは要注意です。 未チェック状態とチェック済状態が「シルエットでも色でも分かりづらい」というのはかなり絶望的というか… 全力でアンチパターン踏み抜いている気がします。 他にも「すべて」のチェック項目が他と同列に並んでいるのも情報のグループ化が出来ていませんし、「キャラクター別に抽出が無い」というのも不便です。 ユニット別に抽出可能ではあるのですが、基本的にはキャラゲーはキャ

こんにちは、ちょこです。 「パレットパレード」でプロフィールから手持ちのキャラクターを一人？(一体？一枚？)選ぶことが出来るのですが、ちょっと開発側の意図の解釈に悩むところがあったので検討してみます。 このプロフィール画面から… 任意のキャラクターを選ぶことが出来ます。 キャラ選択画面に複数の同一キャラが並んでいることに気付くかと思います。 なぜ同じキャラクターが並んでいるのかと言うと、パラメーターが違うからなんですよね。 ここで設定したキャラクターはクエスト中に発生したイベントでフレンドに貸し出しされるキャラクターです。 この仕様自体はガラケーのアプリの頃から存在しているので、今更どうこう言うつもりもないのですが、プロフィールから設定できるのが良くなかったです。 プロフィール画面はパーソナルな情報を載せる画面です。 ですので、ここでのキャラクターの選択は推しのキャラクターをアピールする場

こんにちは、ちょこです。 「パレットパレード」のキャラ選択時に赤く塗られる実装が気になりました。 他の画面では以下のように実装されているので、統一性という意味でこちらに統一しても良かったのでは？ ▲ほかの画面では黒い色 赤く塗られていると惨劇の被害者っぽいんですよね…。 ホラーだったりサスペンスなどの世界観によってはもちろんアリだとは思うのですが、「パレットパレード」は明るい雰囲気の世界観なのでちょっと合わないかも。 色から想起されるメンタルモデルは多様です。 今回の私の場合は「人の顔+赤く塗る=血」だったので、過去の記憶からそういったイメージを持ってしまったのかもしれません。 サムネイルを赤くすることは特にバットUIではありませんが、一般的にはチェックマークの視認性を高めるために、前後関係を分かりやすく示します。 ですので色を塗る場合は背面を暗くするデザインや逆に明るくするデザインが採用

こんにちは、ちょこです。 ロード画面、かわいいねー。 ▲歩いてるだけでモテる という記事を書こうと思いましたが、もう少し考えてみます。流石に。 このロード画面はアプリ起動時の読み込み画面でしか表示されません。 また「ペンギンの島」に興味がある人がこの演出を見た際「かわいい！」という感情を抱く可能性が高いと考えられます。 つまり、ゲームを始める前にポジティブな気持ちにさせることが出来ます。 ▲余白の使い方もかわいさを演出しています 仮にこれが「now loading」という文字だけだったとしたら、こういった感情も生まれず、ゲームに対する見方も変わっていたのかな、と思います。 ▲例えばこんな感じのデザイン。要件は満たしているけど没入感は皆無に近い 一般的なUIの記事ですと、ロード画面は進捗状況が分かるのが望ましいとあったりするだけで、こういった没入感に対するフォローはありません。 ゲームのUI

こんにちは、ちょこです。 「ペンギンの島」が話題になっていたのでプレイしてみました。 ジャンル的にはクリッカー系です。 女性向けのビジュアルデザインでライト層向けに機能を絞っているように見えました。 というのも中央のボタンを押すだけで良いんですよね ▲遠目でもどこを押したら良いのか明確 ▲念のため。このボタンを押すです ただ、このボタンを押すのが攻略面で最適解、というわけではありません。 数字を伸ばそうと思ったらレベルアップさせる施設を都度選ぶ方が効率的です。 ▲任意の施設をレベルアップさせる方が効率的 今までのクリッカー系のゲームはこのようなUIになっていることが多いです。 リストで並んでいる中から任意の一つを選ぶ感じ。 クリッカーなので、とにかくタップするのが気持ち良いというデザインになっているからボタンを押すことはさほど気にならなかったんですよね。 とはいえ、数字がたくさんあって難し

こんにちは、ちょこです。 今回は「ゼノンザード」のIFバトルの仕様の紹介です。 これもバトルレポートに並んで新しい仕様でした。 どういった仕様かと言うと、バトルが終わった後、任意のターンからバトルをリプレイすることができる仕様です。 つまり将棋でいうところの感想戦ができます。 ▲任意のターンを選択してバトルをリプレイします アナログだと簡単に出来ますが、デジタルだと珍しいかも。 試しに敗戦濃厚な9ターン目から再開してみました。 目的としては「何が理由で勝てたのか」の確認。 ▲通常のバトルと異なり、画面上部にグラフが表示されています リプレイすることによって 「あの時どうすれば良かったのか」というのが明確になります。 負けた場合は敗戦分析になりますし、勝った場合でも最善手の検討に繋がります。 正直、目新しさと利便性いう視点でしかこの仕様を図れていないのですが、 こういった新しい仕様はユーザー

こんにちは、ちょこです。 「ゼノンザード」のカードパックチケットからカードパック購入画面への導線が便利だな、と感じました。 ▲カードパックチケットのリストから各カードパックの購入画面に遷移します 最近のソシャゲですと、カードパック…いわゆるガチャの種類はそんなに多くありません。 しかし、ゼノンザードのようなデジタルカードゲームの場合は逆にガチャの種類を増やす運用になります。 結果、たくさんの種類のカードパックの中から目的のカードパックを選ぶことになり、とても煩雑です。 その煩雑さの対処として、カードパックチケットのリストが用意されています。 ▲このリストから目的のカードパックがチケットで購入できるか、すぐに判断できる 導線はショップのトップに用意されています。 その中の「所持パックチケット」のボタンから遷移できます。 一覧で並ぶリストと導線があると手数が省略出来たり、時間が省略出来たりする

こんにちは、ちょこです。 ゼノンザードですが、バトル中の操作に対する確認オプションが多いのが特徴です。 この手のターン制バトルで一番ストレスがかかるのは誤操作による失敗、敗北です。 これをやったら結構な確率でアプリに対してネガティブな印象を持ちます。 誤操作した俺が悪い、気をつけよう！ではなく 「誤操作させるようなクソUIが悪い！」と、いう印象を持ちます。 そうならないように、開発者は最大限配慮し、防止に努めることが求められます。 例えばゼノンザードの場合、バトル中のオプションは以下のようなものがあります。 バトルテンポ カード効果の表示 フォース効果の表示 バディAIセリフの表示 移動の確認 アタック指定の確認 ブロック指定の確認 フラッシュタイミングの自動スキップ ブロックタイミングの自動スキップ ベース拡大表示 …と、こんな感じでした。多いね。 ざっくり分類すると以下のようになります

！こんにちは、ちょこです。 「ゼノンザード」のメニュー項目がアルファベットなんですよね… 個人的には見出しをアルファベットにしても実益がないと感じているので、このデザインは気になりました。 どういったところで実益がないと感じているのか？ 実益がないと感じている理由ですが… 1:日本語が母国語の場合、瞬間的には日本語を読んでしまう。 ▲瞬間的に脳が日本語を認識し、読んでしまう 2:日本に住んでいるネイティブから見ると間違っている単語になっていることが多い ▲英語は「RANKED MATCH」が一般的 5:有用な情報が小さく表示される結果になる ▲操作する上で必要で重要な情報が小さく表示されている 4:サポートデスクが応対する時、だいたい日本語で説明するので案内に困ることがある 5:ヘルプに記載するとき、結局日本語になる 6:なんやかんやでアルファベット表記を取り止め、日本語表記のみにならざる

こんにちは、ちょこです。 「CUE」の収録の編成ですが、収録するアニメによってユニット枠が自動で選択されているのが良かったです。 「魔法少女」の場合はユニット枠1が自動で選択されています。 「ふぇありん」の場合はユニット枠2が自動で選択されています 「こんにちは、いただきます。」の場合はユニット枠3が… 「黒白のグィネヴィア」はユニット枠4が自動で選択されています。 それを踏まえてもう一度gifを確認してみます。 このように、収録に最適なユニット枠を選択するため、手数が省略できます。 収録は利用頻度の高い機能ですので、こういった実装はユーザーにとって非常に有用に感じました。 地味に感じるかもしれませんが、こういった丁寧な実装が余計なストレスを排除し、よりゲームに没入させる仕組みだと考えています。 ちなみにこの実装によって ユニット1枠には「魔法少女」の収録用の編成を組んでおこう！となるので

こんにちは、ちょこです。 今回は情報設計の話です。 「CUE」のUIは設計に関して実績のある方が担当したのかな、という気がしました。 根拠はなく勘ですが。 設計に注目した理由 なぜ設計に注目したのか、ホーム画面を例に説明します。 この画面をよく見ると、ソシャゲでよくある「お知らせ」や「ミッション」のボタンが無いことに気付くかと思います。 では、どこに導線があるか。 画面上部にあるベルのアイコンをタップすると、このように通知内容がリストで並びます。 ▲ずらっと並ぶ通知リスト 通知リストには以下の内容が含まれます。 1:未達成のデイリーミッションがある時 2:ミッション報酬が受け取れる時 3:オフィスでアイテムが受け取れる時 4:スカウトチケットがある時 5:未読のお知らせがある時 6:未読のストーリーがある時 最大限並べてこんな感じです。通常プレイしていれば、未読のストーリーの通知のみ、とい

こんにちは、ちょこです。 「ゴーストトリック」の会話シーンにおけるメッセージ送りのUIが気になりました。 結構前のゲームなんですけどね。SEが所々逆転裁判なのでちょっとコラボっぽい。 さて、会話シーンはこちらです。 ▲このシーンでの吹き出しの右側にある記号は「▶︎」です モノローグ演出はこちら。 ▲こちらの画面のテキスト送りのUIパーツは「▼」になっています このように、メッセージ送りのUIパーツが異なっています。 なぜデザインに差異があるのか なんでデザインに差異があるんだろう…？ 正直好みとか気分などとすることも簡単ですが、それ以前に「無頓着」「無関心」というのが先にある気がします。 なので、仮説を考えてみます。 ２つのシーンを比べるとアニメーションが違うことがあげられます。 会話シーンでは左から右にテキストが流れます。 モノローグのシーンではテキストが塊でフェードインしてきます。 こ

こんにちは、ちょこです。 「CUE」のミッションで無限スクロールが実装されていました。 ▲リスト最下部までいくと情報が追加されていく ソシャゲではちょっと珍しい実装ですよね。 手元の「UIデザインの教科書(新版)」に無限スクロールに関する記載があるのですが、そこでは以下のような特徴が書かれていました。 ・「もっと読む」を用意しなくて良いので操作が軽快 ・読み込めば読み込むほど、動作が遅くなる ・戻るボタンで戻ってきた時に最初の状態に戻ってしまう ・コンテンツをじっくり見るのに向いていない ・SNSのような時事的なサービスに向いている なるほどー… ソシャゲだと何が適しているんだろう…お知らせ一覧とか…？ (図鑑とかキャラ一覧で画像の読み込み部分だけ追加で読み込む形式なら昔見た気がするな…) 「ミッション」の役割 ミッションの役割としてはリソースのボーナスだけでなく、ユーザーのモチベーション

こんにちは、ちょこです。 「CUE」にて超！特訓という実装があるのですが、それが割とSNSに投稿されているのを見かけます。(あくまでCUE界隈の話) ここの「６０回」という数字の部分ですね。 これ、どういうものかというと…、 レッスン中に特訓ゲージを溜めると「特訓モード」と呼ばれるモードに移行します。 ▲特訓ゲージさん ▲特訓モード移行演出 で、特訓モードが終わるタイミングで確率で「超！特訓モード」に突入します。 確変みたいなイメージ。 (パチンコやらないけど、そんなイメージ。賑やかだし) ▲超！特訓モード突入演出 ▲超特訓を好む戦闘民族の鑑 そんなわけで、超！特訓モードに突入することはレアリティの高いイベントとなっています。 あとは、その超特訓がどの程度継続するかは運です。 まとめ 昨今、SNSにゲーム画面のキャプチャが投稿されることが当たり前の文化になっています。SNSに投稿されればゲ

こんにちは、ちょこです。 CUEのメニュー項目で独特な実装があったので、考えてみました。 メイン項目が下にあるんですよね… こんな感じ。 このデザインコンセプトは初めて見たかも。 CUEのUIは全体的にクセが強いというか、意欲的というか…。 設計がきちんとできるタイプの方が開発にいるような気はしているのですが、ゲームアプリとは違う畑の方なのかな…。 ここのデザインで言うと「注目して欲しいからボタンを大きくする」「であるならば押しやすい位置に配置するべき」という意図が感じられます。 やりたい気持ちは分かるのですが、私の場合はソシャゲの暗黙知に倣ってしまうことが多いので、このデザインを実装した背景は興味深いです。 あと単純にリストの場合は上から下にスクリーニングするので、一貫性という部分が失われてしまうんですよね… ▲結局リストは上から下に情報が並ぶので、結果的にメニューが独自仕様になる 下タ

こんにちは、ちょこです。 「CUE」に「加入日」というソート項目があって驚きました。 キャラクターを入手することを「お迎えする」と言い表すことがあるので、そういった配慮なのかな…。 ガラケーの頃からプレイしていた方は覚えているかもですが、昔のソシャゲでは「新しく獲得した順」というのがありました。挙動としては同じです。 それをより世界観に合わせた文言に変えて実装しているのが素敵だな、って思いました。 ▲ガラケーではないけどジャンプチヒーローは「入手」順 また、単に新旧で並んでいるより日付が入った方が愛着が湧くのかもしれません。 コア寄りにはなるのですが、日付があるとスカウト更新当日に入手した、または最終日に入手した、など拡散するポイントが増えるのかもしれません。 (まだリリース間もないせいか、元々そういった需要が無いのか、twitterを観測している限りそういった拡散は行われていないように感