コミュニケーションアプリから進化する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年間にも及んだテストの経験が蓄積され、2020年3月から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をお楽しみに！