ほんとに基礎的な要素の概要が紹介されている「タイポグラフィの基本ルール」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「タイポグラフィの基本ルール」 発行は2010年です。2023年現在だと内容的にやや古いかもしれません。 また、この書籍に限りませんが、電子書籍において、原寸大として掲載されているフォントのサンプルは役立たないため、電子書籍を購入する際にはメリット、デメリットを自分なりに把握した上で選ぶことをおすすめします。 それでは各章の概要と感想を簡単にご紹介します。 第1章 タイポグラフィの素材を知る 第2章 基本的なテクニック 第3章 レイアウト スタンダード 第4章 書体の選び方と演出ス…

「ヘブンバーンズレッド」色とアニメーションを利用して、画面内でとても目立つ時限式のボタンデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から一定時間選択しないと自動的に決定される、時限式のボタンを紹介します。 主な特徴は以下です！ コントラストが強いから目立つ 動いているから目立つ ゲージがあるのでどの程度待てば良いか分かる コントラストが強いから目立つ この画面は戦闘終了後に連戦するかを聞かれる画面です。この画面を見ると「もう一度プレイする」のボタンが一番目立っているかと思います。 いくつか要因は考えられ…

「ヘブンバーンズレッド」ADV中の選択肢を選ぶ画面のデザインが視線と操作性を意識した直感的なデザインになっている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からADVパートの選択肢のレイアウトを紹介します。 主な特徴は以下です！ 何をしている画面か一目瞭然 丸いパーツで心情描写を表現 選択肢は右手で押しやすい位置に配置し、操作する指を自然に誘導 選択肢の文字は画面中央に表示し、目に留まりやすい 何をしている画面か一目瞭然 今回紹介する「ヘブバン」のADV中の選択肢を選ばせる画面の凄いところは、何をしている画面か一見して分かると…

「ヘブンバーンズレッド」自動周回機能で寝てる間にレベルアップだ！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から自動周回機能を紹介します。 クエストをバックグラウンドで自動で周回 バッテリーを意識した省電力なデザイン ミニキャラを表示してゲームらしさを表現 クエストをバックグラウンドで自動で周回 「ヘブバン」の自動周回機能は最大連続8時間、自動でクエストを周回してくれる機能です。遊んでいる感覚としては、遠征や探索、アルバイトなどと呼ばれるようなキャラクターを派遣して時間経過で報酬…

chromeで全画面スクショを撮影する方法【拡張機能不要】

こんにちは、ちょこです。 ここではGoogle Chromeで開いているページのスクリーンショットを撮影する方法を記載します。 ネットで検索すると、紹介されている情報が古くなってしまったため同じ手段が取れない状況になっていたり、拡張機能を別途用いる方法だったりしてスムーズに対応が出来なくなっているページを見かけます。 全画面のスクショを撮影するだけであれば、デフォルトの機能だけで十分です。以下、挙動を確認した環境です。 OS：windows Google Chromeのバージョン： 111.0.5563.147 スクリーンショットを撮影する手順は以下です。 撮影したいページを開く Ctrl +…

「咲うアルスノトリア」無料アイテムをショップ画面に設置するときの工夫

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）からショップ画面でアイテムが無料で購入できるデザインを紹介します。この無料交換施策は非常に多くのソシャゲで見かける気がします。 無料アイテムはファーストビューにある 毎日違うアイテムが無料で獲得できる 無料アイテムはファーストビューにある ©NITRO PLUS/GOOD SMILE COMPANY, Inc. こちらは「アルスノ」のショップ画面です。いくつか商品が並んでいる…

「咲うアルスノトリア」アイテム詳細のダイアログから、そのアイテムを入手するための導線が設置されて便利

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）からアイテムの入手先を示す導線のリストについて紹介します。 アイテム詳細から入手するための導線が設置されている 繰り返し入手できる手段が上位に表示 アイテム詳細から入手するための導線が設置されている ©NITRO PLUS/GOOD SMILE COMPANY, Inc. 「アルスノ」では、アイテムの詳細が書かれたダイアログを開くと、そのアイテムが入手できる場所のリストが表示…

「咲うアルスノトリア」ホーム画面でボイスが流れる時にテキストも一緒に表示されているので、UDの観点で見た時により分かりやすくなっているデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）からホーム画面でキャラボイスが流れる際のデザインについて紹介します。 テキストがあるからサウンドオフでも安心 ホーム画面で放置しているとボイスが流れる テキストがあるからサウンドオフでも安心 ©NITRO PLUS/GOOD SMILE COMPANY, Inc. こちらは「アルスノ」のホーム画面です。縦画面中央にキャラクターのほぼ全身が表示され、顔の近くにはキャラのセリフが…

「咲うアルスノトリア」押せるボタンの色が大体統一されてて分かりやすい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）から押せるボタンの色の一貫性について紹介します。 押せるボタンは基本的には緑色 もちろん緑じゃないボタンもある 場所によって緑色じゃなくなるボタン 押せるボタンは基本的には緑色 ©NITRO PLUS/GOOD SMILE COMPANY, Inc. こちらは「アルスノ」のホーム画面です。中央にキャラクターが表示され、キャラクターを隠さないように、また押しやすさを考慮した上で…

「咲うアルスノトリア」左右スワイプでタブ切り替え出来て便利！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）から左右スワイプでタブ切り替えができるミッション画面を紹介します。 ミッション画面では左右スワイプでタブ切り替えできる ショップ画面では下タブになっており、左右スワイプで切り替えはできない キャラ画面では左右スワイプでキャラが切り替えられる ミッション画面では左右スワイプでタブ切り替えできる ©NITRO PLUS/GOOD SMILE COMPANY, Inc. 「アルスノ…

「咲うアルスノトリア」キャラ一覧画面のモーダレスなフィルタ機能

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）からモーダレスな挙動になっているフィルタ機能を紹介します。 フィルタ結果をすぐに確認できる 「設定」のボタンで呼び出すソートやフィルタ機能は上位互換 フィルタ結果をすぐに確認できる ©NITRO PLUS/GOOD SMILE COMPANY, Inc. こちらは「アルスノ」のキャラ一覧画面におけるフィルタ機能の挙動です。見て分かる通りUIパーツで言うところのアコーディオンの…

「咲うアルスノトリア」時間差分があるタイトル画面は珍しい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）から条件によってデザインが変化するタイトル画面を紹介します。 時間帯によって変化するデザイン 時間差分によってロゴや文字色も調整 ストーリーの進行によって変化するデザイン 時間帯によって変化するデザイン ©NITRO PLUS/GOOD SMILE COMPANY, Inc. 「アルスノ」をプレイしていて驚いたのはタイトル画面の時間差分があることです。ホーム画面の時間差分は見…

「咲うアルスノトリア」UIを透かすことで、奥行き感・賑やかさ・圧迫感の無さなどに繋がってるリザルト画面のデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）から圧迫感を抑えたクエストのリザルト画面を紹介します。 圧迫感が抑えられたリザルト画面 手前の画像を透かすことで空間に奥行きが生まれる すべてのUIが半透明になっているわけではない 圧迫感が抑えられたリザルト画面 ©NITRO PLUS/GOOD SMILE COMPANY, Inc. 「アルスノ」のリザルト画面は一部のUIパーツを半透明にして、画面の圧迫感を抑えたデザインに…

