「街歩きカメラ」のホーム画面には、現在のレベルや称号、次のレベルまでの経験値を示すカメラマンカードがあります。散歩や撮影を重ねるほどランクが上がり、バッジも変わっていく、育成の中心となるパーツです。
これまでのレイアウトでは、バッジがカード左側に小さく置かれており、レベルや XP の情報と並んで表示されていました。情報は伝わるものの、せっかく獲得したバッジが目立ちにくい場面がありました。
そこで、バッジを見やすくすることを目的に、カメラマンカードのレイアウトを見直しました。
変更前
バッジはカード左端に円形のアイコンとして表示されていました。レベル名や XP の進捗バーと同じエリアに並ぶため、カード全体の中では控えめな存在感になっていました。
変更後
バッジをカード右側の背景として大きく表示するレイアウトに変更しました。ランクに応じたカメラのイラストが、カードの高さに近いサイズで右端に配置されます。左側には「カメラマンランク」「Lv.2 迷える散歩者」、XP の進捗バーといったテキスト情報をまとめ、バッジと情報の役割を分けています。
バッジが主役になりやすくなりました
今回の変更で、ホームを開いたときに今のランクバッジがひと目で分かるようになりました。レベルアップや称号の変化が、カードを見るだけで達成感として伝わりやすくなっています。
散歩して XP を貯め、ランクが上がるたびにバッジが変わっていく体験は、街歩きカメラの楽しみのひとつです。ホーム画面から、その成長が自然に目に入るレイアウトを目指しました。
アプリの詳細は街歩きカメラの紹介ページからご覧いただけます。