LINEマンガのUIデザイン一新で苦心した3つのポイント

LINEマンガはいかにリニューアルしたか

全炯晩氏：はじめまして。私は全炯晩と申します。今回このようにみなさんとお会いできて、本当にうれしく思います。

私はLINEのクリエイティブセンターでUIデザイン4チームでマネージャーとして働いています。LINEに入社したのは2011年で、今9年目になりました。その間、「LINEマンガ」と「LINE TAXI」「LINE着せかえ」「LINEトラベル」「LINEポケオ」「LINEノベル」など、いろいろなクリエイティブを担当してきました。

今日は私が一番長い間担当してきた、そして今も担当しているLINEマンガに関する話を準備しました。今までLINEマンガがどのような過程で成長してきたのか。とくに去年5月にあった大型のリニューアルプロジェクトの話を通して、LINEのUIデザインチームがどんな方法でほかの部署と一緒に働いているのかを少し紹介させていただきたいと思います。

まず、LINEマンガのサービスを準備していたときの市場の背景から、簡単に説明いたします。

日本は昔から、紙で印刷された書籍のマンガが市場の中心となっていました。90年代・2000年代にインターネットとPCが家庭に流行っても、マンガは本で買って読んだほうがいいと思う人が多かったです。でも、それが最近急激に変化することになりました。スマホを使う人が増加したことによって、スマホでマンガを読む人がどんどん増えるようになりました。

これは雑誌を除いたマンガの単行本だけの市場を表しているグラフです。この表を見ると、上のグラフの黄色の部分が電子書籍・電子マンガの市場で、その下が紙のマンガの市場の大きさを表しています。

グラフを見ると、2011年は電子書籍の市場があまり大きくなかったですが、これが2017年になって電子書籍のほうが紙を上回りました。このような市場の変化を私たちは予想してLINEマンガというサービスを準備しました。

これが最初にリリースされたときの画面です。2013年4月にLINEマンガはリリースされました。最初のバージョンは、単行本を購入して、それを読んで、そして本棚に入れて保管する、簡単な構成を持っているアプリでした。

続いて、私たちはユーザーの反応を見て速やかにアップデートを続けて、いろいろな機能を追加しました。例えば、特定の作品を読むとLINEで使えるスタンプをダウンロードして使える機能や、自分が読んだ作品をLINEで友だちに共有することができるような機能を追加しました。

そして、競合サービスたちは、ほぼスマホ版のアプリに集中していたとき、私たちはタブレットでも便利に漫画が読めるようにタブレットアプリも準備しました。iPadも、そして同時にAndroidのタブレット版のアプリも準備しました。

競合の出現でピンチが訪れる

LINEマンガのサービスの規模が大きくなるきっかけになったのが、「無料連載」という機能が導入された時期です。毎週どこかの曜日に作品が更新されて、無料で1話が読めるサービスが導入されました。毎日平均的に30～40作品ぐらいが連載されていて、1週間で280作品ぐらいが連載されることになりました。

そして、ストアでは無料キャンペーンや割引キャンペーンなどを毎日行いました。このようなキャンペーンによって、LINEマンガでは無料で読める作品がたくさんある認識が広がり、ユーザー数がどんどん増加していきました。

そして、私たちは「LINEマンガ インディーズ」というサービスも始めました。誰でも自分のマンガをLINEマンガにアップロードして、多くのユーザーに自分の作品を見せることができる機能です。

続けて、さまざまなマンガコンテストも開催しました。この中で優秀な方も参加してくださって、その中からプロデビューされた方もいらっしゃいます。

そして、やがてLINEマンガもオリジナル作品をつくることになりました。現在までに約240タイトルの作品があります。アプリで読むだけでなく、紙の単行本として出版し、書店で購入することができます。

この画面に今表示されている『文学処女』は、ドラマ化された作品です。この他にも、ドラマ化された作品は多数あります。

そのあと、LINEマンガのアプリをダウンロードしなくても、LINEだけでマンガが読めるLINE版LINEマンガサービスも始まりました。LINEを起動して下段の「ニュース」メニューをタップすると、その1つのタブが「マンガ」になっていて、そこからマンガを読むことができました。

このようにして、私たちはユーザー数、そして売上的な面で成長してきました。そして、LINEマンガは現在も日本のスマホマンガアプリの中で売上1位となっています。ゲームを除いた全世界のアプリの中で売上全体ランキングトップ10に入ることもできました。