「咲うアルスノトリア」ルビない時は行間狭め、ルビある時は行間広めでデザインの出し分けがされてた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）からADVパートの文章の行間について紹介します。 ルビが無い場合は行間が狭め ルビがある場合は行間が広め ログにはルビがなく行間は狭め ルビが無い場合は行間が狭め ©NITRO PLUS/GOOD SMILE COMPANY, Inc. 行間に明確な正解と言うのはありませんが、一般的な行間の目安としては、文字の高さに対して0.25～0.5倍程度と言われることが多い気がします。…

座学中心で横断的にタイプグラフィが学べる書籍「デザインを学ぶ3 文字とタイポグラフィ」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「デザインを学ぶ3 文字とタイポグラフィ」 大まかな構成としては座学が中心で教科書のような書籍です。書籍の目次としては以下の通りです。 【第1講】文字の誕生と変遷・日本語・欧文文字の発祥と発展 ・デジタルフォントの登場 ほか 【第2講】日本語タイポグラフィの基礎・和文文字の構造 ・日本語文字組みの基本 ほか 【第3講】欧文タイポグラフィの基礎・欧文文字の基礎知識 ・欧文文字組みの基本 ほか 【第4講】レイアウトとタイポグラフィ・判型と紙面設計 ・本文のスタイル ほか 【第5講】ブッ…

人物に焦点を当てつつインフォグラフィック周りの歴史が知れる「インフォグラフィックスの潮流：情報と図解の近代史」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「インフォグラフィックスの潮流：情報と図解の近代史」 全体の感想 基本的には読み物系です。 デザインだけではなく、人物に焦点を当て、どのような経緯でデザインが成立してきたかが紹介されています。情報やストーリーをどのようにビジュアルに落とし込んできたのか、という歴史に興味がある方だと面白く読めるかもしれません。 教科書や技法書の類ではないので「今すぐ素晴らしいアイコンを作りたいんです！」という情報を求めてる方には向いてないかも…。そういった意味ではやや中級者向けに感じました。 構成と…

「鋼の錬金術師 MOBILE」非戦闘員のキャラをホーム画面に登場させることで自然に原作の魅力を伝えている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）からストーリーの進行に合わせてデザインが変化するホーム画面を紹介します。 最初のホーム画面は第一話の冒頭の街がモチーフ 以降は列車や主人公の故郷がモチーフになる 非戦闘員のキャラをアピールする場に利用 バリエーションがあることで変化に富んだデザインが可能 最初のホーム画面は第一話の冒頭の街がモチーフ ゲームが始まった直後のホーム画面は第一話の冒頭で登場する街がモチーフ…

かわいいロゴデザインの制作過程が知れる「萌えロゴデザインぱーふぇくとまにゅある」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「萌えロゴデザインぱーふぇくとまにゅある」 2015年に出版され、主に可愛い女の子が登場、活躍するアニメやラノベなどのロゴを紹介した書籍です。主にかわいい系のロゴをデザインする時の参考になるかと思います。 この「萌えロゴデザインぱーふぇくとまにゅある」は以下の3つのチャプターに分かれています。 Chapter 1 有名萌え作品のロゴ制作 Chapter 2 萌えロゴデザイン アイデア＆テクニック Chapter 3 萌え表現で活躍する日本語フォント それぞれのチャプターごとに感想を…

事例が豊富でVtuberさんのロゴも紹介されてる「アニメ・ゲームのロゴデザイン」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「アニメ・ゲームのロゴデザイン」 エンタメ業界のロゴをデザインする時のヒントになりそう！ 大まかには見本帳 見ごたえのあるコラム 事例は約500点 アニメ・ゲームのロゴは直近3年のデザインが約半分 Vtuberさんのロゴをまとめた書籍は唯一 文字は小さめ 大まかには見本帳 制作過程なども掲載されていますが、全体のボリュームとしてはごく僅かです。基本的にはロゴ見本帳としてざっくり眺める使い方になると思います。 初学者から中級者に向けて幅広く読みやすい書籍だと感じました。 見ごたえのあ…

「鋼の錬金術師 MOBILE」キャラ強化に必要なアイテムが入手できるクエストへの導線と必要個数の表示は初心者から上級者まで役立つ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）からキャラ強化画面からクエスト選択画面に遷移する導線などを紹介します。 キャラ強化画面とクエスト画面が繋がっている クエストの並び順は開放済みから順に 必要な個数も表示されている キャラ強化画面とクエスト画面が繋がっている 「ハガモバ」のキャラ強化画面ではキャラ強化に必要なアイテムが不足していた場合、そのアイテムが入手できるクエストまでの導線が引かれています。 一連の…

「鋼の錬金術師 MOBILE」選択肢だけを見て判断できる確認ダイアログは便利

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）から確認ダイアログのボタンの中のテキストを紹介します。 汎用のテキストは「キャンセル」「確定」 ちょっと親切なボタンは「キャンセル」「選択」 更に丁寧なテキストは「同意しない」「同意する」 ちょっとマーケティング寄りなテキストは「キャンセル」「無料」 汎用のテキストは「キャンセル」「確定」 まず最初に汎用的なテキストを紹介します。「ハガモバ」では「キャンセル」「確定」…

「鋼の錬金術師 MOBILE」行動済みのキャラをグレーに表示して直感的に伝えるデザインの特徴紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）から行動済みのキャラクターをどのように表示しているかを紹介します。 行動済みのキャラをグレーにする 無彩色にすることで誘目性を下げている 無彩色にすることで非アクティブだと伝えられる 元々グレーのキャラには効果が薄いことも… 行動済みのキャラをグレーにする 「ハガモバ」ではバトル中において、行動が終了したキャラクターはグレーで表示されます。 行動済みのキャラクターかど…

「鋼の錬金術師 MOBILE」ガチャ演出中の指先カーソルの向きまで意識されたクオリティの高いデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）から見やすいお知らせ画面のデザインを紹介します。 リッチなガチャ演出 プレイヤーが演出に介入できるデザイン 指先カーソルを一部反転させているこだわり！ 5：ガチャ演出（人体錬成じゃなかった） リッチなガチャ演出 「ハガモバ」のガチャ演出がリッチって話、リリース直後くらいに話題になってた気がします。以下は演出の流れです。 場所は駅のホーム。キャラクターが弾いたメダルが地…

「鋼の錬金術師 MOBILE」遷移直後に本文が見れたり、手数が少なく操作性の良いお知らせ画面の紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）から見やすいお知らせ画面のデザインを紹介します。 お知らせ本文が最初の階層で確認できる 遷移無しで他のお知らせが読める お知らせ本文が最初の階層で確認できる 「ハガモバ」のお知らせ画面のデザインはこんな感じです。画面左側にお知らせの見出しが並び、右側に本文がプレビューされています。 中国系のアプリを中心に数年前から見かけるフォーマットなので個人的に新奇性は感じられない…

「鋼の錬金術師 MOBILE」ドットキャラを採用することで、世界観を加えた上、視線誘導の効果を高めたノーティフィケーションのデザイン事例

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）の世界観を取り入れたノーティフィケーションを紹介します。 ドットキャラのアニメーションで視線誘導 ドットにすることで情報が整理される ドットキャラのアニメーションで視線誘導 「ハガモバ」のホーム画面の左下には、初心者ミッションを訴求するためのキャラクターがドットで描かれています。 同じ世界観ではありつつもドット表現によって異質なもの、馴染んでいないものとして見えるため…

