「キキ＆ララのトゥインクルパズル」デフォルトのユーザー名が世界観に寄り添ってて可愛い
こんにちは！ちょこです！ 「キキ＆ララのトゥインクルパズル」の名前入力画面にて、世界観に寄り添ったライティングだったので紹介します。 該当の画面は以下です。 紹介したいのはこちらの「名無し星」という文字列です。 「名無し星」と「星」が付いているのが可愛いです。 ファンタジーなどの世界観の場合はそれっぽいデフォルト名を用意することがほとんどです。 キキララのような世界観の場合だと、このようにすればいいんですね。 こういった知見はかなりマイナーで込み入った知見です。網羅的にライティングを学んでいる場合は見落とすか、優先度が低いため取り扱われない可能性があります。 一般に、この文字列を指定しているの…
「キキ＆ララのトゥインクルパズル」エンプティステートについてまとめ
こんにちは！ちょこです！ 「キキ＆ララのトゥインクルパズル」のエンプティステートの事例紹介です。 さくっと紹介！ エンプティステートがあったのは以下の画面です。表示可能なメールが無い時です。 該当の部分を抜き出すとこんな感じです。ちなみにキャラクターの名前は「ねこさん」 リトルツインスターズ - Wikipedia ねこさんとキキララたちの関係性は不明ですが、しばしば一緒にいるので少なくとも仲良しだろう、という認識です。 おはよう☆ 昨日はおどろかせちゃって、ごめんなさい。ちょっと、こわい夢を見ちゃったの。 pic.twitter.com/nCASs7cQaS — kikilala_sanri…
「サクラ革命」護符強化画面の文字の色が背景と馴染んでしまっていた
こんにちは、ちょこです。 「サクラ革命」を遊んでいたら、見づらい文字がありました。該当箇所は護符を強化する画面ですね。 画面左端にある、強化後の予測数値が見づらいと感じた文字です。背景の白色と文字の黄色が馴染んでしまっています。 ちなみに通常時はこんな感じです。普通に読める文字色です。 大きくするとこんな感じです。背景色と文字色のコントラストもきちんとあるため読みやすいです。 通常時と比較するとこんな感じです。 部分拡大してみました。ぱっと見、文字が消えているようにしか見えません。 見やすいかどうかについては主観的な要素も含みますが、アクセシビリティの視点から基準が設けられています。 文字サイ…
「サクラ革命」ボタンを段階的に表示することによって、ユーザーの視線を誘導、やることを仄めかすデザインになっています
こんにちは、ちょこです！ 「サクラ革命」のホーム画面にて、アニメーションによる視線誘導がありました。割と見落としやすい部分だと思うので紹介します。 該当のシーンはこちらです。 ホーム画面に遷移した際、下位階層のボタンが時間差でアニメーション表示されます。時間差でボタンが表示されることにより、視線が誘導されます。 視線が誘導されることにより、ユーザーが次に取る行動を暗に仄めかすデザインになっています。 このデザインについてもう少し補足すると、 画面遷移時などは画面内の情報が大きく変わることがあります。 一度に情報が変わると、瞬間的には何が重要なものか分からない為「認知コスト」と「選択肢を選ぶコス…
「サクラ革命」バトル中の文字演出に可愛い花びらが添えられていました。演出中の文字は世界観を表現するチャンス！
こんにちは！ちょこです！ 「サクラ革命」にて、バトル中の演出文字がデザインされていたので紹介します。 ゲーム内に演出はいくつかありますが、どの演出にも共通して「戰」の文字があります。 演出の流れはこんな感じです。バン！バン！バン！と文字が出ます。 「戰」の文字はこちらです。文字の中にワンポイントで花びらが添えられています。 他のデザインも紹介してみます。「戦闘勝演」は勝利演出です。こちらでも同様に「戰」がデザインされています。 「大将戦」はボス戦です。一般的なボスの時に使われています。 「星将戰」も同じボス戦ですが、一般ボスではなくB.L.A.C.K.メンバーの時に使われていました。 こんな感…
「サクラ革命」ストーリーを進めると、日本地図の画面に乙女たちの寄せ書きが追加されるデザインになっている
こんにちは、ちょこです！ 今回は「サクラ革命」のストーリーの進行度の示し方のデザインについて紹介します！ 「サクラ革命」ではストーリーを進めていくと、日本地図に乙女たちの寄せ書きが追加されていくデザインになっていました！ 序章をクリアした時点だと以下のビジュアルです。 主役キャラが住んでいた離島が赤丸で囲われ、平定したことが示されてします。 パーティメンバーのコメントが可愛いですね！ 続いて、一章をクリアした後のデザインを紹介します。 パーティメンバーが増え、賑やかさが増しています。言葉だけでも誰が書いたコメントか分かるのも良いですね！ 以上です。主人公たちは車で旅をしています。 こういった地…
「サクラ革命」メリットが多いはずなのにユーザーから問い合わせが多かったランクアップ時のAPの振る舞いについて
こんにちは、ちょこです！ 今回はグラフィック寄りのUIではなく、サービス寄りのUIの話です。 「サクラ革命」のランクアップ時のAPの振る舞いについてです。 リリース当時「サクラ革命」は主人公(司令)のランクが上がってもAPが回復せず、代わりにAP回復薬が手に入る実装になっていました。 これについてユーザーから問い合わせが多くあったため、2020/12/25(金)にゲーム内調整が入り、APが回復する実装に変わりました。 以下はお知らせ内のプロデューサー&ディレクターレターです。 プロデューサー&ディレクターレター｜サクラ革命 ～華咲く乙女たち～（サクラ革命）公式サイト｜セガ×ディライトワークス …
「サクラ革命」部隊編成時におすすめ編成機能がないので、属性の有利不利が分かりやすく示されていた
こんにちは、ちょこです！ 「サクラ革命」でバトルに入る前の部隊編成画面で、どの乙女が有利属性か、不利属性か分かるように示されていました！ 以下はその部隊編成画面です。 どこに有利属性、不利属性の情報が表示されているかと言うと、少女のサムネイルの上の方にあります。 分かりやすく大きくしてみますね！ 有利属性だとこんな感じです。属性マークの右上に、上向きの赤い矢印が表示されています。 不利属性だとこんな感じです。属性アイコンの右上に、今度は下向きの青い矢印が表示されています。 また、画面下部は属性ごとのフィルタ機能ですが、そこでも有利属性で並び替えやすいように、属性アイコンの右上に矢印が表示されて…
「サクラ革命」ADVパートの仕様が割と複雑だったので整理してみました。3Dと2Dが混在しているのは描画負荷の軽減のため？
こんにちは、ちょこです！ 「サクラ革命」のADVパートの表現がとにかく複雑だったので、どういった要素で構成されているのか整理してみます。 要素を以下の4つに分けて考えてみます。 キャラクター 吹き出し 選択肢 文字色/文字サイズ キャラクター 吹き出し 選択肢 文字 キャラクター まずキャラクター周りで以下の表現がありました。 3D 2D立ち絵 カットイン 敵専用カットイン イラストカットイン ワイプ 猫専用の丸窓 吹き出し専用顔 早速多すぎる…！ 3D：プレイアブルキャラ、B.L.A.C.K.メンバーなど、戦闘シーンに登場するキャラは3Dで表示されます。 ▲プレイアブルキャラ ▲B.L.A.…
「サクラ革命」お知らせ画面の見出しがIPっぽいテキストになっていた
こんにちは！ちょこです！ 「サクラ革命」のお知らせ画面の見出しが『サクラ革命通信』となっていました。通常は『お知らせ』とかなのでIPを意識したライティングになっています。 該当の画面はこちらです。 こんな感じで見出しの部分が『サクラ革命通信』となっています。 この文言について微妙に気になったので周辺事情を調べてみたところ、サクラ大戦シリーズは「お知らせ」ではなく「通信」を使っているようです。 「サクラ革命」のYoutubeでの情報発信は『青ヶ島司令部通信』です。 「サクラ大戦」や「新サクラ大戦」は『帝劇宣伝部通信』。 グッズに関する発信は『太正浪漫堂通信』。 …など。見た限り、どうやらIPとし…
「Food Fantasy フードファンタジー」画面遷移演出を考える際に、場所が変わるという意識で演出を作るとシームレスな演出になって没入感が高まるかもしれない
こんにちは！ちょこです！ 「Food Fantasy フードファンタジー」にてレストランの画面に遷移する際に、扉を開ける演出がなされていました。 こちらが遷移前の画面です。 レストランに遷移する際は、こちらの扉が開いて画面遷移します。 こんな感じで扉が開きます。 遷移後の画面はこちらの画面です。 機能が切り替わったということではなく、場所を移動した、ということをユーザーに意識付けようとしているデザインです。 画面と画面の間にロード画面などは表示されず、操作感としてシームレスな印象を覚えます。そのため、待ち時間のストレスも感じにくくなっています。 汎用的な遷移演出は使い勝手が良く便利ではあります…
「Food Fantasy フードファンタジー」石を金貨に変換する際に、遊び心のある演出が実装されていました
こんにちは！ちょこです！ 「Food Fantasy フードファンタジー」にて、金貨獲得があったので事例紹介です。 「Food Fantasy フードファンタジー」では所謂「石」を使って金貨が得られる機能が実装されていました。 リソースの交換機能自体は一般的ですが、演出が実装されているのは珍しいです。 このように台の上に金の魚が乗っています。この魚を叩き割ることで金貨が獲得できます。 アニメーションを確認するとこんな感じです。 ▲叩き割られるためだけに無限に湧いてくるのでちょっと不憫な生物 金貨を得るために金の魚を叩き割る、という演出がなされています。もしかすると、ユーザーが消費する石は金の魚…
「Food Fantasy フードファンタジー」ダイアログを閉じる挙動が不統一だった。ユーザーの学習コストを下げる意味でも挙動の統一は大切
こんにちは！ちょこです！ 今日も今日とて「Food Fantasy フードファンタジー」です。 今回は閉じるボタンの位置が不統一だったので、アンチパターンとしての事例紹介です。 該当の画面はこちらです。ストーリー収集画面の「冒険の思い出」と「イベント」のダイアログを閉じるボタンの位置が異なっています。 「冒険の思い出」はこんな感じの画面です。 右上に閉じるボタンが配置されています。 他の画面でも、パーツのデザインは異なりますが、閉じるボタンは右上にあります。 「イベント」のダイアログはこちらです。 全体的に同じようなデザインなのですが。右上に閉じるボタンは配置されていません。 閉じる際は枠外を…
「Food Fantasy フードファンタジー」ガチャ結果をシェアすると報酬がもらえる機能はユーザーが望む機能なのか？
こんにちは、ちょこです！ 「Food Fantasy フードファンタジー」にて、ガチャで新規獲得したキャラをシェアすると、ガチャ1回分の報酬が獲得できる機能が実装されていました。 右下の部分のボタンからシェアできます。 私自身はシェアしたことはないので（タイムラインに広告的な投稿したくないので）、報酬が獲得できる頻度について、各キャラにつき1回だけなのか、ガチャ毎に1回だけなのかなど詳細な挙動については把握していません。 この機能の構図としては… ユーザーは報酬が欲しいためにシェアをする 運営はコンテンツを拡散してもらいたいから報酬を配布する という構図です。 Twitterなどでよく見かける…
「Food Fantasy フードファンタジー」UIパーツの中に食器が取り入れられていたデザインの事例紹介
こんにちは、ちょこです！ 「Food Fantasy フードファンタジー」のUIパーツにて、タイトルの世界観が取り入れられたデザインが見られました。 UIパーツをデザインする際の拠り所として、世界観を取り入れることは多いかと思います。参考までに紹介します。 1：ダイアログが箸 2：閉じるボタンが匙 3：ルーレット盤が茶器 4：ドロワーがナイフとフォーク 5：タブが皿 6：キャラメニュー 7：装飾の中に食器が取り入れられている 1：ダイアログが箸 ダイアログが箸です！ ゲームをプレイしていると割と頻繁に表示されるので、強く印象付けられます。 なぜ箸なのかは分からないのですが、直線的なシルエットが…
「Food Fantasy フードファンタジー」エンプティステートは情報が空かどうかだけではなく、ユーザーのストレスになるかどうかも大事な評価軸
こんにちは、ちょこです！ このブログでは何度か紹介させていただいているエンプティステートです。 なぜか海外タイトルで採用されている割合が高いです。文化圏によるメンタルモデルの違いがあるのかな…？ 「Food Fantasy フードファンタジー」で該当する画面を2つ紹介します。 一つ目はチャット欄でコメントがない時。 該当箇所を抜き出すとこんな感じです。 もう一つは自身のプロフィールにある伝言板です！ 抜き出すとこんな感じです。 なんだか…どちらもあまりエラーと関係ないグラフィックの様な気がしないでもない。 「エンプティステート」は本来は情報が何もない時に表示するものではありますが、エラー画面の…
「Food Fantasy フードファンタジー」エラー文に顔文字が使われていた。親しみは出るけど発話者が分からないと戸惑うぜ
こんにちは！ちょこです！ 「Food Fantasy フードファンタジー」にて、エラー文に顔文字が用いられていました。該当の画面はこちらです。 大きくするとこんな感じです。 T_T、体力が足りません。まずは体力を回復してから続けてください〜〜>_< 顔文字があると感情をビジュアルで伝えることができます。 例えば… ありがとう！(*´ω｀*) と ありがとう！(´；ω；`) のように、同じ文字列であっても表現に変化を持たせることができます。このように文章に感情が乗ることによって、より親しみのある表現になります。 エラー文は一般的にはユーザーのストレスになる場面です。そこで少しでも親しみやすいよう…
「Food Fantasy フードファンタジー」図鑑画面のビジュアルデザインがビジュアルに特化しすぎてる件
こんにちは、ちょこです！ 「Food Fantasy フードファンタジー」のキャラ図鑑のような画面のビジュアルデザインが斬新でした。 該当の画面はこちらです。 キャラクターそれぞれが、漫画のコマの様な、結晶の欠片のような枠のデザインになっています。 通常、図鑑画面はリストやサムネイルを並べたレイアウトになっていることがほとんどです。 なぜそうなっているか、理由は分かりませんが「図鑑」という画面名であること、ソシャゲは元々はコレクション要素が強かったためだと考えられます。 画面の挙動はこんな感じです。枠がバラバラに表示されています。 昔のジョジョの格ゲーがこういうデザインだったのを思い出しました…
「Food Fantasy フードファンタジー」サーバー選択画面にアイコンが表示されていてかわいい！
こんにちは！ちょこです！ 「Food Fantasy フードファンタジー」のサーバー選択画面に世界観に沿ったグラフィックが表示されていました。ちょっとしたことですが、デザインとしては珍しい。 何より、とてもかわいい！ 該当の画面はこちらです！ ここの部分ですね。かわいい。 世界観に寄せたサーバー選択画面のデザインは過去にも見てきました。 例えば「聖闘士星矢ライジングコスモ」の場合はこんな感じです。 このようにサーバーの名前がその世界の地名になっています。 「Stormfall: Rise of Balur」の場合も「Food Fantasy フードファンタジー」と同様にアイコンが表示されていま…
こんにちは！ちょこです！ 「食物語」にてプレイ時間に応じて、報酬が獲得できる機能が実装されていました。画面としては以下の画面です。 挙動としてはこんな感じです。ホーム画面から報酬が受け取れるデザインになっています。 施策の概要としてはゲームに、5分、15分、30分、45分、60分、90分…ログインしていると報酬が獲得できます。 どういったレアリティのアイテムであるか個別の説明は省きますが、最後のドーナツは石です。最上位のアイテムがそれくらいである、というくらい。 ソシャゲやYoutubeをはじめとして、すべてのエンタメはユーザーの可処分時間を奪うことが重視されています。 ゲームが楽しければ比例…
「食物語」下地を暗くしてアイコンを明るく描くと、ボタンと認識されやすいよ！
こんにちは、ちょこです。 「食物語」のUIパーツの中でドロワーがありました。デザインの手法としてはスキューモーフィズムです。 デザインの特徴を実例を交えて紹介してみたいと思います。 ドロワーのモチーフとして巻物がよく使われていることを記事にしました。 その時は横に広がるタイプのデザインでしたが、縦に並べるデザインでも活躍させることができます。 こちらがメニューを開いた時の見た目です。 閉じるとこんな感じです。 動きで見るとこんな感じですね。 パーツを拡大するとこんな感じですね。 「巻物部分は確かにスキューモーフィズムだけど、上に乗っているアイコンは記号的でも良いのか？」 と考える方もいるかもし…
「食物語」ゲーム中にキャラクターに関するクイズの機能が実装されていた。日本も昔は〇✖クイズの実装が流行ってたけど目的が違っている
こんにちは、ちょこです！ 「食物語」の施策でクイズがありました。日本でも昔は〇✖クイズを実装するのが流行ってた頃がありましたが、それとは目的が異なっていると感じたので、紹介してみます。 該当の画面はこちらです。 「聖闘士星矢 ライジングコスモ」でも同じような施策がありました。 「食物語」のクイズも「聖闘士星矢 ライジングコスモ」のクイズも、内容としてはゲームのルールを問うものではなく、キャラクターに関する知識を求める問題でした。 日本でもクイズの施策はあった 日本でもガラケーのアプリが流行っていた頃くらいにクイズが取り入れられていたアプリは多くありました。(大体は〇✖クイズでした) 当時、クイ…
「食物語」架空のデザインとスキューモーフィズムの組み合わせについて考えてみた
こんにちは、ちょこです！ 「食物語」のメニューのデザインが「アークナイツ」と同じ思想で作られていると感じました。珍しいのでデザインの比較をしてみたいと思います。 ここがメニュー部分ですね。 敷地の見取り図がモチーフになっており、その中に書庫や農園などの施設が配置されているデザインになっています。 「アークナイツ」のメニューもこれと同様の思想のデザインです。 「アークナイツ」の場合は主人公たちの根城のシルエットがモチーフになっています。ただし、こちらは上面図ではなく側面図になっています。 どちらのデザインも建物内のどこに施設があるのかが示されています。 ただ、個人的には「アークナイツ」のデザイン…
「食物語」スクショを撮るとTwitterに投稿を促す機能がある
こんにちは！ちょこです！ 「食物語」でスクリーンショットを撮ると、Twitterの投稿を促す導線が表示されます。 以下が該当の画面です。スクショを撮った直後の状態です。 分かりますでしょうか？ こんな感じで画面下部に「スクショを撮りました！友達にシェアしましょう！」という訴求文と共にTwitterへの導線があります。 これにより、SNSに拡散する動機を想起させる設計になっています。しかし同時にアプリから離脱する導線設計にもなっています。 アプリの離脱は一般的にはデメリットですが、拡散という意味ではメリットがあります。 ですので、もしこの機能の実装を検討する際は、目的を定めて事前にテストすること…
「食物語」中国のアプリを日本語ローカライズする際のルビの対応事例
こんにちは！ちょこです！ 「食物語」の特徴の一つに難読漢字が多いことが挙げられます。 例えばキャラクターの名前です。 ほとんど中国読みなので分かんないです。中華料理好きな人なら分かるのかな…？ アドベンチャーパートにはルビが振られている部分もありますが、話者名のみです。 文中にはルビは振られていません。 こんな感じで「話者名」のみルビが振られています。 そこでホーム画面に「読み方辞典」なるものが用意されてるんです。 拡大するとこちらです。 情報の階層としては「設定」とか「ヘルプ」といった奥の方にあるイメージだったのですが、結構上層にありますね…。 ヘルプ的なものが上層にある設計って、そもそもの…
こんにちは、ちょこです！ 「食物語」でレベルアップした際に、未開放の機能が開放される条件も表示されていました。 変わった実装だったので紹介します。 該当の画面はこちらです。レベルアップの情報の他に「ここまでレベルアップすると、この機能が開放されますよ」と案内しています。 こちらが拡大した図です。 見た感じ… ステージクリア レベルが一定以上に達する という条件が表示されています。 最近のソシャゲの場合はプレイヤーのレベルが上がっても、パラメーターはあまり変わりません。スタミナ上限が上がる程度です。 画面の情報量が少ないため、装飾や演出を豪華にする手法が取られがちですが「食物語」の場合は… レベ…
「食物語」チュートリアルの中に『プレイヤーの名前を決める』フローを組み込んでおくと、名前入力の画面のデザインできる
こんにちは！ちょこです！ 「食物語」の名前入力画面が世界観に沿っており、没入感を高めるデザインになっていました。 該当の画面はこちらです。 世界観が取り入れられているところを拡大しますね。こんな感じで「委任状」というデザインを用いています。 名前を入力するという目的を達成するだけであれば、汎用的なUIパーツで構成しても問題ありません。 「食物語」ではそれよりもう一歩踏み込んで、ユーザーを世界観により没入させる、というデザインを目指しています。 その結果がこちらの画面に表現されているのかな、と感じました。 判子が押されていたり… 委任状を書いた日付がゲーム開始日になっていたり…、 こういった細か…
こんにちは、ちょこです！ 「食物語」のお知らせ画面が最近よく見るデザインになってる…！ 流行ってるの？知らない間にトレンドなのこれ…！？ 該当の画面はこちらです！ 何に戸惑っているかと言うと、メンタルモデルと違うデザインであることに対する違和感です。過去に同じような感じのデザインを見かけて叫び倒してました。 「ファイナルギア」お知らせ画面の新しいメンタルモデルが出来てきてる…？ - ゲームアプリのUIデザイン 「三国 -IKUSA-」既存のメンタルモデルと違うお知らせ画面のデザインがされていました - ゲームアプリのUIデザイン でも個人的にはUIの評価軸に当てはめると利点も多いので、アリっち…
「食物語」訴求画像を一括で閉じれなくても不思議と快適だと感じた
こんにちは！ちょこです！ 「食物語」のホーム画面遷移時に表示される、お知らせダイアログのデザインが良かったです。見た目ではなく挙動とか設計思想の部分ですね。 該当の画面はこちらの画面です。 タイトルを起動させ、初回にホーム画面に遷移すると、このように訴求画像が表示されます。 よくあるデザインだとこんな感じですね。ホーム画面遷移直後に、このようなお知らせが表示されるタイトルって結構珍しくないかな、と思います。 ▲「ファイナルギア」 画面下部に「今日はこれ以上表示しない」といった、表示をしないようにするための設定があったりします。 後は閉じるボタンですね。「ファイナルギア」の場合は「確定」という文…
こんにちは！ちょこです！ ゲームのUIデザイナーが独学で頑張る際に参考になりそうな書籍を列挙します。 大まかに分類分けしました。各自の業務に必要なものから読んでみてください。 全般 売れるゲームのUI/UX 制作現場の舞台裏 心理学 ［買わせる］の心理学 消費者の心を動かすデザインの技法61 Design Rule Index 要点で学ぶ、デザインの法則150 心を動かすデザインの秘密 認知心理学から見る新しいデザイン学 UIデザインの心理学―わかりやすさ・使いやすさの法則 心理マーケティング100の法則 スライドデザインの心理学 一発で決まるプレゼン資料の作り方 ネットで「女性」に売る 数字…
「食物語」オート戦闘の設定で最後のwaveのみ必殺技を使用する設定がありました
こんにちは、ちょこです！ 「食物語」のクエスト中のオート戦闘の設定で「最終戦で必殺技を発動する」という項目がありました。AIコマンドが少し進化した感じですかね。 該当の画面はこちらです。上の方に小さく「最終戦で必殺技を発動する」という文字が表示されています。 分かりやすく拡大したのがこちらです。 UIの挙動としてはチェックボックスになっており、有効、無効をタップで切り替えることが可能です。 今までこういったゲームの自動戦闘は「必殺技ゲージが溜まったら即発動！」というゲームが多かったように感じます。 例えるなら「ガンガンいこうぜ」状態。 今回の「食物語」は今までのものに「じゅもんつかうな」が追加…
「スタースマッシュ」スライダーでイラストが拡縮できるので片手操作できて便利
こんにちは、ちょこです！ 「スタースマッシュ」にて、カードイラストを拡大縮小する際にスライダーが採用されていました。 便利だったので紹介します！ 対象の画面はこちらですね。 挙動としてはこんな感じです。 このようにスライダーにあわせてイラストが拡大縮小します。スライダーがあることによって片手で操作できるため、大変便利です。 よくある拡大縮小の実装として、ピンチインアウトが採用されていますが、端末を支える手と、ピンチインアウトをする手とが必要となり、結局両手を使うことになります。 横持ちのゲームであれば、元々両手で操作しているため、あまり煩雑さを感じませんが、縦持ちの場合は片手で操作していること…
「ブログリーダー」を活用して、appgameuiさんをフォローしませんか？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からコンボ演出のデザインをご紹介します。音ゲーに限らずコンボは表示は幅広いジャンルに採用される要素のひとつなので、応用もしやすいのかなと思います。 以下、概要です。 特定のコンボ数時にタイトルならではの特殊演出がある 283（ツバサ）COMBO：283プロダクションロゴ 412（シャイニー）COMBO：スワンマーク コンボする…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からキャラのイメージカラーをUIに反映したデザインをご紹介します。キャラクターを訴求するタイプのゲームだと、しばしば見かけることがあります。 以下、概要です。 ユニット単位ではなくアイドルごとにカラーを用意 一色に限定しない 髪の毛や瞳の色をサンプリングしている ユニットごとにトーンを揃えている キャライメージのカラー紹介 ユ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から分かりやすいダイアログのデザインをご紹介します。 以下、概要です。 視線が誘導されやすい配色 押させたい選択肢は右に配置し視線を誘導 2択に絞って迷わせない 本文を読まずに選択肢だけ読んでも判断できるテキスト 視線が誘導されやすい配色 「シャニソン」のダイアログの選択肢は無彩色と有彩色で分けられています。ダイアログが全体的…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からログインボーナス画面のデザインの要素をご紹介します。ログインボーナス画面はユーザーが見る頻度が高い画面だからか、デザインにコストをかけるアプリをしばしば見かけます。 以下、概要です。 デザインバリエーションが豊富 圧迫感を軽減する透過ホワイトボードを採用 シームレスにホーム画面に遷移する ナビキャラの衣装が変わる デザイン…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からライブにおけるスタミナの一括消費機能の利便性についてご紹介します。 以下、概要です。 スタミナ一括消費機能の説明 時間短縮につながる 継続的なエンゲージメント 一括消費するスタミナの量をユーザーが調節できる 常に最大値のスタミナを消費するオプションが便利 獲得できる報酬が倍数で書かれている スタミナ一括消費機能の説明 「シ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ履歴画面をご紹介します。これはガシャの購入履歴が確認できる機能ですね。理由は分かりませんが、比較的見かけるようになった印象です。 以下、概要です。 階層を分けて表示してる ガシャ履歴が確認できるとエラーが出たときに便利 ユーザー間のコミュニケーションにも利用される 階層を分けて表示してる こちらは「シャニソン」のガシ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から赤文字の使い方をご紹介します。赤文字を使っても強調されるかどうかは、下地の色や周囲の情報に埋もれないかなど、他の要素との兼ね合いもあります。ただ、一般的に赤は誘目性の高い色なので、強調色として使いやすいと感じるのかもしれませんね。 以下、概要です。 シャニソンでの赤文字の使われどころを分類してみた 1：注意文言 2：ステー…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ結果をシェアする機能をご紹介します。シェアする情報を選べるのが珍しいデザインでした。 以下、概要です。 シェアする情報を選択できる シェアする文言が変わる シェア可能なアイドルの上限数も変わる シェアする情報を選択できる 「シャニソン」のガシャ結果画面ではガシャ結果をシェアできます。結果をシェアできるゲームはしばしば…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からレビュー誘導のダイアログのデザインをご紹介します。レビューの数や評価を高めたい開発者が多いのか、しばしば見かけるデザインです。 以下、概要です。 イラストには新ユニットが描かれている イラストにアイドルからのメッセージが書かれている イラストはボタンが埋もれないような配色 ダイアログを表示するタイミングはガチャを引いた直後…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からアイドルの情報をフィルタする画面のデザインをご紹介します。名前だけではなく、顔アイコンがあるとより直感的に分かりやすくなるのかも、と感じました。何度か同じようなデザインを紹介しているので、興味があったら他のタイトルのデザインも見ていただければと思います。 以下、概要です。 顔アイコンが表示され直感的に分かりやすい アイドル…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からゲームの没入感を高めるテキストライティングの事例をご紹介します。UIデザイナーが文言を決めることは稀だと思いますが、テキストはゲームの没入感を考慮する上で重要な要素だと考えています。 以下、概要です。 世界観に合ったテキストライティングで没入感アップ 世界観に合ったテキストライティングで没入感アップ 「シャニソン」では世界…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からYouTubeを利用したアイドルたちの実在感を高める取り組みをご紹介します。 UIというよりUX寄りの視点です。「シャニソン」の世界観に対する没入感を高めるデザインの中に、アイドルの実在感を高めるアプローチがある、と解釈しています。 以下、概要です。 YouTubeに動画を残して実在感を高めている YouTubeでアーカイ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からシステム設定でも目立たせたい項目の見せ方をご紹介します。タイトル画面の有無や運用方針ってゲームによって様々ですね。 以下、概要です。 品質設定の項目に「おすすめ」の表示がある グラフィックで表示されているからパッと見て分かりやすい グラフィックで表示している 「おすすめ」と表示している 品質設定の項目に「おすすめ」の表示が…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からモバイル端末とその中に含まれている機能のビジュアルデザインをご紹介します。ここ数年、モバイル端末を模したメニューは頻繁に見かける印象です。実装したい機能と世界観を含めたビジュアルとの相性が良いのかな… 以下、概要です。 モバイル端末を模した画面デザイン 起動演出があると実在感を感じる 各アプリの作り込みを紹介 Twesta…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からタイトル画面でのプレイヤーIDの表示・非表示の切り替えをご紹介します。情報の性質や取り扱いについて考えるきっかけになれば。 以下、概要です。 タイトル画面ではプレイヤーIDの表示・非表示が切り替えられる ゲームの中に入ったら非表示切り替え機能はない 自ら共有するケースは配慮外なのかも タイトル画面ではプレイヤーIDの表示・…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からホーム画面にデザインのバリエーションを持たせている例をご紹介します。ホーム画面は頻繁に訪れる画面なので、何かしら画面に変化を持たせたいと考える開発者やユーザーからの需要があったりするのかな…。 以下、概要です。 ホーム画面のデザインにバリエーションがある アイドルの専用ボイスも用意 稀にユニットのやりとりが見れる デザイン…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から会話パートのスキップ機能をご紹介します。ほとんどのソシャゲには会話シーンをスキップする機能があるので今更かもしれませんが、ちょっと変わっていたので事例として紹介します。 以下、概要です。 画面長押しで会話スキップ ゲージの中央にスキップと書かれているのは指に被らないから どれくらい長押しすれば良いのか分かる 倍速やオートは…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からタイトル画面に開催中のキャンペーンを表示するデザインなどをご紹介します。タイトル画面の有無や運用方針ってゲームによって様々ですね。 以下、概要です。 タイトル画面でキャンペーンを告知 背景イラストを更新 タイトル画面でキャンペーンを告知 「シャニマス」では、タイトル画面左下隅に開催中のキャンペーンの画像を小さく表示していました。例えば添付…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からアプリのデータサイズが少ない件に触れたいと思います。アプリのデータサイズが大きいと端末の空き容量を圧迫してアンインストール候補になりがちです。データサイズが少ないとアンインストールの可能性が少し減る気がしているので気になりました。 以下、概要です。 データサイズは40MB以下 ダウンロードデータは…ある！ もしかするとブラウザのキャッシュ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ」（以下「シャニマス」）からP（プロデューサー）デスク画面のアイドルタブの画面をご紹介します。一見して情報量が多く余白の少ない画面ですが、実は見やすくするための工夫がいくつも施された画面でした。 以下、概要です。 表示されている情報量は多い 色とレイアウトでグルーピングされている マスキングテープの柄を利用し色弱対策も アイドルの名前の可読性を担保 表示されている情報量は多い こ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からフィールドマップのアイコンのデザインを紹介します。 主な特徴は以下です！ シンプルな見た目でも優先度付けをされたデザイン 「ホーム」ボタンの枠線は強調されているだけではなく、矢印が取り入れられている 見せ方が綺麗な「次の時間へ」アイコン 8等分にデフォルメされた時計アイコン アイコンのサイズは大きくても文字のサイズは同じ こちらが「ヘブバン」のフィールド画面です。画面下…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「となりのヘルベチカ」 欧文書体に興味を持つきっかけを作る新しいアプローチ？ 「となりのヘルベチカ」は欧文書体を擬人化させた4コマ漫画です。かなり異色な立ち位置の漫画だと感じました。 読んでみた感想としては、ゲームUIデザイナーとして何に役立てるかが結構難しいかもしれません。というのも、主に漫画で取り上げられているのは以下の3点です。 その書体の特徴 使われ方・採用例紹介 小ネタ 個人的には知識欲が満たされるとは思いますが、紹介されている書体が25書体、それぞれ2～6本の4コマ漫画…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「カリグラフィー・ブック 増補改訂版：デザイン・アート・クラフトに生かす手書き文字」 感想としてはざっくり以下です。 読み物として読むのが良いかも 歴史を知ってデザインに活かす 代表的な書体の特徴が細かく説明されている 参考文献 それではそれぞれの詳細を記載します。 読み物として読むのが良いかも 購入したのは数年前ですが、当時文字のアウトラインを加工する際に、書体の構造や成り立ちを知らないとデザインがうまくまとめにくいと感じることがあり、購入しました。カリグラフィーの教本として書か…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「レタースペーシング タイポグラフィにおける文字間調整の考え方」 図も豊富な190ページ レタースペーシング≠カーニング カーニングの視野が広がる ぜひ手元に欲しい一冊 参考文献が多い 図も豊富な190ページ ゲームUIデザイナーのみならず、UIデザイナーでもお世話になる文字詰め。そういった文字の読みやすさを専門的に扱った書籍です。 概要はこんな感じです。 スペーシングの観点から見た時の文字の特徴 欧文のスペーシングのコツ 和文のスペーシングのコツ 和欧混植のスペーシングのコツ 有…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「［デザイン技法図鑑］ひと目でわかるフォントが活きるデザインの基本。」 フォント選びが一目でわかるタイプの書籍 内容的には初心者向けだがデザインに活かすためには知識が必要 非デザイナーの方でも見てるだけで楽しい フォント選びが一目でわかるタイプの書籍 書籍の概要としては、バナーやポスターの事例を紹介し、どのようなフォントが使われているか簡単に紹介している書籍です。 事例としては豊富で、レトロ、モダン、ゴージャスなど39のキーワードと100種類以上のサンプルが掲載されています。 見た…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「タイポグラフィの基本ルール」 発行は2010年です。2023年現在だと内容的にやや古いかもしれません。 また、この書籍に限りませんが、電子書籍において、原寸大として掲載されているフォントのサンプルは役立たないため、電子書籍を購入する際にはメリット、デメリットを自分なりに把握した上で選ぶことをおすすめします。 それでは各章の概要と感想を簡単にご紹介します。 第1章 タイポグラフィの素材を知る 第2章 基本的なテクニック 第3章 レイアウト スタンダード 第4章 書体の選び方と演出ス…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から一定時間選択しないと自動的に決定される、時限式のボタンを紹介します。 主な特徴は以下です！ コントラストが強いから目立つ 動いているから目立つ ゲージがあるのでどの程度待てば良いか分かる コントラストが強いから目立つ この画面は戦闘終了後に連戦するかを聞かれる画面です。この画面を見ると「もう一度プレイする」のボタンが一番目立っているかと思います。 いくつか要因は考えられ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からADVパートの選択肢のレイアウトを紹介します。 主な特徴は以下です！ 何をしている画面か一目瞭然 丸いパーツで心情描写を表現 選択肢は右手で押しやすい位置に配置し、操作する指を自然に誘導 選択肢の文字は画面中央に表示し、目に留まりやすい 何をしている画面か一目瞭然 今回紹介する「ヘブバン」のADV中の選択肢を選ばせる画面の凄いところは、何をしている画面か一見して分かると…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から自動周回機能を紹介します。 クエストをバックグラウンドで自動で周回 バッテリーを意識した省電力なデザイン ミニキャラを表示してゲームらしさを表現 クエストをバックグラウンドで自動で周回 「ヘブバン」の自動周回機能は最大連続8時間、自動でクエストを周回してくれる機能です。遊んでいる感覚としては、遠征や探索、アルバイトなどと呼ばれるようなキャラクターを派遣して時間経過で報酬…
こんにちは、ちょこです。 ここでは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. 「アルスノ」では、アイテムの詳細が書かれたダイアログを開くと、そのアイテムが入手できる場所のリストが表示…
こんにちは！ちょこです！ このブログでは「ゲーム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が半透明になっているわけではない 圧迫感が抑えられたリザルト画面 ©NITRO PLUS/GOOD SMILE COMPANY, Inc. 「アルスノ」のリザルト画面は一部のUIパーツを半透明にして、画面の圧迫感を抑えたデザインに…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）からADVパートの文章の行間について紹介します。 ルビが無い場合は行間が狭め ルビがある場合は行間が広め ログにはルビがなく行間は狭め ルビが無い場合は行間が狭め ©NITRO PLUS/GOOD SMILE COMPANY, Inc. 行間に明確な正解と言うのはありませんが、一般的な行間の目安としては、文字の高さに対して0.25～0.5倍程度と言われることが多い気がします。…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「デザインを学ぶ3 文字とタイポグラフィ」 大まかな構成としては座学が中心で教科書のような書籍です。書籍の目次としては以下の通りです。 【第1講】文字の誕生と変遷・日本語・欧文文字の発祥と発展 ・デジタルフォントの登場 ほか 【第2講】日本語タイポグラフィの基礎・和文文字の構造 ・日本語文字組みの基本 ほか 【第3講】欧文タイポグラフィの基礎・欧文文字の基礎知識 ・欧文文字組みの基本 ほか 【第4講】レイアウトとタイポグラフィ・判型と紙面設計 ・本文のスタイル ほか 【第5講】ブッ…
