こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からマッチング中のスケルトンスクリーンの事例をご紹介します。スケルトンスクリーンとは、ざっくり言うと「ロード中にいい感じに表示する画面デザイン」のようなものだと考えていただければと思います。 以下、主な特徴です！ マッチング中はキャラのシルエットを表示 シルエットは特定の誰かではない 画面を動かして読み込んでる感を表現 適材適所で使う マッチング中はキャラのシルエットを表示 「麻雀一番街」では特定の対局のマッチング中にキャラのシルエットが表示されます。 マッチング中にキャラのシルエットを表示するゲームは珍しくありませんが、一種のスケルトンスクリーンに分類されていると見ることもできそうです。 YouT

こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「となりのヘルベチカ」 欧文書体に興味を持つきっかけを作る新しいアプローチ？ 「となりのヘルベチカ」は欧文書体を擬人化させた４コマ漫画です。 かなり異色な立ち位置の漫画だと感じました。 読んでみた感想としては、ゲームUIデザイナーとして何に役立てるかが結構難しいかもしれません。というのも、主に漫画で取り上げられているのは以下の３点です。 その書体の特徴 使われ方・採用例紹介 小ネタ 個人的には知識欲が満たされるとは思いますが、紹介されている書体が25書体、それぞれ2～6本の4コマ漫画で紹介されているため、かなり情報を省略する構成になっていると感じます。 読み物として見た場合、情報量がかなり薄いため、詳しく知りたい方は結果的に専門書籍をあたることになると思います。 活字が苦手だっ

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

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、画面を長押しした時に表示されるゲージのデザインを紹介します！ サムネイルなど、一部の画像を長押しした際にゲージが表示されるゲームは増えてきていますが「ゆめくろ」のUIにも採用されていました。 このデザインによって、以下の特徴があると感じました。 長押しすることで何かが起きることを伝えている どの程度長押しすれば良いのか伝えている キャラの近くに表示することで、キャラに関連していることを示している 世界観、没入感を意識したデザインが採用されている 色々ありますね。 該当の画面はこちらです。 この画面はキャラクターとスキンシップを図る画面です。 基本的にはボディタッチを中