「鋼の錬金術師 MOBILE」サーバーの名前はハガレンに登場する地名が採用されていました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）のサーバー選択画面のデザインを紹介します。 サーバー内のキャラの情報が見れる デフォルトでオススメサーバーが選択されてる サーバーの名前を地名にして世界観に馴染ませている サーバー内のキャラの情報が見れる 「ハガモバ」はサーバーごとにプレイヤーデータが作成される仕組みになっているらしく、サーバー選択画面で、サーバー内のキャラのアイコン、プレイヤーレベルなどが表示されて…

「鋼の錬金術師 MOBILE」タップエフェクトがハガレンっぽくてかっこいい！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）のタップエフェクトのデザインを紹介します。 タップエフェクトのデザインが「ハガレン」っぽい ファンサービスをするとユーザーの満足度に繋がる タップエフェクトのデザインが「ハガレン」っぽい タップエフェクトを見るとハガレンらしいデザインが採用されていましたユーザーが「ハガレン」の世界観を理解しているからこそ選べる、IPタイトルならではの強みのあるデザインだと感じました。…

「鋼の錬金術師 MOBILE」HPゲージにハガレンらしい意匠が施されていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）のバトル中のHPゲージを紹介します。 HPゲージのデザインのバリエーションが多数用意されていた 世界観を取り入れたHPゲージ ここまで差分がある理由は謎 HPゲージのデザインのバリエーションが多数用意されていた 「ハガモバ」はバトルのチュートリアルから始まるのですが、HPゲージのデザインバリエーションが多く、気になりました。 格闘ゲームなど一部の例を除けば、HPゲージ…

「鋼の錬金術師 MOBILE」バトル設定のボタンをアイコンにすることで情報の優劣が付いている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）のバトルメニューのダイアログを紹介します。 一覧性のあるバトルメニュー バトル設定はアイコンで表示されている ボタンの優劣が付いている 一覧性のあるバトルメニュー 「ハガモバ」はバトル中に各種ステージ情報が確認できます。確認できる情報は主に以下の8つかなと思います。 敵味方の位置がわかるマップの上面図 現在のラウンド数 勝利条件 配属条件 三ツ星の条件 「リタイア」ボ…

「鋼の錬金術師 MOBILE」ただ綺麗なだけではなく、何が起きてるのか分かりやすい！BGMを聴く画面のデザインの紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）のサウンドが聞ける画面デザインを紹介します。 音楽を流すとレコードが回るデザイン レコードのジャケットでカテゴリを選択 針を落とす瞬間、針が若干上に移動する レコードの凹凸が分かる光の反射アニメーション 音楽を流すとレコードが回るデザイン 「ハガモバ」にはゲーム内のBGMを聴ける機能が実装されていました。画面のデザインはいわゆるスキューモーフィズムに寄っています。 ま…

「鋼の錬金術師 MOBILE」ストーリー選択画面のデザインに隠れた工夫いろいろ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）の冊子風のストーリー画面のデザインを紹介します。 ストーリー画面は冊子風のデザイン どこをタップするのか分かるデザイン モチーフにあったアニメーション フォーカスによって情報の優劣が明確に 紙面のレイアウトは全部違う 僅かに表紙の中の画像が大きくなる演出 ストーリー画面は冊子風のデザイン 「ハガモバ」のストーリー画面が冊子風のデザインになっているのが面白いと感じました…

「鋼の錬金術師 MOBILE」報酬の溜まり具合によってキャラが進んだり休んだりするデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）の時間経過で報酬が獲得できる機能のデザインを紹介します。 線路を歩いて旅をしている雰囲気を表現 音楽に合わせて歩くのが心地よい 報酬が100%になったらキャラが休憩する ドットのキャラクターをタップすると遷移する 世界観に合わせて宝箱はカバンに 線路を歩いて旅をしている雰囲気を表現 「ハガモバ」には経過時間に応じて報酬が獲得できる機能があるのですが、その画面は旅をして…

「鋼の錬金術師 MOBILE」矢印カーソルがアルの籠手のデザインになっていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）の矢印カーソルのデザインにハガレンの世界観が取り入れられていた件を紹介します。 矢印カーソルのデザインがキャラクターの籠手 アニメーションをして視線誘導 タップエフェクトでタップを促す 場所によって指先の角度を変える 矢印カーソルのデザインがキャラクターの籠手 主にゲーム開始直後のチュートリアルで確認したのですが、タップする箇所を示す矢印カーソルのデザインがキャラクタ…

「鋼の錬金術師 MOBILE」アニメーションみたいなADVだからか、自動的に会話が進行する設定がデフォルトでONなっていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）のADVパートはデフォルト自動で会話が進行する設定だった件を紹介します。 デフォルト設定は「自動中」オン 自動中がオンの時はアイコンがアニメーションしている UIは常に表示 デフォルト設定は「自動中」オン 「ハガモバ」のADVパートのテキスト送りのデフォルト設定は、自動的に会話が進行する設定になっていました。 「ハガモバ」のADVパートは3Dでキャラクターが演技をし、…

「ラストピリオド」サービス終了間際、チャット欄は思い出の共有に溢れる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ラストピリオド」、（以下、ラスピリ）のサービス終了間際のチャット機能を紹介します。 チャットはホーム画面で確認できる チャットは最後にみんな集まってくる場所に アクティブユーザーが集まりやすい チャットはホーム画面で確認できる チャットは専用画面だけではなく、ホーム画面下部からも確認可能です。 文章は一行だけ表示されるデザインです。簡易的な表示ですが、新規投稿の有無や投稿内容の概要を把握するだけであれば、チャット画…

日常のピクトのデザインを見直すキッカケに「世界ピクト図鑑 サインデザイナーが集めた世界のピクトグラム」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「世界ピクト図鑑 サインデザイナーが集めた世界のピクトグラム」 アイコンデザインする時のヒントになりそう！ 幅広くピクトが紹介されている 「i」のピクトは海外でも使われていた トイレのピクトは立ち姿 機能が多様化するとピクトにするのは難しくなる これまで考えてもみなかった視点で説明されている 幅広くピクトが紹介されている 書籍の中では幅広いジャンルのピクトなどが紹介されています。紹介されているのは主に以下の範囲です。 公共・一般施設 交通施設 商業施設 ツーリズム 安全 禁止 警告…

ゲームUIと組み合わせれば新しい表現ができるかも「データ視覚化のデザイン」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「データ視覚化のデザイン」 情報を魅力的なビジュアルにした事例が数多く紹介されていました。 見た目かっこ良いデザインを作るならデザインの知識が必要 ゲームUIとデータビジュアライゼーションの組み合わせは未開拓だったかも チャートやグラフの名前が知れて便利 SFチックなUIを作る時にも良さそう 見た目かっこ良いデザインを作るならデザインの知識が必要 取り扱うデータとグラフの結び付けは紹介されています。いわゆる情報整理の段階ですね。 そこからフォント選びや配色、ちょっとしたレイアウトな…

