LINEはなぜデザインシステムを取り入れたのか？　フロントエンドにおける価値と定義を解説

LINEのフロントエンド組織とデザインシステム

岡崎晶彦 氏（以下、岡崎）：こんにちは。LINE株式会社の岡崎です。このセッションでは「デザインシステムにおけるフロントエンド」についてお話します。お話を始める前にみなさまにお聞きしたいのですが、1つ前のJakeのLINEのデザインシステムのセッションを聞いた方はどれぐらいいらっしゃいますか？

（会場挙手）

ありがとうございます。半分ぐらいいらっしゃいますね。2つ聞いていただくと理解が深まりますし、私のセッションだけでもわかるような内容になっていますので、ご安心してください。では進めていきます。

本日お話する内容は4点です。

私と組織の紹介、次にUIのフレームワーク、そしてデザインシステム、最後にWebのためのパターンライブラリについてお話します。

改めまして、岡崎と申します。

LINEでフロントエンドエンジニアをやっています。私はUITという組織に所属しています。みなさまはUITという言葉を聞いたことがあるでしょうか？　あまり馴染みのない言葉だと思います。UITとはUser Interface Technologyの略で、フロントエンド全般の開発を行う組織のことです。

これが私たちの組織図です。

フロントエンド開発センターの下にUIT1室とUIT2室があります。UIT1室が東京ブランチ、UIT2室が京都・福岡ブランチとなっています。ちなみに私はUIT1室のFront-end Standardizationチームに所属しています。

日本以外では韓国の盆唐、台湾の台北、そしてベトナムのハノイとホーチミンにブランチがあります。国内と海外を合わせて全部で7つのブランチがあります。

全体で160名を超えるフロントエンドエンジニアが所属していまして、この写真は今年の9月に韓国の春川で実施した「UIT GLOBAL WORKSHOP」の様子です。年に1度ぐらいのペースで、UITのフロントエンドエンジニアが集まりオフラインの技術交流を行っています。

LINE社内のフロントエンド事情

UITでは毎年フロントエンドに関する社内調査を行い、全体の知識レベルやフレームワーク、ツールの利用動向などを調べています。このグラフはフロントエンド開発の経験年数です。

5年〜10年が最も多く、次は2年〜5年といったかたちになっています。

次は知識レベルについてです。左側がCSS、右側がJavaScriptです。

色が濃いほどエキスパート、薄いほどビギナーを示しています。CSSは中級が約50パーセント、それ以上が30パーセント。一方JavaScriptは中級が約30パーセント、それ以上が40パーセントという割合です。CSSよりもJavaScriptが得意なメンバーが多いといった印象です。

プロジェクトで最も使われているCSSフレームワークは1位がBootstrapで30パーセント、2位は自前のフレームワークで約14パーセント、それ以外はほとんどフレームワークを使っていないということがわかります。

JavaScriptのフレームワークはご覧のとおり、VueとReactの二強です。実は去年まではAngularもランクインしていたんですが、今年は圏外になってしまいました。

VueとReactの比率はブランチによっても異なりますが、全体としてややVueが多いのがUITの特徴と言えます。

多くの機能がWebViewで実装

それではUITの業務について紹介していきます。UITではHTML、CSS、JavaScriptを使ってWebアプリケーションの開発を行っています。

もうちょっと具体的に説明しますと、私たちはクライアントアプリの中のWebView、そしてブラウザ上で動くWebアプリの開発を主に担当しています。また、SDKやデベロッパー向けのツール、JavaScriptライブラリやCSSフレームワークの開発も行っています。

おそらく、LINEと言えばクライアントアプリの印象が強いと思いますが、実はたくさんの部分がWebViewで実装されています。UITはデザイナー、プランナー、品質管理エンジニア、クライアントアプリエンジニア、サーバサイドエンジニアなど、多くの職種と連携してたくさんのサービスを作り上げています。

次に社外向けの活動を紹介します。UITメンバーが中心となって発足したフロントエンドのコミュニティ、UITを運営しています。

