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

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

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

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

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

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

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

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ラストピリオド」、（以下、ラスピリ）のイベントの感想のフィードバックを回収する機能を紹介します。 イベントを踏破するとシナリオの満足度を聞かれた キャラクターが尋ねるように見せている 評価は５段階 レビューに回答すると報酬が貰える イベントを踏破するとシナリオの満足度を聞かれた イベントのメインシナリオを全て開放するとストーリーの満足度を聞かれました。 ソシャゲのシナリオはスキップ機能が標準機能として実装されていることが多く、また必須の情報でもありません。 まずはイベントを完走し、その後ゆっくり読む楽しみ方もできる部分です。 シナリオの存在をユーザーに意識させることで、シナリオの魅力を訴求したい意思が感じられま

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「&0（アンドゼロ）」、（以下、アンゼロ）のメニューアイコンのデザインを紹介します。 「アンゼロ」のメニューアイコンがスタイリッシュ 注目したいのは中央メニューのアイコン メインコンテンツのアイコンは情報量が多い 小さいアイコンは情報量を削っている 世界観は積極的に取り入れている 権利者さまへ 「アンゼロ」のメニューアイコンがスタイリッシュ 「アンゼロ」のメニューアイコンのデザインがスタイリッシュに感じました！ シルエット的には比較的静かですが、大胆な配色を採用することで、ダイナミックさ、新鮮さ、斬新さが表現されている印象を受けたのかもしれません。 注目したいのは中央メニューのアイコン 中央メニューのアイコン群に

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM　GROWING STARS」（以下、サイスタ）から、お試しで購入できるアイテムがありました！ まずは体験させてみる サイスタのショップには色々な商品が販売されており、その中の１つが無料で試せるようになっていました。 具体的にはこちらの商品です。 プレミアムパック　トライアル 効果としては「３日間STの回復速度が大きくアップ」です。 STの回復時間を短くなるため、ゲームのプレイ時間を延ばすことができます。 行動経済学で以下のバイアスがあります。 保有効果 正常性バイアス 損失回避 商品の無料体験は概ねこれらが作用するデザインだと感じました。 無料で３日間試せる 「保有効果」 人間は自

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、プレゼントボックスのデザインを紹介します！ 「アイナナ」のプレゼントボックスはメールボックスという設定でデザインされています。このデザインにより、以下の特徴があると感じました。 ゲームの世界観が取り入れられている（主観的満足度が高まる） 受け取り済みボックスと切り替えなくて済む（手数の省略） アイコンを使って状態を伝えている 受け取ったら暗くなる（直感的な分かりやすさ、未読メールへの誘導） 該当の画面はこちらです。 アニメーションで見るとこんな感じです。 ホーム画面のEMAILのボタンをタップすると画面遷移します。 1：ゲームの世界観が取り入れられている メールと言う

こんにちは、ちょこです！ 今回は「シャイニングニキ」のロード画面の紹介です。 部屋やショップなど、特定の画面に遷移する際に専用のロード画面が表示されるデザインになっていました。 該当の画面はこちらです。 専用の画面があると没入感が維持される 画面遷移する際に世界観を伝えるためのtips画像が表示されることはゲームUIではよくあるデザインです。 「シャイニングニキ」の場合、遷移先に関係する情報がtips表示されることにより、没入感が削がれにくいデザインになっています。 こちらはショップに遷移する際の画面です。ショップに関するロード画面が表示されます。 ユーザーは目的があって画面遷移するので、その際に少しでも関係のある情報を表示した方がユーザーの意識を阻害しないかな、と考えます。 優先度をつけて画像を用意するのが現実的 しかし、遷移する場所ごとにロード画面を個別に用意することは大変です。 「シ

こんにちは、ちょこです！ 「シャイニングニキ」のADVパートにて、メッセージウィンドウの位置に工夫が見られました。 該当の画面はこちらです！ メッセージウィンドウが画面中央に配置されている このように、メッセージウィンドウが画面下部ではなく、画面中央に配置されています。 一般的に多く見るレイアウトは下揃えのレイアウトです。 今回はメッセージウィンドウが中央寄せになっているメリットを考えてみました。 キャラとメッセージの位置が近いので表情がわかりやすい キャラクターが登場するときはこんな見た目になります。 特徴として、キャラクターの顔とメッセージの位置が近く、表情とセリフが自然と目に留まるデザインになっています。 関係する情報を近くに配置することはデザインの4原則にもある「近接」に該当します。 非デザイナーも必見！「4大原則」を知るだけで見違えるデザインに | Swings そのおかげで、理

こんにちは、ちょこです！ 「シャイニングニキ」で、キャラクターのボイスが聴ける画面にて、画面のデザインが音楽プレーヤー風になっていました。良いですね！ 該当の画面はこちらです！ キャラクターの声を聴きたくなるようなデザイン 他のタイトルでもボイス試聴の機能はしばしば見かけますが、階層としては深いところに配置されがちです。 例えば、 キャラ一覧 ┗キャラ詳細 ┗キャラボイス試聴 という階層に配置されることが一般的かと思います。 下位階層にあるため、利用頻度は少ないと仮定できます。利用頻度が少ないならば学習コストも抑えられると良いと、考えられます。 そういった意味で多くのゲームではキャラボイスを試聴する画面はシンプルな情報で構成されがちです。 そんな中で「シャイニングニキ」ではキャラクターの声が聴きたくなるような、ワクワクするデザインになっていました。 聴くことができるデザイン、聴きたくなるデ