ゲーム画面を分かりやすく伝えるためのヒントが隠されてそう「たのしいインフォグラフィック入門」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「たのしいインフォグラフィック入門」 インフォグラフィックとUIデザインって似てるところが多い気がしています。 非デザイナーでも楽しく読めそう インフォグラフィックから学びたい画面デザイン ピクトとアイコン作りは似てる？ インフォグラフィックは情報設計に似ている？ 非デザイナーでも楽しく読めそう 本書「たのしいインフォグラフィック入門」は主に以下の3つのジャンルに分けられています。 ピクトグラム 図解 インフォグラフィック それぞれのジャンルの中身については、制作工程の詳細とクオリ…

非デザイナー向けだけどインフォグラフィックの入門書として「伝わる［図・グラフ・表］のデザインテクニック」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「伝わる［図・グラフ・表］のデザインテクニック」 インフォグラフィックの入門書として良さそう！ 難易度は非デザイナー向け 図・グラフ・表に特化したデザイン本 デザイナーにとっては新発見があるかも？ 難易度は非デザイナー向け 図が大きく本文の文字数は少なく、ページ数も多くないため、難易度は易しく非デザイナー向けに書かれた書籍だと感じました。 デザインについては四大原則の紹介する程度に留めており、要素は揃えようとか、情報にはメリハリを付けようといった、最低限の見た目を整える上で知ってお…

かわいい以外も紹介されてるよ「可愛くしてください！ふわっとしたデザインリクエストに応える本」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「可愛くしてください！ふわっとしたデザインリクエストに応える本」 「可愛い」だけではなく、色々なコンセプトのデザインが紹介されています！ 大筋は見本帳 「可愛い」以外にも豊富なデザインが紹介されている ビフォーアフターコーナーもある コラムには「可愛い」を軸にデザインを進める時のヒントが 言葉からビジュアルへの置き換えにチャレンジする人へ 大筋は見本帳 大筋の構成は見本帳であると感じました。見せ方として「○○してください」というクライアントさんへの回答案としてデザインを紹介している…

超初心者向けのバナー紹介本。非デザイナーの方でも安心して読めそう「思わずクリックしたくなる バナーデザインのきほん」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「思わずクリックしたくなる バナーデザインのきほん」 かなり初心者向けで構成されているので、非デザイナーの方でも安心して読めるのではないかと思います。 初めてバナーを作る非デザイナーの方へ パート1で基本、以降はデザインバリエーションを紹介 参考サイトも紹介 練習問題で復習できる 初めてバナーを作る非デザイナーの方へ 最初に強調して書いておくのですが、この「バナーデザインのきほん」は初心者向けの内容になっていると思います。バナーと言えば見た目だけではなく効果計測も重要な要素だと思い…

「クイズ de デザイン 解くだけで一生使える知識が学べる！」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「クイズ de デザイン 解くだけで一生使える知識が学べる！」 2022/8/22に発売されているので比較的新しめ！ 早速紹介していきます！ 徐々に難度が上がる構成 デザインのTIPSが分かりやすい どこでどのように見るもの？という視点が面白かった 中でも面白かったのは中吊り広告 気軽に読んで知識の棚卸し 徐々に難度が上がる構成 「クイズ de デザイン」では以下の5つのチャプターつに分けられて構成されています。 デザインが与える印象 どうすれば意図したデザインが作れるのか デザイ…

シンプルなデザインパターン45種「あるあるデザイン」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「あるあるデザイン」 ポスターやバナーなどのグラフィックデザインを作成する時のヒントになりそう！ 記号化したパターンで覚える 一言コメントで目的を再確認 初心者でも見やすいデザインパターン 豊富な45種のデザインパターン トレンドは控えめ、汎用性は高い 記号化したパターンで覚える 書籍の特徴として、代表的な構図やパターンを言葉で紹介している点があげられます。例えば「シンメトリー」みたいな感じで紹介されています。 実際には以下のように口語でキャッチーな言葉が並びます。 だいたいツート…

女性に限らず使えるデザインパターン集「大人女子デザイン 女性の心を動かすデザインアイデア53」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「大人女子デザイン 女性の心を動かすデザインアイデア53」 グラフィックデザインが中心ですが、見た目が良い感じのデザインを作るためにはある程度知っておくと安心な気がしています。 クオリティはかなり高い OKとNGのポイントがまとめられている 女性以外にも使えるデザインパターン クオリティはかなり高い 「大人女子デザイン 女性の心を動かすデザインアイデア53」ではポスターなどのグラフィックデザインを中心にデザインパターンが紹介されています。 デザインパターンの書籍の良いところとしては…

サムネイルやバナー制作のヒントに「あたらしい、あしらい。あしらいに着目したデザインレイアウトの本」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「あたらしい、あしらい。あしらいに着目したデザインレイアウトの本」 毎回思うけど、このシリーズはデザインサンプルのクオリティが高い！ 足し算のデザインの提案 あしらいで世界観を表現 使いこなすのは高難度 バナー制作に使えるかも 参考書籍 1：なるほどデザイン 2：やってはいけないデザイン 3：パッと目を引く! タイトルまわりのデザイン表現 足し算のデザインの提案 「けっきょく、よはく」では必要な情報を目立たせる為に情報を整理するデザインが提案されていました。 例えるなら、部屋にある…

ユニバーサルデザインの入門書として最適「見えにくい、読みにくい「困った！」を解決するデザイン」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「見えにくい、読みにくい「困った！」を解決するデザイン」 これユニバーサルデザインの入門書としては最適だと思います。 ユニバーサルデザインの入門書として最適 分かりやすい文章のコツまでフォロー デザイナー、非デザイナー問わずおすすめ 参考書籍 1：ミスマッチ 見えないユーザーを排除しない「インクルーシブ」なデザインへ 2：デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ 3：色彩検定公式テキストUC級 4：高齢者のためのユーザインタフェースデザイ…

フォントの選び方がわかる！「ほんとに、フォント。フォントを活かしたデザインレイアウトの本」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「ほんとに、フォント。フォントを活かしたデザインレイアウトの本」 何気にページ数が243ページと大ボリューム！ フォントは知らないと選べない フォント名が分かるように紹介されている 事例のクオリティが高く、数も豊富 NGポイントが簡潔にまとまっている フォントは知らないと選べない 改めて思ったのですが、色や配置はある程度理屈でデザインできますが、よりベターなフォントがあるかどうかは、存在を知らないと対応できません。 なんかしっくりこないが、よりマッチするフォントがあるか？と考えた場…

余白を作るコツ、引き算のデザインが分かる！「けっきょく、よはく。余白を活かしたデザインレイアウトの本」

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「けっきょく、よはく。余白を活かしたデザインレイアウトの本」 今回もkindle版で購入しているのでざっくり紹介していきます。 電子書籍だと場所取らないし、電車の中でも読めるし、本棚に並べる時にガッタガタになったりしないのが好きです。 余白をレイアウトに限定しない デザインが使われるシーンを想定した見せ方 NGとOKのデザインの差は大きい 余白をレイアウトに限定しない 余白と聞くとレイアウトを調整して、隙間を空けるのかな、と思う方もいるかもしれませんが、本を見る限り「すっかり見せる…

