Daily UI #26クイズランキング画面
おはようございます。クイズアプリって落としたことない大善です。近いもので言うと、DualingoとかMemoriseみたいな英語勉強アプリくらい。
今日のお題はこちら。
高校生の時はそもそもスマホなかったですからね。
完成品はこちら。
コンセプト
●ペルソナ
・高校生
・お笑いとかエンタメ好き
・パズドラや謎解きが好き
・負けず嫌い
・よく友人とマクドでたまる
●機能面
・デイリーとウィークリーランキングがわかる
・地域のランキング
・自分のステータスがよくわかる
ユーザー課題の想像
・自分の順位がどうなってるかが見たい
・ワクワクするようなランキングが見たい
あまりクイズアプリを使用したことがないため、課題発掘ができず、、、。他のユーザーさんが提出されているのを参考にしながら構成していきました。
使ったフォント・色
●フォント
Berkshine Swash
見やすさとかは無視し、お題が「ゲーム」なので遊んだ雰囲気のフォントを選びました。ゲームイメージはポップでファンタジーな感じ。
意外にも視認性はわりといいかな、と。
ゲームで用いられているフォントって、雰囲気に合うように設定しないといけないから、見やすさもあるけど、ゲームのイメージに合わせて採用されている、というのを以下の記事から知りました。
確かに、マリオのフォントもフォントを見ただけで「マリオっぽい」というのが伝わります。
●色
ベースカラーをブルーで落ち着かせて、アバターアイコンや文字色で賑やかさを出しました。緑がプラスで赤がマイナス、一眼で自分のステータスが分かります。
制作にあたっての工夫点
・色別に役割を決めて、配色できた（赤はアクセント、黄色は数字、緑はボタン、青はメイン）
・スクロールしてランキング全部見えるような雰囲気にした
・フォントをゲームっぽく、遊んでいるような雰囲気のものを選定
・アイコンで賑やかさを出した
振り返ってみての改善点
・ユーザーのステータスバーが下のランキングと重なって見えづらい
・トップランキングの横に開くボタンをつけて、「地域のランキング」が見えるようにしたかったが、時間がなく断念。
・背景ブルー、結構地味。クイズ＝知的な印象だからあえてこの色を選んだけども、ターゲットに対しては適切なのかしら…。
制作時間：1時間20分 20分構想 1時間制作
この記事が気に入ったらサポートをしてみませんか？