ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

【メインコンテンツ】プレイしたゲーム、参考動画、参考記事

こんにちは、ちょこです。

 

このブログではアプリのゲームUIを中心に記事を書いています。

 

以前、ゲームUIに関して調べようと思った際にwebかDTPベースの情報しかなく、困った末にブログを作成いたしました。主に実際のゲームである事例を元に、ゲームUIの視点で記事を書いています。
プランナーの方、非デザイナーの方、ゲームUIに興味のある方、ゲーム開発者の参考になれば幸いです。

以下、メインコンテンツを紹介いたします。

 

1:紹介させていただいたゲーム

このブログで紹介したゲームの一覧ページです。
プレイしたことがあるゲームや、UIが気になっていたゲームがあれば幸いです。

紹介させていただいたゲーム

 

 

2:参考書籍(作成中)

ゲームUIデザイナーの参考になりそうな書籍の一覧ページです。
読んだ範囲で紹介させていただく予定です。

 

3:ゲームUIデザイナーにオススメしたい動画

講演や用語解説など、ゲームUIデザイナーの学習に参考になりそうなプレイリストです。随時追加、更新いたします。

ゲームUIデザイナーにオススメしたい動画

 

 

4:おすすめのサイト

ゲームUIに関係する記事が多く取り扱われているサイトを紹介します。

おすすめのサイト

 

5:ゲームUIデザイナーの参考になりそうな事例の記事

ゲームUIに関係するインタビューや制作事例などの記事を紹介します。 
(採用目的が強い記事は除外)

ゲームUIデザイナーの参考になりそうな事例の記事

 

 

6:タグ一覧

当サイトのタグ一覧ページです。
スマホではタグ一覧が表示されないのでタグ一覧ページを作成しました。

タグ一覧

 

7:ゲームUI FAQ

過去に書いた記事が「どのような問題解決になるのか」という視点でまとめたページです。自分自身がデザインをする際に困った時用の備忘録も兼ねています。

ゲームUI FAQ

 

 

8:ゲームUIデザインを検討するメモ

ゲームUIについて感じたことなど。メモ。 

ゲームUIデザインを検討するメモ

 

 

9:ブログ運営

以下はブログ運営に興味のある方向けの記事です。

 

 

10:その他

「未定事件簿」誕生日を過ぎたらカレから寂しがってる手紙が届いた…!ごめん!

こんにちは!ちょこです!

 

このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「未定事件簿」から、プレイヤーの誕生日のお祝い機能をご紹介します。

 

該当の画面はこちらです。
こんな感じでカレからプレイヤーに対して誕生日プレゼントが贈られます!

f:id:appgameui:20220121095239p:image

 

誕生日機能はよくある機能じゃないかな、と思われるかもしれませんが「未定事件簿」はもう少しだけ手が込んでいました。

こちらの手紙の文面をよく見て欲しいです…

f:id:appgameui:20220121095245p:image

 

 

ちょこ、誕生日おめでとう。本当は今日の為にいろんな計画があったんだけど、忙しくて忘れてるとは思わなかった。でも、君のために選んだ誕生日プレゼントを手紙と共に送ります。気に入ってくれるといいけど。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

おおおぉぉぉぉお!!!
これ、誕生日当日にプレゼント受け取らなかったバージョンも存在するタイプのゲームなんですね…!

私がプレイする範囲のソシャゲだと、誕生日当日ログインできないユーザーを考慮してなのか、数日の猶予が設けられていることが多い印象でした。油断してました…。

 

しかも全員違うプレゼントを用意してくれている…いやほんとに申し訳ない…。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



「未定事件簿」は誕生日当日は特別なお祝い演出を用意しつつ、当日を過ぎたときのイベントも用意しているデザインになっていました。

誕生日の特別感、誕生日を過ぎた後のカレの感情など、世界観、没入感を大事にしていると感じました。

体験をデザインするということをUXと呼ぶことがあるので、あえてその言葉を流用するならこういったデザインがゲームのUXデザインの一例なのかな、と感じました。

 

 

以上です。