こんにちは、ちょこです！ 「シャイニングニキ」の設定の中に現在時刻表示のオン/オフの機能がありました。 該当の画面はこちらです。 この設定ですね。 切り替えると以下のような挙動になります。 ちょっと分かりづらいかもですが、画面右上に時刻表示が出たり消えたりします。 時刻表示をするほうが良い、と考えていた時期が俺にもありました ゲーム内に時刻表示をしているタイトルはしばしば見かけます。 時刻の表示については、個人的にはポジティブに受け止めていました。 理由としては、スマホゲームは空き時間にプレイすることができるため、据え置きと比較して時間を気にするシーンが多くあります。 ゲームから離脱して時間を確認することもできますが、ゲームから離脱せずに確認できた方が離脱する確率が減るのではないか、と考えていたためです。 しかし「シャイニングニキ」では時刻表示機能を実装した上で、あえて非表示にする機能を実

こんにちは、ちょこです！ 「シャイニングニキ」のホーム画面にて、端末の傾きとニキのアニメーションが連動するデザインになっていました。 該当の画面はこちらです。 アニメーションにするとこんな感じです。 画面からだと分かりづらいのですが、端末を傾けたりするとこのようにニキがアニメーションします。 確認できたボイスのバリエーションは以下の３パターンです。 「頭がフラフラするわ……」 「あなたのイタズラでしょう？わかっているのよ！」 「あれ――？地面が回ってる……？」 バリエーションがあって変化に富んでいるのもいいですよね。 お互いの存在が確認できる この挙動により、端末を通じてニキとプレイヤーがお互いの存在を認識できているかのようなデザインになっています。 まるでそこに居るように感じます。 キャラクターをタップすると反応を返すデザインとの違いも考えてみましたが、ジャイロ機能はユーザーが明確に意図

こんにちは、ちょこです！ 「アッシュアームズ-灰燼戦線-」アドベンチャーパートの選択肢のデザインが他とは変わったデザインだったので紹介してみます。 アドベンチャーパートをデザインする際の参考になれば幸いです。 該当の画面はこちらです。どん！ 選択肢を画面の左右に配置することによって、多くの選択肢が配置できる 選択肢が多いですね…。 画面左に３つ、右に３つ…合計６つの選択肢が配置されています。 画面の左右に配置することによって、より多くの選択肢が配置できるように画面を活用できています。 キャラクターを隠さない位置に選択肢を配置している 選択肢を左右に配置することにより、キャラクターを隠さないように配慮されているのも特徴的です。 とはいえ２人以上になった場合はどうやっても被るだろうから、汎用的なデザインではないかも…？ 恋愛ゲームなどは、キャラクターの表情は常に見たいといったニーズも考えられま

こんにちは、ちょこです！ 「アッシュアームズ-灰燼戦線-」にて、キャラクターのサムネイルを長押しすると反応がすることが分かるUIが実装されていました。 該当の画面はこちらです！ このキャラクターのサムネイルを長押しすると円ゲージが表示され、ゲージが最大になったらキャラクターの詳細画面に遷移します。 動きで見るとこんな感じですね。 ちいさい！大きくします！！ この円ゲージのUIは認知の手掛かりになるUI この円ゲージのUIがあるメリットとして、以下の３点があげられます 長押しをして反応があるかが分かる どの程度の時間を押し続ければ良いのかが分かる ゲームを観ている側が、プレイヤーが何をしているのかが分かる です。 キャラクターのサムネイルを長押しをして、詳細画面に遷移するゲームは珍しくありません。しかし、その為の手掛かりを表示するゲームは多くありません。 長押しして反応を返すデザインは多くの

こんにちは、ちょこです！ 「アッシュアームズ-灰燼戦線-」のバトル中の情報整理について特徴的な場面を紹介します。 該当の画面はこちらです。 空と地面が一望できるデザイン 「アッシュアームズ-灰燼戦線-」の戦闘中の画面では地上で戦闘するキャラクターと、空中で戦闘するキャラクターがいます。 陸空の状況を把握しながら戦闘を進めます。 この時のカメラが特徴的で、空から地上を映しつつも、空の広さが感じられる絵づくりになっています。まるでラピュタの様な浮島の先端で戦闘を繰り広げているような絵です。 また、地上のマスと比較して、空の方が枠が少し大きくデザインされており、これが空間的な広がりを更に感じられるデザインに見えます。 このように「空と地上のユニットの両方を同時に見せたい」というオーダーがあった場合、UIデザイナーとしてはこういった絵づくりが提案できることも重要なスキルなのかな、と思います。 絵が