そして、今は日本のスマホマンガアプリ市場の50パーセント以上を占有しています。今のLINEマンガでは38万点以上の作品を見ることができます。

このように期待を超えた良い結果がありましたが、やがて大ピンチがきました。競合サービスが急速に成長してきました。

このグラフを見ると、2017年5月は月間のユーザー数に大きな差がありましたが、たった1年の間にユーザー数が急速に増えて、ほぼLINEマンガと同じぐらいのレベルになりました。

まだこの時期は売上的な面ではLINEマンガが圧倒的1位でしたが、競合サービスのユーザー数が増加しているということは、その後売上にも影響が生じる可能性が高い状況だったので、私たちはこれを危険な状況だと判断し、すぐに大型のリニューアルを準備することになりました。

難局を打破するための3つのポイント

そしてデザイン側は、この3つのポイントを今回リニューアルの目標として決めました。

1つ目は、今までLINEマンガは無料作品が更新される期間が1週間と長過ぎたため、毎日新しい話が1話読めるように、その更新期間を23時間に調整しました。それによって、曜日のタブが中心になっていた既存のUIを大きく変える必要がありました。

そして2番目は、LINEマンガには多くの作品が入っているのに、それがわかりづらいUIになっていました。そのため、このように多様な作品があることを表すプロモーションの領域を設けることも1つの目標でした。

そして3番目は、最初のリリースから5年間続けていた古いデザインスタイルを新しく変えることでした。「作品を魅力的に見せるデザインは何なのか」「より便利なUIは何なのか」を根本的な部分から見直して、この機会に新しくデザインを変えようと考えました。

リニューアルプロジェクトが企画側から動いたのが2017年の春頃から、そしてデザイン側が動き始めたのが秋頃からだったと記憶しています。新しいデザインを何回も何回もテストして、その結果、確定された各タブ内のメニューのトップページがこのデザインです。

一番右側にあるのが無料連載のトップ。そして真ん中はストアのトップ。左がおすすめトップのデザインです。すべての画面が基本的な一貫性は保ちつつ、各タブのメニューの特性を活かしたデザインを用意しました。バナーの形やサムネイルの形もそれぞれ違います。

そして、無料連載作品の詳細画面のデザインです。23時間が過ぎると新しい話が読めるようになるので、残り時間を時計のようにグラフで表す機能を追加しました。そして時間がチャージされると、お知らせとして通知する機能を入れました。

また、全体的な背景を黒色から白色に変えました。いろいろ検討した結果、マンガのサムネイルやバナーをより魅力的に見せるのは、黒色よりも白色がいいと判断しました。そしてLINEマンガのユーザーは男性より女性の方が多いです。そういったこともあり、全体的により爽やかな雰囲気でデザインしようと思いました。

そして、これからはタブレットの時代です。タブレットも単純にスマホ版を拡大して伸ばしたデザインではなく、タブレットの広い画面を十分活用したデザインで、ベストなものを用意しました。

グリッドシステムの詳細

UIデザインチームがどのように開発側と一緒に働いているのかを少し説明させていただきたいと思います。

LINEマンガは毎日多くのユーザーが使っているサービスです。ユーザーは本当にいろいろな端末を使っていて、その端末のサイズも特性も全部違います。どんな端末で画面を見てもバランスよく、デザイナーが意図した比率をを保ちながらきれいに表示されるよう、きちんとグリッドシステムを設ける必要がありました。

細かいところまでは見えないですが、次に1つのものを拡大して説明いたします。

このようにグリッドを用意して、バナー、サムネイル、そしてあるモジュールのすべての要素のサイズを、端末のサイズが変わってもどのように計算するか、その計算式をデザイン側で用意しました。

スマホ版の場合は画面を大きく6分割で分けています。そして1つの領域の間に10ptの余白を基準に入れておきました。そして、実は端っこの両側は8ptの余白を追加しておきます。6分割された1つの領域をどうやって計算するかによって、ほかのバナーやモジュールの大きさを計算することも可能になります。

それで、その計算式を用いて、一番大きいバナーのA、書影のサムネイルB、一部だけを使っているC、途中にかかっているD、それぞれの要素の大きさを計算し、どんな端末でも正確な比率に見えるようにグリッドシステムを用意して、開発に共有しました。

