概要

UIデザインの勉強として制作した漫画アプリです。
Figmaの基本操作を学びつつ、プロトタイプでの動作も取り入れました。

制作の流れ

まず、用意された架空のペルソナの中から一人を選び、そのペルソナに向けてアプリを制作しました。
今回僕が選んだペルソナは女子高生です。

スタイルシートに書いたように、寝落ちを考えて読んでいる漫画が自動保存されて次回からすぐに見えるような機能を考えました。
そして、デザイン自体は、ペルソナがSNSを見た流れでアプリを開くという設定だったので、それに合わせてSNS風のデザインにしてみました。

今回は、主要なページのみを制作しました。下記にURLを貼っているのでご覧ください。
https://www.figma.com/design/uHLA41yfOruW4fcBaHQmBn/27_morimo_mangaUI?node-id=1-2&t=ALn7YCVu5TMVWLed-1

苦労した部分

ページ数が多くて大変でした。プロトタイプで動かすための設定をたくさんしたので、なるべく繋がるようにするのが苦労しましたが、デザイン上で動かすという方法を学べたとてもいい経験になりました。そして、ペルソナを用意して制作するという経験もあまりやっていなかったので、どのようにすればペルソナが使おうと思えるアプリになるか考えることも大変でした。このおかげで、よりユーザー目線に立って制作ができたと思います。

制作を通して

ペルソナがいかに大切かを学べた制作だったと思います。現在、アプリ制作という授業があるのですが、そこでは実際にユーザーテストを行なったり、より本格的な制作を学んでいます。この時の経験が今の制作にしっかり活きていると思います。