ハッシュタグ記事一覧

「とある魔術の禁書目録 幻想収束（イマジナリーフェスト）IF」アニメのキャプチャーがたくさん使われていて、ファン的には嬉しい

こんにちは、ちょこきなこです。 「とあるIF」のアドベンチャーパートにアニメのキャプチャーがたくさん使われているのは良いな、と思いました。アニメの追体験的な効果が強いです。 ネタバレにならない序盤をいくつか紹介しますね。 とか。 とか。 とあるは戦闘シーンも多く、通常のアドベンチャーパートで展開すると、エフェクトやキャラクターのポーズの制限などもあり、再現するのが難しいことが往々にしてあります。 これとか 人によっては手抜きと捉えるかもしれませんが、無理やり立ち絵でなんとかしようとするよりは、思い切ってアニメの絵を使う方が良いと考えたのかも。 もしかすると最初は動画を挿入する予定だったんじゃな…

2022/04/09 11:22

「ワンダータクティクス」ホーム画面で放置してたらボタンが光りだす

こんにちは、ちょこきなこです。 ワンダータクティクス をタイ語でプレイしようと思ったら、ホーム画面からどこに行って良いか分からず…！ 途方に暮れてホーム画面で放置してたらボタンが光って誘導してくれたので、助かりました。 右下のボタンが光ります。 タップするとクエスト画面に遷移します。 なるほど、ホーム画面をどのような場所として捉えるかですが、 ホーム画面に留まって「しばらくそのままでいる」と遷移する場所を促されることから、ホーム画面で滞留してほしくないのかな、と推測します。 ワンダータクティクス ではホーム画面は「やるべきことに迷ったら情報を確認し、次にやるべきことを考える場所」としているのか…

2022/04/09 11:21

「きららファンタジア」UI改修の事前告知をするのは素敵な運営

こんにちは、ちょこきなこです。 「きららファンタジア」から改修予定の箇所を事前に案内してくれるお知らせに感動しました！改修予定箇所を事前告知してくれる運営っていたかな…。内容を見てもまぁまぁ丁寧。 UI改修あるあるですが…、 ・大型改修やりたがる・ユーザーに事前告知をしない・お問い合わせがくる とか、とても多い…。結果使いづらいと言われる。最近だとtwitterのデザインが一部改修され、ユーザーが不満をつぶやいているのを見てます。 なので、きららファンタジアみたいに・細かく回収を行う・事前告知とユーザーへの周知の徹底を心掛ける ってとっても大事だと思います。

2022/04/09 11:21

「クレヨンしんちゃん 一致団ケツ！ かすかべシティ大開発」ヘルプ画面の見出し。一貫性はないがそれは間違いではないのかな、と思うことがあります。

こんにちは、ちょこきなこです。 「クレヨンしんちゃん 一致団ケツ！ かすかべシティ大開発」のヘルプの見出しにちょっとしたデザインが入っているのは素敵な視点だなと思いました。 単に「ヘルプ」としても良いのですが、汗のマークと「！」が付いています。なおかつ「！」はナナメになってます。 ヘルプは他の画面と比較して文字が多い画面になりがちです。 クレヨンしんちゃんの柔らかい世界観に近付けるために、遊び心を入れてフォーマルな要素を打ち消そうとしているのが伺えます。 最近、一貫性とか統一性は遊び心を作る際には邪魔になることがあるのだな、と考えることがあります。 一貫性とか統一性は原則ではありますが、求める…

2022/04/09 11:21

「ドクターマリオワールド」見出しが下にあるのだけど…

こんにちは、ちょこきなこです。 見出しの位置が下にあるデザインが気になりました。正直見出しと認識できなかったです。おそらく直感的な見た目が原因かと思います。 直感的な見た目って具体的に何かな、と考えてみました。 見出しが画面の下にあるから？見出しの横に「×ボタン」があるから？ 考えてみると下タブは珍しくないので、見出し的な情報(文字列が下にあること自体)は原因にはならなさそう。 であればレイアウトは問題ではなく、周囲のUIとの関係もあるのかな。 いくつか見てみます。まずお知らせの見出しは上部にあります。 意思決定のボタンが下にある画面もあります。 つまり、デザインの一貫性に不足が見られ、アプリ…

2022/04/09 11:21

「クレヨンしんちゃん 一致団ケツ！ かすかべシティ大開発」CMへの導線がTVのポップアップ。自然に見せるための工夫。

こんにちは、ちょこきなこです。 「クレヨンしんちゃん 一致団ケツ！ かすかべシティ大開発」の動画広告を再生させる際の確認メッセージの枠がTVっぽいデザインになってました。 もちろんここ専用のデザインです。 広告が表示されるとゲームに対する没入感が阻害されますが、TVを模したデザインにすることによって自然な導入にしようという意図が見えます。 それにしても、角丸で足つきって相当レトロなデザインです。かわいさが出て良いですね。 余談ですが「怪獣娘～ウルトラ特訓大作戦～」でも同じようにTVのデザインを模しています。世界観によっては出しやすい小物なのかもですね。 appgameui.hatenablog…