誕生日演出をデザインする際の参考になれば幸いです。

 

 

誕生日演出について、より詳しく知りたい方は公式のリファレンスを引用しておきましたので、ご参照ください。

あなただけのサプライズを、カレと共に過ごそう。
バージョンアップ後、誕生日お祝いシステムが実装されます!

 

誕生日お祝いシステム紹介
誕生日当日にログインすると、「Happy Birthday」のアイコンがメイン画面の右側に表示されます。
一緒に誕生日を過ごしたいカレを選択し、カレが用意したサプライズと誕生日パックを受け取りましょう(複数のカレを選択可能です)。一人分のお祝いタイムは約90秒となります。
誕生日に合計で4つの誕生日パックを受け取ることが可能です。其々の誕生日パックには、【女神の涙】×1、【体力剤・中】×1、カレの思い出スキル強化素材が含まれております。

※解放条件:ゲーム内の個人ページで誕生日を設定する。

※初代のメモ
誕生日を設定すると、誕生日を変更する【誕生日の鍵】が貰えます。このアイテムは一回しか使えませんので、設定する際にはお気を付けください。
誕生日当日にログインすると、「Happy Birthday」ボタンからは入れる誕生日祝いの画面で、カレから贈られたお祝い動画を再生することができます。当日ログインできなかった、又はお祝い動画を最後まで見れなかった場合、誕生日当日から7日間以内にログインすれば、ゲーム内のメールボックスから誕生日パックを受け取ることができます。メールの有効期限は30日となりますので、お忘れないようお気をつけください。
誕生日サプライズは翌日の00:00にて終了します。「カバン-消耗品」で誕生日パックをタップして受け取れます。ただし、誕生日パックを受け取った後、包装用のアイテム(プレゼントボックス)は消費されますので、ご注意ください。
誕生日パックは一年に一回のみ受け取ることが可能です。又、2月29日生まれの弁護士様の誕生日サプライズは、当年が平年の場合は2月28日、閏年の場合は2月29日に解放されます。

「未定事件簿」公式サイト-恋愛推理ゲームアプリ

 

 

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「未定事件簿」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

ネットワークサービスにおける著作物の利用に関するガイドライン

 

主な参照箇所を抜粋します。

個人であるお客様が「崩壊学園」、「崩壊3rd」及び「原神」「未定事件簿」からキャプチャーした映像及びスクリーンショットした静止画(以下「本著作物」といいます。)を利用して創作された動画や静止画を、適切な動画や静止画の共有サイトに投稿(実況を含む)し、又は収益化することに対して、当社らは、以下の遵守事項を遵守いただいている限りにおいては、著作権侵害を主張いたしません。

 

以下は確認したガイドラインページのキャプチャです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

「未定事件簿」選択肢をゲージが一体となったデザイン、ちょっと変わったバトル画面の事例紹介

こんにちは!ちょこです!

 

このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「未定事件簿」から、選択肢とゲージが一体となったUIパーツをご紹介します。

 

該当の画面はこちらです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

状況としては相手に攻撃し、ダメージを与えてHPを減らす、という所謂バトル画面です。

アニメーションで見るとこんな感じの挙動をします。
白いゲージが徐々に減少していくのが分かるかと思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

バトルシステムを少し説明します。
HPは画面右上に表示されていますが、選択肢の中にあるゲージはWAVEの中でのHPというデザインになっています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

選択肢の中のゲージを空にすると次のWAVEに切り替わり、HPをゼロにすると戦闘に勝利します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

WAVEによっては選択肢が1つしかない時もありますが、三択の時もあったりします。
例えばこのWAVEではすべての選択肢のゲージを空にする必要があります。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

便宜上、選択肢と呼称していますが、システム的には敵キャラと見ると分かりやすいかもしれません。

選択肢の中に文字が書かれていますが、戦闘を進める上で、選択肢の中の文字を読み解く必要はありません。攻略に必要なのは属性情報です。

選択肢の左四隅に属性マークが表示されているので、相性の良い手札を選択すれば良い感じです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

