こんにちは。どんぶラッコです。
先日、LINE Developer Day 2019 という、LINE が主催するDeveloper向けのセッションがお台場で開催してきました！その中の１セッションをご紹介します！
他のセミナーもまとめ中なので合わせてご覧ください♪
今回は フロントエンド技術に関するセッションです！
LINEは、クライアントアプリ/Webを対象としたデザインシステムを構築しています。このセッションでは、Webを中心としたデザインシステムについて、フロントエンドの側面からお話させて頂きます。なぜ、私たちはデザインシステムが必要なのか？どのようにデザインシステムを捉え定義したかを紹介します。LINE CSSツールキット “koromo” は数々のサービス導入を経て、デザインシステムのパターンライブラリに進化を遂げようとしています。koromoをベースとしたVue.jsコンポーネントライブラリ “koromo-vue” の導入事例としてOfficial Account Managerを紹介します。そして、デザインシステムに要求される柔軟性と拡張性を、どのようにフロントエンドが乗り越えていくのかお伝えします。
https://linedevday.linecorp.com/jp/2019/sessions/A2-3
デザインシステムにおけるフロントエンド
自己紹介
UITとは？
User Interface Technologyの略で、組織図はこんな感じ。
160名超えのフロントエンドエンジニアが在籍いるそうです。
また、それぞれの経験はこんな感じ。
5~10年の経験者がボリュームゾーンで、JavaScriptの経験者が多いようです。
使用している技術は下記の通り。React, Vueのボリュームが半端ない
UI フレームワークについて
LINEが独自に開発しているUIフレームワーク koromo koromo-vue についての紹介
koromoを使うことによって開発スピードがクッソ上がったとのこと。30%の削減を実現ですって…！
次に狙うのはDesign System。
ミーティングの結果、3つのコンセプトを定義しました。
Designパターンの構築
ここら辺の具体的な話はスライドが後日公開されるとのことだったので、詳細は譲ります。
私が気になったトピックを3つ取り上げます
Icongraphy
アイコンを作るときの骨組みが決まっているそうです。この骨組みに沿って組み立てることでLINEっぽいアイコンになるんだとか。
Naming Convention
ここでは、アイコンの命名規則ものお話でした。あくまでもそのアイコンが何を表しているかをアイコン名にすることで検索の効率化を図っている。
RGB vs HSL
L (Lightening) でトーンを表現することで、RGBでは困難であったトーンわけがしやすくなる。これはそのとおりだなあ、と
このセッションは実戦で使えるTipsが多く、いち開発者としてとても勉強になりました。
最後にkoromoをwebcomponetとして提供するというお話もあり、さらにLIFF用フレームワークとして提供するというお話もありました。
今後も注目ですね！
[…] 【LINE DEV DAY 2019】デザインシステムにおけるフロントエンド 【最新情報】 … […]