アプリゲームUIデザイン

「陰陽神鬼」ロードゲージに謎の妖怪がハイハイするデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「陰陽神鬼」から、世界観が取り入れられたUIパーツのデザインをご紹介します。 該当の画面はこちらです。ゲーム開始時のロード画面です。 画面下部にハイハイしている赤いお面を被った妖怪がいます。なんだこれ。 アニメーションで見るとこんな感じです。状況がよく分かりませんが、何かを食べて海苔巻きを出している…？ざっくり検索した限り情報出てこなかったけど、何か元ネタがあるのかな…？ ゲージが途切れているようにも見えるデザインも…

2022/07/30 08:58

「チョコボGP'(ダッシュ)」カメラの画角変更で難易度を表現する変わった手法

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「チョコボGP'(ダッシュ)」から、カメラの画角を利用した難易度変更の手法をご紹介します。 「チョコボGP'(ダッシュ)」をプレイしていて気になったのがカメラの画角変更の設定です。画面上部にあるカメラのアイコンをタップすると、1.0倍と1.5倍の2つのカメラが切り替えられます。 このカメラのアイコンですね。とても古いデザインのカメラのアイコンです。 これ、普通に考えると表示範囲が広い方がメリットが多いというか、敢えて…

2022/07/25 23:03

「チョコボGP'(ダッシュ)」日本語版と英語版のタイトルロゴ比較。チョコボのモチーフをどのように取り入れているか

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「チョコボGP'(ダッシュ)」から、日本語と英語版のロゴデザインをご紹介します。 「チョコボGP'(ダッシュ)」ではオプションから日本語と英語の切り替えが出来ます。それにあわせてタイトルロゴのデザインも変わっていたので紹介します。 該当の画面はこちらです。こちらが日本語版ですね。 「チョ」の辺りにチョコボの羽やくちばしなどがモチーフとして取り入れられています。 続いて英語版のロゴです。 こちらも先頭の「C」の文字にチ…

2022/07/24 15:21

目で見て楽しむデザインの本「なるほどデザイン」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「なるほどデザイン」 良いデザインをするために、まずはその「目的」について深く考えるようにしましょう。 (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a] function(){arguments.currentScript=c.currentScript c.scripts[c.scripts.length-2];(b[a].q=b[a].q []).push(arguments)}; c.getElementById(a) …

2022/07/24 13:42

