ユーザー体験を最高にするkintone Design Systemsをつくってます

ブログ記事タイトルのサムネイル画像

春ですね〜、ユーザー体験を最高にするチームプロジェクトオーナーのsakitoです。

以前、kintone フロントエンドリアーキテクチャプロジェクトをスタートさせたブログ記事が公開されました。

今回はこの取り組みの一つのチームである「ユーザー体験を最高にするチーム 」について紹介します。

ユーザー体験を最高にするチームとは?

kintoneのフロントエンドリアーキテクチャのアプリケーション構成はMonorepoを採用し、チーム単位でオーナーシップを担うことを意識しています。開発者視点では分割されていますが、ユーザー視点では1つのkintoneアプリケーションであり、各チームが足並みを揃えてデザインの一貫性や品質を意識しながら開発を行う必要があります。そこで、各チームを横断してkintoneのユーザーにより良い体験を届けることを目標としたチームが「ユーザー体験を最高にするチーム」です。

ユーザー体験を最高にするチームの構成

ユーザー体験を最高にするチームはデザイン、アクセシビリティ、フロントエンド、アプリケーション品質、それぞれの領域に強みをもったメンバーが集まったクロスファンクショナルチームです。

図:チーム構成

各メンバーが強みのある領域に力を発揮しながらデザインや開発を行き来しています。各領域を越境していくことができるメンバー達です。

各メンバーはそれぞれのフロントエンドチームとも関わりをもっており、各チームの連携も担っています。具体的には下記の図のように、ユーザー体験を最高にするチームメンバーは各フロントエンドチームの開発にも参加しています。参加しているチームでは具体的な開発ではなく、この後説明をするユーザー体験を最高にするチームが作成したコンポーネントライブラリの組み込みや使用感のヒアリング、アクセシビリティやデザインのフィードバックを業務としています。これをユーザー体験を最高にするチームに持ち帰り議論を重ねより良いものを提供することを目的としています。

図:フロントエンドチームとの関わり

いまやっていること

ユーザー体験を最高にするチームが現在行っている取り組みを紹介します。

共通コンポーネントの集約とコンポーネントライブラリの提供

ユーザー体験を最高にするチームはフロントエンドリアーキテクチャが始まってから始動したチームです。すでに数十の画面が開発されている状態だったので、まずは開発中の画面で共通して使用されているコンポーネントを集約することからはじめました。いわゆるコンポーネントライブラリの提供を目的としたものになります。

はじめにコンポーネントを集約したのは、共通コンポーネントのデザイン、アクセシビリティ、品質をユーザー体験を最高にするチームが一貫性を保ちつつブラッシュアップするためです。共通コンポーネントは、コンポーネントライブラリとして配布することで、各チームが任意のタイミングで更新を取り込めるようにできます。

コンポーネントライブラリは知識の翻訳の役割も担っています。このコンポーネントライブラリを使用することで、Webブラウザのアップデートの早いCSSやアクセシビリティの知識を模索せずとも、各チームがユーザーに提供できると考えています。

図:コンポーネントの配布

コンポーネントドキュメントの作成

ただコンポーネントを集約し配布するだけでは、それぞれの開発者やデザイナーがコンポーネントライブラリを使用する際に、個々人で認識のズレが発生する可能性があるので、同時にコンポーネントごとのドキュメント作成を行なっています。デザインの段階から「なぜこのコンポーネントを使用するのか」が統一され、開発者はそのコンポーネントの使用方法が把握できることをドキュメントの目標としています。

図:Buttonドキュメントの一部、Buttonの構成を解剖し、言語化している

これらの取り組み以外にも、各フロントエンドチームからのアクセシビリティに関する相談や、共通して使用しているESLint Configへのルール追加なども行っています。

チームの目指す先

直近目指す先としては、Design Systemsの構築です。

Design Systemsとは、Webアプリケーションを構築するためにデザインや開発に体系的に取り組む方法を提供するものです。Design Systemsはとても範囲の広い語義になりますが、デザイン原則、Design Tokens、再利用可能なコンポーネント、コンポーネントドキュメント、品質の明文化などのルールセットが含まれます。

前述したコンポーネントライブラリの配布もDesign Systemsの一部ですが、まだまだDesign Systemsとはいえない段階です。

今後のアップデートや品質の担保のために、kintoneにもDesign Systemsになりうるものが必要だと考えています。

図:これから目指す先

さいごに

今回紹介したユーザー体験を最高にするチームは、フロントエンドリアーキテクチャプロジェクトに目処がついても、kintoneのサービスが続く限り続いていきます。

開発とデザインの垣根を超えて、ユーザーに良いものを届けたい方はお待ちしております!!

  • Meety

meety.net

  • フロントエンド募集

cybozu.co.jp

  • デザイナー募集

cybozu.co.jp

cybozu.co.jp

cybozu.co.jp