どうでしょう…少しは選択肢が敵に見えてきませんか…?

 

見た目が選択肢であるため、ゲージと組み合わせていることに違和感を感じるかもしれませんが、設計の骨子は既存のデザインをベースにし、見た目を変えているだけであるため、意外と学習コストは低く済んでいるのではないかなと思います。

メンタルモデルを利用する重要性を感じました。

 

以上です。

バトル画面をデザインする際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「未定事件簿」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

ネットワークサービスにおける著作物の利用に関するガイドライン

 

主な参照箇所を抜粋します。

個人であるお客様が「崩壊学園」、「崩壊3rd」及び「原神」「未定事件簿」からキャプチャーした映像及びスクリーンショットした静止画(以下「本著作物」といいます。)を利用して創作された動画や静止画を、適切な動画や静止画の共有サイトに投稿(実況を含む)し、又は収益化することに対して、当社らは、以下の遵守事項を遵守いただいている限りにおいては、著作権侵害を主張いたしません。

 

以下は確認したガイドラインページのキャプチャです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

「未定事件簿」タイトル名が表示されていないタイトル画面

こんにちは!ちょこです!

 

このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「未定事件簿」から、ちょっと変わったタイトル画面をご紹介します。

 

該当の画面はこちらです。

f:id:appgameui:20220113100739p:image

 

 

どうでしょう…。
便宜上タイトル画面と呼んだのですが、タイトルの表記がありません。
ゲームのキャラクターもいません。

 

もしかしたらゲームが進行するとデザインも変わっていくタイプのタイトル画面なのかもしれないのですが、ゲームを始めて間もなくはこのような画面デザインです。

 

 

では、タイトルはどこで行われるかと言うと、スプラッシュスクリーンに表示されています。

 

こちらが「未定事件簿」のスプラッシュスクリーンです。
現在開催中のイベントに合わせてデザインが変化しています。

f:id:appgameui:20220113094730p:image

スプラッシュスクリーンなのでゲーム起動直後に表示され、ゲーム起動準備が完了したらタイトル画面に遷移します。

 

えぇ…これどういう意図のデザインだろう…。

考えられるとするなら、

  1. 最初はイベントに合わせてタイトル画面のデザインを変える予定だった
  2. しかしその後、タイトル画面を更新するよりもスプラッシュスクリーンを更新する方が楽だと考えるようになった
  3. デザインの目的は起動したときの変化、新しさ、ワクワク感など
  4. タイトル画面を更新することは手段であって目的ではない
  5. スプラッシュスクリーンにアプリ名があるデザインは一般的

とかかな…
で、本来のタイトル画面にタイトル表記がなくなってしまったわけだけど、それは許容する考え。例えば「sky」でもゲームを始める画面ではタイトルの表記はないデザイン。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

タイトル画面に表示されているモチーフは恐らく「テミス像」。

 テミスはギリシャ神話に出てくる女神ですが、天の神ウラノスと大地の女神ガイアとの間に生まれた娘です。
 テミスはギリシャ語で「安固、不動」「自然の法則」といった意味で、転じて「掟(おきて)」「法」を意味するようになったことから法の女神と称されるようになりました。

「法の女神テミス」像について|本会について|第一東京弁護士会

 

ゲームの世界観を表現する目的であれば、こういった見せ方も選択肢に含まれる、ということなのかな…。興味深いデザインです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

以上です。

タイトル画面のデザインの参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「未定事件簿」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

ネットワークサービスにおける著作物の利用に関するガイドライン

 

主な参照箇所を抜粋します。

個人であるお客様が「崩壊学園」、「崩壊3rd」及び「原神」「未定事件簿」からキャプチャーした映像及びスクリーンショットした静止画(以下「本著作物」といいます。)を利用して創作された動画や静止画を、適切な動画や静止画の共有サイトに投稿(実況を含む)し、又は収益化することに対して、当社らは、以下の遵守事項を遵守いただいている限りにおいては、著作権侵害を主張いたしません。

 

以下は確認したガイドラインページのキャプチャです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

