見出し画像

LineDeveloperDays 2019 2日目 11/21

erukiti

今日もお弁当美味しかったです。

What's New in LINE Front-end Framework

LIFFやったことないんですが、LIFF v2が先月中頃リリースされてたらしい。

自分では全く触ったことないので、書けることがない。

とりあえず作ってみたいという気持ちにはなった。

大体、湊川さんのグラレコ見ていれば十分という説

LINEのデザインシステム

英語セッションで、英語聞く気満々だったけど、横や周りの人の同時通訳機の音漏れが激しすぎたのと、スライドパシャラーの撮影音が気になって、集中仕切れなかったのが残念すぎた。

できれば、来年は、同時通訳機の音漏れと、スライドパシャリの必要性を減らすようにして欲しい。

それはそれとして、デザイナーとしての立場からのデザインシステム。

元々手探りでデザイン開発したり、色々サービスが拡大していって、デザインに関しても、同じような作業の繰り返しとか、辛みが増え続けたので、デザインシステムを導入。

・ デザイン原則 （根本となる考え方 - WISH）
・ UXガイドライン （より具体的な指針 - HOW / WHY）
・ カラーシステム (HOW)
・ アイコンシステム (LAICON - HOW）
・ UIコンポーネント (HOW)

の5つでLINE Design System LDS を構成。

デザイン原則は、LINEのデザイン哲学といえるやつで、chat first とか、自分たちはユーザーではない、など。

カラーシステムは、導入前は500以上あった乱雑な色を30の基本色まで減らした。

色に関してはカラーコードから、コードにマテリアルUI的な名前を付けて、そこからさらに theme に沿ったコンテキストを持った抽象化をしたらしい。Primary Text / Teritari Text / Primary AccentText / BrandingText など。

アイコンに関しては、SVGベクタデータで作成するときに、基準となる線や円を組み合わせたものを使って、統一感のあるアイコンを量産できる仕組みでデザインされている。

コンポーネントに関してはまぁどこでもやってるようなもの。

細かいところだと、はねるアニメーションなんかも、iOSとAndroidで挙動が微妙に違ったりするのを、統一したLINE独自の少し気持ちいいアニメーションを追求しているのがすごく面白い。

LDSに関して普及するために、LDSに適合したデザインで、社内向けサイトを作って、そこにドキュメントを記述。

LINEくらいの大規模、技術的負債も多く、色々なことやってる、成長中の会社なら、デザインシステムはとても重要だなーという感じ。

デザインシステムにおけるフロントエンド

先ほどのデザインシステムはデザイナーからみたもので、今度のセッションはフロントエンド開発（Web, モバイル）におけるもの。

フロントエンドでは、元々Bootstrapをベースにして、LINE独自の Kokoro というものを作って使っている。Kokoroに関してはけっこう情報が多いので、ぐぐった結果を見るといいと思う。

最初の頃はモバイルから始まっていて、LDSがはじめから導入がされたのだけど、途中からWebViewなどを活用するなど、Webが増えたことにより、Kokoroが活用されるようになっている。

アイコンに関しては、さっきのセッションでも触れていた、作成する為の仕組みがあって、それを元に作る。名前は、friends, add friends, members などの具象的な名前よりも、user, add user, users のような、より抽象化された名前が付けられているらしい。

また、アイコンをビルドするの、以前だとかなり面倒だったけど、LAICON Image APIというシステムを構築して一括で登録、管理、デプロイまでやるらしい。素晴らしい。

コンポーネントに関して、Vue-Kokoroを作ったらしいんだけど、React-Kokoroを作ろうとして、それは再発明するの馬鹿馬鹿しいと思うので、WebComponentsで Kokoro-Element を作ってそれを使う事で、Vue/React それぞれで共通で使えるようにしたらしい。

あと、このkokoro-elementをベースに、LIFFで使えるLUIを提供するらしい。




【実演】 日本の自治体が提供するLINEを活用した便利なサービスを体験し、その作り方を学ぼう

もともと、govtech summit 2019 いってきましたという記事を書いた位には govtech というものに興味を持っています。たぶん日本で一番DX（デジタルトランスフォーメーション）が望まれているのが行政です。

元々 Line 社で行政案件をやってて、これはいけるってことで独立して Bot Express という、chat bot を使った行政テクノロジ改革 govtech をやる会社を立ち上げたらしいです。

行政手続き、例えば住民票の取得などをchat bot 経由で出来るようにしていて、ユーザーはクレカや Line Pay による決済も可能で、行政側は申請に対して、管理画面で操作すると、chat のメッセージが進行してくれるというものです。けっこう便利そう。

仮に差し戻しがあった場合は、「住所に誤りがあり差し戻しです。修正手続きしますか？」みたいなアナウンスと「手続きする」ボタンがあってそれにより再度手続きができたりするらしい。

何かの理由でキャンセルになる場合でも、返金処理もLineの決済インフラを使って行われるので、行政側としてもやりやすい。

また、DialogFlowというサービスを使って自然言語によるやりとりをある程度解析して、対応してるらしい。

最悪下部のメニューで申請処理を開始できるが、理想状態でいえば自然言語で発言したものによって申請や質問が出来るのが望ましいものの、現時点ではまだそこまではいってないみたい。

大変だとは思うけど、頑張って欲しいなーと思う。

・ 合理的なユーザー体験で社会を先導する
・ コンセプトをデファクトスタンダードにする
・ 共鳴する人々と開拓をおこなう
・ 豊かなワークライフを優先する

いいコンセプト。

「行政の人と触れて、分かったんですが、彼らは自分たちをお客様だと思ってる節があった」名言だ…。

まとめ

二日目は、フロントエンド寄りな感じだった。デザインシステムは、個人的にはRAICONシステムがめちゃくちゃ興味深かった。

この記事が気に入ったらサポートをしてみませんか？