LINEは19の言語で提供されるグローバルサービスです。より多くの国でさまざまなサービスを提供するようになり、プロダクトデザイナーたちは似ているコンポーネントを何度もデザインすることになったため、度重なるコミュニケーションリソースが発生してしまい、どんどん不要な「負の遺産」が溜まっていくようになりました。そこで「各国のLINEデザイナーたちが、各国のユーザーに同じLINE Designの価値を伝えられるシステムを構築しよう」という想いからLINE Deisgn Systemプロジェクトが始まりました。

 

まず、Efficiency, Good Design, High Standardという３つの目標を設定し、LINE Design Systemチームと各国のプロダクトデザイナーたちが試行錯誤をくり返しました。その結果、LINE Designの基本になるLINE Design Principleを宣言し、デザイナーが実務ですぐに使用できるFoundation Guideline, Components Library そしてUI GuidelineからなるLINE Design Systemが誕生しました。

 

そしてこの2021年11月、LINE Design Systemを世界に公開します。

designsystem.line.me

LINE Design Principle

「WE≠USERS：我々はユーザーではない」とは、プロダクトデザイナーたち自らがユーザーとして代弁すること注意しようということです。様々な課題を解決しなければならないため、デザイナー本人がよく理解していると思っている分野でも必ず明確なデータを元にプロジェクトを進めます。

 

また、LINEのコアバリューは人と人の親密なコミュニケーションです。「Chat First：LINEは会話を最優先する」という原則を定め、コミュニケーションの経験が最も重要だと捉えています。そのため、すべてのプロジェクトにおいて、ユーザーのコミュニケーション体験をより強化することを考えています。

一貫性のあるユーザー経験を提供する34個のLINEサービス

LINEはLINEポイント、LINE Taxi、LINE Bankなど国内外で100以上のサービスを提供しています。LINEのグローバルファミリーサービスはそれぞれビジネス戦略が異なり独立性を持つため、より柔軟性のあるDesign Systemが必要でした。

 

そのため、LINE Design Systemは、LINEメッセンジャーのためのLINE Deisng System for Messenger（以下LDSM）とグローバルファミリーサービスのためのLINE Design System for Global family service（以下LDSG）に分けて構築しました。

 

LDSMは、LINE Designの中心になるFoundationとUIコンポーネントで統一されたデザイン言語を作ることにフォーカスしています。
LDSGは、ファミリーサービスに対して一貫性のあるユーザー経験のためのガイドラインを提供することを目指しています。WebデザインのベースとなるLDSGは各国の担当デザイナーやDesign Systemチームが協業し、柔軟に対応しながらLINE Designの基本原則を守れるようにしています。

LINE Design Foundation

標準化されたカラー、アイコン、グラフィックなどDesign Foundationを提供し、一貫性のあるブランド体験を作っています。

 

LINE Design Systemが構築される前は、不明確なカラーガイドにより担当デザイナーごとに微秒に違うカラーが使用されていました。そこで、LINEのアイデンティティカラーであるForest Greenを指定し、一番よくマッチするプライマリーカラー30種と自由度が高く利用できるレインボーカラーガイドを作成しました。プライマリーカラーはLINE Designの基本カラーであるため、コード化して制限しています。万が一、デザイナーがプライマリーカラーを適用するところに他のカラーを使用してしまった場合、開発段階でアラートが出る仕組みで厳しく管理しています。

 

そのほか、一貫性のあるデザインのためにアイコンライブラリを構築し、200個以上のアイコンをSVGとAI形式で提供、サービスの説明や機能の説明のためのピクトグラムに関するガイドをも提供しています。
また、グラフィックイラストについても各国のデザイナーたちが一貫性のあるトンマナで制作できるよう、顔の表情や性別、人物別のパーツの比率のガイドなどを含むグラフィックライブラリも提供しています。さまざまな文化圏に対応し全てのユーザーが共感できるように明るく親近感を持てる雰囲気で制作しています。

シングルコンポーネントから開発ガイドまで一気に

LINE Design Systemを利用することでプロダクトデザイナーがコンポーネントをいち早く探し、ガイドを活用してデザインに適用して、開発ガイドを渡す過程をミニマムにすることが可能です。

 

 

使用したコンポーネントがガイドに沿って適切に使用されたのか確認したい場合、また、新しいスペックやデザインタイプのコンポーネントを追加したい場合はLINE Design Systemチームで対応しています。

 

コンポーネントは初期のDesign Systemの基本原則に基いてデザインされていますが、各サービスの担当デザイナーが活用しながら共に発展させることができる構造になっているため、継続的なコミュニケーションがとても重要です。

適用されたDesign System

様々なケースによりLINEのプロダクトの最新デザインとともに、コンポーネントが適用された領域を確認できます。 このような過程からプロダクトデザイナーは本人が担当するサービスだけでなくLINE全体のデザインを知ることが出来るため、他のサービスで活用されたコンポーネントを参考にして柔軟に応用することができます。

 

各サービスにDesign Systemを適用した際のエピソードやプロダクトデザイナーの思いなどは、今後ブログ記事としてご紹介していきます。

今後のLINE Design Systemは？

Interaction Design Guidelinesの制作やWeb Componentの提供、Design System Applicationのアップデートなど、企画や開発に寄り添ったシステムに発展させていきたいと思います。

 

これからもグローバルプラットフォームとしてデザイン言語を作り、業界をリードできるように努力していきます。多くのご注目や応援をよろしくお願いします！