[レポート] デザインシステムにおけるフロントエンド #linedevday_report

オハコンバンニチワ CX事業本部の清田です。

LINE DEVELOPER DAY 2019 の DAY2 に参加してきましたー。自分の中で注目している DesignSystem についてとりあげている 「 デザインシステムにおけるフロントエンド 」セッションがあったので参加しつつレポートをご紹介できればと思います。

概要

2019年11月20日（水）・21日（木）にグランドニッコー東京 台場でLINEのデベロッパーカンファレンス「LINE DEVELOPER DAY 2019」が開催されました。

タイトル

• デザインシステムにおけるフロントエンド [Front-End in Design System]

スピーカー

• 岡崎 晶彦 氏 [LINE Front-end Standardizationチーム Front-end Engineer]

セッション概要

LINEは、クライアントアプリ/Webを対象としたデザインシステムを構築しています。このセッションでは、Webを中心としたデザインシステムについて、フロントエンドの側面からお話させて頂きます。なぜ、私たちはデザインシステムが必要なのか？どのようにデザインシステムを捉え定義したかを紹介します。LINE CSSツールキット "koromo" は数々のサービス導入を経て、デザインシステムのパターンライブラリに進化を遂げようとしています。koromoをベースとしたVue.jsコンポーネントライブラリ "koromo-vue" の導入事例としてOfficial Account Managerを紹介します。そして、デザインシステムに要求される柔軟性と拡張性を、どのようにフロントエンドが乗り越えていくのかお伝えします。

レポート

アジェンダ

今回のセッションは以下の４つのセクションにてプレゼンしてくださいました。

• Introduction
• UI Framework
• DesignSystem
• Pattern Library for web

Introduction

• 岡崎 晶彦さんはUITと呼ばれる組織に所属されている。
• UIT とは、User Interface Technologyの略称。
  • フロントエンド全般の開発組織の総称とのこと
• 岡崎さんは Front-end-Standardzaion のチームにいらっしゃる。

• 世界各国にブランチ(拠点)があり全部で7つある。
  • 日本(3拠点)、韓国(1拠点)、台湾(1拠点)、ベトナム(2拠点)

• フロントエンドエンジニアと呼ばれるエンジニア職が160名が所属している。
• 上記の風景は、韓国で開催したワークショップの様子とのこと。
• 1年1回、UIT所属のエンジニアが一同に会してワークショップをする。

Front-end Experience

UIT所属のエンジニアのスキルレベルを調査しているそうです。

• 経験年数は5-10年の方が多い。
• 知識レベルについて、
  • CSSは中級レベルが50%、中級以上が30%
  • JSは中級レベルが30%、中級以上が40%
• JSが得意な人が多い
• 中級以上のスキルレベルの人の割合が高いのが驚き。

Frameworkについて

CSS、JSにて利用されているフレームワークの紹介。

• CSSはBootstarpの利用がおおく、つづいて独自カスタムのフレームワークを利用している。

• Vue と React の2強の図式になっている。Angularは去年までは使われていたが今年は利用されているプロジェクトは減った。

UITのお仕事

UIT組織でのお仕事の内容についてのご紹介。

• WebView in Client-apps
  • クライアントアプリ内のWebView開発
• Web Apps in Browser
  • Webブラウザ側で動くWebアプリケーションの開発
• SDK & Tools
  • SDK開発
  • 開発者向けのツール
  • Javascriptライブラリの開発
  • CSS フレームワークの開発

クライアントアプリの内部は、WebViewで実装されている箇所が多いとのこと。

UITに所属している職種

• デザイナー
• プランナー
• 品質管理エンジニア
• クライアントアプリエンジニア
  • iOS / Android 含む
• サーバーサイドエンジニア

社外活動

コミュニティー活動

LINEさん主催の UIT (User Interface + Technology (Front-end dev)) を運営している。

User Interface + Technology の頭文字を取って、私たちはいわゆるフロントエンド開発のことをUITと呼んでいます。私たちにとって重要なことは、エンジニアとして探究心をもって技術に取り組み、その知見をより良いUIをユーザーに提供する為に活かすことです。 ぜひこのグループのメンバーになって、継続的に参加してみてください！ このコミュニティはLINE株式会社でフロントエンド開発に携わるチームの有志によって運営されています。

出典：UIT(connpassページ)

ポッドキャスト配信

Front-end Podcast - UIT INSIDE

Bootstrap 日本語翻訳

Bootstrap JP

Bootstrap 日本語翻訳サイトを2018年の11月に公開後、1年間で14万PV、約1万人のユーザーにご利用されている。

UI Framework

LINE社では様々なサービス運営されており、そのサービスを提供するうえでWebページや管理画面を多く構築しているとのこと。

求められたこと

• 開発スピード
• 一貫したユーザー体験

管理画面等で求められる事柄として、上記の2点がありそれを実現するために UI Frameworkが必要だった。

• koromo
  • Bootstrap4をベースに開発したCSSライブラリ
  • ライブラリ構成
    • Colors
    • Typography
    • Layouts
    • Components
    • Icons
    • Code assets
