30年経っても使えるcomponent設計をする。プロダクトデザイナーよったけのインタビュー
こんにちは。カラーミーショップ、プロダクトデザイナーのよったけです。
最近はマインクラフトとLeague of Legendsを遊んでいます。楽しいです!
現在メインで関わっている業務として、ショップのカート周りの体験の改善と、新しい管理画面のデザインの実装やコンポーネントの更新等を行っています。主にUXエンジニアリングのスキルを駆使することが多く、デザインしたインターフェースの運用について問題がないレベルに仕上げています。
ペパボのプロダクトデザイナーはユーザーインターフェースを通じて機能を提供するために、デザイン~フロントエンドの実装を個々人の得意分野に合わせて行います。
デザインシステムの定義と実装
カラーミーショップは2023年から、管理画面のデザインのリニューアルを段階的に行っています。従来の管理画面をアップデートしていく中で、componentの管理やルールが明確になっておらず判断が属人化されていたものが存在していました。また、長い年月のプロダクトなのでデザインシステムが複数存在していました。
デザインシステムが必要な理由として、デザインの一貫性を保つ、メンテナンスのしやすさを担保し業務効率を上げるためですが現状ではそれらが達成できない状況にありました。使用者によってcomponentの使い方が判断されてしまう状態にあったためカラーミーショップ全てのアウトプットで使えるデザインシステム「Flippers」の開発を、新しい管理画面の作成と並行して進めることにしました。
カラーミーショップのデザインシステムは、ペパボ全体の共通基盤デザインシステム「inhouse」の一部の要素、「Flavor」を引用する形で「Frippers」というデザインシステムが存在しています。それとは別に管理画面に対して適用されるadmin-ui-componentと、従来のカラーミーショップのデザインシステムであるui-kitが存在しています。
「Flippers」のデザインシステムの中にはcomponent、token、ガイドラインを用意しそれぞれのアウトプットに対して参照出来るようにしています。
私はFlippers componentの開発を中心に全体のコンテンツの拡充をしています。今まで構想があったFlippersの導入が進んできて、日々楽しいです!
導入はデザインシステムとは何か、Flippersとは何かの定義から進めました。また、元々から仕組み作りが好きだった為今回の導入プロジェクトではFlippers全体の設計だけではなく、各compoentの設計やFlippersの浸透にも注力しました。
componentの開発に対して意識していること
デザイナーが作成したUIデザインを、componentとして様々な画面で運用していくにおいて、個人的に意識しているポイントが沢山あります。
まずは綺麗にソースコードを書き、メンテナンス性を高める様にしました。綺麗に書くというのはソースコードの可読性が高いということだけではありません。例えば汎用的でどんな状態でも使えるcomponentにするためにはmarginがcomponent内に存在しない方が良いので、marginはcomponentとして別にutirityとして用意するなどをしています。
componentの実装には、型定義を考慮して実装しています。「Frippers」のcomponentではvariantを指定する際に、どの単語を入れられるか制御できるようにしています。間違った単語を入れるとエラーになるようにしていますが、そうすることによってcomponentを使用する人のコーディングの負担を減らしています。なるべく全員がコーディングしやすいcomponentにすることで結果として生産性の向上に寄与しています。
componentはvue.jsを使用して実装しています。vue.jsはスタイルがclosedになり影響範囲を狭めることができ、componentとの相性もよいです。実装するにあたって使用する言語をどう決断していくかについてはプロダクトでの運用を念頭に置いています。
開発したcomponentを使える人を増やすために、デザイナーに対して使い方を説明するハンズオンの開催もしています。
figma、sassライブラリでのFlippers componentの使い方2つの勉強会を開催し、チーム内で理解を深めています。最近ではデザイントークンを利用してくださる方が増えてきており、浸透してきているのを実感しています。
プロダクトでの運用を考慮する
componentの設計思想は一般的にベストと考えられているものや、施策の状況によって作成しています。ですが、運用して見ると想定と違ったケースがあるのでトライ&エラーで進めています。
それまではクライアントワークでの開発を中心に行っていたため事業会社で大きなプロダクトのデザインシステムを作るのは初めてで、一般論だけでなくサービスでの定義やプロダクト運用を考えた設計を考えることが重要だと気づきました。
また、プロダクトでの運用を考慮する上で、組織で効率的にデザインをしていけるかの観点は重要になります。componentの設計だけでなくドキュメントの整備もすることで属人化を防ぎ、他の人もメンテナンスしやすい環境を作ることを心がけています。現在開発中のFlippersではドキュメントの拡充と共にすでに存在しているデザインシステムのドキュメントの更新、統合も合わせてプロジェクトとして動いています。
これらの業務をしていく中で、今後はエンジニアリングとデザインをつなぐ役割を深掘りしていきたいと考えるようになりました。チーム内ではコーディング、設計で困ったら「よったけに相談しよう」と言っていただけるのがとても嬉しいですし、更にチームに貢献しようとやる気が湧いてきます!
カラーミーショップに関わり、長い歴史があるプロダクトだからこそ仕様の統一で悩むこともありますが、今後も運用できるデザインシステムを作っていきたいです。長期で運用できる、30年は続くcomponent設計を意識して作っていきます!
また、カラーミーショップでは一緒にデザインシステムやプロダクトデザインを推進していくパートナーを募集しています!
今後もカラーミーショップのデザインにご期待ください！