こんにちは。ノベルチームでデザイナーをしている 
id:murata_s です。カクヨムでは昨年末にiOS/Androidアプリをリニューアルし、全体的なデザインのリファインと名称の変更をしました。約2年半ぶりのメジャーバージョンアップとなり、読むことに特化したアプリであることをより押し出しています。この記事ではこのカクヨムViewerのデザインについて、簡単に見どころの紹介をしたいと思います。
よりリッチな読書アプリを目指して
このカクヨムViewerのリニューアルプロジェクトは、アプリならではのリッチな体験ができる画面を増やし使い勝手を改善することで、好みの小説が探しやすくなることや読む量が増えることを目指して始まったものでした。
アプリにとってのリッチさとは何かという話ですが、私見としては、まず画面の遷移や情報の表示のされ方がシームレスで直感的であること、それからアプリらしいUIやインタラクションが採用され、プロダクトとしての機能性が伴っていることが挙げられると思います。分かりやすい表層的な例としては、テキストリンクかエリアリンクかということもそのひとつだと考えています。
これまで、比較的変更が少なくカクヨムにおいて特に重要な画面（小説の画面やエピソードビューワーなど）以外の画面については、開発コストと柔軟性の観点からWebViewが採用されていたという経緯があったのですが、今回WebViewの多くを占めていた小説を探す画面をReact Nativeを利用して作り直すことによって、アプリらしい体験ができる画面を増やすことに成功しました。
その他の画面においてもデザインの整合性が取れるように、様々な制約によってデザインルールが統一できていなかった箇所の見直しを行い、現実的な範囲で画面構成の変更、見た目のトーン調整、ボタンやアイコン類のブラッシュアップなど様々な変更を行っています。
React Nativeに関するこの時の私の感想は、先月のブログ記事「デザイナーがReact Nativeでのアプリ開発を経験した感想」に記してあります。
ジャンルから探す体験
小説を探す画面は、日本のニュース系アプリではメジャーな左右のスワイプ動作で画面が切り替わるインタラクションを採用しています。スワイプ動作で気軽に画面内を行ったり来たりしながらジャンルごとの注目の小説やランキングなどを見ることができるようになりました。Webビューの時代にはジャンルの軸は2階層目にありましたし、技術的な制約で次々と画面がスタックしてしまう閲覧体験となっていましたので、これで小説を探す体験が大きく改善できたのではないかと思います。
おすすめレビューや新着小説といった切り口もジャンルごとに用意しており、カクヨムの多様性を歓迎する思想ともマッチして、以前にも増して様々な作品に光が当たりやすくなっていると思います。スワイプ動作による画面切り替えは直感的で、情報の整理もしやすく、個人的にも気に入っています。
基本的な使い勝手を良くすること
小説を探す画面の変更にあわせ、アプリ全体で、使いやすさを改善したりひと続きの世界観を確かに感じられるような変更を積み重ねました。それぞれ説明をしていくと長くなってしまいますので、印象に残っている改修内容を少しだけ紹介します。
- タブバー
- Androidアプリのナビゲーションドロワーをタブバーに変更
- 主要画面の移動が1アクションで可能に
- 項目を次の5項目に整理：ホーム、検索、マイページ、通知、プロフィール
- 小説を探し、追いかけ、関わる、ウェブ小説のライフサイクルを意識して
- Androidアプリのナビゲーションドロワーをタブバーに変更
- マイページ
- フォロー中作品の未読話数の表示やソート順を追加
- Web版との差分を追加し、読書の基点となるように
- フォロー中作品の未読話数の表示やソート順を追加
- デザインのトーンをWeb版カクヨムとできる範囲で揃える
- 背景や文字の色、タイポグラフィ、アイコン類を調整
特にナビゲーションの変更は使い勝手に大きく影響しますし、気軽にはできないものですから、このタイミングで整理ができたのはとても良かったと思います。ユーザーさんにとって価値の高い画面への導線をまとめられました。
伝えるためのクリエイティブ
デザイナーとしてこのアプリをユーザーさんにしっかり知ってもらうために、その価値を伝えるための活動にも力を注ぎました。つい良いプロダクトさえあればたくさんの人が使ってくれるものだと思ってしまいがちですが、人は知らないものを評価することはできませんので、こういうものですよと伝えるところまで気を抜かないことが大切ですね。個人的にも苦い思い出がありますので、腰を据えて取り組むことに早い段階から決めました。
今回私たちは、新しいアプリを紹介するためのガイドページをリファインしたり、ストアにおける文言やスクリーンショットの準備をしたり、動画を作成したりしました。
ガイドページ
ウェブ版のカクヨムからアプリをダウンロードしてもらう前にアプリの特長をユーザーさんに知っていただくページです。嫌味が出ない程度に勢いをつけたかったので大きな文字を使ってみました。カクヨムのキャラクターも出てきます。
ストアのスクリーンショット
App StoreやGoogle Playで表示されるスクリーンショット画像です。知ってほしい特長3つを1枚目でお伝えしつつ、2枚目ではカクヨムから書籍化した作品のキャラクターを並べて出版社のアプリらしさを狙ってみました。
ちなみに、スクリーンショットはプラットフォーム×デバイスサイズで作り分けていくと制作コストが際限なく膨れ上がってしまいますので、クオリティとコストのちょうど良い落とし所として、プラットフォームについてはステータスバーを変える程度、デバイスサイズについてはスマートフォンとタブレットそれぞれ1種類ずつを作るのに留めています。画像アセットの再利用性を高めるなど、作業の効率化を図ったことにより時間的余裕が生まれ、次に紹介する動画作成に繋がりました。
ストアの動画
アプリをダウンロードする前に使い勝手をざっくり知れる約30秒の動画です。App StoreのAppプレビュー、Google Playのプロモーション動画として、ストアの検索結果ページやプロダクトページで見ることができます。動画を作るのは初挑戦だったのですが、Adobe After Effects上で画像を動かすというシンプルなつくりで実現できました。
動画はすでに世の中の多くのアプリが取り入れているプロモーション施策だと思いますが、Appプレビューは検索結果で自動再生されるのがやっぱり良いですね。Google Playのプロモーション動画もYouTubeのURLを指定するという仕様でしたので、自動的にYouTubeでも見られるようになりました。
さいごに
この度のリリースを終えて、小説を探す部分はもちろんですが、カクヨムViewerの全体的な使い勝手を一歩前進させることができたのが単純に嬉しく、それが今後のアップデートに備えた新たな下地にもなって良かったです。結果的にはアプリの広範囲に変更を加えることになったのですが、プロジェクトメンバーのみなさまのご協力もあって、大幅なデザイン品質の向上につなげることができました。
ユーザーさんからも、小説を追いかけやすくなった、探しやすくなったといったようなお声を頂戴しております。ぜひダウンロードして使ってみていただき、フィードバックをお寄せください。まだまだやりたいことは山積みなのですが（アプリでも書けるようにするということも含めて！）、少しずつでも改善を重ねていきたいと考えています。
