「ニコニコ漫画」実現しようとしたUIとその制作工程
はじめまして、ドワンゴでデザイナーをしているぬるぴょです。普段は主にニコニコ静画に関わるデザインを担当しています。
今回、私がデザインを担当したニコニコ漫画というアプリがリリースされましたので、このアプリの制作についてご紹介します。アプリにはiOS版とAndroid版があるのですが、私が主に担当したのはAndroidなので、Android版を制作する上で目指したUIとその制作工程を中心にお話します。
ニコニコ漫画とは？
まずは簡単にニコニコ漫画の紹介をさせてください。
ニコニコ漫画とは、ニコニコ静画（漫画）に投稿された作品をスマホで見られるアプリです。ユーザーが投稿したオリジナルのWEB漫画はもちろん、人気漫画雑誌連載の作品も無料で読むことができます。
独自のマンガ体験
ニコニコ漫画の特徴はこの独自のマンガ体験！
マンガを読むスタイルは２つ用意していて、マンガを縦にスクロールして読む形式と、動画のように音と共に楽しむニコニコ漫画独自の形式である「ニコニコマンガ形式」があります。それぞれのマンガに対して、適切なスタイルが適応されているので、スマートフォンで読むのにピッタリです。また、PC版と同様にコメントがマンガの上を流れるので、みんなのコメントを読みながらマンガを楽しむこともできるんです。
ログイン不要で楽しめる
もろちんマンガを楽しむのに煩わしさは一切ありません。
マンガを読むだけなら、ニコニコへのログインは不要です。コメント投稿やお気に入り登録など、より楽しみたい場合はniconicoアカウントでログインすると機能を使用できます。ぜひniconicoアカウントでログインをして、コメント投稿をしてみてくださいね。
目指したUI
さて、ここからが制作工程についての紹介になります。まずはニコニコ漫画を制作する上で、実現しようとしたUIのお話をします。
直感的な操作
漫画アプリなので、一番プライオリティを高く考えたのは読みたい作品に迷う事なく直感的に遷移できることです。そのため、メインターゲットして想定されるニコニコ漫画PC版のユーザーが使いやすいように画面設計をしています。PC版からスマホ版を制作するにあたって、PCメニューなどをそのまま採用するのではなく、スマホで利用されると想定できるものを配置し、できるだけユーザーがスムーズに扱えるように工夫をしました。
デザインについてもできるだけ漫画コンテンツが際立つように、Androidユーザーに馴染みの深いGoogleのMaterial designをベースデザインに採用し、UIのレイアウトやデザインに独創性を入れすぎないよう注意しました。また、Material DesignのUIコンポーネントではカバーしきれない箇所（ニコニコ漫画独自の機能）はオリジナルデザインになっていますが、ここもデザインが前面にでないよう配慮をしています。
操作を楽しく
また、漫画を楽しむだけでなく、漫画にたどり着くまでの操作についても面白みを実装しました。エンターテイメントのアプリなので、ローディングアニメーション等にキャラクターを配置するなどして、楽しく操作できるように工夫しました。例えば、エラー画面はテレビちゃん等のキャラクターが現れるように設定しています。そこにコンテンツがなくても何かしらのワクワク感を提供し、ユーザーに楽しんでもらえるようにしました。
作品のイメージを伝える
コンテンツが際立つということで、もう１つ工夫しているのが、各作品ページのカラーリングです。Material Designを採用し、全体のデザインテイストをフラットに調整していたのですが、あまりにも各作品ごとに違いがでないのは課題でした。そこで、作品をより印象的・魅力的に伝えられるよう、作品ページのUIのカラーリングは作品ビジュアルから自動でカラーを取得する方法を選択しています。
制作の流れ
最後に先ほど紹介したUIを実現するためにどのようなステップを踏んだのかを軽くご紹介します。
制作に関わったメンバーと制作フローについて、順を追って説明します。
| プロジェクトメンバー構成 |
|---|
|
（１）ブレストと要件定義
まずはブレストを実施。
ユーザーのメインターゲット、端末の対応バージョン、必要な機能・画面などメンバー全員で意見を出し合っていきます。
ある程度意見ができたら、機能と画面を洗い出し、要件定義に落とし込んでいきます。
（２）ペーパープロトタイピング
ブレストと要件定義で洗いだした必要な画面のレイアウト案を書いていきます。画面ごとにそれぞれ担当に振り分けて案を作成します。レイアウトや画面のつながりを全員で確認しつつ、レイアウトや画面遷移の改善点を話し合い、ブラッシュアップを繰り返します。
この時点から目標としてるUIを検討に入れて、慎重に画面設計をしていきます。
※こちらはペーパープロトタイピングで使用したラフの一部です
（３）アプリの見た目の方向性を決める
ここからはデザイナーがメインに担当します。
アプリの見た目のデザインの方向性を固めていくために、以下の3点に重点を置いて決めていきます。
・アプリアイコンのデザイン
・使用カラーの設定
・各要素のサイズ・余白等（MaterialDesignのUIコンポーネントをベースに設定）
（４）カンプベースのプロトタイピング
ペーパープロトタイピングで作った画面レイアウトをデザインカンプに落としこんでいきます。
デザインカンプはプロトタイピングツールで、Android実機に表示して、UIの操作感を全員でしっかり確認します。ペーパープロトタイピングの段階では気付かなかった部分を調整しつつ、ブラッシュアップを繰り返してデザインディテールを詰めていきます。
（５）実装
ここからはエンジニアが担当します。
デザインカンプの最終案が固まりはじめたら、並行して実際にアプリに組み込んでいきます。
実際の作品データが入ると意図しない表示になる箇所があったりする為、都度デザイン調整をすることもあります。
（６）レビュー
アプリの実装が出来次第、メンバーはもちろん、アプリを触ったことが無い人にアプリを触ってもらいユーザーテストをします。その際、操作に迷ったところや、意図しない操作をしようとした箇所を洗い出して、改善をしていきます。
（７）リリース
最後にセキュリティレビューや社内チェックを通って、やっとアプリのリリースとなります。
以上がアプリ制作までのおおまかな流れです。
制作をする上で重要なことは、当初実装しようとしていたUIにズレが生じていないかを要所要所で確認していくことです。様々な意見が出てくる中で、常にメインターゲットのことを考慮し、そのユーザーが直感的な操作感ができるものを選択するということに、デザイナーとして気を使いました。
もちろん公開後の今も、ユーザーからのフィードバックや意見を参考に、細かい機能やデザインの調整を続けています。
最後に
ニコニコ漫画では、少年、青年、少女、４コマなど、幅広いジャンルの作品が毎日更新され、その数は国内最大級です。ここから商業デビューを果たした作品も多数あり、魅力的な作品が満載です。ぜひ、使ってみてくださいね！
ニコニコ漫画の詳細はこちら
アプリダウンロードはこちらから
