NK — UI/UX Design Works
taskey株式会社
2021 ~ 2024

私は、ホラー、スリラー、異世界ファンタジー、恋愛、ドラマといったジャンルの多彩なプロ作家による作品が無料で楽しめるアプリのプロダクトデザインを担当しています。
設計とUIデザインの領域で積極的に携わり、ユーザーエクスペリエンスを向上させ、読者に魅力的なコンテンツを提供するために努力しています。
制作日 | 2021年3月 |
|---|---|
時間 | - |
担当 | UIデザイン |
URL | |
ツール | Figma |
担当 | 5人 |
peepが全機能を備えた段階で、ユーザー体験を徹底的に見直しました。peepの特徴は、完全オリジナルの多岐にわたる作品形式です。
チャット形式でサクサク読める『チャット小説』
イラストやサウンド付きの『イラストノベル』
映像と組み合わせて読む『シネマノベル』
フルカラー&縦スクロールで読めるマンガWebtoon
これら多彩な作品形式により、ユーザーは自分の興味に合わせた作品を見つけやすく、作品の読了や併読が促進され、結果としてMAU(Monthly Active Users)の向上と課金売上の増加につながると仮定し、UXUIの改修を行いました。
データからの仮定に基づき、人気作品の続編や異なる形式(ノベル形式/マンガ形式など)を知らないまま、ユーザーがアプリを離れる可能性があると判断しました。この問題に対処するため、以下の改修を作品TOPに実施しました。
作品の他形式への導線追加で併読促進
ユーザーが好きな作品を読み終えた後、同じ作品の異なる形式や続編に簡単にアクセスできるように、作品TOPに他の形式への導線を追加しました。これにより、ユーザーは新しいシリーズや続編に気軽にアクセスでき、アプリから離れずに読書体験を継続できます。
作品の雰囲気を閲覧直前まで伝わるようビジュアル改善
作品TOPにおいて、各作品のビジュアルや雰囲気がユーザーに直感的に伝わるような改善を行いました。これにより、ユーザーは目にするだけで興味を引かれ、新しいシリーズに進む意欲が高まります。
作品毎のお知らせが集約されている
ユーザーに対して、各作品に関するお知らせやアップデート情報をまとめて提供することで、ユーザーが作品に対する最新の情報を見逃すことなく把握できるようにしました。これにより、ユーザーは作品に関する新しいコンテンツや進展を逃さずに追えるようになります。

作品はサクサク読むことができますが、感情や面白さを他のユーザーと共有したいという要望があり、読了画面においてユーザー同士でコミュニケーションが取れるよう改修を行いました。
いいね!アニメーションの作成
ユーザー同士で感想や共感を表現する手段として、いいね!機能にアニメーションを追加しました。これにより、他のユーザーが感動したり面白さを共感した際に、より直感的で楽しいコミュニケーションが生まれることが期待されます。
作者コメントとユーザーコメントの表示
読了画面には、作者のコメントとユーザーのコメントを表示するようにしました。作者からのコメントは作品に対する裏話や制作秘話を知るチャンスとなり、ユーザーコメントは感想や考察を共有する場として活用できます。これにより、読者と作者、および読者同士のコミュニケーションが深まります。

一部の作品において、他のシリーズが好調である中で第1話の読了突破率が低いという課題が浮かび上がりました。この問題に対処するため、以下の仮説を立てました。
peepの作品形式が多様で、ユーザーが特定の形式を期待している場合に、違う形式であったために読むのを中断してしまう可能性がある。
表紙のサムネイルがイラストのため、漫画作品だと勘違いしてしまう可能性がある。
これらの仮説に基づき、第1話読了突破率の向上を図るための対策を講じることが重要です。可能な対策としては、特定の形式を期待するユーザーに対して明示的な情報提供や、表紙デザインの工夫が考えられます。

peepでは無料で読める話の回復周期を23時間から大幅に短縮し40分に変更しました。これに関する情報を既存のユーザーに適切に伝えるため、アイコンもリニューアルしました。
短い周期で繰り返し読めることがわかる
新しいサイクルの短縮をユーザーに明示的に伝えるため、アイコンには繰り返し読めることを示す要素を追加します。これにより、ユーザーは周期が短縮されたことを視覚的に理解できます。
統一感を出す
アイコン全体に統一感を持たせ、peepのブランドイメージとも調和するデザインに仕上げます。これにより、ユーザーは新しいサイクルの変更を直感的に受け入れやすくなります。
小さいアイコンでも視認性を担保できる
カルーセルや説明LPに使用される小さいアイコンでも、クリアで視認性が高いデザインにすることで、ユーザーが変更を見逃すことなく理解できるようにします。
サムネイルに被せてもアイコンを認識できる
サムネイルが表示されている場合でも、アイコンが被さっていても認識できるような工夫を施します。これにより、ユーザーは視覚的な情報を確実に取得できます。


ノベル作品の閲覧画面での操作がタップのみで、ユーザーテストでタップを連打する動作が見られたため、複数の操作方法を用意しました。
操作方法:
タップ読み (デフォルト)
チャットのバルーンをタップすることで次々に表示されるデフォルトの読み進め方です。
スクロール読み
バルーンをスワイプすることで、スクロールによって読み進める方法です。これにより、ユーザーはより自由に進行をコントロールできます。
オートタップ
タップせずに自動的にテキストが進むオートタップの機能を追加しました。これにより、ユーザーは手軽に自動進行を楽しむことができます。
これらの変更に対して、デフォルトを「タップ読み」と「スクロール読み」に分け、途中で読み方の切り替えが可能となるABテストを行っています。ユーザーの使用感や好みに基づいて最適な読み進め方を見つけることが目的です。

ユーザーが広告を通じてアプリを知り、インストールするものの、その割には作品にまで辿り着いていないという課題に直面しました。この問題に対処するために、検索導線の改修を検討しました。同業種のサービスや動画アプリをリサーチし、タイプ別に分けたり気づいた点を整理し、自社アプリにおいてどのようなアプローチが効果的か検討しました。さらに、モックアップを使用して使用感を確認し、社内での意見を取り入れました。リリース後、これらの取り組みにより、1話読破率が向上しました。
検索が十分に機能していない課題を改善するためには、以下のポイントを考慮することが重要です。
改善ポイント:
検索の精度向上
結果の適切な表示
サジェスト機能


アプリアイコンを制作する際には、様々なデザインパターンを考案し、巧みに組み合わせています。プロトタイプ段階では、視認性が適切に保たれているかを確認し、最終的には実機での確認を行います。期間限定の周年記念イベントにおいても、アイコンを通じて印象を残しつつ、派手なデザインは特に目を引くイベントに用意しています。


キャンペーンが展開される際には、グラフィックの制作を担当します。情報がユーザーに直感的に伝わるよう慎重に設計しています。

