メインカテゴリーを選択しなおす
「乃木坂46リズムフェスティバル」便利なスタミナの一括消費機能が配信後半年で実装！短い時間でも楽しく遊べる機能
こんにちは、ちょこです。 「乃木フェス」のスタミナの一括消費が便利だと感じました。こういった機能はリリース後しばらくしてからじゃないと実装しづらいので、リリース直後だけでなく、リリースしてしばらく運用したタイトルも小まめに追うのが良さそうですね。 LIVEの選曲画面から選択できます。 1倍～3倍まで設定できます。 この機能により、初心者は楽にRankをあげたり育成をすることができます。 機能リリースのタイミングについて ちなみに機能リリースのタイミングですが、アプリの配信が2017/11/21で機能リリースが2018/4/18でした。配信から約半年後のリリースのようです。 思ったより早い印象。…
「乃木坂46リズムフェスティバル」ノーツサイズとアイコン間隔の設定を比較してみました。
こんにちは、ちょこです。 乃木フェスにて、ノーツのサイズと間隔の設定があったので、ざっくり比較してみました。 ノーツサイズ最大(120%)、アイコン間隔最大(110%) 指が太い人でも安心のサイズ感。 ノーツサイズ最小(60%)、アイコン間隔最小(80%) 可愛らしい見た目。あんまり指を動かしたくない人向けなのかな。 ノーツサイズ最小(60%)、アイコン間隔最大(110%) 指を動かす範囲が広い割にタップ判定が狭いので無駄に難易度高くなりそう。 デフォルトの値について ノーツサイズは60%〜120%、アイコン間隔は80〜110%までの設定が可能になっています。 数字の範囲はデザインに依存しそう…
「乃木坂46リズムフェスティバル」LIVE画面の背景で実写映像を使うと新しい臨場感が得られて新鮮だったという話
こんにちは、ちょこです。 「乃木坂46リズムフェスティバル」のライブ中の背景がまさかのLIVE映像使用で驚きました。 臨場感が凄い！ LIVE体験をさせたい！歌だけでなくアイドル達の動く姿を見てもらいたい！ …といった感じでやりたいことが明確なので、受け取る側も楽に受け取ることが出来て、すごく良いデザインだなと思いました。 デメリットとしては、集中力が映像側に引っ張られるので純粋にスコアを伸ばしたい時はノイズになるかも…。というかLIVE映像ばっか見てて、手元とか適当になりました。 そういった場合は設定で切り替えられるような実装になっています。 映像の明るさ設定 最大まで暗くするとこんな感じで…
「リボルバーズエイト」有料機能のお試し期間はどれくらいが適切なのか？リボハチと妖怪三国志での事例紹介
こんにちは、ちょこです。 リボルバーズエイトのショップに「プライム会員の3日間お試し機能」が実装されていました。 試そうと思った矢先にサービス終了の告知がなされ販売停止となりました。残念…。 もう売ってない 以前、妖怪三国志にて同様の実装がなされていたので紹介しました。 「妖怪三国志 国盗りウォーズ」商品のお試し機能は「保有効果」と「現状維持バイアス」の効果が見込めるかもしれないという話 - アプリゲームUIデザイン この保有効果と現状維持バイアスに関してですが、要するに 一度快適な状態でプレイしてしまったら、その状態が当たり前となり、プライム会員以前の状態がストレスに感じてしまいます。 その…
「リボルバーズエイト」世界観を活かした上でビジュアル面で斬新なUIデザインの事例共有。例えサービス終了が案内されたとしても。
こんにちは、ちょこです。 リボルバーズエイトのUIは本をモチーフにしたデザインを中心に構成されています。 理由としてはおとぎ話、童話という世界観のため、親和性が高いためだと考えられます。 ポップアップのデザイン。オレンジのラインが本を開いたようなデザインになっています。 演出に関してもいくつか紹介します。 バトルが終わった後の遷移です。 左からページがめくられる演出になっています。一般的に小説や国語の教科書などは右から左に読み進めて行くので、画面を進めるという行為と演出が合致しています。 また、ホーム画面に遷移する際は見開きの演出が実装されています。 先ほどの演出とは趣が変わりますが、この演出…
「リボルバーズエイト」ショップとソーシャル画面のデザインが世界観に満ちている。稀有なデザインなのでその理由を考えてみました。
こんにちは、ちょこです。 リボルバーズエイトのショップとソーシャル画面のデザインに注目してみたいと思います。 こちらがショップ画面です。 こちらはソーシャル画面です。 一見して見た目は綺麗なのですが、よくよく見るとグラフィックとメニュー項目はそんなに紐付いていないんですよね…。 同じようなメニューのデザインで七つの大罪があるのですが、あちらはデザインとメニューが紐付いています。 グラクロの事例 サウンド設定の場合は蓄音機。 着替えたい場合はハンガー。 料理はカウンター。 といった具合です。 とは言え、必ずしも完璧かと言うとそんなこともなく、交換がキングだったり… 分解がディアンヌなのはちょっと…
「リボルバーズエイト」画面遷移の実装が世界観とビジュアルだけでなく操作方法とメンタルモデルまで絡めた奇跡のUI
こんにちは、ちょこです。 今回はリボルバーズエイトの画面遷移のデザインが超すっごいって話です。 リボルバーズエイトの画面遷移ですが、画面下部のメニューボタンから操作できるだけではなく、実はスワイプでも切り替え可能です。 ▲ほらこのように なぜこの操作が実装されているのか この操作が実装されている背景ですが、同じジャンルのクラロワの存在が挙げられます。 あれも同じように左右スワイプでメニュー切り替えが可能なので、その操作を踏襲したのだと考えられます。 ▲クラロワの画面遷移 画面をデザインする上で避けられないのはユーザーのメンタルモデルです。操作性といったUI単体での評価軸もありますが、使いやすさ…
「リボルバーズエイト」サービスが終了してリーゼルがいなくなってしまう前に彼女の役割と功績を紹介しておきたい
こんにちは、ちょこです。 今回は「リボルバーズエイト」にて、ショップ店員(リーゼル)のアニメーションにバリエーションがあったので、「なぜバリエーションが用意されているのか」「なぜこのようなアニメーションがあるのか」を通じて、リーゼルのデザインを考えてみました。 ▲この子がリーゼル 結論から言うと、ただのナビキャラではなく、リボハチというコンテンツ全体にとって重要な役割を担っていたキャラクターでした。 どのようなアニメーションがあるのか 1：ハタキで埃を落とす 2：本棚に本をしまって、取り出す 3：部屋の外を覗き込んでみる 4：本を置いて、持つ 5：パソコンで調べもの 6：時間を気にする素振り …
「歌マクロス スマホDeカルチャー」ホーム画面に訴求画像が大きく表示されていたので気になった。本当に要るのかな…
こんにちは、ちょこです。 「歌マクロス」のホーム画面のカルーセルにて、左右に隣接するバナーが表示されているのが珍しい。これがあると「隣の画像が見えて気になるので訴求になる」とかならなかったりとか…。 最近だとカルーセルって効果が疑問視されているので、面積を小さくしたり、情報量を減らすのが流れなのですが、割とがっつり情報量入れてますね。 アンチパターンと言われるカルーセルを改善するポイント UX MILK カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと｜MarTechLab（マーテックラボ） Appleがトップページで自動送りカルーセル…
「歌マクロス スマホDeカルチャー」データダウンロード画面の表示中にゲームに関するアンケートがあった
こんにちは、ちょこです。 「歌マクロス」でデータダウンロード画面を利用してアンケート機能が実装されてたのが興味深かったです。 データダウンロード中の画面を運営側の視点で有効活用しようとする試みは珍しいと思いました。 こんな感じでアンケートが表示されていました。 多くのゲームアプリは世界観の没入の為のキャラ紹介や… tipsを表示してユーザーの学習に充てるゲームが多い印象です。 昨日「ホーム画面で訴求画像でっかいなぁ」という感想を書いたのですが、歌マクロスはマーケティング寄りのUIデザインの開発っぽい印象。 ▲右端に大きく表示される訴求画像。 まとめ データDL中はユーザーを待たせることになりま…
「歌マクロス スマホDeカルチャー」ノーツのサイズが小さくプレイしづらい印象。ノーツのサイズ調整のオプションが付けられない事情でもあるのかな…
こんにちは、ちょこです。 「歌マクロス」にてノーツのサイズ調整がなくてストレスに感じました。歌マクロスのノーツサイズはこれくらい。 乃木フェスと並べるとこんな感じ。 ▲乃木フェスのデフォルトサイズ こんな感じでまとめてみました ピクセルで比較してみました ストレスに感じたのは触り心地 慣れれば問題ない？ まとめ ピクセルで比較してみました ピクセルで比較してみた結果、歌マクロスが「104pix」乃木フェスが「116pix」でした。 ざっくり1割程度のサイズ差があります。 実際の判定範囲がどうなっているか不明ではありますが、プレイしてみた感じ歌マクロスの方がコンボが繋げず、スコアが伸びませんでし…
「歌マクロス スマホDeカルチャー」プレイログなる情報があったのでご紹介。情報の優劣の判断って割れるよね…
こんにちは、ちょこです。 「歌マクロス」の「プレイログ」という機能が興味深かったので紹介します。 プレイログの情報はこちら。 「詳細」のボタンを押すとこんな感じです。 横軸が楽曲の進行、縦軸が評価の割合です。 音ゲーあまりプレイしないので一般的かどうかわかってないのですが初めて見た機能です。 見かけない云々は別にして、階層が深い位置にある情報を扱っている(経過秒数やその時間内にどの程度の評価であったのかはプレイ中に確認できない)ので、この機能って結構コア向けな気がしたのですが、開発的にはどこをターゲットとした機能なんだろう…。なんというか、使い方は想像できるけど優先度が分からない…。 画面内に…
「歌マクロス スマホDeカルチャー」ミッションに一括受け取りボタンが無い…手数が掛かるので何卒…実装を…
こんにちは、ちょこです。 今回は「歌マクロス」のミッション画面で報酬の一括受取が無くて手数がかかってヤバイって話です…。 しかも、ミッション報酬を受け取ると次のミッションの解放される実装です。 小さくて見づらいかもですが、途中までノーマルミッションのタブに表示されている「3個達成！」の数字が減らないんです…。 クリアしたミッション報酬を受け取ったら、新しいミッションが生成され、それが既に達成条件を満たしていた、ということが即時行われています。 この実装の良くないところ この実装をされると、ユーザーは何回ボタンをタップすれば良いのか分からず、ストレスを溜めてしまったり、数字が減っていないので画面…
「歌マクロス スマホDeカルチャー」長押しして親密度を上げる仕様の意味が分からず。他のゲームの仕様と比較してみました
こんにちは、ちょこです。 「歌マクロス」のホーム画面でキャラクターの親密度を上げる機能が実装されているのですが、その操作方法が気になりました。 以下のようにキャラクターを長押しすると親密度が高まります。長押し…。 なんというか…長押しするという直感的でない実装も大概なのですが、何がどうなって親密度が高まるかというデザインが無く、単に機能として実装されている感が強いです。 おそらく開発側の事情としては撫でるという実装がNGとなり、代わりの実装を模索した結果だと思うのですが、であるならば他の方法もあったはずです…。 そこで、今までプレイしてきたゲームでいくつか紹介してみます。 プレゼントを渡す ク…
「歌マクロス スマホDeカルチャー」プッシュ通知で珍しいUIパーツが採用されていたので紹介。
こんにちは、ちょこです。 「歌マクロス」にてプッシュ通知を送る時間を設定できるUIがユニークだったので紹介します。 こんな感じで操作します。gif。 挙動としてはチェックボックスですね。 こんなUI初めて見た！ このUI、ゲームアプリでは見たことがないUIだったのですが興味深い…。 今まではラジオボタンで任意の時間帯を選択するか、ドラムロールで時間帯を決めるか、というデザインしか見たことありませんでした。 このUIの場合、時間帯を跨いだ設定ができるのが特徴です。 「任意の時間選べないじゃん」とか「9時～18時以外は通知ONにしたいのにできなくて不便」という意見もあるかもですが、それは一旦脇に置…
「CUE！キュー」戻るボタンのレイアウトに関して使いづらいと感じた3点
こんにちは、ちょこです。 CUEの戻るボタンの位置が直感的でなく、不便に感じました。以下で理由を説明します。 画面右上の戻るボタン 小さくて隣のボタンの距離も近いので雑に押そうとすると誤タップしやすいです。また誤タップしないように意識するだけでストレスになります。 SEMAI☆ 慣れもあるのかな、と思ってしばらくプレイしてみましたが、結局慣れず…。 RANK52はぼちぼちちゃんとやってる方だと思う さて、今回の戻るボタンのストレスの原因を整理すると以下のようになります。 1：ボタンの位置 2：ボタンの大きさ 3：ボタン同士のマージン それぞれ補足します。 1：ボタンの位置に関して ボタンの位置…
「CUE！キュー」加入日というソート項目があるのですが、古い仕様のリバイバルでも新しい体験を与えられる良い事例だなと思いました
こんにちは、ちょこです。 「CUE」に「加入日」というソート項目があって驚きました。 キャラクターを入手することを「お迎えする」と言い表すことがあるので、そういった配慮なのかな…。 ガラケーの頃からプレイしていた方は覚えているかもですが、昔のソシャゲでは「新しく獲得した順」というのがありました。挙動としては同じです。 それをより世界観に合わせた文言に変えて実装しているのが素敵だな、って思いました。 ▲ガラケーではないけどジャンプチヒーローは「入手」順 また、単に新旧で並んでいるより日付が入った方が愛着が湧くのかもしれません。 コア寄りにはなるのですが、日付があるとスカウト更新当日に入手した、ま…
「CUE！キュー」メニュー項目にて、メインの機能が下の方にレイアウトされている件に関して
こんにちは、ちょこです。 CUEのメニュー項目で独特な実装があったので、考えてみました。 メイン項目が下にあるんですよね… こんな感じ。 このデザインコンセプトは初めて見たかも。 CUEのUIは全体的にクセが強いというか、意欲的というか…。設計がきちんとできるタイプの方が開発にいるような気はしているのですが、ゲームアプリとは違う畑の方なのかな…。 ここのデザインで言うと「注目して欲しいからボタンを大きくする」「であるならば押しやすい位置に配置するべき」という意図が感じられます。 やりたい気持ちは分かるのですが、私の場合はソシャゲの暗黙知に倣ってしまうことが多いので、このデザインを実装した背景は…
「CUE！キュー」スカウト時にキャラクターのルビが無い理由を考えた。
こんにちは、ちょこです。 「CUE」の話ですが、スカウトでの獲得画面にはキャラクターの読み仮名がありませんでした。一見してストレスに感じたのですが、無い理由を考えてみました。 演出。読み方不明のまま、すぐどっかいく。 初見だと読み方が分からないし、ボイスありでストーリーを読んでいないとその後もなかなか覚えられません。 ▲「つきのい？」「つきい？」 キャラ詳細まで潜れば見れるけど、ちょっと深い。 ▲「つきい」が正解でした 獲得演出でルビを省略したのはなんでかなー、と想像するのですが ・メインターゲットのユーザーはアプリの外でキャラクターの情報を得ているのですでに知っている情報・推しのキャラ以外は…
「CUE！キュー」レッスンの参加率が低いのが気になる。基本全員出席で良いのでは…？
こんにちは、ちょこです。 「CUE」ではレッスンという機能があり、任意の4名のキャラクターの内、ランダムで参加または欠席します。その欠席理由が特徴的だったので紹介します。 ▲バイトの方が優先なのか…世知辛い ▲レッスンの優先度低くないか…？ ▲お゛き゛て゛ーーー ▲「あれ」とか言ってる場合ではない こんな感じです。キャラクターの性格が分かるのは面白いのですが、欠席率が凄いのが気になります。 なぜなら ・キャラクターが参加していないことはゲーム面でデメリットがある・キャラクターが好きなユーザーにとって、ネガティブな情報が多く、応援する気持ちが萎える という意味で実益がない実装になっているからです…
「CUE！キュー」SNSにゲーム画面を投稿するきっかけ作りがなされている例。うれしいことがあると人に伝えたくなるのかな…
こんにちは、ちょこです。 「CUE」にて超！特訓という実装があるのですが、それが割とSNSに投稿されているのを見かけます。(あくまでCUE界隈の話) これ、どういうものかというと…、レッスン中に特訓ゲージを溜めると「特訓モード」と呼ばれるモードに移行します。 ▲特訓ゲージさん ▲特訓モード移行演出 で、特訓モードが終わるタイミングで確率で「超！特訓モード」に突入します。 確変みたいなイメージ。(パチンコやらないけど、そんなイメージ。賑やかだし) ▲超！特訓モード突入演出 ▲超特訓を好む戦闘民族の鑑 そんなわけで、超！特訓モードに突入することはレアリティの高いイベントとなっています。 あとは、そ…
「CUE！キュー」ミッションリストに無限スクロールが実装されていました。ソシャゲに無限スクロールは初めて見たかも。
こんにちは、ちょこです。 「CUE」のミッションで無限スクロールが実装されていました。 ▲リスト最下部までいくと情報が追加されていく ソシャゲではちょっと珍しい実装ですよね。 手元の「UIデザインの教科書(新版)」に無限スクロールに関する記載があるのですが、そこでは以下のような特徴が書かれていました。 ・「もっと読む」を用意しなくて良いので操作が軽快・読み込めば読み込むほど、動作が遅くなる・戻るボタンで戻ってきた時に最初の状態に戻ってしまう・コンテンツをじっくり見るのに向いていない・SNSのような時事的なサービスに向いている なるほどー…ソシャゲだと何が適しているんだろう…お知らせ一覧とか…？…
「ゴーストトリック」会話シーンのメッセージ送りのUIパーツの不統一。一貫性は至上命令じゃないという仮説。
こんにちは、ちょこです。 「ゴーストトリック」の会話シーンにおけるメッセージ送りのUIが気になりました。 結構前のゲームなんですけどね。SEが所々逆転裁判なのでちょっとコラボっぽい。 さて、会話シーンはこちらです。 ▲このシーンでの吹き出しの右側にある記号は「▶︎」です モノローグ演出はこちら。 ▲こちらの画面のテキスト送りのUIパーツは「▼」になっています このように、メッセージ送りのUIパーツが異なっています。 なぜデザインに差異があるのか なんでデザインに差異があるんだろう…？正直好みとか気分などとすることも簡単ですが、それ以前に「無頓着」「無関心」というのが先にある気がします。 なので…
「CUE！キュー」ホーム画面がきちんと情報設計していると感じたので考えてみた。通知リストの使い方を再認識しました。
こんにちは、ちょこです。 今回は情報設計の話です。 「CUE」のUIは設計に関して実績のある方が担当したのかな、という気がしました。 根拠はなく勘ですが。 設計に注目した理由 なぜ設計に注目したのか、ホーム画面を例に説明します。 この画面をよく見ると、ソシャゲでよくある「お知らせ」や「ミッション」のボタンが無いことに気付くかと思います。 では、どこに導線があるか。 画面上部にあるベルのアイコンをタップすると、このように通知内容がリストで並びます。 ▲ずらっと並ぶ通知リスト 通知リストには以下の内容が含まれます。 1:未達成のデイリーミッションがある時2:ミッション報酬が受け取れる時3:オフィス…
「COUNTER: SIDE（カウンターサイド）」BGMやSEの大きさのバランスを維持したままサウンドの音量調節ができる
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「COUNTER: SIDE（カウンターサイド）」から、サウンドのオプション設定の中に全体の音量調整ができる項目をご紹介します。 全体のサウンドを 該当の画面はこちらです。 サウンドの項目は以下の4項目です 全体 BGM 効果音 音声 その中でも今回は「全体」の項目に注目します。 多くのゲームは「BGM」「効果音(SE)」「音声(ボイス)」の項目で分かれるのみで、「全体」の項目は無いことが多いのかなと思います。 「B…
「CUE！キュー」収録にてユニット枠が自動で選択される実装の紹介。やはり設計がきちんとしているので設計に悩んでいる開発者は一度プレイしてみると発見があるかも！
こんにちは、ちょこです。 「CUE」の収録の編成ですが、収録するアニメによってユニット枠が自動で選択されているのが良かったです。 「魔法少女」の場合はユニット枠1が自動で選択されています。 「ふぇありん」の場合はユニット枠2が自動で選択されています 「こんにちは、いただきます。」の場合はユニット枠3が… 「黒白のグィネヴィア」はユニット枠4が自動で選択されています。 それを踏まえてもう一度gifを確認してみます。 このように、収録に最適なユニット枠を選択するため、手数が省略できます。収録は利用頻度の高い機能ですので、こういった実装はユーザーにとって非常に有用に感じました。 地味に感じるかもしれ…
「ゼノンザード」デッキ名のデフォルト名が入力されているのが鬱陶しいと感じた時期が俺にもありました。それはきっとエラーを回避するのに必要な処理
こんにちは、ちょこです。 「ゼノンザード」にてデッキ名を入力しようとした際にデフォルトの文字列が残る実装になっていたのが気になりました。 デフォルトのデッキ名消すの面倒…!! デフォルト名の場合、続きからデッキ名を入力することは考えづらいので一度文字列をリセットするのが良いのかな、と思います。 気の利いたデフォルト名であればまだしも「NO NAME」… じゃあ、デフォルトは空欄にすれば良いのか、と考えるのですが多分それも違います。 恐らく「文字列をリセットし、何も入力していない状態だとデッキ作成を確定出来ない」というエラーを回避するためだと思います。 例えるなら、Windowsで「新しいフォル…
「ゼノンザード」見た目がチェックボックスで挙動がラジオボタンというアンチパターン 。メンタルモデルが機能せずストレスに感じるので気を付けたい
こんにちは、ちょこです。 「ゼノンザード」をプレイしていて、 チェックボックスの使い方に関してアンチパターンがありましたので、改めて気を付けたいな、と思いました。 挙動を見ていただけたら分かるかな、と思います。 このように、UIはチェックボックスですが、挙動はラジオボタンになっているパターンです。 この実装ですと、ユーザーのメンタルモデルが機能せず学習コストがかかったり、予想した挙動と違うことにより、ストレスに感じてしまいます。 見た目をラジオボタンにするだけで、ストレスなくゲームをプレイできますので、そのように実装すると良いのかな、と思います。 しばしばこのようにチェックボックスとラジオボタ…
！こんにちは、ちょこです。 「ゼノンザード」のメニュー項目がアルファベットなんですよね… 個人的には見出しをアルファベットにしても実益がないと感じているので、このデザインは気になりました。 どういったところで実益がないと感じているのか？ 実益がないと感じている理由ですが… 1:日本語が母国語の場合、瞬間的には日本語を読んでしまう。 ▲瞬間的に脳が日本語を認識し、読んでしまう 2:日本に住んでいるネイティブから見ると間違っている単語になっていることが多い ▲英語は「RANKED MATCH」が一般的 5:有用な情報が小さく表示される結果になる ▲操作する上で必要で重要な情報が小さく表示されている…
「ゼノンザード」バトル中のオプションが細かいので紹介してみますね
こんにちは、ちょこです。 ゼノンザードですが、バトル中の操作に対する確認オプションが多いのが特徴です。 この手のターン制バトルで一番ストレスがかかるのは誤操作による失敗、敗北です。 これをやったら結構な確率でアプリに対してネガティブな印象を持ちます。 誤操作した俺が悪い、気をつけよう！ではなく 「誤操作させるようなクソUIが悪い！」と、いう印象を持ちます。 そうならないように、開発者は最大限配慮し、防止に努めることが求められます。 例えばゼノンザードの場合、バトル中のオプションは以下のようなものがあります。 ・バトルテンポ・カード効果の表示・フォース効果の表示・バディAIセリフの表示・移動の確…
「ゼノンザード」この導線が便利編！カードパック一覧画面からの購入画面に遷移
こんにちは、ちょこです。 「ゼノンザード」のカードパックチケットからカードパック購入画面への導線が便利だな、と感じました。 ▲カードパックチケットのリストから各カードパックの購入画面に遷移します 最近のソシャゲですと、カードパック…いわゆるガチャの種類はそんなに多くありません。 しかし、ゼノンザードのようなデジタルカードゲームの場合は逆にガチャの種類を増やす運用になります。 結果、たくさんの種類のカードパックの中から目的のカードパックを選ぶことになり、とても煩雑です。 その煩雑さの対処として、カードパックチケットのリストが用意されています。 ▲このリストから目的のカードパックがチケットで購入で…
「ゼノンザード」ミッションリストがタブではなくチェックボックス形式。面白いデザインだけどバッドUIでもあった…
こんにちは、ちょこです。 「ゼノンザード」のミッションリストが珍しかったので紹介します。 とくに珍しくないと思うかもしれませんが、一見タブに見えるデザインなのに実はチェックボックスの挙動になっています。 こんな感じで複数の項目が選択可能です。(ただし、最低一つの項目は選択しなければならない状態になります) 確かにミッションは複数のカテゴリに分類することが可能なので、アイディアとしては面白いかも…ただ、惜しいところがありまして… プレゼント画面や… フレンド管理画面ではタブの挙動なんですよね…。 つまりUIパーツの挙動の一貫性が担保されていないのでバッドUIでもあったりします。 流石にバッドUI…
「ゼノンザード」どっちにスクロールして見える？色んな人にそう思った理由を聞いてみたい
こんにちは、ちょこです。 「ゼノンザード」をプレイしていて気になったので問題にしてみました。 問題：1 問題です。制限時間は0秒です。0秒で判断してください。 以下はカードコレクション画面ですが、どのようにスクロールするでしょうか？ 見えましたかね。人の脳は瞬間的に判断するので実はこれくらいでも十分だったりします。 その上で「答えを確かめるため」に操作を試みます。 問題：2 では、こちらのデッキ編集画面ではどのようにスクロールするのでしょうか？ 画面下部にカードが並ぶのでその点にご注目ください。こちらも瞬間的に判断してみてください。 解答 はい、ではそれぞれ実装はどうなっているか答え合わせです…
「ゼノンザード」画面によってメインコマンドの位置が変わるとボタンが押しづらい。目新しいということは、裏返すとやらない理由が隠されていること
こんにちは、ちょこです。 ゼノンザードにて、メインメニューのレイアウトが気になりました。 ホーム画面はメインコマンドが下の方にあります。 メインコマンドはこれです。 カードメニューは上…。 ストーリーメニューは下。 ショップメニューは右にレイアウトされています。 フレンドメニューは上に…。 と、こういった実装になっています。理由がよく分からないんですよね、これ。 下に寄せるのは押しやすや。であるならば、上の方にあると押しづらい。 指の位置も固定できないので操作する上でストレスに感じてしまいます。 コントローラーで操作する系の据え置き機のゲームであれば、押しやすさはあまり考慮しなくて良いので成立…
「ゼノンザード」AIがアドバイスをくれる、ってオートプレイとはまた違ったUXですよね
こんにちは、ちょこです。 「ゼノンザード」はバトル中にAIがアドバイスをくれます。 オートバトルとは異なり、こんな感じでプレイ中に次に取るコマンドのアドバイスをくれます。 ▲こんな感じでアドバイスしてくれる 初心者だとどの選択肢が最適か分からなかったり、そもそも選択肢が見えて無かったりするので大変助かります。 チュートリアルのように選択すべきカードやコマンドを強調するデザインもあるのですが、AIがアドバイスするデザインというのも新しく感じました。 アドバイスには従っても良いし、従わなくても良いです。 将棋と異なり、一定のランダム要素(例えば何のカードをドローするかはランダム)も含まれているので…
「ゼノンザード」バトルレポートという機能が斬新。今後試合結果の分析が主流になっていくのか。
こんにちは、ちょこです。 バトル終了時に戦況がグラフ化されて表示されるのが興味深いです。 ターンごとに有利不利を数値化、可視化している独自の仕様です。どういう仕様になっているのか興味深い…。 適当に数値化してそれっぽい振る舞いをしているとも限らないけど…。 これがあると、どこのターンで良かったのか、悪くなったのかが分かりやすいです。 序盤の構成がそのまま敗因に繋がるのか、中盤に押し負けるのか、終盤で巻き返せるか、など把握しやすくなります。 将棋でもAIを活用した取り組みが当たり前になっていています。 e-sportsでお金を得たり仕事を得たりする人たちも増えてきています。勝敗結果は直接的に死活…
「ゼノンザード」デジタルカードゲームで感想戦ができる！試合結果の分析がとても捗る仕様
こんにちは、ちょこです。 今回は「ゼノンザード」のIFバトルの仕様の紹介です。これもバトルレポートに並んで新しい仕様でした。 どういった仕様かと言うと、バトルが終わった後、任意のターンからバトルをリプレイすることができる仕様です。 つまり将棋でいうところの感想戦ができます。 ▲任意のターンを選択してバトルをリプレイします アナログだと簡単に出来ますが、デジタルだと珍しいかも。 試しに敗戦濃厚な9ターン目から再開してみました。目的としては「何が理由で勝てたのか」の確認。 ▲通常のバトルと異なり、画面上部にグラフが表示されています リプレイすることによって「あの時どうすれば良かったのか」というのが…
こんにちは、ちょこです。 「ペンギンの島」が話題になっていたのでプレイしてみました。 ジャンル的にはクリッカー系です。 女性向けのビジュアルデザインでライト層向けに機能を絞っているように見えました。 というのも中央のボタンを押すだけで良いんですよね ▲遠目でもどこを押したら良いのか明確 ▲念のため。このボタンを押すです ただ、このボタンを押すのが攻略面で最適解、というわけではありません。 数字を伸ばそうと思ったらレベルアップさせる施設を都度選ぶ方が効率的です。 ▲任意の施設をレベルアップさせる方が効率的 今までのクリッカー系のゲームはこのようなUIになっていることが多いです。リストで並んでいる…
「ペンギンの島」カメラに付いた水滴は蛇足じゃない。必然性のあるデザインでした。
こんにちは、ちょこです。 「ペンギンの島」にて撮影モードが実装されているのですが、水中にも潜れるんですよね。 で、水中に潜って地上に戻った時、カメラのレンズに水滴が付いてくるのが芸が細かい！ ▲撮影モード。防水対応らしい ▲水滴が付くだけでなく上から下に流れます 水滴を通して向こうの景色が歪んで見えるのが分かるかなと思います。 実装方法は分からないけど、水滴にバリエーションが無いっぽいので、リアルタイムの生成ではなく、モノクロの画像でも乗っけてるのかな…。 この水滴はペンギンを撮影する目的だけだと確実に不要な仕様ではあります。 水滴が付くことによって、ユーザーはカメラ越しにペンギンを観察してい…
「ペンギンの島」起動時に表示されるペンギンが可愛い。ほぼ無意識にゲームに好感を持たせている素晴らしいデザイン
こんにちは、ちょこです。 ロード画面、かわいいねー。 ▲歩いてるだけでモテる という記事を書こうと思いましたが、もう少し考えてみます。流石に。 このロード画面はアプリ起動時の読み込み画面でしか表示されません。 また「ペンギンの島」に興味がある人がこの演出を見た際「かわいい！」という感情を抱く可能性が高いと考えられます。 つまり、ゲームを始める前にポジティブな気持ちにさせることが出来ます。 ▲余白の使い方もかわいさを演出しています 仮にこれが「now loading」という文字だけだったとしたら、こういった感情も生まれず、ゲームに対する見方も変わっていたのかな、と思います。 ▲例えばこんな感じの…
「ペンギンの島」非言語による鮮やかな商品訴求。デザインのレベルが高すぎる。
こんにちは、ちょこです。 「ペンギンの島」の訴求に関して運営側の取り組みについて考えてみました。 商品を売るための訴求もUIの範囲かな、と思っているので。 1つ目は通知マークです。 こちらは動画を見ないと消えません。 ▲動画を見ると消える。 この通知マークの配置が実に絶妙で、受け取れるミッションがある時の通知マークと同列になっているんですよね。 ▲プレゼントなどと近い位置に配置されている プレゼントに付いている通知マークとショップに付いている通知マークは厳密には同じカテゴリの情報ではありませんが、近接の法則により脳が同じ情報だと錯覚します。多分。 つまり「この赤い丸は良いことが起きることを通知…
「パレットパレード」ロード画面で絵が描ける斬新な仕様。でも秒で絵なんか描けるわけない
こんにちは、ちょこです。 パレパレこと「パレットパレード」始めました。衝撃的だったのがロード画面のデザインです。 こんなロード画面。 なんと絵が描けます…！ どんな仕様だよ、と思うかもですが世界観的には画家のキャラクターものなので、アイディアとしては違和感はありません。 「ロード画面で絵が描ける」という発想は間違いなく超面白いです！ ただ、アイディアとデザインが合致してない印象を受けました。 理由をいくつか書いてみます。 1：タイトルに戻ると白紙に戻る 仕様上仕方ないのですが、アプリを落としたり、しばらくアクセスしないでいるとタイトルに戻るのですが、描いた絵も消えます。 消えます…！ アプリの…
「パレットパレード」一つ一つは細かいけど、たくさん粗があるとアプリのクオリティが下がって見えるので勿体ない
こんにちは、ちょこです。 「パレットパレード」をプレイしていていくつか気になった部分がありました。 こういった部分がきちんと詰められるともっと良くなるのかな、と思います。 1：文字の境界線の不統一 2：画像が切れている 3：画像のパターンが綺麗にループしていない 4：一部ポップアップのアニメーションがズレている 5：会話シーンのメニューアイコンのデザインがちぐはぐ まとめ 1：文字の境界線の不統一 文字の境界線が不統一で雑に作られている印象を受けました。 このように、画面によって境界線が異なっています。 なんなら文字サイズ、ボタンのマージンも不統一です。 この実装はあまりにも雑です…。 これく…
「パレットパレード」キャラ選択時にキャラのサムネイルが赤くなる。こりゃ赤い。
こんにちは、ちょこです。 「パレットパレード」のキャラ選択時に赤く塗られる実装が気になりました。 他の画面では以下のように実装されているので、統一性という意味でこちらに統一しても良かったのでは？ ▲ほかの画面では黒い色 赤く塗られていると惨劇の被害者っぽいんですよね…。 ホラーだったりサスペンスなどの世界観によってはもちろんアリだとは思うのですが、「パレットパレード」は明るい雰囲気の世界観なのでちょっと合わないかも。 色から想起されるメンタルモデルは多様です。 今回の私の場合は「人の顔+赤く塗る=血」だったので、過去の記憶からそういったイメージを持ってしまったのかもしれません。 サムネイルを赤…
「パレットパレード」プロフィール画面で推しが設定しづらい。分けて設定させて欲しいという獣の叫び。
こんにちは、ちょこです。 「パレットパレード」でプロフィールから手持ちのキャラクターを一人？(一体？一枚？)選ぶことが出来るのですが、ちょっと開発側の意図の解釈に悩むところがあったので検討してみます。 このプロフィール画面から… 任意のキャラクターを選ぶことが出来ます。 キャラ選択画面に複数の同一キャラが並んでいることに気付くかと思います。 なぜ同じキャラクターが並んでいるのかと言うと、パラメーターが違うからなんですよね。 ここで設定したキャラクターはクエスト中に発生したイベントでフレンドに貸し出しされるキャラクターです。 この仕様自体はガラケーのアプリの頃から存在しているので、今更どうこう言…
「パレットパレード」フィルタがシルエットでも色でも分かりづらいアンチパターン。他タイトルから改善案を紹介します。
こんにちは、ちょこです。 「パレットパレード」のフィルタ機能ですが、どういったデザインなのかコレ…。 全部にチェックが入っているように見えますが、実は違います。 黒いチェックマークは未チェック状態を示しており、チェック状態はピンク色のチェックマークで表されています。 更にこれ、色覚多様性(P型)対応が出来てないんですよね… このように分かりづらいです。 こうなってしまうので、色だけで情報を示す際にはピンクと灰色の組み合わせは要注意です。 未チェック状態とチェック済状態が「シルエットでも色でも分かりづらい」というのはかなり絶望的というか… 全力でアンチパターン踏み抜いている気がします。 他にも「…
「パレットパレード」キャラのプロフィール画面で思いがけない作り込み。キャラクター推しのゲームは参考にしたい
こんにちは、ちょこです。 パレパレの作り込みで面白かった部分を紹介します。 部屋のデザインをキャラクターごとに変えているんですよね。 この二人は同じ部屋…？史実では懇親があったようなのでそれをデザインに活かした？ と言っても、全て個別に作るのではなく、いくつかの間取りのパターンを用意し、あとは細部の違い、という実装です。 おそらく、この画面専用の背景ではなく、元々会話シーンなどで使う背景を流用しているのだと思います(そうであってほしい)が、丁寧な作りだな、と感じました。 デザインの 細部に設定が活かされていたり作り込みがあると、キャラクターがそこにいるような気持ちにさせてくれたり、色々と妄想で…
「パレットパレード」ホーム画面でふたりが並んで表示、関係性も見えるので素敵
こんにちは、ちょこです。 ホーム画面でキャラが2人並ぶのですが、掛け合いがありました。 ホーム画面でキャラクターひとり立たせるというのはよくあるのですが、2人並べる、というデザインは珍しいかも。 で、並べたらそりゃ掛け合いするよね。 関係性も見えていい感じです。 ちなみにキャラクターの変更はマイページの左上のボタンから。 意外なところにボタンがあるな…。 ここで衣装や背景も変えられます。 特徴的なホーム画面のデザインだったので紹介させていただきました。 ジャンルは違いますが、ドラゴンボールの格闘ゲームでライバル同士が掛け合う仕様とかありますよね。 作り込みはキリがないので大変そうですが、掛け合…
ラーメンのUIに学ぶゲームアプリのUIに足りないこと。それは開発者全員の協力が不可欠という話。
こんにちは、ちょこです。 今回はアドベントカレンダーの企画用の記事です。 Game Graphic Design Advent Calendar 2019 - Adventar いつものゲームUIレビューではなく、UIの役割、大切さをラーメンを使って説明します。ラーメンを通じてUIのことを知っていただければと思います。 第一章「こんなラーメン屋さんは嫌だ！」 第二章「YOUは何しにラーメン屋に？」 第三章「美味しく食べてもらうためにはみんなの協力が必要」 第四章「どういうラーメンにしたら良いの？」 最終章「ラーメンのUIに学ぶゲームのUIで足りないこと」 第一章「こんなラーメン屋さんは嫌だ！」…
「パレットパレード」世界観に合わせたサムネイルがカンバスのデザインになっている件、よく見ると丁寧に作り込まれていました
こんにちは、ちょこです。 パレットパレードから変わった作り込みの紹介です。 こちらは所謂クエスト結果画面ですが、画像が直線的じゃないことに気付きました。 ▲通常はサムネイルが並びますが、世界観に合わせて画板が並んでいるデザインです パース掛かっているのは分かりやすいと思いますが、直線的じゃない、というのは分かりますかね…。 アップにしてみました。縦方向のラインが波打っています。これ何かというと、カンバスのたわみが表現されています。 それに合わせてキャラクターの画像もマスク処理されています。ここも直線じゃないんですね…細かい。 頻繁に見る画面なので、こういった丁寧な作り込みがあるのは素敵だな、と…