2022/04/09 11:21

「ドクターマリオワールド」タップエフェクトが無い理由を考えてみました

こんにちは、ちょこきなこです。 「ドクターマリオ ワールド」ですが、タップエフェクトがないんですよね。 ゲームって基本的には操作に対してリアクションを返すものなので、この仕様に関しては理解が出来ていません。 コンシューマっぽいと言えなくもないですが、あれはSEをリアクションとしているのでタップエフェクトが無くても成立します。 これに対してスマホは音を消してプレイすることが珍しくないので、タップエフェクトが持つ意味は重要になってきます。 また、アプリゲームの歴史的にタップエフェクトがないのって、昔のブラウザゲームを彷彿とさせたり、システムっぽい感じが出てしまわないか？という心配もあります。 LI…

2022/04/09 11:21

「クレヨンしんちゃん 一致団ケツ！ かすかべシティ大開発」メニュー画面のデザインの紹介

こんにちは、ちょこきなこです。 「クレヨンしんちゃん 一致団ケツ！ かすかべシティ大開発」のメニュー画面を紹介します。 よく見て欲しいのですが、「メニュー」ではなく、「メニュ〜」と表示しています。 特に必然性のない表現ではありますが、どんな意図が隠されているのかな…。 もしかしたら過去の作品で同じような表現があって、そのデザインを踏襲しているとか？ またプロフィールアイコンですが、幼稚園っぽい名札のデザインになってます。 ただ、一部海外の方から見ると「豆腐オンファイア※」に見えるらしく、ローカライズする際は意図が正しく伝わらない可能性があることに対して、注意が必要かもしれません。 単純に日本ロ…

2022/04/09 11:21

「ドクターマリオワールド」緑甲羅と赤甲羅の色の差別化が出来ているのか見てみました。

こんにちは、ちょこきなこです。 以前、ウイルスの色の見分けが付かないのではないか、と書いたのですが、赤甲羅と緑甲羅の見分けもつかないとはよく言われますね。ちょっとフィルタかけてみます。 P型はこんな感じです。見た感じ区別は明確です。特に緑甲羅の明度が特徴ですね。 D型はこんな感じです。P型と比較して若干差異が縮まったような。 見た感じ、ドクターマリオワールドの緑甲羅と赤甲羅の色の差別化はされています。 ウイルスの色に関しては以下に書いてあります。よかったらぜひー appgameui.hatenablog.com

2022/04/09 11:21

「クレヨンしんちゃん 一致団ケツ！ かすかべシティ大開発」シロの身体を使ったUIがかわいい！

こんにちは、ちょこきなこです。 左上にあるシロのUIが可愛いな、と思います。 おなか。 キャラクターの一部をモチーフに使うUIはよくありますが、キャラクター全身を使ったUIパーツ(というか、キャラクター)は珍しいです。 キャラクター自体のデザイン(視認性に優れているか)や、使っても問題ない立場のキャラクターかどうかなど、条件がかなり限られます。 なので、基本的にデザインの発想の外と言うか、まず使おうとは思いません。 よくこの発想出たなぁ、と思います。

2022/04/09 11:21

「ドクターマリオワールド」エンプティステートの紹介です！

こんにちは、ちょこきなこです。 「ドクターマリオワールド」にもエンプティステートがあります。LINEゲームっぽさが感じられますねー。 デザインパターンがひとつだけというのは意外でした。LINEだとバリエーションを用意するのが一般的だと思ったので、任天堂から何かしらキャラクターの扱いに関して指定があったのかな…。 この画面は一種のエラーですが、画像があるだけでユーザーの心象も変わります。また、文字だけよりゲームの世界観が表現できたりするのでアイディアとして意識しておいた方が全体的に賑やかになります。 他のゲームも紹介してみます。

2022/04/09 11:21

「きららファンタジア」章開放演出が凝っていたので紹介します

こんにちは、ちょこきなこです。 きららファンタジアの章開放演出の話です。 このタイトル、全体的にUIの演出は控えめなのですが、章開放演出が妙に手を込んだ演出だったんですよね。 こんな感じです。 なぜこんなに凝った演出になってるのか謎です。最初の方に作ったのかな…。(※開発初期のスケジュールに余裕があったときに作った。あるいはスクラップ＆ビルドを免れた演出、という仮説) 個人的にはデザインが凝っていれば良いのか、って考えると決してそうではないと思っています。 そしてこの演出の場合はゲームを通してプレイしてみた感じ、ちょっと目立ちすぎちゃっています。 ユーザーが大きな達成感を感じた場合は凝るのはア…

2022/04/09 11:21

「ドクターマリオ ワールド」主な画面UIまとめ

こんにちは、ちょこきなこです。 「ドクターマリオワールド」の主な画面をまとめました。 まず、ゲームを起動させるとユーザーの情報を作成するための画面が表示されます。 次に利用規約の同意、地域の設定画面が表示されます。 それが終わるとタイトル画面が表示されます。 しばらく待つと、ロード画面が表示され、 チュートリアルが始まります。 gifだとこんな感じの動きになります。 ゲーム本編が始まる前にナビ(キノピオ)が説明してくれます。 演出が入って、 キノピオがデモプレイを見せてくれます。 デモプレイが終わったら、プレイヤーが操作するステージが始まります, 演出はこんな感じです。 クリアしました！ スキ…

