2020年12月、LINEがNew Designでユーザーと再会しました!

よりシンプルにより明るくリニューアルしました! LINEは主要4か国だけでも利用者が1億6,700万人を超えるサービスとなり、生まれ変わったLINEの姿を初めて目にするユーザーの反応はどうだろうか? …というドキドキする気持ちを抱えていました。新しいLINEのデザインに対する私たちの思いや、どのような過程でどんなクリエイティブの成果物を制作したのか、見ていきましょう!

2020.12.14

コミュニケーションアプリから進化するLINE。Life on LINE!

LINEは2011年にコミュニケーションアプリとしてスタートしましたが、2020年現在ではマンガやMUSICなどのエンターテイメント系のサービスや、LINE Pay、LINE証券などフィンテック系のサービス等、様々な領域でLINEのファミリーサービスが追加されています。
私たちのビジョンである「Life on LINEに合わせるように、ファミリーサービスの様々なコンテンツをLINEで紹介したり連携したりすることが増えLINEの全てのタブ(ホーム、トーク、タイムライン、ニュース、ウォレット)でコンテンツ露出も多くなってきました。従来のデザインのまま多様なコンテンツが追加されたため、画面複雑に見え、情報が読みづらくなり、コンテンツに集中することが難しくなっていました
 日本・タイ・台湾・インドネシア・韓国のLINEユーザーを対象に行ったアンケート調査でも「LINEは複雑な印象がある。」という結果が出ていたのです。  
ユーザーが感じる”複雑さ解決するため、カラー整備、フォントの読みやすさ、そしてコンテンツに集中できるデザインの開発が求められていました。また、デザインの一貫性を維持するためには、LINEのProduct Designerが効率的に使用できるガイドの整備も必要でした。そのため、LDS(LINE Design System)を通じてUIコンポーネントの統一を行いました。
「デザインが古くなってきた そろそろ変えなくちゃ!」ではなく、ユーザーのためにコンテンツを見やすくしよう」というユーザビリティの向上を中心に置きLDSなど適用しながら、同時にデザイン的な完成度を高める方向…!このような背景の中ついに「LINE New Design」というLINEのリニューアルプロジェクトが始まりました
 

3年もの準備期間200を超えるデザインテスト

LINEは2011年にリリースされてから約10年間、上部のネイビーのヘッダーを維持しながら、新機能が追加される度に、少しずつデザインをアップデートしてきました。しかし、今回の様な大きなリニューアルは初の試みとなります。
LINE のデザインを担当するProduct Designerたちは、約3年前からLINEの新しいデザインを準備していました。約3年間、毎年デザインテストを行っていたので、テスト画面だけでも200枚を超えます。たくさんデザイナーがこのデザインテストに参加しました。 元のデザインを極力生かした案から1から作り直すような大掛かりな開発を必要とする案まで、様々をテストしました。
こちらが私たちがテストした画面のサンプルですがかなり多くの点で悩んでいたというのがお分かりいただけるのではないでしょうか…?

Simple, Wide and Bright

3年間にも及んだテスト経験が蓄積され20203月からLINE New Design プロジェクトが、リニューアルに向けて本格的に進行していきました
ずっと維持していた上段のネイビーのヘッダーホワイトに変更することで、より明るくそして画面が大きく見える効果を与えました。 また、トーク画面背景であるブルーヘッダーまで広げ、画面がより爽やかに見える効果を与えました。

Design Identityを1つ1つアップグレードする

ここからは、もう少し詳しくご紹介しますカラーフォントアイコンなどデザインの要素が今回どのように変わったのか見ていきましょう。

Color
既存のネイビーのヘッダーホワイト変わりLINEのメインカラーであるグリーン重要度が高まりました。 従来のグリーンがネイビーを考慮したグリーンだったため、ホワイトがメインの新しい画面では、 グリーンの明度と彩度を調整しました。

Icon
各タブごとに異なり、1つのタブの中でも領域ごとに異なっていたアイコンのスタイルや太さ、カラーなどを統一して一貫性を持たせました。
Font
コンテンツの重要度の見直しとバランスを調整し全体的な読みやすさ見やすさを改善しました。
 
Margin
各コンテンツ間で統一したマージンのルールを定義しました。
Component
リストサムネイルツールチップバナープロフィール画像ポップアップボタンストーリーリング…など、従来は少しずつ異なり統一性に欠けていましたが、コンポーネントの共通デザインのガイドを作成しました
 

ユーザーリサーチで分かったLINE New Designの印象

試案が固まり本格的な開発に入る前に1回、リリース直前に1回合計2回にわたってユーザー約300人を対象にリサーチ行いました。LINE様々国や地域で使われているコミュニケーションアプリですので、日本・韓国・タイ台湾インドネシアのユーザーを対象に実施しました。
リサーチの参加者にはLINE New Design prototypeをお見せし、新しいデザインに対する印象についての意見を聞きました。
これらのリサーチの結果、新しいLINEに対する印象は3つのキーワードにまとめることができました。 
「モダン」「明るい」「シンプル」
リサーチの参加者たちからLINEが以前よりすっきりし、洗練され、シンプルになったという反応、全体的にホワイトトーンになったことで、より広く、より爽やかな姿になったとの声を聞くことができました
「上段のナビゲーションエリアがなくなって息苦しかった天井が消えた感じです!」という方や、 「以前に比べて文字が読みやすくなり写真もサムネイルも見やすくなった」という意見もいただきました。LINE New Designで掲げた目標やコンセプトが達成できたことを、ユーザーリサーチ実感することがきたのです
 

これからLINEのDesignは?

LINEのサービスは非常に多岐に渡るため今回お話しした画面以外にも、ユーザーが触れる画面たくさん存在しますそれら全て一度に変えるには非常に時間がかかり、また複雑な工程となります。そのため、今回の2020年の年末リリースでは、最初に主要画面の新しいデザインをユーザーにお披露目することにしました。今後はその他の画面でも新しいデザインを適用していきます。
これからもアップデートしけるLINE New Designをお楽しみに
 
 

投稿者

LINE