比べて学べる！「クイズで学ぶデザイン・レイアウトの基本」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「クイズで学ぶデザイン・レイアウトの基本」 キャプチャはセールやってる時期なので半額になっていますね。今回もkindle版で購入しているのでざっくり紹介していきます。 電子書籍だと場所取らないし、電車の中でも読めるし、本棚に並べる時にガッタガタになったりしないのが好きです。 クイズ形式でカジュアルに学べる webの事例も載ってる 独学者の自信になるかも クイズ形式でカジュアルに学べる 書籍の中身ですが、主にグラフィックデザインを中心に提示されたデザインか目的に沿っているかを問うクイズ形式でデザインの知見が紹介さ…

「ラストピリオド」スチームパンクなデザインを取り入れたガチャ画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ラストピリオド」、（以下、ラスピリ）のガチャ画面の絵づくりを紹介します。 世界観が取り入れられたガチャ画面 モニターを模したグラフィックが特徴的 キャラクターがユーザーにメッセージを伝えている 世界観が取り入れられたガチャ画面 「ラスピリ」のガチャ画面は世界観が取り入れたデザインになっていました。 「ラスピリ」をプレイしていて、このような世界観に寄せたビジュアルに力を入れているタイトルだと感じました。もしかすると、…

「ラストピリオド」キャラ強化画面からアイテム入手の導線が用意されてて便利

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ラストピリオド」、（以下、ラスピリ）のアイテムが入手できる場所のリストが便利だったので紹介します。 アイテムを入手できる場所がリスト化されている 起点はキャラ強化画面 アイテムを入手できる場所がリスト化されている 「ラスピリ」で便利だと感じた機能のひとつに、欲しいアイテムがどこで入手できるが逆引きできる機能があります。 というのも「ラスピリ」は運用年数が長く、キャラ強化の手段やそのために必要なアイテムの種類も多岐に…

「ラストピリオド」オート周回機能で他のことをしながらキャラ強化が捗る

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ラストピリオド」、（以下、ラスピリ）のクエストのオート周回機能を紹介します。 ラスピリにはオート周回機能が実装されている クエスト準備画面で設定できる 画面をずっと見ていなくても済むのが便利 ラスピリにはオート周回機能が実装されている 「ラスピリ」にはクエストのオート周回機能が実装されています。 大まかな挙動としては、一度クリアしたことがあるソロクエストをスタミナが尽きるか敵に敗北するまで周回する、という感じです。…

「ラストピリオド」イベントシナリオのレビューを求められた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ラストピリオド」、（以下、ラスピリ）のイベントの感想のフィードバックを回収する機能を紹介します。 イベントを踏破するとシナリオの満足度を聞かれた キャラクターが尋ねるように見せている 評価は5段階 レビューに回答すると報酬が貰える イベントを踏破するとシナリオの満足度を聞かれた イベントのメインシナリオを全て開放するとストーリーの満足度を聞かれました。 ソシャゲのシナリオはスキップ機能が標準機能として実装されている…

「&0（アンドゼロ）」メニューアイコンには世界観が優先度高く取り入れられていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）のキャラクターのフィルタに顔グラフィックがあるデザインを紹介します。 「アンゼロ」のメニューアイコンがスタイリッシュ 注目したいのは中央メニューのアイコン メインコンテンツのアイコンは情報量が多い 小さいアイコンは情報量を削っている 世界観は積極的に取り入れている 権利者さまへ 「アンゼロ」のメニューアイコンがスタイリッシュ 「アンゼロ」のメニューアイコンのデザインがスタイリ…

「&0（アンドゼロ）」キャラフィルタ画面で名前だけではなく顔グラフィックがあることで直感的な理解に繋がる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）のキャラクターのフィルタに顔グラフィックがあるデザインを紹介します。 フィルタにグラフィックがあるタイプ 「アンゼロ」では一部キャラクターを選択する際に、名前だけではなく顔グラフィックを表示されることでより分かりやすいデザインが採用されていました。 ゲームを開始した直後だと、顔はなんとなく覚えていても名前は憶えていない可能性があり、ユーザーに親切なデザインだと感じました。 デ…

「&0（アンドゼロ）」ゲーム開始日ではなく入所日と表記することで嬉しい気持ちになる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）のキャラとの親愛レベルがあがるとパーソナル情報が解放されるデザインを紹介します。 ラベルにも世界観が反映されている 「アンゼロ」をプレイしていると様々なラベルが表示されています。このラベルひとつひとつにも目を向けてみると、UIに関りのあるデザインが見えてきます。 例えば、マイデータ画面では以下のラベルが表示されています。 主人公名 誕生日 入所日 主人公名、誕生日は客観的に分…

「&0（アンドゼロ）」キャラとの親愛レベルがあがるとパーソナル情報が解放される項目が多すぎた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）のキャラとの親愛レベルがあがるとパーソナル情報が解放されるデザインを紹介します。 仲良くなるとプロファイルが明かされていく 「アンゼロ」ではバディとなるカレとの親密レベルを上げていくと、カレのパーソナル情報が明らかになっていくデザインが実装されていました。 これにより、ゲームの進行と共に、カレに対する情報の解像度が高まり、ユーザー体験として面白い試みになっていると感じました。…

「&0（アンドゼロ）」アナログ時計盤がかわいい目覚まし設定画面のUI

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）の目覚まし設定機能のUIが面白かったので紹介します。 アナログ時計とデジタル時計のUIが同居 こちらが目覚まし設定画面のUIです。ダイアログの左にアナログ時計、画面右にデジタル時計のUIが並んでいます。 挙動としてはこんな感じです。デジタル時計の部分を操作して任意の時刻を設定します。 操作できる場所は時間と分に分かれていますが、ドラムロールや自由入力式ではなく、一手ずつ時間を…

「&0（アンドゼロ）」ゲーム開始直後の選択肢が分かりやすいラベルに設定されていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）のボタンのラベルの例を紹介します。 ゲーム開始時の画面で分かりやすいラベル表現 これはゲームを開始直後に表示される、攻略対象のキャラクターを選択する画面です。色々な情報が表示されていますが、今回はボタンのラベルに注目してみます。 「アンゼロ」の場合、以下の選択肢が表示されています。 「他の人も見てみる」 「彼に決める」 このように選択肢を見るだけで何をすれば良いのか分かりやす…

「&0（アンドゼロ）」エンプティステートとクレショフ効果

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）のエンプティステートを紹介します。 プレゼントボックスでエンプティステートが採用 「アンゼロ」の場合はプレゼントボックスでエンプティステートが採用されていました。 エンプティステートの役割については過去に20回以上記事にしたのでそろそろ簡易的に紹介しようかと思いますが、ゲームUIにおいては主に世界観の訴求が特徴的かと思います。 グラフィックを見てみると、犬の後ろ姿が描かれてい…

「&0（アンドゼロ）」サウンド設定のデフォルト値でキャラクターボイスの値が大きかった。訴求したい要素が伝わるデフォルト値

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）のサウンド設定のデフォルト値を紹介します。 BGM、SE、VOICEの音量が異なる まず目に留まったのは「アンゼロ」のサウンド設定のダイアログを開いた際、BGM、SE、VOICEで異なる音量レベルがデフォルト値になっていた点です。値の比率としては1：2：4となっており、キャラクターボイスの音量レベルが最も大きく設定されています。 「アンゼロ」は魅力的なキャラクターが多く登場す…

