マルチプラットフォームにおけるUI最適化戦略 by olive

iOSDC Japan 2024
レギュラートーク(20分)

マルチプラットフォームにおけるUI最適化戦略

olive_okamo olive olive_okamo

プロダクトにおいて、共通デザインが定義されていないために、頻繁に利用されるボタンなどのUIを画面ごとに独自に作成していませんか?

メタバースプラットフォームclusterではiOS、Android、Web、macOS、Windows、Questといった複数のプラットフォームで展開しています。
サービスの成長と共に新しいデザインも増えてくる中、画面ごとに微妙に異なったボタンなどのUIデザインが散見されるようになりました。その結果、エンジニアが独断で共通化したコンポーネントを実装したり、各画面で同じような実装することも増えていました。

この問題を解決するため、各プラットフォーム共通のUIを「UI Component」という概念で統一してバラつきのあったコンポーネントをデザイナーとエンジニアで協力しながら整備していきました。
デザインシステム上で統一されたコンポーネントが定義されることで、デザイナーは管理や指定がしやすくなり、エンジニアも実装が容易になり、デザイントークンに対する認識齟齬も防げるようになりました。

このセッションでは、私たちが行った以下の取り組みについて紹介します。

  • 共通コンポーネントをどう整備していったか
  • 整備したコンポーネントを浸透させる
  • あえて共通化しなかったUI