デザイナーのための業務効率改善Tips

Figmaで実践！プロダクト開発のスピードを上げる効率的なコンポーネントの設計

SmartBank[著]

2023/04/06 08:00

　本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。今回焦点を当てるのは「プロダクト開発のスピードを上げる効率的なコンポーネントの設計」についてです。

　こんにちは！SmartBankでデザイナーをしている福嶋（putchom）です。

　2022年9月にふたりめのデザイナーとしてSmartBankに入社し、現在はおもにプロダクトのUIをデザインしたり、デザインシステムを設計したりしています。

　私たちは、「B/43」というVisaプリペイドカードと家計簿アプリがひとつになった「家計簿プリカ」という新しいジャンルのサービスを運営しているのですが、SmartBankでは、より本質的な機能開発に集中できる環境を用意すべく、デザインシステムの構築や運用にも力を入れています。

　私たちはFigmaで「B/43」のサービス内で使用しているコンポーネントをライブラリ化することで、コンポーネントを再生産することなくUIを構築しているほか、Notionでコンポーネントごとのガイドラインを集約して管理することで、どれを使えば良いのかを迷うことなく参照できる環境を用意しています。

　第4回では、このデザインシステム内におけるコンポーネントライブラリに焦点をあて、作成・運用していくうえで工夫している点について紹介します。

これまでのB/43のデザインシステム

　そもそもデザインシステムとは、サービスのブランドをもとにしたデザインの一貫性を保つためのリソース集です。

　SmartBankでは顧客に一貫したブランド価値や利用体験を提供したり、チーム開発を効率化したりするためにデザインシステムを構築しています。

　私が入社した2022年9月ごろのSmartBankのデザインシステムは、Figmaを中心にカラーやコンポーネントなどが整理されている状態ではあったものの、それぞれのコンポーネントの役割や使いわけの方法は明示されていない部分も多く、まだ文章化されていない暗黙のルールも存在していることが課題となっていました。

　これからチームでサービス開発をしていくには、これらの課題を解決する必要があったため、現状を把握するためにまずはこれらのリソースを集めて整理していきました。

各種リソースのマッピング

　集めたリソースがどのように関連して機能しているかをつかみやすくするためには、デザインシステムの全体像を図式化し、既存リソースをマッピングしていく方法が効果的です。スマートバンクではFigjamを使ってデザインシステムの全体像を図式化し、既存リソースのマッピングを行いました。

　この全体像は『Design Systems デジタルプロダクトのためのデザインシステム実践ガイド』を参考にして作成しました。

機能パターンと認知パターンに分類する

　どのような指針でデザインしていくべきかを言語化した「デザイン原則」をすべての下地とし、リソース全体を「機能パターン」と「認知パターン」のふたつに分類しています。

機能パターン

おもにプロダクトデザインを行う際に用いるリソースです。

各プラットフォームごとのコンポーネントライブラリやコンポーネントをどのように組み合わせて機能させるかを示したパターンガイドライン、より多くの人にサービスを届けるために用いられるアクセシビリティガイドラインなどから構成しました。

認知パターン

おもにコミュニケーションデザインを行う際に用いるリソースです。

サービス固有のドメイン辞書やボイス&トーンを反映したライティングガイドラインといった言語的コミュニケーションに関するリソースと、Logo、Shape、Iconography、Photography、Illustration、Animationなどの非言語的コミュニケーションに関するリソース・ガイドラインから構成しました。