疑問解決！160問！「デザイン・フォーラム 13人のプロが教える原則と経験則」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「デザイン・フォーラム 13人のプロが教える原則と経験則」 (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a] function(){arguments.currentScript=c.currentScript c.scripts[c.scripts.length-2];(b[a].q=b[a].q []).push(arguments)}; c.getElementById(a) (d=c.createElement(f),…

2022/07/23 19:42

「チョコボGP'(ダッシュ)」タイトル画面からゲーム画面にシームレスに繋がることで没入感を維持し、手軽にゲームをプレイすることが出来るデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「チョコボGP'(ダッシュ)」から、タイトル画面からシームレスにゲームがプレイできるデザインをご紹介します。 このデザインにより、以下の特徴があるように感じました。 シームレスなデザイン（没入感が高まる） すぐにゲームを始めることが出来る（時短） 該当の画面はこちらです。画面左下の「START」をタップするとすぐにゲームを始めることが出来ます。 アニメーションで見るとこんな感じです。このようにタイトル画面からすぐにゲ…

2022/07/23 01:31

「チョコボGP' 」ストップウォッチアイコンが傾いているのは『標準的視点』と『躍動感』が関係しているのかな

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「チョコボGP' 」から、ストップウォッチのアイコンデザインをご紹介します。 アイコンはゲームの中にはほぼ必ず登場するグラフィックです。一見簡単に見えますが、最小限の情報で的確に情報を伝える重要な要素です。 このデザインにより、以下の特徴があるように感じました。 右手で持っている（標準的視点の採用） 傾けることで躍動感が得られる（世界観の強調） 画面左上にストップウォッチのアイコンが表示されています。 1：右手で持っ…

2022/07/20 23:31

「チョコボGP' 」課金要素が無い場合のゲーム開始前の注意事項のデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「チョコボGP' 」から、ゲーム利用前の注意喚起のダイアログをご紹介します。このデザインにより、以下の特徴があるように感じました。 世界観が取り入れられたUIパーツ（主観的満足度の向上） 「START」の文字が目立っている（視線の誘導） 課金要素の無いゲームのメッセージ事例 該当の画面はこちらです。 「チョコボGP' 」では他の多くのソシャゲ同様に起動時にゲームプレイに際する注意喚起が表示されます。ユーザーの健康、快…

2022/07/19 23:50

「聖剣伝説 ECHOES of MANA」サウンドの初期値はどこが最適か

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「聖剣伝説 ECHOES of MANA」、通称「エコマナ」から、音量設定の初期値のデザインをご紹介します。 このブログでは何度か紹介しているのですが、適切な初期値が設定されていないとユーザーに手数をかけたり、ストレスを与える可能性があります。 逆に言えば、適切な初期値はユーザーの利便性に繋がります。どのような初期値にするかは、UIデザイナーが関心を持っても良い要素だと思ったため紹介します。 このデザインにより、以下…

2022/07/16 00:55

「聖剣伝説 ECHOES of MANA」会話シーンをスキップするときに会話ログを全部見るか選べる確認ダイアログ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「聖剣伝説 ECHOES of MANA」、通称「エコマナ」から、アドベンチャーパートの会話スキップのデザインをご紹介します。 この機能があることにより以下のメリットがあるように感じます。 短い時間でスタミナを消費することができる（時間の短縮） 読まなくてもゲームを進めることができる（今は読まないという選択肢を与えている） 会話の全文を見せることで「読む」のではなく「見て」理解する（認知コストに対するアプローチ） 該…

2022/07/12 23:37

「聖剣伝説 ECHOES of MANA」エンプティステートの紹介 Vol.25

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「聖剣伝説 ECHOES of MANA」、通称「エコマナ」から、エンプティステートのデザイン事例をご紹介します。色んなゲームのエンプティステートを紹介して今回で第25回目です。 まず、「エンプティステート」とはどういうものか、簡単にお伝えいたします。 エンプティステートとは、表示する情報がない時にユーザーが見る画面のことだ。 見落とされがちな「エンプティステート」のUXデザインが、実際は一番重要なのかもしれない …

2022/07/10 23:00

デザイン力向上の一助になれば幸いです「一生懸命デザインしたのにプロっぽくなりません。」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「一生懸命デザインしたのにプロっぽくなりません。」 僕も、みなさんのデザイン力を伸ばすためのお手伝いをしたい (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a] function(){arguments.currentScript=c.currentScript c.scripts[c.scripts.length-2];(b[a].q=b[a].q []).push(arguments)}; c.getElementById(a…

2022/07/09 20:33

「NieR Re[in]carnation / ニーア リィンカーネーション」世界観を構成するUIパーツのデザイン事例。幾何学の紋様を利用することで無機質でソリッドな印象

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、世界観が表現されているUIパーツデザインの事例をご紹介します。 UIパーツをデザインする際に、どのようなビジュアルにするか迷うことがあるかと思います。 ストーリーを象徴するモチーフなど、何かしらの意匠を拠り所にすることが一般的かなと思いますが「NieR Re[in]carnation / ニーア リィンカーネーショ…

2022/07/07 23:54

「NieR Re[in]carnation / ニーア リィンカーネーション」ゲーム画質の最高画質と低画質を比較してみた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、ゲーム画質の高画質、低画質の比較をご紹介します。 美麗なグラフィックを訴求するゲームの場合、ゲーム画質の設定オプションが用意されることが多いです。 この設定により以下のメリットがあるように感じます。 幅広い端末でゲームがプレイできる 端末の負荷が減り、発熱やバッテリーの消費が抑えられる（？） いくつかの画面で比較し…

2022/07/07 01:01

プロのデザイナーの思考プロセスを分かりやすく解説！「デザイン力の基本 簡単だけど、すごく良くなる77のルール」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「デザイン力の基本 簡単だけど、すごく良くなる77のルール」 デザインとは、「プロジェクト成功のカギを握る、創造のための知識・教養」だと私は考えています。 (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a] function(){arguments.currentScript=c.currentScript c.scripts[c.scripts.length-2];(b[a].q=b[a].q []).push(argument…

2022/07/06 01:36

「NieR Re[in]carnation / ニーア リィンカーネーション」ひし形のゲージデザインで世界観が統一されつつ進捗率も分かりやすい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、ひし形のゲージデザインをご紹介します。 このデザインにより、以下の特徴があるように感じました。 進捗率が分かりやすい（認知コストの低下） ゲージの先端が光っていて目立っている（視線の誘導） 該当の画面はこちらです。こちらはバトル画面です。 画面下部にひし形のゲージが並んでいます。 アニメーションで見るとこんな感じで…

2022/07/06 00:27

「NieR Re[in]carnation / ニーア リィンカーネーション」メタ表現で陰鬱な世界観に抜け感を！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、メタ表現を取り入れたお知らせ画面のデザインをご紹介します。 このデザインにより、以下の特徴があるように感じました。 独特な世界観の演出 該当の画面はこちらです。 アニメーションで見るとこんな感じですね。レトロなブラウン管のテレビにニュース映像としてお知らせ画像が映し出されています。 独特な世界観の演出 これ実はゲー…

2022/07/05 00:27

「NieR Re[in]carnation / ニーア リィンカーネーション」サウンドの初期値は7

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、音量設定の初期値が7になっているデザインをご紹介します。 このブログでは何度か紹介しているのですが、適切な初期値が設定されていないとユーザーに手数をかけたり、ストレスを与える可能性があります。 逆に言えば、適切な初期値はユーザーの利便性に繋がります。どのような初期値にするかは、UIデザイナーが関心を持っても良い要素…

2022/07/03 22:00

「NieR Re[in]carnation / ニーア リィンカーネーション」TAP TO STARTのアニメーションにも世界観を取り入れたデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、世界観を取り入れたTAP TO STARTのアニメーションの事例をご紹介します。 世界観を取り入れる表現は、ゲームでは大切な要素かと思います。このデザインにより、以下の特徴があるように感じました。 世界観が取り入れられている（没入感の向上） 該当の画面はこちらです。色数が少なくタイトルに視線が向くデザインです。 こ…

2022/07/02 23:00

「NieR Re[in]carnation / ニーア リィンカーネーション」スクロールバーに採用されたマイクロインタラクション

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイブリーデフォルト ブリリアントライツ」、通称「リィンカネ」から、スクロールバーのアニメーションをご紹介します。 ちょっとしたアニメーション。マイクロインタラクションに該当するか。 このデザインにより、以下の特徴があるように感じました。 存在が認識しやすい（視認性の向上） 掴めていることが直感的に理解できる（認知コストが下がる） 該当の画面はこちらです。 利用規約画面を例にしていますが、紹介したいのはスクロール…

2022/07/02 01:32

デザインとは人が幸せになるようにすること「デザインの基本ノート 仕事で使えるセンスと技術が一冊で身につく本」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「デザインの基本ノート 仕事で使えるセンスと技術が一冊で身につく本」 まずは「デザインの基本を知る」こと。そして「たくさんの作例を見る」こと。この流れがとても大事だと考えています。 (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a] function(){arguments.currentScript=c.currentScript c.scripts[c.scripts.length-2];(b[a].q=b[a].q []).…

2022/07/01 00:03