• koromo-vue
  • koromo用のvueコンポーネントライブラリ

導入事例

LINE Official Account Manager とは

• LINEの公式アカウントを管理するツール
• 主な用途
  • 公式アカウントからのメッセージ配信管理
  • ユーザーの管理
  • チャットでのカスタマーサポート
  • Etc

Redesign Project

ユーザーにとって価値のあるプラットフォーム にするため、従来の各アカウントサービスを統合するプロジェクトを実施された。

• プロジェクトメンバー
  • 複数のリージョン(日本、韓国、ベトナム、タイ) でのメンバー構成
  • 総勢150名を超えた
• 機能要件は非常に多岐にわたった。
• アプリケーション構成
  • MPA(Multiple Page Application)からSPA(Single Page Application)へ方向転換
• スケジュール
  • 2018年スタートし、2019年4月にリリース

新しいアプリケーション構成

• 利用したライブラリ、ツールについて
  • koromo (CSS)
  • Vue
  • koromo-vue
  • ECMAScript v6
  • Webpack
  • Babel
  • CircleCI

成果

koromo、koromo-vueのライブラリを利用したことによりDesignパートの時間を短縮することで、全体的で30%の開発時間を縮めることができた。

開発メンバーからのフィードバック

• 良かった点
  • 開発時のコミュニケーションが円滑に行えた。
  • 意思決定が早かった。
  • トータルの時間が短縮できた。
• 改善点
  • コンポーネントの使い方にガイドが必要だった。
  • 例として、OK/キャンセルボタンのレイアウトは正しいのかといった不明瞭点がおこった。

改善点を克服できれば、さらに開発時間を短縮できるのでは？とのことから、解決策のひとつとしてDesignSystemにアプローチされた。

Design System

アプリを中心としたプロジェクトの中に、すでにDesignSystemに着手していたLDS(LINE Design System)が社内で進行されていた。UI Framework の弱点を克服するためにLDSとシンクしコラボレーションしていった。

双方めざしている方向は一緒。

• 高い生産性
• 一貫したユーザー体験

コンセプト

共通理解のために定義した3つのコンセプト

• Design Principles(デザイン原則)
  • WISH: どうあるべきかを定義
• Style Guide(スタイルガイド)
  • HOW/WHY: 基準を定義
• Pattern Library (パターンライブラリ)
  • HOW: どのように使われるかを定義

UI Frameworkの弱点をDesignSystemで補っていく。

DesignSystemの階層構造

• Design Principles(デザイン原則)
  • すべてにたいして共通のもの
• Style Guide(スタイルガイド)
  • プラットフォーム毎に分類
• Pattern Library (パターンライブラリ)
  • テクノロジー毎に分類

Design Principles

Design Principles(デザイン原則)の紹介

• WE ≠ USERS
  • 私達はユーザーではありません
• CLEAR PRIMARY TASK
  • 私達は優先するタスクを名確認します
• CHAT FIRST
  • チャットサービスを最優先で考える
• RELIABLE DESIGN
  • 私達は信頼できるデザインをめざします
• CONTINOUS EXPERIENCE
  • 継続的な体験を考慮します
• RESPECT FOR LEGACY
  • ユーザーの操作性を尊重します

Style Guide

Style Guideの代表的なパートを紹介。

• Color
  • LINEらしいカラーを設定し、名前付けし管理している。
• Typography
  • LINEは多言語(日本語、英語、韓国語、中国語、タイ、インドネシア)対応するため、言語毎にフォントを指定している。
• Iconography
  • スタイル、グリッド、ストローク、アイソレーション等を提示されていてルールに従ってアイコンを作成すればLINEらしいアイコンが作成できる。

Pattern Library for Web

Pattern Libraryの紹介。今回はWeb方面の紹介でした。

• CSS
• Vue
• React
• Icons
  • Iconは特殊でWeb、モバイルアプリともに共通のパターンライブラリの LAICON (LINE Atomic Icons) として提供している。

Tips

アプリ内で使っていたClose Iconが10種類あった。カラー、透明度、大きさ、ストローク、アイソレーションなどがことなっていたとのこと。本来使われるはずだったが使われなかったことFood Lossになぞらえて Design Loss と呼ばれていました。 規格を統一し、計画的に在庫を管理すれば防げるとの考えとのこと。

アイコンを題材に正規化の例をあげられていた。

• Nameing
  • 名前付け、固有の名称でなく形状の名称で名付ける
• Flexible
  • 柔軟性を担保する
• SingleSource
  • シングルソースでの利用する
  • LAICON (LINE Atomic Icons)と呼ばれる200種のアイコン登録されてWEBサービスで利用している。
  • アイコンはSVG化し、各ライブラリ(CSS、Vue、React)で利用できるように整備している。

Deployment Flow

現在のデプロイフローは、デザイナーが作成したデザインデータを Zeplin経由でエンジニアが受け取ってGHE(Github Enterprise)側へPushしWeb Font化して、CDN配信、npm化(プライベート)、該当Webアプリへデプロイされるフローとのこと。