「千銃士:Rhodoknight」ハロウィン期間中は士官学校の画面がハロウィン一色に！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、季節感を取り入れた画面デザインを紹介します！ ハロウィンに合わせた画面デザイン 士官学校のデザインを変えたのはキャラクターが居るから トーンが抑えられたデザインに変更 ハロウィンに合わせた画面デザイン 「千銃士R」ではハロウィン期間中、士官学校画面のデザインがハロウィンのデザインになっていました。 一見してそれとわかるように彩度やコントラストが高い色使いになっ…

配色に注目したフィードバックの参考に！「いろいろな、いろ。 配色に着目したデザインレイアウトの本」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ いろいろな、いろ。 配色に着目したデザインレイアウトの本 所感 色以外も変えているが色で印象を大きく変える 目的に合っている配色かが大事 グラフィックデザインのフィードバックをする方におすすめ！ デザインを比較しながら、色の与える印象の違いが書かれています。 色がメインで書かれていますが、色以外が変わっていないデザインのフィードバック、例えば塗り絵のようなデザインのフィードバックをイメージするなら、それは誤解です。デザインのフィードバックする過程でフォントやあしらい、ちょっとしたレイアウトにも言及されています。…

「千銃士:Rhodoknight」その施設で何が出来るのか、簡単な説明が書かれていることでゲームの没入感を高めつつ、伝わりやすさにも配慮したデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、その施設で何ができるのか伝えているデザインを紹介します！ それぞれの施設で何が出来るのか伝えている 前作でもその建物で何が出来るのか書いてある まとめ：没入感を高めつつ利便性にも配慮したデザイン それぞれの施設で何が出来るのか伝えている こちらは士官学校の画面です。敷地内にはいくつかの施設が建てられているのが分かります。 ここまではよくあるデザインなのですが、…

「千銃士:Rhodoknight」キャラクターにプレゼントするアイテムのサムネに？マークが付いてる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、親愛度を高める場面で見られたデザインの工夫を紹介します！ キャラクターの好みを探す楽しさがある！ プレゼントの入手は簡単。だからこそ気軽に試せる！ まとめ ？マークがあることで、隠された情報を明らかにしたくなる 好みではないアイテムをプレゼントした時の反応も見たくなる アイテムは気軽に入手でき、気軽に試せるためストレスも少ない 親愛度の上昇度合いをビジュアルで…

「千銃士:Rhodoknight」親愛度を上げる画面に遷移する時、キャラ選択の手順が省略され、デフォルトでキャラが選択されている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、寮室画面に遷移する際に、予めキャラが選択されているデザインを紹介します！ 最初からキャラが選択された状態で画面に遷移する 「千銃士R」では、寮室画面に遷移する時に「どのキャラの部屋に行く？」という選択が表示されません。タップすると特定のキャラクターの寮室に遷移する挙動になっています。 アニメーションで見るとこんな感じです。キャラクターを選ぶ画面が省略されていま…

「千銃士:Rhodoknight」キャラプロフィールにモデルとなった銃の情報を載せている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、キャラプロフィール画面にモデルとなった銃の情報が掲載されていました！ キャラプロフィールにモデルとなる銃の情報が載ってる キャラプロフィール画面にキャラのモデルになった銃の情報が載っています。 「千銃士R」は銃の擬人化したタイプのゲームです。擬人化系のゲームであれば元ネタを知りたくなるのがオタクの習性です。 モデルとなった銃の情報は公式サイトにも掲載されていま…

ゲームUIの画面ナレッジ

タイトル画面 © SQUARE ENIX CO., LTD. All Rights Reserved. 以下の要素で構成されている 背景 タイトルロゴ TAP TO STAR メニューボタン コピーライト バージョン ユーザーID 他ゲームへの導線 選択しているサーバー CRI WARE（ミドルウェア） BISHAMON（ミドルウェア） LINEアイコン Twitterアイコン それぞれのデザインについて記載する。 背景 画面の多くを占めるため、画面の印象を左右する情報 静止画、動画が採用される 開催中のイベント、周年などの大きな節目に合わせてデザインが更新されることがある ゲームのブランド、…

「千銃士:Rhodoknight」パーティ名が○○小隊と表記され、ゲームの没入感を高めようとデザインされていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、世界観を加味したパーティの名称を紹介します！ デフォルトのパーティ名は○○小隊 「千銃士R」のパーティ画面を見ると、パーティ名が「○○小隊」と表記されていました。 ここの名称は「パーティ」「グループ」「ユニット」などが汎用例として用いられがちです。それらの名称でも問題なくユーザーに伝わると思いますが「千銃士R」の場合は世界観を加味した名称が採用されていました。…

「千銃士:Rhodoknight」ボスのHPゲージがどれくらい残っているのか示すUIの紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、スワイプ操作で銃を手入れし、キャラクターと仲良くなるシステムを紹介します！ ボスのHPゲージが3本もある ゲージの数と色が対応しているプレビュー ボスのHPゲージが3本もある ボスのHPは一般の敵キャラより多い場合があります。1本のゲージにまとめず、複数のゲージに分割することで、HPが減少している様子が分かりやすくなります。また、複数のゲージに分割した分だけ大…

「千銃士:Rhodoknight」手入れする操作とスワイプ操作のイメージが一貫するため、直感的に分かりやすいUI

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「千銃士:Rhodoknight」（以下、千銃士R）から、スワイプ操作で銃を手入れし、キャラクターと仲良くなるシステムを紹介します！ スワイプ操作で銃を手入れすることを表現してるよ！ ゲージがあるから、あとどれくらいスワイプすれば良いのか分かる！ 指で隠れないようにアイコンは大きめだよ！ キャラクターによって銃のデザインも変えているよ！ スワイプ操作で銃を手入れすることを表現してるよ！ 銃を手入れするという設定で、画面…

「千銃士:Rhodoknight」バラの花びらが散るタップエフェクトは世界観が表現されたデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「千銃士:Rhodoknight」（以下、千銃士R）から、タップエフェクトのデザインを紹介します！ タップエフェクトがバラの花びら 「千銃士R」では画面をタップするとエフェクトが表示されます。タップエフェクトを表示しないゲームも多くありますが、画面内のどこをタップしたか分かるため、配信時などには分かりやすさには貢献していると考えます。 バラは「千銃士R」で象徴的なモチーフ 「千銃士R」ではタップエフェクトが表示されるだ…

「千銃士:Rhodoknight」会話の選択肢を自動的に選んで進行するオプションの紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「千銃士:Rhodoknight」（以下、千銃士R）から、会話中の選択肢を自動で選ぶかどうかのオプションを紹介します！ ADVパートにオート時自動選択肢機能があるよ！ 「千銃士R」の会話パートにはいくつかの便利な機能が存在するのですが、今回はその中でも珍しい機能があったので紹介します。 こちらですね。画面上部の「オート時自動選択肢」という機能が表示されています。 デフォルトではオフですが、オンにするとこのように会話をオ…

「千銃士:Rhodoknight」指先カーソルにバラのモチーフが採用され、世界観が強調されてた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「千銃士:Rhodoknight」（以下、千銃士R）から、指先カーソルのデザインを紹介します！ 指先カーソルにバラがモチーフとして使われている ソシャゲにはしばしばタップする場所を示す指先カーソルが使われています。 役割としては矢印と同じです。ただ、矢印と指先カーソルを比較した時に、指先を用いることでタップすることがより伝わりやすくなると感じました。 指先カーソルが分かりやすいように、画像をトリミングしました。白い指先…

