▼完成したものはコチラ！
こんにちは！UIデザイナーのmennmiです！🌼 最近寒いですね〜☃
今回はログインボーナス画面を制作してみました。制作の流れや背景を記事にしたのでぜひ読んでみてください！
ワクワクするログインボーナス作りたい！から始まった
ログインボーナスは毎日触る画面ですが、使い回すことや分かりやすさを優先した結果、
ただ報酬を並べるだけになってしまいがちな機能でもあるのかなと思いました。
そこで今回、ログインボーナスを「チケットを受け取る体験」としてデザインしてみることにしました！
（仕様で頭を固めすぎず、思いついたアイディアを発散できるのが自主制作の良いところ✊️）
ちなみに「ログインボーナス」と「チケット」の相性が良さそうだなと思ったのは以下の理由になります。
- 日付/曜日との相性が良い
- 「今日もらえるもの」という制約を自然に表現できる
- チケットのもぎりを表現することで、「使用済み」状態が分かりやすい
どういうことを意識して作ったのか？
色や彩度をコントロールすることで、どこを見るべきなのか視線誘導しています
- 過去の受け取ったチケット
- 灰色かつ明度が低い
- 今日もらえるチケット
- エフェクト
- TODAY矢印
- 明度を一番高く
- 次の日のチケット（獲得後）
- NEXT矢印
- 明度を高く
- 最終日のチケット
- 豪華なものだと伝わるように虹色グラデ
上を踏まえた上での、アニメーションの流れとしてはこのようになります
ボツ案の話
最初見栄え重視で、チケットの下側に報酬を置いて、上側にキャラクターをメインに置くレイアウトも作っていたのですが….
「キャラがチケットにいる意味分からなくない？？？」
となり、この案はボツとなりました笑
最初はログインボーナスでよくある、日替わりで出てくるキャラクターのようなものをイメージしていたのですが
チケットの中に配置してしまうとキャラクター自体が受け取れるものに見えたり、過去のキャラクターが記録されていることがしっくり来ません。
もちろん発散して様々なレイアウトを試すことも重要ですが、途中冷静な目で「このデザインは筋が通っているか？」「本当に達成したいことを満たせているのか？」を冷静な目で判断することも重要ですね◎
さいごに
ここまでご覧いただきありがとうございました！
これからも制作記事も上げていこうと思っていますので、引き続き見ていただけると嬉しいです🌼
また、このログインボーナス画面は @takayu さんによって動かしていただく予定なのでお楽しみに♪
コメント