こんにちは、ちょこです！ 今回は今まで紹介したアプリの中から、長押しした時に表示されるゲージのデザインの共通項をまとめ、一覧で比較してみました。 デザインの共通項は以下の４点に絞りました。 サムネイル暗化…ゲージの視認性を意識しているか 指で隠れない調整…ゲージの視認性を意識しているか デザイン…世界観を取り入れるタイプのデザインか、フラットなデザインか 満タン演出…ゲージが満タンになった時の演出の有無。好み。 各ページにはgif画像も添付してあります。 デザインを検討する際の参考になれば幸いです。 1：ブレイブリーデフォルト ブリリアントライツ(BDBL) 2：モンスターハンター ライダーズ(MHR) 3：カウンターサイド 4：崩壊3rd 5：オクトパストラベラー 大陸の覇者 6：ディープインサニティ アサイラム 7：ワールドエンドヒーローズ 8：ドラゴンクエスト ダイの大冒険　-魂の絆

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

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

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン（アイナナ）」の階層を間取りツールで俯瞰的に見てみる、といったことをやってみました。 画面の階層や導線を可視化してゲーム全体の構成を俯瞰的に見て、何かつかめないかな、と考えています。 全体図としてはこんな感じです。色分けされているのが主な機能です。 ７年目を迎えたゲームにしてはそこまで複雑にはなっていない印象です。 全体の所感としては以下です。 ストーリー関連の画面の導線はスッキリ メンバー画面は機能が多く、導線が複雑 ホール画面はメインコンテンツでは無いが、意外と奥まで画面が続いている 特にホール画面は複雑でした。 ホール画面は部屋をカスタムできたり、他のユーザーにお披露目する画面です。

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「もっとクイズで学ぶデザイン・レイアウトの基本」 美しいのはどちら？ 言葉で説明できますか？ では、さっそく紹介します！ 所感 まずは所感です！ クイズ形式で読者に考えさせる。参加型。 理由を説明させることでデザインの言語化の練習になる。 監修者側の練習にもなりそう。 こんな感じです。 クイズ形式にすることで本を能動的に読むようになります。 受動的な取り組み方ではなくなるため少し疲れますが、その分１つ１つの事例が印象深く記憶に残るのではないかと思います。 こんな人にオススメ！ 出版社の書籍紹介のページでは以下の方を対象にしている旨が書かれていました。 デザインの理論書を頑張って読んだり、美術館に足を運んでセンスを磨いたりしてみても、デザインの力が身に着いた気がしない方。 仕事でデザイナーと接するときに、最低

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「どうする？デザイン クライアントとのやりとりでよくわかる！デザインの決め方、伝え方」 本書は、クライアントとデザイナーの会話と作例で、デザインができあがるプロセスを俯瞰できるデザイン本です。 では、さっそく紹介します！ 所感 まずは所感です。 発注から納品まで、デザインの組み立て方が分かる 工程に応じたフィードバック事例が分かる サンプルのクオリティが高い 架空の発注なのでデザインされたものは実在するものではないのですが、どれもクオリティの高いサンプルだと感じました。 サンプルのクオリティが高いとフィードバックに対する対応が適切に思え、頭に入りやすく感じました。 こんな人にオススメ！ 出版社の書籍紹介のページでは以下の方を対象にしている旨が書かれていました。 もっとスキルアップしたいデザイナー 上手にデザ

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「だから、そのデザインはダメなんだ。　WebサイトのUI設計・情報デザイン　良い・悪いが比べてわかる」 私の20年にわたるノウハウの蓄積を書籍にまとめることにいたしました。 はい、購入しました！ざっくり紹介します！ 所感 webのUIデザインをマルバツで解説する本は少なく貴重 特に設計について解説されている点は好き HCDにも触れられており、基礎的で骨太 索引多い（199語） こんな人にオススメ！ 書籍内では以下の方を対象にしている旨が書かれていました。 デジタルマーケティングに携わるすべての人 ソシャゲのUIデザイナーも、ゲーム内で商品を売ったり、訴求しているため、メインではないが携わっている人の中に含まれると考えます。 感想まとめ 感想まとめです！ このようなデザインの解説本は自分でデザインした時にどう

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、ラジオボタンの見た目でチェックボックスの挙動をするアンチパターンを紹介します。 アンチパターンである理由はいくつかありますが、以下の要素が関係していると考えます。 チェックボックスとラジオボタンは挙動が違う 挙動が違うのに見た目が同じだと、タップするまで挙動が予想できない メンタルモデルが利用できず学習コストが高まる とか。 部屋に例えるなら、押して開けるドアだと思ったら引き戸だった、とかでしょうか。 見た目と挙動が違っていたら誤操作にも繋がったり、アプリの信頼度が低くなるのでなるべく避けたいデザインだと考えます。 該当の画面はこちらです。 こちらはキャラクター画面の

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、いつでもログインボーナスが確認できるデザインを紹介します！ ログインボーナス確認画面はホーム画面右下のカルーセルバナーから遷移できます。 アニメーションで見るとこんな感じです。 結論から書くと、この画面の主な役割はログインボーナスイラストの確認だと考えます。 以下、そのように考えた理由です。 この画面でできることは無い 常時開催しているログインボーナスの進捗状況を確認するための導線は無い 「アイナナ」のキャラクター原案は種村有菜先生 ひとつずつ補足します。 1：この画面でできることはない この画面でできることはありません。画面を開いて、そして閉じるだけです。 以下の情

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、世界観を取り入れたゲームプレイ前の注意喚起画面のデザインを紹介します！ 該当の画面はこちらです。いろいろ書いていますね。 一般的に、この画面では未成年ユーザーに対してゲーム内課金をする際の注意点などが記載されています。 画面に書いてあるテキストは以下の通りです。 このアプリは最後まで 無料で遊ぶことができますが、 一部有料でアイテムを買うこともできます。 ■　未成年の方々へ　■ ステラストーンを買うときは 必ずご両親の許可をもらうか、 いっしょに買うようにしてください。 快適に遊ぶためヘッドホンの ご利用を推奨します。 歩きスマホはやめましょう！ いろいろな注意喚起が

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、キャラクターごとのイメージカラーをUIに取り入れたデザインを紹介します！ イメージカラーをUIに取り入れるデザインはアイドル系というか、キャラクターの魅力を前面に押し出すゲームではしばしば見かける気がします。 このデザインにより以下の特徴があると感じました。 名前とイメージカラーが結びつくことで、より直感的に理解できる 複数人が画面に登場している時に誰の台詞かが分かりやすい 色覚多様性対応にも配慮 該当の画面はこちらです。 UIにイメージカラーが使われている画面はいくつかありますが、今回は会話シーンの画面を例にして紹介します。 1：名前とイメージカラーが結びつくことで

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、ダイアログの閉じるボタンの配置パターンを紹介します！ ゲーム内ではあまりパターンが複数存在することはないのですが「アイナナ」は運用が長い影響もあるのか、いくつかの配置パターンがありました。 見た限りでは以下の３パターンです。 画面下部 画面右上 画面右中段 順に紹介します。 1：画面下部 画面下部に配置するパターンです。 左右どちらの指でも押しやすく、ゲームアプリでは一般的に見かける配置です。 特に縦型のアプリならこの配置一択になる気がしています。 2：画面右上 右手の親指で押す配置です。 画面下部の配置と比較してボタンが小さくなりがちなのが特徴です。 小さくなる分、

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」通称「アイナナ」から、エンプティステートのデザイン事例をご紹介します。 色んなゲームのエンプティステートを紹介して今回で第27回目です。 まず、「エンプティステート」とはどういうものか、簡単にお伝えいたします。 エンプティステートとは、表示する情報がない時にユーザーが見る画面のことだ。 見落とされがちな「エンプティステート」のUXデザインが、実際は一番重要なのかもしれない | TechCrunch Japan 情報が空（エンプティ）、ということですね。 ゲームUIのエンプティステートの場合、機能性だけではなくエンタメ性のあるデザインにすることが出来るため、多様性に富んでいると感じています。