こんにちは、ちょこきなこです。 「リンクスラングス」のフィルタ機能にて昇順、降順という表現を使わない好例があったので紹介させてください。 実は昇順降順は伝わりづらい？ ソシャゲだと「昇順・降順」という言葉を当たり前のように使っていますが、実はどっちがどっちなのか分かっていない人が多い可能性があります。 試しに「昇順 降順」で検索してみると「覚え方」であったり「どっちがどっち」といった言葉が並びます。 なので今まで当たり前に使われていた言葉でしたが、より適切な言葉があるのかもしれません。 どんなところが良かったのか？ 「リンクスリングス」の場合は昇順、降順という表現を使わずに「並びを逆にする」という項目を置き、それで並び順を入れ替える仕様になっている点が良かったと感じています。 数字や五十音のように並び順が開発者とユーザー間で共通認識としてある情報であれば昇順、降順は予想できます。 ですが、

こんにちは、ちょこきなこです。 グラクロにて、戦闘に敗北するとアドバイスのtipsが表示されます。 そのアドバイスが豊富だったので紹介します。 キャラクター単体の育成 キャラ強化 キャラ進化 装備 キャラの育成で少し難易度が高いもの 装備強化 必殺技 キャラ覚醒 やや上級よりのアドバイス 絆 装備覚醒 キャラ超進化 これは戦闘中に取れる手段のアドバイス スキルランクアップ キャラの属性 特殊戦技 デザインに関する余談 タブ部分に奥行き＆色違いが用意されている ページめくり演出が丁寧 キャラクター単体の育成 キャラ強化 キャラ強化は最も難易度が低い育成方法ですね。適当に戦っててもあがるので。 まずはレベルを上げよう！という話です。 キャラ進化 キャラ進化もまぁまぁイージーです。 一部レアリティの高いアイテムが必要になりますが、 R⇒SR⇒SSR⇒URまでしかないので、最大でも３回まで。 しか

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」の妖怪メダルの上に乗る情報が整理されていたので紹介させてください。 どんなデザインになってるの？ まず、左のメダルは「選択状態」「プロフィール設定」「部屋に設定」「ロック」状態。 右のメダルは「部屋に設定」「ロック」状態です。 お気に入りに設定すると「部屋に設定」と「ロック」のアイコンが表示されなくなります。「プロフィール設定」は「ロック」の上位互換だとして、「部屋に設定」はまた別の設定です。 どんなところが良いところなの？ 情報量を制限しているところが良いデザインだと思っています。 この画面で表示されている情報は上記に挙げた以外にも「Lv」や「レアリティ」があります。 このデザインの画面では各妖怪の所持状況やどのメダルを育成するか、手放すかどうかを判断するので「Lv」と「レアリティ」が重要になります。 具体的に言うと、高レア

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」の妖怪大辞典の画面にて、未獲得の妖怪でもシルエットで表示されています。これによってどういった効果があるのか調べてみました。 シルエットを表示することによってどんな効果があるの？ まずシルエットを表示させることにより、どういった効果があるのか考えてみます。 結論から書くと「ツァイガルニック効果」が見込まれます。 未完成こそ最高の強み！ツァイガルニック効果を極めるべし！｜VickyLog! 心理効果と恋愛 要するに「部分的に情報を開示して続きが気になるように仕向ける心理効果」です。 シルエットが表示されている状態だとなんだか気になる。全体を見たくなる。という気にさせます。 シルエットを表示することによって、目的の妖怪を集めたくなる気持ちにさせるために一役買っているのかな、と考えられます。 また、シルエットを取り入れることは図鑑の目

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」にてタップしづらいと感じた部分があったので、なぜそう思ったのか考えてみました。 タップしづらい箇所はどこ？ まずタップしづらいと感じた場所はクエストを選択し、バトルに遷移する場面です。 タップしづらい理由は？ じゃあ、どうしてタップしづらいと感じたのかですが、ほかの画面だと帯全体がタップ範囲になっているんですよね。 これらは枠全体が押せる挙動です。 同じようなデザインなので、枠全体が押せると思い込んでしまい、結果的にボタンしか押せないと、ボタンのサイズが小さくてタップしづらいと感じました。 また、同じようにボタンが並ぶリストもあるのですが、ここは個別のボタンを押さないので、実際にはタップしづらいと感じることが少ないです。 どうすれば良いのか？ ではどうすれば良いのか、考えてみます。 単純に帯まで含めた方が押しやすくてストレスが

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」にて、アバターを着替えた後にモーションがあるのが良いなと思いました。今回はこのモーションがある理由を考えてみます。 なぜ着替えた後にモーションがあるの？ 最初は着替えを完了したことを示すデザインとしての役割かな、と思っていたのですがそれだけではない気がしました。 自分の操作に対してキャラクターがリアクションを返してくれると、キャラの魅力が伝わってくるので、それが心地よさに繋がっているんじゃないのかな、と考えました。 こちらが話しかけたら返事を返してくれる、服を着替えたらポーズを取ってくれる、というコミュニケーションです。 着替えた後にモーションが無いとどう見える？ なくても機能的には何も問題ありません。正常に着替えが完了しているのであればユーザーは困りませんしサービスとして落ち度はありません。無駄な時間である、と考えることも可

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」の実装事例からタブデザインについて考えてみました。 情報の取り扱い方という視点から見た時に、タブは基本的には情報の優劣がなく並列な情報を扱うものです。 しかし、ゲームにおいては五十音のように確実に並列な情報を扱うことは少なく、グルーピング程度の括りで扱われ、大なり小なり優劣がつくものです。そういった時にどういった手法があるのか、という事例紹介になります。 どんなデザインになってるの？ まずは「妖怪ウォッチメダルウォーズ 」はどのようなデザインになっているのか確認します。 見てわかる通り、メダルタブだけ紫色になっています。このように色を分けることによって他と差異を設けています。 これによって、メダルタブは他と違う、という意図を伝えるデザインになっています。 なぜメダルだけ色を変えているの？ なぜメダルだけ色を変えているのかですが

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

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

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

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

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

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

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

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

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

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

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

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