2022/04/09 11:21

「新テニスの王子様 RisingBeat」キャラクター衣装のプレビューがキャラ愛に満ちてる！

こんにちは、ちょこきなこです。 「新テニスの王子様 RisingBeat」のキャラ衣装ショップの画面で衣装のプレビューが凄く凝っていたので紹介させてください！ キャラクターの衣装を購入して、着せ替えできる機能があるのですが、このようにキャラクター別にプレビューが表示されます！ 着崩しを表現しているのは恐れ入りました…！丁寧！ できればキャラクターのモデルも表示したかったんだろうな…。おそらくそれをやると、メモリが凄いことになるか、都度ロードが入ることになるかしそう。 テニプリはキャラクターの人気が凄く、個々を丁寧に扱う姿勢が見て取れました。 こういった細かな施策って体系化されたり本にまとめられ…

2022/04/09 11:21

「新テニスの王子様 RisingBeat」キャラソンに混じって作者が歌ってる！これがテニプリ！

こんにちは、ちょこきなこです。 楽曲選択画面ですが、作者の許斐氏が作詞、作曲して歌まで歌っています。 最初見た時、意外すぎて驚きました。 UIとして世界観をどう捉えたら良いのか分からなくなりますが、興味深い例だと思ったので紹介しました。 ゲームでもサービスでも運営しているとリリース時点とは世界観が変化することは珍しくありません。例えば、他IPとのコラボが分かりやすい例かと思います。 少し調べてみたところ、出発点としては漫画家ですが、声優にチャレンジしてみたり、ライブを行ったりと、自分自身への挑戦と作品のファンを喜ばせるために活動しているようです。エンターテイナーですね。 作者の曲を実装すること…

2022/04/09 11:21

「新テニスの王子様 RisingBeat」楽曲試聴画面のタップ範囲が文字部分だけ。

こんにちは、ちょこきなこです。 「新テニスの王子様 RisingBeat」には楽曲の試聴ができる画面があるのですが、タップ範囲が見た目通りでないのが気になりました。 反応するのは文字列の部分だけで、文字列を囲っている枠は反応しない実装になっています。 ▼この画像の文字列部分がタップ範囲 文字列のみをタップ範囲にするのであれば、下線を引くなどして既存のメンタルモデルを利用すると誤解を招きづらいかなと思います。 一般的なボタンの形状をしていると誤解を招いてしまうので気をつけたいなと思いました。 ところでこのボタン兼進行バーの機能を有したパーツの名称ってなんて言うんだろう…。

2022/04/09 11:21

「妖怪ウォッチメダルウォーズ」画面UIまとめ (タイトル、チュートリアル、メニュー)

こんにちは、ちょこきなこです。 先日リリースされた妖怪ウォッチの新作 「妖怪ウォッチ メダルウォーズ」の画面をキャプチャーしました。 タイトル画面 設定画面 連携画面 アカウント選択画面 チュートリアル OPムービー アバター作成画面 章タイトル画面 イベントシーン アカウント選択画面(ロード) ホーム画面 ニュース画面 挑戦可能 その他 1「にっき」 2「一緒に過ごす妖怪」 3「模様替え」 4「自分の部屋を撮る」 5「設定」 6「ヘルプ画面」 7「実績」 タイトル画面 まずはタイトル画面から タイトル画面には「連携」と「設定」ボタンがあります。 設定画面 「設定」ボタン押すと… アカウント情…

2022/04/09 11:21

「きららファンタジア」メニュー項目が整理されていたので比較しました

こんにちは、ちょこきなこです。 「きららファンタジア」のメニュー項目を新旧で比較してみました。 リリース直後は以下のようなデザインだったようです。 色とか並び方が雑然としている印象です。 上の方にメインコンテンツを配置しているのかな…。ですが、色がバラバラです。 今現在のメニューは以下のようなデザインです。 項目は増えましたが、項目ごとに整理されて、ぱっと見の把握がしやすくなりました。 並べてみるとこんな感じです。 Before⇒After 項目の分け方の妥当性に関しては割と言ったもん勝ちで良いと思います。(ホームは枠から外れて左下に配置に移動してますね) 例えば「ミッションってメイン？」「ト…

2022/04/09 11:21

「妖怪ウォッチメダルウォーズ」画面UIまとめ (ホーム)

こんにちは、ちょこきなこです。 先日の続きです。今回は「妖怪ウォッチメダルウォーズ」のホーム画面のメニューを紹介します。ホーム画面には以下のような機能があります。 模様替え トロフィー棚 カレンダー 妖怪大辞典 クローゼット メイクアップ 髪型 顔 着替え 上着 めがね ズボン 帽子 靴 メール プレゼント ともだち お知らせ トレジャータワー 「模様替え」… 「カレンダー」「トロフィー棚」… 「クローゼット」「妖怪大辞典」… 「メール」「冒険」… 最後に「トレジャータワー」 です。 まとめると 1「模様替え」2「カレンダー」3「トロフィー棚」4「クローゼット」5「妖怪大辞典」6「メール」7「…