これによって開発側もデザイナーがどんな基準を持ってデザインしたのかを明確に理解することができるし、お互いに「あれも修正してください」「これも修正してください」というようなやり取りで苦労するのを減らすことができました。

バナーのテンプレートにも一工夫

次に慎重に準備した部分は、バナーのテンプレートです。今LINEマンガでは大きく2つのバナーのセットがあります。1つは無料連載作品のバナー。そして1つはストアの単行本キャンペーンのバナーです。

無料連載のバナーの場合は、バナーとサムネイルを全部含めると10個ぐらいの要素があります。ストアの場合は6個ぐらいあります。

なぜかというと、1つの作品がトップバナーや検索結果、作品詳細のトップビジュアルなど、表示される部分がいろいろあるので、それを全部テンプレート化しておく必要がありました。

これらは、私たちデザインチームで制作するときもありますが、外注する部分もありますし、LINE株式会社の他の拠点にいる方などにも制作をお願いをする場合があるので、どこでバナーを制作しても一貫性や統一性のあるデザインができるようにテンプレートをきちんと用意しておきました。

例えば、そのガイドラインの一部を取って今ここに入れたのですが、トップバナーの場合はこのように各elementsを定義しています。一番左の上にあるBadgeやLogo、Sub copy、Balloon、Copyright、そしてKey visual。このようにモジュールを分けて、それぞれのガイドラインを決めました。

例えばBadgeの場合は、位置を固定して、大きさも固定して、ラベルと色だけを変える。LogoとSub copyは必ず左寄せにする。Balloonの場合は、自由にデザインしてもいいですが、Logoよりは目立たないようにする。そしてKey visualは必ず右寄せにする。このようなルールを作って、バナーを制作してくださるところに全て共有しています。

そして無料キャンペーンの場合も、すべてのアイコンをあらかじめ作っておいて、テンプレートの中から1つを選び、その色だけ変えればバナー制作が可能になるように用意しておきました。

このようにテンプレートをちゃんと準備することによって、この要素をどこに入れておけばいいのか、大きさをどのぐらいにしておけばいいのかといったことに悩むことなく、効率的な作業することが可能になったと思います。

約1600個のバナーを作り直す

今回のリニューアルにあたって大きい壁になったのが、すべてのバナーを作り直すことでした。なぜかというと、すべてのUIデザインを新しく変えたので、以前まで制作していたバナーが新しいUIには表示できなくなってしまいました。

この作業は私たちデザインチームだけでは作業ができないほどの膨大な量だったので、企画者と一緒に外へ出て外注会社を探しに出ました。

いろいろな会社に訪問して、私たちが希望する期間内に対応が可能な会社を探していたところ、本当にうれしいことに、きれいに対応してくださる会社を見つけられて、その会社のデザイナーさんたちと一緒にこのバナーを制作することができました。

約3ヶ月間ぐらいにわたって、私もその会社に行ってレクチャーをしたり、デザイナーさんたちを会社に招待して話したりして、3ヶ月間で約1,600個ぐらいのバナーを作り直す、もしくは一部を新しく作ることができました。このようにして無事にリリースの準備ができました。

それで、2018年5月にLINEマンガがリニューアルされました。その結果についても簡単に紹介いたします。

さきほど説明したとおり、2018年5月頃に月間ユーザー数がほぼ競合サービスと同じぐらいになりましたが、そのリニューアルのあと差がどんどん大きくなって、今は大きい差が出るようになりました。1人あたりの平均購読率や1人あたりの課金率も高くなっています。

そして売上も、具体的な数字は話せないのですが、リニューアルの直前と1年後を比べてみると、約2倍ほど増加する良い結果につながりました。

このような良い結果になったのは、デザインだけの力ではなく、編集部、営業部、企画部、そして開発などすべての関連部署が同じ目標を持って一緒に仕事をした結果だと思います。たまに意見が合わないときもありましたが、自分の意見も譲りながら、お互いに同じ目標を見て走った結果だと思います。

これからもいろいろな課題がありますが、新たにブランディングを変えたり、作品を検索したり、より便利に見ることができるようなUIを考えてアップデートを準備しています。私たちデザインチームもがんばりますので、続けて関心を持って見守ってくだされば本当にうれしく思います。

私が準備した内容はここまでです。長い時間聞いてくださったみなさんに本当に感謝します。ありがとうございます。

（会場拍手）