【UI/UXデザイン】マンガアプリ　ひといき

概要

学校の課題として、1年生後期の12月から1月の約1ヶ月間をかけて、マンガアプリのデザインに取り組みました。今回は、トップページ・個別ページ・マンガを読むページの3ページを制作しています。使用したマンガは、著作権フリー作品である「ブラックジャックによろしく」です。

作品紹介

1.調査

既存のマンガアプリの、「マガポケ」と「少年ジャンプ＋」を実際に使用しました。

良いと感じた点は以下の通りです。

• 作品をお気に入り登録でき、登録一覧の画面からすぐに探せる点。→ 読みたい作品にすぐアクセスでき、探す手間が省けると感じました。
• ランキングをタブで切り替えられる点。→ 連載中の作品や流行しているマンガをすぐに把握できるため、情報が整理されていると感じました。
• 続きを読むためのボタンが設置されていたり、話数ごとに色で差が付けられている点。→ 時間が空いてしまった場合でも、次に読む話へ迷わず進める工夫だと感じました。

2.ペルソナについて

学校から提示された4名のペルソナの中から1名を選択し、その人物像をもとにデザインを行いました。今回は、こちらのペルソナを選び、ターゲットに合ったデザインになるよう意識しました。

3.ペルソナに基づいたコンセプト設計

ペルソナの文章内で強調されていた「マンガを読んでいる姿を見られたくない」という点に着目し、マンガらしさを前面に出さないよう、レトロなカフェをイメージしたアイコンデザインにすることを決めました。

4.UIデザインの検討・ラフ制作

文字を読まなくても、アイコンを見るだけで機能が伝わるデザインになるよう意識しました。また、アイコンは複数のラフ案を作成し、それぞれを比較しながら検討を重ねました。

5.使用計画書の作成

UIは、角を丸くしすぎず、かといって尖りすぎない形状にすることで、やわらかさと落ち着きのある印象になるよう意識しました。

配色については、文字や背景を白や黒ではなく茶色にすることでレトロな雰囲気を表現しています。また、プライマリーカラーとセカンダリーカラーには少しくすんだ色味を取り入れ、全体に統一感を持たせました。

6.ワイヤーフレーム

実際にマンガアプリを使用した際に良いと感じた点を反映し、利用者にとって見やすい画面構成になるよう意識しています。

7.ポイント

ボタン設計

ペルソナの設定に「通勤時に読むことが多い」とあったため、立ったままでも操作しやすい設計を意識しました。タップした際に表示される画面下のメニューは、上下左右に寄せられる仕様にし、片手でも操作しやすくなるよう工夫しています。

ランキング構成

通勤中の限られた時間でも流行や人気作品を把握できるよう、ホーム画面にランキングを取り入れました。ジャンル別や曜日別に切り替えられる仕様にし、ページを移動せず閲覧できる構成としています。流行を知ることで新たな作品に興味を持ち、読みたいマンガが増えるきっかけになることを目指しました。

アイキャッチ表現

個別ページのアイキャッチには、実際のマンガのワンシーンを切り抜いて使用しました。作品の雰囲気が伝わりやすくなり、興味を持ってもらえるきっかけになると考えたためです。

通知オフ機能

限られた時間の中で集中して読みたい場合や、電車内だけ通知を止めたい場面があると考えました。そこで、ワンタップで切り替えられる仕様にし、手間を減らせるようにしました。

感想

Webサイトとは余白の取り方やコンテンツの並べ方が大きく異なり、とても難しく感じました。

今回は初めてプロトタイプの実装も行いました。実際に取り組んでみて、完成後の操作感や使用イメージを具体的に掴むことができ、その便利さを実感しました。
一方で、どのボタンを押すとどの画面に遷移するのか、画面遷移時の動きをどうするのかまで細かく考える必要があり、大変さも感じました。