2022/04/09 11:21

「きららファンタジア」倍速アイコン、スキップアイコンが似たデザイン。大事なのはわかりやすいこと。

こんちには、ちょこきなこです。 「きららファンタジア」にてデザインが気になるアイコンがありました。 この「AUTO」のアイコンと こちらの倍速とスキップのアイコンのデザインです。 これらのアイコンですね。 よくみると「オート」アイコン全部微妙にデザインちがうやんか… まず「AUTO」に関しては更新のデザインに見えました。 実際「アイコン 更新」で画像検索するとこういったデザインが並びます。 スキップと早送りの差別化に関しては微妙…。 隣り合って見れば区別が付きやすいのですが、それぞれ離れた場所にあり比較できないこと、表示位置がどちらも右上なので誤認しやすいレイアウトになっています。 倍速とスキ…

2022/04/09 11:21

「妖怪ウォッチメダルウォーズ」画面UIまとめ (フッター)

こんにちは、ちょこきなこです。 引き続き「妖怪ウォッチメダルウォーズ」の画面の紹介をしていきます。フッターからアクセスできる機能を中心にまとめました。 ホーム画面の妖怪 キャラ入れ替え AR機能 かばん メダルタブ スキル表示 ソート項目 スキルツリー 装備タブ アイテムタブ かばん拡張 メダルを売る ともだち ともだちリスト ともだちの部屋 強化 レベルアップ ランクアップ スキルレベルアップ 合成 ガチャ ショップ 妖ゼニー パック 妖怪メダル アイテム ホーム画面の妖怪 部屋にいる妖怪を選択します。 選択すると、このように妖怪が表示されます。 妖怪ごとにメッセージが用意されています。 怒…

2022/04/09 11:20

「きららファンタジア」一括受け取りのボタン位置は揃えよう！

こんにちは、ちょこきなこです。 「きららファンタジア」にはプレゼントリストとミッションリストで一括受け取りの機能があるのですが、それぞれボタンの位置やデザイン、文字列が異なっているのが気になりました。 プレゼントリストはこちら。 ミッションリストはこちら。 実際のところ、一括受け取りのボタン以外にも全体的に差異があるので、ボタンの配置だけを調整するのは簡単ではありません。 そうならないように、情報の取りまとめの段階からUIデザイナーが入って、仕様の取りまとめのサポートをしたいところです。

2022/04/09 11:20

「COUNTER: SIDE（カウンターサイド）」画面によってサムネイルのデザインを変える事例の紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「COUNTER: SIDE（カウンターサイド）」から、サムネイルのデザインをご紹介します。 該当の画面はこちらです。 こちらは所持しているキャラクターの一覧画面です。グラフィックは比較的大きめで、画像に含まれている情報も多いです。 特にキャラクターの名前までサムネイルに含まれているデザインは今まではあまり見たことは無かったです。 情報が多くある、というのがこの画面のサムネイルのデザインの大きな特徴かなと感じました。…

2022/04/09 11:20

「COUNTER: SIDE（カウンターサイド）」適度にフィクションを織り込んだ素敵なグリッチ表現

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「COUNTER: SIDE（カウンターサイド）」から、会話パートのグリッチフィルタをご紹介します。 このブログで紹介するの何回目だろう…。流行表現における試行錯誤している様子と、幅広いデザインが見れて好きなんですよね。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。全体的に青色でキャラクターが描かれており、下から上にかけて走査線が流れています。 分かりやすくするためにキャラクターの部分を大きくして…

2022/04/09 11:20

「妖怪ウォッチメダルウォーズ」画面UIまとめ (冒険、ランキングバトル)

こんにちは、ちょこきなこです。「妖怪ウォッチメダルウォーズ」の画面紹介です。今回で最後、冒険まわりの画面の紹介です。 クエスト選択 トレジャーミッション デイリーミッション クエストボタン ストーリークエスト お手伝い ともだち イベント ストーリー選択 バトルスタート ボス登場 クエスト結果 レベルアップ ランキングバトル ランキングバトルメニュー ランク情報 対戦履歴 全体ランキング ともだちランキング 交換 バトルスタート バトル終了 クエスト選択 夜だとこんな感じ。 トレジャーミッション レジャーミッションのボタンを選択すると、ミッションのリストが表示されます。 デイリーミッション ク…

2022/04/08 23:31

「きららファンタジア」ミッションリスト、タブを越えて受け取れるのは便利ぃ！