「金色のコルダ スターライトオーケストラ」お知らせ画面の見出しが長い場合、文字が流れるアニメーション

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「金色のコルダ スターライトオーケストラ」（以下、スタオケ）から、お知らせ画面のデザインの事例を紹介します！ 文字が入りきらない場合は文字がスクロールする 「スタオケ」のお知らせ画面の見出しは1行でレイアウトされていますが、しばしば枠に収まっておらず見切れています。 見出しが見切れる場合に考えられるレイアウトとしては… 行を増やすなどして表示スペースを増やす 文字サイズを小さくする 見切れることを許容する …など、いく…

「アイドルマスター SideM GROWING STARS」ゲーム内の設定変更画面のプレビューがアニメーションしていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、ライブ設定のプレビューにアニメーションが使われていた事例を紹介します！ プレビューがアニメーションしている！ 「サイスタ」は音ゲーでライブ設定が可能なのですが、リズムアイコンの速度や大きさを変更した際、動画でプレビューができるデザインになっていました。 プレビューがあることで即時フィードバックが得られ、試行錯誤しやすいのですが、それだ…

「アイドルマスター SideM GROWING STARS」エピソード詳細ダイアログを開くと、そのエピソードに登場するキャラが事前に分かる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、エピソードに登場するキャラクターを事前に確認できるデザインを紹介します！ エピソードに登場するアイドルが事前に確認できる ストーリー画面に遷移すると、各エピソードに登場するキャラクターが詳細ダイアログで確認することができます。これにより目当てのアイドルが登場するか事前に分かります。 アニメーションで見るとこんな感じです。エピソードの帯…

「アイドルマスター SideM GROWING STARS」楽曲再開時にUIを非表示にして画面の状態を確認しやすくするデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、画面遷移時のUIパーツのアニメーションのルールを紹介します！ ダイアログを非表示にしても再開ボタンが押せるデザイン 「サイスタ」の楽曲プレイ中に一時停止し、再開する時の方法が面白かったです。 一時停止から再開までのアニメーションはこんな感じです。最下位時に3・2・1とカウントダウンするのはよくある手法だとは思うのですが、今回はそこでは…

「アイドルマスター SideM GROWING STARS」画面遷移する時に何が起きているのか分かりやすくするためのアニメーション

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、画面遷移時のUIパーツのアニメーションのルールを紹介します！ UIパーツの左右移動によって先に進むように見せる演出 アニメーションのパターンは大きく分けて2パターンあります。まずはUIパーツが左右に移動することで先に進む、前に戻る印象を演出しているデザインです。 ストーリー画面では任意のストーリーを選択し、先に進むとUIパーツが画面右…

「アイドルマスター SideM GROWING STARS」画面を傾けて端末っぽいデザインを表現

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、アイドルとのトーク画面のデザインを紹介します！ 端末をナナメに傾ける見せ方 現実世界にあるチャットアプリを模したデザイン アイドル一人一人違うデザイン デザインはアドベンチャーパートにも使われている 端末をナナメに傾ける見せ方 「サイスタ」にはアイドルとトークを楽しめる機能が実装されています。 その画面に遷移した際、端末を斜めに傾けた…

「アイドルマスター SideM GROWING STARS」ホーム画面だけではなくログインボーナスの背景にも時間差分が用意されている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、背景に時間差分のあるログインボーナスの画面を紹介します！ 確認した時間差分は朝昼夕夜の4種類 ログインボーナスの背景に4種類の時間差分がありました。ログインする時間帯とゲーム内の背景がどんな感じで対応しているのかまでは分からなかったのですが、体感としてそこまで大きく違和感を感じるデザインではない印象です。 こちらは昼の背景です。ブライ…

「アイドルマスター SideM GROWING STARS」僅かなシャドウを付けてボタンの表現、強弱などをデザインしている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、フラット寄りのボタンデザインを紹介します！ シャドウを付けることで立体感を演出 こちらはパネルミッション画面です。 右側の枠はボタンです。僅かにシャドウを付け、立体感を表現しています。 このわずかな手掛かりでボタンであることが直感的に理解できるデザインになっています。 左側の枠はボタンではありません。シャドウが付いておらず、立体感が無…

「アイドルマスター SideM GROWING STARS」情報の優劣をつけ、ボタンがたくさんあるにも関わらずきれいに見せるメニュー画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、情報の優劣が付けられたメニューデザインを紹介します！ 情報の優劣はデザインをする上で基本的な考えのひとつだと思うのですが、ソシャゲのようにリリース後から要件が変更される場合、きれいにまとめるのは難しいことです。 そんな中でもサイスタのメニューはきれいにまとめられていると感じました。 情報の優劣がついたメニュー こちらがメニュー画面です…

「アイドルマスター SideM GROWING STARS」想定外の文字数が表示されるキャラクターのプロフィール画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、アイドルのプロフィールに柔軟に対応するデザインがありました！ レイアウトを考える時に最大文字数は考慮されますが、ソシャゲの場合はリリース後の更新やコラボなどの関係でかなりコントロールしづらいことが多いです。 そういった背景を踏まえた上で「サイスタ」のアイドルのプロフィール画面が面白かったので紹介します。 プロフィール画面はこちら 該当…

「アイドルマスター SideM GROWING STARS」無料体験させることで商品購入のきっかけを作るデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、お試しで購入できるアイテムがありました！ まずは体験させてみる サイスタのショップには色々な商品が販売されており、その中の1つが無料で試せるようになっていました。 具体的にはこちらの商品です。 プレミアムパック トライアル 効果としては「3日間STの回復速度が大きくアップ」です。STの回復時間を短くなるため、ゲームのプレイ時間を延ばす…

クライアントから受けたデザインのオーダーをより要望に沿ったデザインに仕上げるためのポイントやコツを紹介「○×でわかる！ デザインが良くなる5つのポイント」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ ○×でわかる！ デザインが良くなる5つのポイント はい、ちゃんと買っていますー 所感 グラフィックデザインを中心に紹介されている クライアントからのオーダーに対して、ビフォーアフターが載っている ビフォーアフターでシンプルに構成されているが、途中経過の解説はない アフターのデザインに疑問点がある場合、理解できないと納得できない 楽しみながら読んでみて！ 似たようなテーマや見せ方の書籍は他にもいくつかあります。人によってはアフターのデザインに物足りなさを感じるかもしれません。 ただ、この手の書籍はアフターのクオリ…

「アイドルマスター SideM GROWING STARS」文字のみで構成された画面のお手本デザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（サイスタ）から、文字のみで構成された画面デザインを紹介します！ 文字の見やすさをコントロールする これはガシャの説明画面です。登場するアイドル、開催期間や条件などが書かれています。 ここで注目したいのは文字のみで構成されている画面の中で、情報の優劣がしっかりとデザインされている点です。 アイドルの文字は大きく読みやすいデザインです。 補足事項は色を薄くして…

