概要
Webデザインの授業課題として、漫画アプリのUIデザインを制作しました。 題材として使用しているマンガ『ブラックジャックによろしく』は、佐藤漫画製作所によって公開されている作品で、二次利用が可能なフリーコンテンツです。 詳細や利用条件については、以下のリンクをご覧ください。
https://densho810.com/free/制作期間
2ヶ月
制作範囲
デザイン
使用ツール
Illustrator・Figma
Bookmark｜漫画アプリ
作ったもの
完成デザイン
制作背景
作品概要
漫画アプリ「Bookmark」
通勤時間などのスキマ時間に漫画を読むユーザーを想定した、シンプルで洗練されたマンガアプリのUIデザインを制作しました。 既存の漫画アプリに多い「派手で賑やかな印象」とは異なり、大人でも使いやすい落ち着いたデザインを目指しています。
企画内容
近年のマンガアプリは、少年誌のようなポップで情報量の多いデザインが多く、 電車内など人目のある場所で利用する際に「画面を見られたくない」と感じるユーザーもいると考えました。 そこで、 「大人が周囲を気にせず使える漫画アプリ」 という視点から、デザインの方向性を検討しました。
ペルソナ
30代男性・会社員
- • 通勤時間（約1時間）にマンガを読む
- • 学生時代から漫画が好きだが、現在はアプリ中心
- • 周囲の目が気になり、画面を見られたくない
このペルソナから、 「通勤中でも自然に使えるUI」 が重要だと考えました。
こだわったところ
デザイン
シンプルで洗練された大人向けのマンガアプリをコンセプトに、情報量を必要最小限に抑えることで視認性を高めました。落ち着いた配色を採用することで、電車内など周囲の環境にも自然に馴染むデザインとし、さらに無駄のないUI設計によって直感的に操作できる使いやすさを意識しています。
配色
モノトーン（#000000 / #FFFFFF）をベースに設計し、 装飾を抑えることで「静かで大人っぽい印象」を表現しました。
-
MAIN COLOR
#000000
-
ACCENT COLOR
#AAAAAA
-
TEXT COLOR
#000000
-
BASE COLOR
#FFFFFF
UI設計
ユーザーが短時間でも効率よく漫画を楽しめるよう、シンプルで迷いのない導線設計を意識しました。 TOP画面では上部に検索、その下に「読書中」を配置し、起動後すぐに続きを読める構成にしています。 グローバルナビは「TOP・タイムライン・ライブラリ・検索」の4つに絞り、直感的に操作できるよう整理しました。 また、ライブラリでは「所持作品」「ダウンロード済み」「お気に入り」のみに限定し、目的の作品へ素早くアクセスできるようにしています。 全体として、情報量を抑えながら「すぐ読む・迷わない」体験を重視したUI設計としました。
感想
ペルソナをもとに、どのようにすれば継続して使ってもらえるかを意識しながら制作に取り組みました。 また、文字サイズや視認性については実機で確認しながら調整を行い、実際に自分で使用した際の使いやすさも踏まえて改善を重ねました。 さらに、Figmaのプロトタイプ機能を初めて活用し、実際の操作や画面遷移を意識しながらUI設計を行いました。
