ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「麻雀一番街」商品のお得感を訴求する小さな工夫

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「麻雀一番街」から商品の訴求手法をご紹介します。ソシャゲのUIはゲーム内で商品も販売しないといけないので、商品訴求については割と大事な要素な気がしています。

以下、主な特徴です!

 

目立つ色の採用

f:id:appgameui:20230604232104p:image

ショップ画面を見ると、全体的に青いトーンで統一された画面にぽつんとオレンジ色の吹き出しがあることが分かります。

このUIパーツだけ他と色相を変えているため、目立ちやすく、ユーザーの視線を誘導させやすくなっています。

 

吹き出しを使って視線を留める

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

吹き出しがボタンからはみ出して配置されている点にも注目です。
ボタンのシルエットからはみ出すことで、違和感が生じ、そこに視線が留まりやすくなります。

 

20%OFFと値引きの割合を表示

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

吹き出しに視線が誘導されたら次に文字に注目します。
ここでは「20%OFF」とお得感を訴求するテキストが表示されています。

販売価格は1,650ですが、この数字だけみてもどの程度お得なのかが伝わりにくいかと思います。そこで「これは20%も割り引きしていますよ」と伝えることで、分かりやすくお得感を伝えています。

 

値引き前の値段を取消し線で消す

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

販売価格の上に、元の値段が取り消し線で消されています。
先ほど紹介した「20%OFF」と似たような意味合いですが、元の価値を知ることでお得感を訴求しています。

 

小さなUIパーツですが、商品を訴求するための工夫が色々と隠されていると感じました。

 

以上です。
ショップ画面の商品を訴求したい時の参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「麻雀一番街」のガイドラインを確認したところ、以下の記載がありました。

本コンテンツのゲーム配信及び動画投稿を利用する際には、以下の内容をお守りの上お楽しみください。

1. お客様は本コンテンツから取り込んだゲームプレイの動画や静止画を、下記の場所にてご利用いただけます。

(1)YouTube、Twitch、TwitterFacebook、ゲームの攻略・紹介・実況・解説など動画投稿サイト

(2)お客様の個人的、かつ非営利目的のブログ・ホームページ・及びSNS

麻雀一番街

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

麻雀一番街のコンテンツ利用ガイドラインです

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