「夢職人と忘れじの黒い妖精」操作に応じたリアクションをするスキンシップ画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、操作に応じてスキンシップの取り方を変化させているデザインを紹介します！ 操作とスキンシップの取り方が関連付けされている 該当の画面はこちらです。 このダイアログはキャラクターと行えるスキンシップの一覧です。どのような操作を行うとキャラクターが反応するか、一覧表にまとめられています。 分かりやすくするために大きくしました。 最近工作したものを聞く ＞ タップ毛を触りたいと頼…

「夢職人と忘れじの黒い妖精」推しと出掛ける時専用の画面遷移演出があり、開発者のこだわりを感じた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、画面遷移演出のデザインの事例を紹介します！ ゲームは映像で伝えている情報が多いため、画面内で何が起きているのか伝えることが重要だと考えています。 現実では今いる場所が瞬間的に切り替わることはありませんが、ゲームでは瞬間移動することもあります。 急に場面が移動するとユーザーは何が起きたのか理解できなくなる懸念があります。そのため、画面同士を繋ぎ、何が起きているのかユーザーに…

デザインの見方、捉え方、考え方の本質をつかむ一冊「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」 そのデザインに何が足りないか？ では、さっそく紹介します！ 所感 まずは所感です！ デザイナー間でのフィードバック事例が書かれている フィードバックを通じた、コミュニケーションラリーに焦点を当てている デザイナー歴1年目の方は特に実感を持って読めそう 非デザイナーの片が読むならデザイナーが何を考えてデザインしているかが知れて面白いかも フィードバックを始めて返す人にとっても勉強になりそう 個人的には「どのような言葉を使うか」、「どのような順番でデザイン…

「夢職人と忘れじの黒い妖精」キャラクターとチャットする画面でじわ～っと表示される文字演出

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、キャラクターとのチャット画面のデザインを紹介します！ 現代や近未来SFなどを舞台にしたゲームでは、しばしばチャットアプリを模したデザインが登場しますが、中世ファンタジーを舞台にしたゲームでは珍しいかもしれません。 該当の画面はこちらです。 https://twitter.com/yumekuro_info/status/1473957183176179714/photo/…

「夢職人と忘れじの黒い妖精」無料で商品を購入できる機能を実装する際に、考慮している点を考察してみた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のショップ画面において無料アイテムを販売している施策について紹介します！ 過去にも何度か紹介していく中で、このデザインの目的は主に以下の2点に絞られると考えています。 ショップへの導線強化 売り上げ増加の期待（単純接触効果） 仮に、ショップ画面が有料の商品のみ販売するのであれば、多くのユーザーにとって遷移する動機は生まれません。しかし、一部の商品を無料で販売することで、購買意欲…

「夢職人と忘れじの黒い妖精」きれいに配置せずに敢えて見切れさせることで、スクロールできると気付かせるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のイベントストーリー画面においてスクロールできることが伝わるデザインについて紹介します！ 色んなアプリで何度か紹介していますが、リスト表示が表示されている画面で、スクロールできそうに見えるかどうかは割と重要なデザインです。 デザインをしている最中はついついバランス良くレイアウトを組みがちなので、意外と見落としやすい点だったりします。 該当の画面はこちらです。 短冊のような縦長の…

「夢職人と忘れじの黒い妖精」文章を読まなくてもユーザーが判断できる選択肢

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のレベルアップの確認ダイアログにおいて、分かりやすい選択肢について紹介します！ 該当の画面はこちらです。 こちらは「おまかせレベルアップ」を実行したときに表示されるダイアログです。これはRPG系のソシャゲではしばしばみかける機能ですが、所持リソースを消費してキャラクターのレベルを可能な範囲で上限までレベルアップさせる機能です。 このダイアログの選択肢に注目すると「キャンセル」「…

「夢職人と忘れじの黒い妖精」主人公の名前や誕生日が表示されていると困るから、一時的に非表示にする機能を実装しました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のプロフィール画面から、スクショ用に情報を非表示にする機能を紹介します！ まだあまり見かけない機能ではありますが、地味に浸透してきている印象を受けます。 該当の画面はこちらです。 画面左側の眼鏡のアイコンをタップすると、「主人公」「誕生日」の項目の表示、非表示が切り替えられます。 情報を非表示に切り替えると、画面中央に以下のメッセージが表示されます。 一時的に非表示にします（ス…

「夢職人と忘れじの黒い妖精」キャラクターを長押しすると表示される、ハート型のゲージがかわいい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のアドベンチャーパートから、画面を長押しした時に表示されるゲージのデザインを紹介します！ サムネイルなど、一部の画像を長押しした際にゲージが表示されるゲームは増えてきていますが「ゆめくろ」のUIにも採用されていました。 このデザインによって、以下の特徴があると感じました。 長押しすることで何かが起きることを伝えている どの程度長押しすれば良いのか伝えている キャラの近くに表示す…

デザイン比較：長押しした時に表示されるゲージ

こんにちは、ちょこです！ 今回は今まで紹介したアプリの中から、長押しした時に表示されるゲージのデザインの共通項をまとめ、一覧で比較してみました。デザインの共通項は以下の4点に絞りました。 サムネイル暗化…ゲージの視認性を意識しているか 指で隠れない調整…ゲージの視認性を意識しているか デザイン…世界観を取り入れるタイプのデザインか、フラットなデザインか 満タン演出…ゲージが満タンになった時の演出の有無。好み。 デザインを検討する際の参考になれば幸いです。 1：ブレイブリーデフォルト ブリリアントライツ(BDBL) 2：モンスターハンター ライダーズ(MHR) 3：カウンターサイド 4：崩壊3r…

「夢職人と忘れじの黒い妖精」アドベンチャーパートの吹き出しデザインの紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のアドベンチャーパートから、吹き出しのデザインを紹介します！ アドベンチャーパートとはいわゆるキャラクター達の会話シーンです。メッセージウィンドウのデザインはシンプルな矩形だったり、装飾を付けたり様々ありますが、「ゆめくろ」のメッセージウィンドウは一部吹き出しのデザインが採用されていました。 吹き出しのデザインで感じたことは以下です。 音声オフでもキャラクターの演技や世界観がよ…

「夢職人と忘れじの黒い妖精」短い時間でユーザーに情報を伝えるために、表示する情報の順番を工夫しているお知らせ画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、お知らせ画面の各情報の表示順番を紹介します！ ソート条件が日付順だけではなく、運営側が見せたい情報が上位に表示されていました。 ソートの順番は重要度＞日付になっており、既読になると重要度のフラグがリセットされる感じなのかな…？ 該当の画面はこちらです。見た目的にはよくあるデザイン。バナーで賑やかさを演出しつつ、お知らせがリストで並んでいますね。 ただ、現在は9月ですが、2…

上司がいないデザイナー必見！「赤ペン添削でわかりやすい！ 選ばれるデザイナーへの道」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「赤ペン添削でわかりやすい！ 選ばれるデザイナーへの道」 本書では、デザインの作成において「赤ペン添削」と「会話」という2つのコミュニケーションによりデザインがブラッシュアップされていくプロセスに焦点を当てました。 では、さっそく紹介します！ 所感 まずは所感です！ デザインの工程が見れるのは勉強になる クライアントのフィードバックに対してどのように解釈するか参考になる グラフィックデザインを行う方におすすめ こんな人にオススメ！ 書籍内では厳密に紹介されていませんが、概ね以下の読者を想定している印象を受けまし…