UITはフロントエンドエンジニアのための実践的なコミュニティです。多面的なテーマが特徴で、2ヶ月に1度ぐらいのペースでMeet upを開催しています。

最新のフロントエンドをキャッチアップできるPodcastが「UIT INSIDE」です。今時のフロント事業を多彩なトピックをUITメンバーが音声でお届けしています。今年の2月にスタートして、すでに30近くのエピソードを配信しています。

また、オープンソースへのコントリビューションとして、最も人気のあるCSSフレームワーク「Bootstrap」の日本語サイトの翻訳、制作、運営も行っています。去年の11月に公開して1年経って、月間14万ページビュー、1万人を超えるユーザにご利用いただいております。

LINEを支えるUIフレームワーク、koromoとkoromo-vue

それではUIフレームワークの話に移ります。LINEにはたくさんのサービスがあり、それを支えるWebベースの管理画面があります。管理画面に求められる開発スピードと、一貫したユーザ体験のために、私たちにはUIフレームワークが必要でした。それがkoromoとkoromo-vueです。

koromoはBootstrap4をベースにLINEが開発したCSSツールキットで、koromo-vueはkoromo用のVueコンポーネントのライブラリです。

koromoはカラー、タイプポラフィ、レイアウト、そしてコンポーネント、アイコン、コードアセットで構成されています。我々が開発したkoromoとkoromo-vueは現在数多くのLINEサービスに導入されています。

それではkoromoの導入事例としてLINE Official Account Managerを紹介します。

LINE Official Account ManagerはLINE公式アカウントを管理するためのツールです。主に企業や店舗が使うツールで、ここからメッセージの配信を行ったり、ユーザの統計情報をチェックしたり、1対1のチャットを使ったカスタマーサポートを行うことができます。

LINE公式アカウントの統合プロジェクトを開始

2018年に私たちはRedesignというプロジェクトを始めました。

ユーザにとって価値のあるプラットフォームにするため、従来のLINE公式アカウント、LINE ビジネスコネクト、そしてLINE カスタマーコネクト、LINE@のこれらすべてを新たなLINE公式アカウントとして統合するプロジェクトです。

非常にたくさんのメンバーがこのプロジェクトに関わりました。

日本、韓国、ベトナム、タイと、この4ヶ国からプランナー、エンジニア、品質管理エンジニアが連携し、関わったメンバーは150名を超えました。

LINE Official Account Managerに求められる機能は非常に多岐に渡りました。

残念ながらこのページには収まっていません。従来のLINE Official Account Managerは、Javaのサーバ上でAngularをベースに作られたマルチページアプリケーションでした。私たちはこのリニューアルでVueベースのシングルページアプリケーションに作り替えました。

Vueの他にはES6、Webpack、Babel、CircleCIと、こちらを選択しました。そしてVueとともにUIフレームワークとしてkoromoとkoromo-vueを採用することにしました。

そして今年の4月、無事にLINE Official Account Managerをリリースすることができました。

koromoによって全体で30％の時間短縮に

koromoを導入したことでデザインに要する時間を大幅に短縮することができました。これはけっこうサラッとやっているんですが、全体で30パーセントの時間の短縮に成功しました。

koromoを使った企画者・開発者からのフィードバックとして良かったところは、コミュニケーションが円滑になった、意思決定が速くなった、トータルの時間が短縮できた点です。反面、悪かったことはコンポーネントの使い方にガイドが必要だった点でした。すごく簡単な例で説明します。

例えばOKとキャンセルボタン。これはどちらの並びなんだといったものですね。要はコンポーネントだけの提供だと自由度が高すぎて使う側が迷ってしまうという点です。もしこの弱点を克服することができれば、我々はもっと時間を短縮することができます。

デザインシステムとの出会い

そして私たちはデザインシステムに出会います。すでにアプリを中心としたデザインシステムの構築を進めていたプロジェクトがありました。LDS（LINE Design System）です。先ほどのJakeのセッションで触れていたものですね。私たちはUIフレームワークの弱点を克服するためにLDSとシンクし、コラボレーションを始めました。