将来的な構想として、デザイナーが直接SVGアイコンを管理ツールにアップロードすることで用途ごとに配信される仕組みを計画している。

CSS

パターンライブラリにおけるCSSパート。

新しい主要機能

• Theming(テーマ機能)
• Instant(即時性)
• Adaptive Components

主な取り組みについて

• 用途毎に6つのカラーを提供している
• BootStrap同じ種別を用意 -> primary, secondary, success, danger, warning, info
• ダークモード対応も考慮している。
• LINE アプリはグリーンがブランドカラーだが、メッセンジャー以外はことなるブランドカラーを有している。
• 各ブランド毎のテーマを切り替えに、CSSのCustom Propertiesを利用して管理している。
• 各カラーの管理にHLSをベースに明度管理し、ボタンのインタラクション(Hover、Active)時のカラーに適用している。
• ライト・ダークモードでコントラスト管理が必要で、Custom PropertiesとSass関数複合して対応できるようにしている。
• Responsive and Adaptive について
  • 6種のサイズ(横幅)を規定している
    • x-small: 576px
    • small: 768px
    • medium: 992px
    • large: 1200px
    • x-large: 1201px+
  • デバイス毎のブレイクポイントとして以下の2つで分ける想定
    • Mobile (x-small,small)
    • Desktop (medium,large,x-large)

JS

パターンライブラリにおけるJSパート。

LINE社では、現在の主要フレームワークはVueとReactの2強で、koromo-vue を提供済みのため今度は koromo-react の開発計画があったが、主要フレームワーク毎に自社フレームワークを開発しないと動かない、開発にはイニシャルコスト、ラーニングコストといった課題があった。

上記の課題の解決策として、Web標準の Web Components の利用を検討した。

検証内容として5つのパート

• ✅ Works on WebView
  • WebViewでの動作が可能か？
• ✅ Can be used in Vue and React
  • VueやReactで動作が可能か？
• ✅ Can reuse code from koromo
  • koromo ソースを再利用が可能か？
• ✅ Learning curve for developers
  • 開発者の学習に課題があるか？
• ⚠️ Polyfills integration
  • Polyfillの提供が必要か？

結果的にIEのブラウザのみPolyfill提供が必要だが、他はすべて提供できることの検証結果になり開発を開始した。

Web Components をベースとした komoro-element が開発された。

• Reusable
  • 再利用が可能で、主要フレームワーク(Vue,React,Angular)と一緒に利用することが可能。
• Themable
  • 容易にテーマの変更を可能。
• Multi-device
  • WebView、ブラウザ、モバイルといった各種デバイスで利用を想定して開発されている。

LIFF (LINE Front-end Framework)

2019年10月にバージョン2にメジャーアップデートした。バージョン1では、LINEアプリ内でのWebViewでの動作環境だったがバージョン2で各主要Webブラウザで動作が可能になり開発・デバック環境が向上したとのこと。

LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。

出典: LINE Developer より

LUI (LIFF UI)

LIFF 向けのUIフレームワークの開発が進行されている。Atomic Designの思想のもと、komoro、komoro-element、LUIで各コンポーネントレベルに応じたコンポーネントを提供される計画らしい。

Summary

• Rule
  • おしつけたり、強制するものではなく、ボトムアップなスタイル。
• Parts
  • モジュール型と統合デザイン型の中間な位置。
• Team
  • デザインシステムを支えるチームは、分散型の組織ではなく、集中型の組織。

• DesignSystemのチーム構成
  • メンバーは30名程度
  • Webアプリだけでなく、モバイルアプリのメンバーも在籍している。

フロントエンドにおけるデザインシステムの Web Pattern Libraryは以下の構成とのこと。

• CSS
  • komoro
• JS
  • komoro-element x 主要JSフレームワーク(Vue、React、Angular)
• ICON
  • Webアプリ共有の共通アイコンライブラリ LAICON (LINE Atomic Icons)

最後に

デザイン原則(Design Principles)において、スタイルガイドとパターンライブラリは自転車の両輪の関係性に似ている。 方向性を決める前輪がスタイルガイド、スタイルガイドを推進する後輪がパターンライブラリ、どちらがかけても進むことができない。互いに支え合って進んでいくことができる。

まとめ

デザインシステムといったワードをよく見かけるようになってきました。ここ最近ではAdobe社のSpectrumが注目されていたかと思います。弊社のSlackでも、有志が集まって misc-design-system なるチャンネルで情報共有はしているのですが、デザインシステムの構築・開発までには至っていません。Storybookを利用したコンポーネント集あたりが近しい感じです。

デザインシステムを構築する上で、構築するまでの背景を知れる機会はなかなかないため大変参考になりました。もし自分が携わる機会があればアプローチの参考にさせてもらえればなと思います。

LINE DEVELOPER DAY 2019 シリーズについて

今回のLINE DEVELOPER DAY 2019 シリーズの記事が以下にシリーズ化して掲載しております。 様々なセッションレポートを掲載しておりますので、ご一読いただければ幸いです。

• LINE DEVELOPER DAY 2019 – シリーズ –