UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Design System】パターンライブラリが無駄に増えてしまう話を「靴下」で例えたら理解してくれた

人と会話する時に伝えたいことを何かしらの比喩表現を使って説明すると理解してもらいやすくなるという話で、UIパターンライブラリが無駄に増えてしまう問題を「引き出しの中の靴下」という比喩表現で説明したらびっくりするくらい理解してくれた

背景

コンポーネント指向のUI開発をしていて、これまでつくってきたコンポーネントをパターンライブラリにして管理している

ただパターンライブラリの問題として、開発を進めている中で同じ機能を持っているにもかかわらずちょっとデザインが違うものが生み出されていて、命名が煩雑になったり、使う時にどっちを使うのか議論になったりしていて管理しきれていない部分があった

このとき、この問題を共有したり解決策を関係者に提案したが、その場ではふむって感じだったがすぐにまた忘れている様子だった

この理由を考えたが、雰囲気を感じとるに共通用語が曖昧なのが原因の一つなのではと思っていた

例えば、

  • コンポーネント
  • UIパーツ
  • パターンライブラリ
  • UIライブラリ
  • デザインシステム

などなど

非エンジニアの人が上記のワードを会話に出す時に、どこか肩に力が入って不安がって使っている様子だった

タンスと靴下のメタファー

もっと肩の力を抜いて話してもらおうと、こういう図を用いて説明してみた

f:id:uggds:20211107185431p:plain:w600

まず、デザイナーとエンジニアの間にあるパターンライブラリを「タンス」だとして、このタンスの中に再利用可能にしたコンポーネントを整理整頓しながら仕舞っている

例えば、コンポーネントの一つを「靴下」とした時、引き出しの中はこんな感じになっている

f:id:uggds:20211107191344p:plain:w600

最初は市場に合わせて色違い(機能違い)の靴下を1つ作るくらいで、どちらを使うかも企画に応じて適切に使用していたが、企画をたくさんやるにつれて種類が多くなり、もはやどれを使うのが一番良いのかわからなくなっている状態になっている

f:id:uggds:20211107191633p:plain:w600

この増えすぎてしまった靴下をカテゴライズすると次のようになっており

f:id:uggds:20211107191848p:plain

これを解決するには、何が廃盤になっているのかをタグづけしていくことが今後必要

f:id:uggds:20211107192748p:plain

というような説明をしたところびっくりするくらい理解してくれた

会話では「これはタンスにあるか?新しい靴下になるか?」という風に「靴下」を使って説明する関係者が増え、ちゃんと課題を意識してくれるようになった

比喩表現大事だなと感じる出来事だった