フェーズ1ではLINEのメッセンジャーアプリ、フェーズ2ではLINEのファミリーサービスとモバイルWeb、フェーズ3ではデスクトップWebを計画していまして、現在、フェーズ1からフェーズ2に向かう途中です。

UIフレームワークkoromoを開発している私たちと、デザインシステムを構築しているLDSチームが互いに目指しているのは高い生産性と、一貫したユーザ体験でした。同じゴールを目指していることがわかったので、私たちはそれぞれの状況を確認し互いに何ができるのかを確かめ、コラボレーションしていくことを決めました。

この写真は今年の6月に新宿で行ったデザインワークショップの様子です。京都、韓国、台湾からメンバーが集まり、2日間掛けて目指すべき方向性とスコープ、役割を定義しました。ちなみに、このワークショップで日本人が私だけで、ずっと英語だったのでけっこうきつかったです。

このワークショップを通じて、デザインシステムというのは組織によって定義や解釈が異なるということに気付きました。

デザインシステムを理解するための3つのコンセプト

そこで、私たちが共通理解のために定義した3つのコンセプトを紹介します。

デザイン原則、スタイルガイド、そしてパターンライブラリです。「どうありたいか」のスタンスを示すのがデザイン原則、「どのようにするのか、なぜそうするのか」基準と理由を示すのがスタイルガイド、「いかに実装するのか」具体的な方法を示すのがパターンライブラリになります。

ブレイクダウンしていきましょう。

デザイン原則には基礎となるファンデーション。スタイルガイドにはカラー、タイポグラフィ、イコノグラフィー、UXガイド。パターンライブラリにはコンポーネント、テンプレート、アイコン、そしてコードアセット。

今までのUIフレームワークkoromoはカラーやタイポグラフィ、コンポーネントは持っていました。しかし、デザイン原則やUXガイドは持っていませんでした。

もし新しく作るコンポーネントの方向性で迷ったら、デザイン原則を基に考えれば判断が容易になります。

また、コンポーネントの使い方や組み合わせに迷ったら、UXガイドがあれば一貫したユーザ体験と時間の短縮につながります。UIフレームワークはデザインシステムと統合することで、今までの弱点を克服することができます。

今度は少し視点を変えてデザインシステムを階層的に見ていきます。

最上段にあるのがデザイン原則、中段にあるのがスタイルガイド、そして一番下にあるのがパターンライブラリです。デザイン原則はすべてに対して共通のものであり、スタイルガイドはプラットフォームごと、そしてパターンライブラリはテックスタックごとに分類しています。

デザインにおける6つの原則

それではデザイン原則から紹介していきます。全部で6つあります。

私たちはユーザではありません。そして私たちは優先するタスクを明確にします。私たちのサービスはチャットから始まりました。ですから、チャットを最優先に考えます。私たちは信頼できるデザインを目指します。そして私たちは継続的な体験を考慮します。最後に私たちはユーザの使い慣れた操作性を尊重します。以上の6つが私たちのデザイン原則です。

判断に迷ったら、私たちはこの原則を基に決断することができます。

次にスタイルガイドです。こちらはわかりやすいところを一部紹介します。カラーパレットです。

我々がレインボーカラーと呼んでいる色の一部です。1,600万色を超えるカラーからLINEらしいカラーを選定し、名前を付けて管理しています。一度限りのカラーリングではなく長期に渡って使えるカラーシステムを目指しています。Webサイトから簡単にカラーコードを取得でき、開発者向けにSassも提供しています。

タイポグラフィです。

Webではfont-familyと言ったほうがわかりやすいと思います。LINEでは日本語の他に英語、韓国語、中国語、タイ、インドネシアなど、多言語対応することが多いので、言語ごとにfont-familyを定義しています。

イコノグラフィーです。

アイコンを作成する際のスタイルやグリッド、ストロークも、あとアイソレーションなどを定義しています。このルールに従って制作すればLINEらしいアイコンを作ることができます。