「未定事件簿」ゲーム内アンケート機能があったので事例の紹介

こんにちは!ちょこです!

 

このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「未定事件簿」から、ゲーム内にあるアンケート機能をご紹介します。

 

該当の画面はこちらです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ちなみに画像の中の文章は以下の内容が書かれています。

親愛なる弁護士様:
ゲーム品質向上の為に初代より『未定事件簿』体験アンケート(報酬付き)を作成しました!
アンケートにお答え頂いた弁護士様には、「女神の涙×1」を差し上げます!
アンケートの報酬は、アンケートを回答し、提出に成功した後、自動的にメールボックスに送付されます。

本アンケートにご記入いただいた個人情報及びその他の情報は、厳重に取り扱い適正な管理を実施いたします。本アンケートの調査対象は16歳以上の方のみとなっています。本アンケート調査に参加し、一部個人情報の提示に同意する場合、下の「回答開始」のアイコンをクリックしてください。本アンケート調査について何かご不明な点がございましたら、いつでもお問い合わせください。問い合わせメールアドレスはこちらです:
totcs_jp@mihoyo.co.jp

アンケートは、全25問の質問にお答えいただきます。(所要時間:約10分程度)

 

調査対象が16歳以上としているのはなんだか珍しい気がしました。
何か理由があるのかな…。

 

ちなみにアプリのレーティングはAppstoreは12+

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

12+
このカテゴリのAppには、軽度の暴力的な言葉遣いがまれに、またアニメやファンタジー、もしくはリアルな描写による極度の暴力的表現、成人向けのコンテンツや露骨なテーマ、および擬似ギャンブル等の内容が頻繁に含まれる可能性があるため、12才未満の子どもには不適切とみなされることがあります。

Appの年齢制限指定:App Store ストーリー

 

Google Playでのレーティングは全年齢でした。
アプリの年齢制限が16歳以上ということではなさそう。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

EVERYONE
一般にすべての年齢に適しているコンテンツ。最小限の風刺漫画、空想的内容、軽度の暴力、やや不適切な言葉遣いの使用(低頻度)が含まれます。

アプリやゲームのコンテンツのレーティング - Play Console ヘルプ

 

 

アンケートの設問を軽く紹介します。
まずはゲーム全体の満足度の5段階評価を求めていますね。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

他には最近プレイしたゲームの調査…

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

ゲームを進める上でのモチベーションとなる要素の優先度を回答する設問もありました。

UI的にはチェックボックスを採用しています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

 

最後までアンケートに回答すると報酬が受け取れます。◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

アンケート内容はどうしてもメタ的にならざるを得ないのですが、「未定事件簿」の場合は「初代」というキャラクターが作ったアンケートということになっています。

 

この「初代」というキャラクターはいわゆるナビキャラです。
ゲームの没入感に配慮したり、単純接触効果が働きやすいナビキャラを利用して回答率を少しでも高めようとする意図が感じ取れます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

UIを改善する上で統計やKPIといった客観的な事実も大切ですが、ユーザーの主観的な意見も検討材料としては重要です。

SNSで感想を拾うこともできますが、SNSをやっていないユーザーや鍵アカウントのユーザーの意見は十分に拾うことができません。

また、ユーザーが利用しているプラットフォームも多岐に渡ります。
そのため、ひとつの方法だけではなく、様々な方法で意見を収集ことが大切なのかもしれません。

 

以上です。

ゲーム内にアンケート機能を取り入れる際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「未定事件簿」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

ネットワークサービスにおける著作物の利用に関するガイドライン

 

主な参照箇所を抜粋します。

個人であるお客様が「崩壊学園」、「崩壊3rd」及び「原神」「未定事件簿」からキャプチャーした映像及びスクリーンショットした静止画(以下「本著作物」といいます。)を利用して創作された動画や静止画を、適切な動画や静止画の共有サイトに投稿(実況を含む)し、又は収益化することに対して、当社らは、以下の遵守事項を遵守いただいている限りにおいては、著作権侵害を主張いたしません。

 

以下は確認したガイドラインページのキャプチャです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