アスマイルは、大阪府が府民の健康増進を目的として提供するアプリです。
日々の健康活動を記録することでポイントが貯まり、抽選で電子マネーやクーポンなどの特典がもらえます。
未来のアスマイルは、アスマイルと違って一人で健康活動を記録することではなく、家族や友達を追加し、
遊びながらお互いの健康状態を確認するアプリです。
健康状態の他に、ステータスを記載し状況を分からせたり、友達にリアクションを送ったり、
また提携する企業を増やし、一つのアプリで様々な機能ができます。
残念ながらアプリが停止することになり、
TOPページと機能一覧ページしか作成できませんでした。
株式会社STARRYWORKSでは、
基本的なUXとワイヤーを考えるのがデザイナーの仕事ではなく、ディレクターの仕事です。
ただ、デザイナーとして綺麗な見た目を作ることだけでなく、
ユーザーが使いやすい操作を意識しながらデザインを作ることが大事です。
そのため、ワイヤー通りに行かず変更が必要な場合、
ディレクターとやりとりの上デザインのバリエーションを作って判断します。
こちらの案件でいうと、
メニューにあるQRコードは位置として違和感があり、右上に変更することになりました。
タップしてQRコードのモーダルが開くので、メニューから離せて独立させた方がいいとなりました。
また、健康記録ボタンもワイヤーと違う位置にすることになりました。
メニューの真ん中に大きく追加することで、一番重要な機能なのでイラストの上に配置するよりも目立てて、
どこを押せば記録することがさらに分かりやすくなりますし、
他のページに移動しても記録することができるようになります。
Procreateを使ってイラストのラフを描きました。
複雑な絵なので、パソコンよりタブレットで描いた方がディレクターの確認を取りながら修正しやすいです。
ラフの絵にOKをもらったら、Adobe Illustratorで描き込みます。
イラストの一部を描き、カラーの検証し、ディレクターと一緒に判断します。
今回は、未来的で清潔感があり、UIを含め情報が多いので複雑にならないような色合いがいいとのことで、
背景真っ白。色はパステル。黄色と緑をキーカラーに。
また、キャラに違う色合いを付けることで、都会との差があり目立たせることができます。
キャラに関しては、先方の希望ではなかったが、
歩数のゴールを突破するとアイテムや表情が増やし見た目を変更することができるという機能を導入することで
ユーザー的にさらに楽しくなりアプリの利用回数が増えることに繋がると思い、提案しました。
アイコンまで作成しました。
角丸、水色、丸の背景を使うことで、都会とキャラのかわいい雰囲気を守ります。
都会の立体的なイラストの案になりましたが、別案も作りました。
家族というとおじいちゃんとおばあちゃんもいますので、使いやすさ的に立体的な都会の操作が分かりにくいかもしれないとなりましたので、
シンプルな見た目の案も作りました。