こんにちは、ちょこきなこです。 「きららファンタジア」のミッションリストにてタブを越えて報酬が受け取れるのが便利なので、紹介します。 挙動としてはこんな感じです。デイリータブを選択している状態で、トータルタブのミッションが受け取れているのが分かるかと思います。 この機能は使ってみるととても便利で、 メリットとしてはタブを選択する手数、タブを選択したのちに一括受け取りを押す手数が省略できるので時短に繋がります。 ミッションの数が多くなると個々のミッションの価値は下がるので、個別に受け取るときの特別感は下がります。(一括受け取りのボタンも昔はなかったですしね。プレゼントやら報酬配りすぎてこうなった…

2022/04/08 23:31

「テラウォーズ」ショップバナーの事例紹介。分かりやすさを大事にしよう。

こんにちは、ちょこきなこです。 今回は「テラウォーズ 」のショップのバナーデザインについて書いてみたいと思います。ちょっと見た感じ分かりづらく感じたんですよね… 早速ショップ画面の訴求画像を見てみます。 ぱっと見のショップのちぐはぐ感…。 ポップアップを開くとこんな感じです。 先ほどの賑やかさとは変わって、落ち着いたデザインになっています。 ショップの下の方はこんな感じ。 色数、フォントの種類の多さなど、情報量が多く、他画面の世界観から外れてしまっているように見えます。 「これも世界観です」と言ってしまうことも可能ですが、厳しい…。 見てて思ったのですが、これ…、オススメだけあとで強引に追加し…

2022/04/08 23:31

「きららファンタジア」チェックとタブのデザインが同じなのが分かりづらい。挙動が違うデザインは見た目にも差をつけて。

こんにちは、ちょこきなこです。 「きららファンタジア」にて、チェックボックスとタブのデザインが同じなので、見た目から予測される挙動が分かりづらいと感じました。 ちょっと分かりづらいデザインですが、上の段はタブの挙動で、下の段がチェックボックスの挙動です。 それぞれのパーツの挙動の違いですが、タブは複数選択できません。チェックボックスは複数選択可能です。 このように名前で定義するとそのパーツの振る舞いも定義できますが、見た目が同じですと見分けがつきません。 人は初めて見るものに対して知識や経験に基づいた予測や推測で物事を認識します。ですので、同じ見た目であれば同じ挙動をするものだ、という認識をし…

2022/04/08 23:31

「テラウォーズ」フレンド機能の紹介をします。フレンド機能でできること！

こんにちは、ちょこきなこです。 「テラウォーズ 」のフレンド周りの機能が充実しているように感じました。 1：プロフィールを見る2：チャットメッセージを送る3：バトルを挑む4：リアルタイム観戦5：カムバックリクエスト6：フレンド解除7：ハイタッチ8：アイテムリクエスト9：アイテム寄付10：おすそ分け※「おすそ分け」は、課金パックを購入することによってアイテムをフレンドに配布できる機能 フレンド機能を使うと、どういったメリットがあるかというと、コインやチップなどのリソースを集めやすくなります。 特に序盤は育成が捗るため、必須の機能と言っても過言ではありません。 最近のアプリのフレンド機能って、ほぼ…

2022/04/08 23:31

「とある魔術の禁書目録 幻想収束（イマジナリーフェスト）IF」タップエフェクトの紹介。UIがタップエフェクトを見た方が良い理由。

こんにちは、ちょこきなこです。 「とある魔術の禁書目録 幻想収束 IF」のタップエフェクトが世界観に合ったデザインだな、と感じたので紹介します。 gifだとこんな感じです。 なぜUIのブログでタップエフェクトを紹介するの？と思われるかもしれませんが、 タップエフェクトってアプリの中で最も目にするエフェクトです。また、サービスが終了した画面でも表示される唯一のエフェクトなので、世界観の表現や没入感という観点から見てとても重要な役割があると思っています。 ゲームって、如何に楽しくボタンを押させるか、タップさせるか、といった側面があります。 ですので、UIデザイナーとしては世界観を表現しているか、没…

2022/04/08 23:31

「とある魔術の禁書目録 幻想収束（イマジナリーフェスト）IF」共闘クエストで視線が散り、情報が伝わりづらい。

こんにちは、ちょこきなこです。 「とある魔術の禁書目録 幻想収束 IF」の共闘クエストにて、視線の誘導が上手くいっておらず情報が分散しているように感じました。 具体的なシーンですが、他プレイヤーがボスにダメージを与えたときです。 攻撃したこと、ダメージ値、残HPのゲージが同時にアニメーションするので、視線が散ってしまいます。人は動くものに目が行きがちなので、同時に画面のあちこちに変化があると見落としたり、あるいは見逃さないために集中して、ストレスを与えてしまいます。 なので、アニメーションするタイミングをずらすか、ある程度情報を固めた方が理解しやすいかな、と思いました。 また、別の画面では他の…

2022/04/08 23:31

「東京喰種 :re invoke」タイトル画面にTVアニメーションへのリンクがある。タイトル画面にゲーム外に飛ばすリンクを置く意図とは…

こんにちは、ちょこきなこです。 タイトルのメニューがくるくる回る実装になっていました。 これは…どういう意図だろう…。元々たくさん並んでたのかな…。「お問い合わせ」と「TVアニメ」のプロモーションのリンクがある感じですね…。 「お問い合わせ」のリンクはゲームが立ち上がらないなどの際に必要だとして、「TVアニメ」のリンクは要るかな…。個人的には不要だと思っています。 この画面に来ている人はゲームをプレイしたいから来ているのであって、TVアニメの情報を得たいとは考えていないと思います。ましてやタイトル画面にゲームの外に飛ばす導線を配置するのはゲームに対する冒涜かな、とすら思います。 東京グールはス…

2022/04/08 23:26

「とある魔術の禁書目録 幻想収束（イマジナリーフェスト）IF」変わったルビの表現。アニメだけでは見落としがちな箇所。

こんにちは、ちょこきなこです。 「とある魔術の禁書目録 幻想収束 IF」にて変わったルビが出てきたので紹介します。 これ。 ルビにアルファベットが使用されています。 なるほど…、こういう表現の仕方もあるんですね。改めてルビについて考え直してみたのですが、読み方が分からない文字の読み方を表現するだけではなく、言葉として発しているのはルビの方で、本文はその意味を表す飾りという役割もあります。 超電磁砲と書いてレールガンと読ませる、的な。 それのルビがアルファベットになっただけのこと…。ただ、今回だとルビが読めないのでついつい本文の方を読んじゃうんですよね…。新しい。 こういった表現はアニメを見てる…

2022/04/08 23:26

「東京喰種 :re invoke」Loadingのシルエットがゆがんだデザインになっているので紹介

こんにちは、ちょこきなこです。 「東京喰種 :re invoke」ロード画面でちょっとしたデザインの紹介です。 この「Loading...」文字若干ゆがんでいます。 ベースライン敷くと分かりやすいですかね。 東京グールの世界観的にきれいに並んでいるより、少しいびつな方が合っています。ホラーというかサスペンス的というか…。 かなり細かい部分ですが、デザインが入っていたので紹介させていただきました。

2022/04/08 23:26

「とある魔術の禁書目録 幻想収束（イマジナリーフェスト）IF」アニメのキャプチャーを使用しているのにログに表情差分がある

こんにちは、ちょこきなこです。 「とある魔術の禁書目録 幻想収束 IF」のアドベンチャーパートのログ画面ですが、なぜかアニメのキャプチャー画像を使った場面でも表情差分があるんですよね。 アニメのキャプチャーが表示されてる場面でのログ画面にて、キャラクターの表情差分がありました。 これ、どういう作り方したんだろう…。最初に通常の立ち絵で組んでたけど、その後アニメのキャプチャーを入れる仕様に変更になった、とか？ というのもアニメのキャプチャーを使用しているのであればキャラクターの表情って表に出ないというか、ログ画面でしか確認できないものなんですよね。 割と妙な実装になっているけど、いずれにしろ、丁…

2022/04/08 23:26

「東京喰種 :re invoke」戦闘開始と戦闘終了の演出が世界観どっぷり。実装方法誰か教えて。

こんにちは、ちょこきなこです。 今回は「東京喰種 :re invoke」の戦闘開始と戦闘終了の演出を紹介します。 こちらは戦闘開始の演出。 こちらが戦闘終了時の演出です。 独特な表示のさせ方してますよね。 実装方法はちょっと分からないかも…。少し高度な事をやると出来そうな気もしてるんですが、ここ独自の仕組みを実装しなければいけないだろうし…。 エフェクトの仕組みを流用してるのかな…。まさかレンダリングした画像をコマアニメーションで表示してるとかないよね。(※あんまりその実装は考えたくない) 独自にしろ仕組みにしろコマアニメーションにしろ、結構なこだわりを持ってデザインされている事が伝わるかと思…

2022/04/08 23:26

「とある魔術の禁書目録 幻想収束（イマジナリーフェスト）IF」インデックスの口から見るUXの話。UIやUXはUIデザイナー以外にも接点があるよ。

こんにちは、ちょこきなこです。 今回は主にUIデザイナー以外の方向けの記事になります。早速ですが、この口の形、可愛くないですか？ ドヤ顔。 インデックス is 可愛い。 動くインデックス この辺りはUIというよりUXの範疇かもですが、IPにおいてキャラを似せるというのはとても価値があり、ユーザー体験としては重要な要素です。 よくアニメで作画の出来不出来が話題になりますが、ユーザーはそういった部分をよく見ています。 キャラクターの造形に対してユーザーから指摘が入ると、そのシーンだけではなく、その回全体、最悪作品全体の評価としてレッテルを貼られる懸念があります。 そうなるとコンテンツの価値が下がっ…

2022/04/08 23:26

「東京喰種 :re invoke」タブを跨いだ一括受け取りは手数が省略できて便利です

こんにちは、ちょこきなこです。 「東京喰種 :re invoke」の実績の一括受け取りは便利だな、って話です。 「東京喰種 :re invoke」の実績機能はこのように複数タブを跨いで達成報酬を受け取ることが可能です。 複数タブを跨いで獲得することが出来るので手数が少なくて済みます。なので、時短につながったり、ユーザーのストレスを軽減することにつながります。 無くても不便ではない、という考えの方もいるかもしれませんが、実際に比較すると手数の面で明らかに不便に感じるので、まずは比較してみていただけると良いのかな、と思います。 なぜ複数タブに分けているのか、一つにまとめてはいけないのか、と思う方も…

2022/04/08 23:26

「テラウォーズ」文字間が調整されていないとクオリティに隙が感じられる

こんにちは、ちょこきなこです。 テラウォーズの一部見出しですが、カーニング設定してないように見えました。 この部分です。AとYの間。 改めて引いてみるとこんな感じです。ちょっと気になりませんかね…。 恐らく画像ではなくシステムで表示してるので、カーニングも何も無いとは思うけど、見た目がシステムっぽくないので、逆に画像の水準を求めてしまうのかも。 日本語だと文字の幅は固定なので気にしない人も多いかもしれませんが、アルファベットだと文字幅は可変なのでこういった部分にも気を配る必要があります。ですので、画像で作成する際はきちんと文字の間が均等になるように調整すると良いです。 以上！

2022/04/08 23:26

「テラウォーズ」戻るボタンの位置は不統一でもOK？デメリットが多いので止めた方が良い。

こんにちは、ちょこきなこです。 「テラウォーズ」において、戻るボタンの位置がバラバラなので、それについて書いてみます。 戻るボタンの位置は不統一でもOK？ 結論から言うと、基本的には戻るボタンの位置は統一した方が良いです。まず「戻るボタン」のデザインはこちらです。 左側に戻るべき画面があることを指し示すデザインになっています。 テラウォーズの場合、戻るボタンは基本的には左上にあります。 キャラ強化の確認ポップアップの場合は左上にあります お知らせも左上 ヘルプも左上 …なのですが、ガチャは右下に戻るボタンがあります。 統一されていないデメリット 統一されていないとどんなデメリットがあるのかいく…

2022/04/08 23:26

「テラウォーズ」どのキャラを出撃したら良いかわからない？相性が分かる手段がスマート。

こんにちは、ちょこきなこです。 「テラウォーズ」キャラを出撃させる際に、出撃すべきキャラクターが分からない、という部分のサポートとして盤面のキャラクターとの相性が分かるような機能が実装されています。 キャラクターの属性が表示される キャラクターを選択するとキャラクターの頭上に属性が表示されます。 こんな感じです。これによって選択しているキャラクターとの相性が分かるようになっています。 普段は表示されない 有利属性か相性が分かる 属性の表示だとまだ分かりづらいです。ユーザーが知りたいのは「勝てるかどうか」なので、属性の相性も知りたいと考えます。 そこで敵キャラクターの周囲に相性を示す光彩が表示さ…

2022/04/08 23:26

「テラウォーズ」サウンドはUIと関係ない？BGMが良いとゲームを起動したくなる

こんにちは、ちょこきなこです。 BGMが良いからゲームを起動したくなる テラバトルの特徴の一つに音楽が良いことがあげられます。 具体的にはホーム画面で流れるBGMです。良すぎて画面が遷移出来ないです(するけど) ゲーム好きな人ならあるあるかもしれませんが、音楽を聴くためにゲームを起動したくなることってありますよね。 村から出たくなくなったり、イベント限定曲を聴くために何度も同じイベントを繰り返したりするあの現象です。 BGMからみる世界観 このBGMの雰囲気なのですが、落ち着いていてどことなくエンディングっぽいんですよね。ソシャゲにおいて、起動して最初の画面って世界観を象徴する音楽を流すものが…

2022/04/08 23:26

「妖怪ウォッチメダルウォーズ」ルビはどんな時に必要？ガチャの訴求画像に見る事例紹介

こんにちは、ちょこきなこです。 以前、ルビの振り方に関して記事を書いたことがあったのですが、妖怪ウォッチメダルウォーズのルビの振り方の意図が分からなかったので考えてみました。 「刀使ノ巫女」ルビの振り方にこだわりが感じられる - アプリゲームUIデザイン ルビが振られている場面は？ まずどんなところでルビが振られているか、ですが妖怪ウィッチメダルウォーズの場合はアドベンチャーパートはもちろん、一部画像にも振られています。 アドベンチャーパートのルビ事例 ガチャの訴求画像のルビ お知らせ画像のバナーにルビ でもルビが無いところもある 常にルビが振られていれば分かりやすいのですが、ルビがない場面も…

2022/04/08 23:26

「妖怪ウォッチメダルウォーズ」ボタンの形をしていないとボタンと認識されづらい？カメラに合わせて文字が濃くなり、アクティブかどうか分かるデザインになっている

こんにちは、ちょこきなこです。 一般的にボタンはボタンという形状をしていないとボタンと認識されません。あるいは押せると分からりません。 なので、ボタンは押せる形状でデザインする必要がある。 というのが原則ですが、今回はその例外の事例を紹介してみたいと思います。 ボタンの形状をしていないのに押せるように見える工夫って？ 結論から言うと、カメラの角度に応じて文字の濃度が変わる仕様になっています。 文字が薄いと押せない、濃いと押せる。 という仕様になっています。 こんな感じでカメラを動かすと文字が出たり消えたりする 部分を抽出してみます。 画面の中央から遠くなると文字が消え、画面の中央に近いと文字が…

2022/04/08 23:26

「七つの大罪 光と闇の交戦 : グラクロ」ワールドマップを移動すると、樹が動く演出が実装されている理由を考えてみた

こんにちは、ちょこきなこです。 「七つの大罪 光と闇の交戦 : グラクロ」にてワールドマップを移動すると、樹が動く演出について考えてみました。 「ワールドマップを移動すると、樹が動く演出」って何？っていう方のために説明しますと… ▼gif (ワールドマップ移動) この辺！ ▼gif (画面下部ズーム) 分かりやすくズームしました！ 進んでいる感じがしますー。 こういう演出の発想ってどこから来るんだろうか…。 …と思ったので考えてみました。 恐らく元々は… ボタンの背景色が変わり、視認性が悪くなるのを防ぐ目的で下地を敷いていたのだと思います。 で、きっと木の板とか色々案があった中で木々が選ばれ、…

2022/04/08 23:26

「妖怪ウォッチメダルウォーズ」クローゼット画面に鏡は必要？必要かどうかは前後のストーリーなどによる

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ」では、クローゼット画面に鏡があるんですよね。これを見たときにちょっと感動しました。こういったデザインって見たことなかったんですよね。 じゃあ、今後こういった画面では鏡は必須になるのか、というとそうはならないだろうな、という話です。 鏡があるメリット まず、鏡があるメリットですが、アバターの正面と背面の両方が確認できる点があげられます。これによって、キャラクターを回転させなくとも瞬間的に全体の雰囲気を把握しやすくなり、時短に繋がります。 次に、リアリティのある画面作りができる点もメリットかな、と考えられます。現実世界において、鏡のない…

2022/04/08 23:26

「妖怪ウォッチメダルウォーズ」汎用ポップアップばかりだとシステムっぽく見えない？少しの工夫でゲームっぽく見せている事例の紹介

こんにちは、ちょこきなこです。 UIのパーツを作成していて、汎用の素材を使ってウィンドウをデザインすることって多いと思います。それは汎用的な素材の方がデータの読み込みが速かったり、デザインの統一性が図れたりするためです。 「妖怪ウォッチメダルウォーズ 」ではその汎用素材にデザインのバリエーションがあったので紹介してみます。 シーン別で素材の使い分けがされている 一見すると同じ素材を使っているのですが、よく見るとシーンによってバリエーションがあることに気づくと思います。 1:妖怪、メダル系、汎用 ヒトダマのデザインが並んでいます。 2:メール 封書のデザインが並んでいます。 3:バトル前 剣のマ…

2022/04/08 23:26

「妖怪ウォッチメダルウォーズ」無駄な情報を削るのが良いUI？ゲームにおいては必ずしも当てはまらない

こんにちは、ちょこきなこです。 UIって無駄な情報は削るのが原則だったりします。 それは必要な情報をより際立たせ、ユーザーが何をしたら良いのか迷わないようにする目的があります。ただ、ゲームにおいては必ずしもそうとは言えません。 そこで「妖怪ウォッチメダルウォーズ」での事例を紹介します。 情報を整理するのが良いUIではないのか？ 情報を整理するのが良いUIではないのか？と思われるかもしれませんが、あくまで原則であり鉄則というわけではありません。ゲームはシステムではないので、遊び心も重要です。 今回の事例はバトル中の一時停止の画面のデザインを紹介します。この画面はゲームによって情報量が大きく異なる…

2022/04/08 23:26

「妖怪ウォッチメダルウォーズ 」フィルタ機能はシンプルで十分？利便性は下がるがメリットはある！

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」にフィルタがソートのみで、抽出がないことにびっくりしました。今時シンプルなフィルタ機能は珍しいので考察と紹介をしてみます。 シンプルなフィルタ機能で困らないの？ フィルタ機能がシンプルだと不便に感じないのか疑問があります。というのもソシャゲは情報の種類と扱う対象の数が多いので、目的の対象を見つけようとしたら細かい設定をする必要があります。 実際の画面はこんな感じです。 抽出はなくソートのみのフィルタです。ソートはレベル順、ランク順、獲得順、タイプ順の4つがあります。 レベル順は今育てている妖怪を選ぶ時に便利です。ランク順は次に育て…

2022/04/08 23:25

「妖怪ウォッチメダルウォーズ」UIの統一性は絶対厳守？バフデバフのアイコンから見る事例共有と考察

こんにちは、ちょこきなこです。 UIって一貫性とか統一性って重視されますよね。「妖怪ウォッチメダルウォーズ 」のバトル中のバフ、デバフのアイコンでその一貫性に関する実例の参考になりそうな実装があったので紹介します。 実例は以下の2つの画面です。 雑魚のアイコンの位置 ボス戦はこんな感じ。 それぞれ拡大してみます。 こんな感じでアイコンの位置がHPゲージの上と下とそれぞれに配置されていて統一性がありません。 これを許容するかどうかですが、許容しない場合は以下のようなデメリットが考えられます。 敵妖怪に情報が被る 敵妖怪の3Dモデルとバフデバフのアイコンのグラフィックが被ります。敵妖怪にアイコンの…

2022/04/08 23:25