[レポート]LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる #linedevday_report

#イベントレポート

#LINE

阿部信介

2019.11.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

CX事業本部の阿部です。

この記事はLINE Developer Day:Day2の「LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる」のレポートです。

概要とスピーカー

デザインの分野では、デザインシステムを採用することが主流になっています。デザインシステムを採用すれば、一貫性とアラインされたUXレベルを同時に達成できるからです。デザイナーは時間に余裕ができるため、デザインコンポーネントを用いてより重要なデザインの課題に集中することができます。 Jung Young Leeが、既存の製品から8年の歳月をかけてデザインシステムを作った経験談をお話しします。

LINE Plus Product Design 5 Lead Product Designer Jungyoung Lee (Jake)さん

なぜこのセッションを聴こうと思ったか(期待値)

そもそも"デザインシステム"って何？というのがすごく気になった
ガイドラインや部品化みたいなアプローチとはどう違うのか？とか
UXを高める活動には興味があるので、LINEの取り組みを知りたかった

セッションレポート

デザインガイドラインとは？
- 何もない -> ドキュメントのガイドライン -> Zeplinのガイドライン -> デザインシステム
- 共通のコンポーネントからデザインのシステムを構築する
- 既存ものを組み合わせるのは難しい(属人性もある)
基本構造
- element < component < page
期待する効果
- 全ての人に対して効果が期待できる
- UXに集中する
- 開発者はコアロジックに集中できる
- QAのコスト削減
最初からデザインシステムを作ることは不可能
- 必ずレガシーがある
課題
- デザインシステムに関する期待値をデザイナーにリサーチした
- 調査する -> 繰り返しの多い作業に多くの時間を取られていることがわかった
- クリエイティブなタスクが10%に止まっていた
- 一つのアプリに同じ意味のアイコンが複数あったり
- 色が統一されていなかったり
- なぜ？
- 例えばアイコンだとデザインがいどがないので、キャプチャから始めるとか
デザインシステム(LDS:LINE Design System)の目標
- 効率的に作業して、より重要なタスクに集中するための時間を作る
- デザイナのためだけではなく、社員全員に共通するシステムであること
LINE Designe System
- 原則
- 我々はユーザではない
- 優先すべきタスクを明確にする
- チャットファースト
- 信頼できるデザイン
- 継続的な体験
- 過去の遺産への経緯
- UXガイドライン
- 色
- 500以上のカラーバリエーションから30に絞り込む
- 色に名称をつける -> CSSなどにも反映
- ダークモードへの対応
  - 全ての着せ替えをサポートするのはやめた
  - セマンティックカラーを実装した
  - 色に使われる意味をつけた
  - ライトモードとダークモードで変更する
- アクセシビリティ
- 最低でも11ptのフォントを使う
- 4:5:1以下のコントラスト比以下のものは使わない
- など
- Iconography
- アイコンをリスト化してライブラリ化した
- コンポーネント
- 場合によってはコンポーネントから作っても良い
- 美しいコンポーネントを作るのは必要だが、それぞれに対して理由を考える
- 一つのコンポーネントに一つの名前をつける
これらをSketchなどに統合することで、時間が短縮できる
インタラクションのデザイン
- インタラクションについても原則を持って
- iOSとAndroidで統一したインタラクションを作りたかった
- アニメーションを統一したり
ドキュメントの改善し続ける
- デザインシステムのサイトを作る
- ポータルをちゃんと作った
- アクセシビリティを高めると同時に情報のオーソリティを高めたかった