Interface Inventory | 1人design system advent calender 3日目

3日目はInterface Inventoryについて見ていく。

An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.

Interface Inventory | Brad Frost

Interface Inventoryとは、プロダクトのUIを作り上げている部品の包括的な収集のこと。UIパーツをカテゴリー分類することでプロダクト全体のUIパーツを俯瞰することが目的で、これによって全体のUIパーツの中で最新のデザインが反映されてないパーツや、共通化できてないコンポーネントなどを見つけ出すきっかけにできる。

Interface Inventoryのメリット

Interface Inventory | Brad Frostによると、Interface Inventoryがもたらすメリットは以下。

• Lays the groundwork to a sound design system
  • 健全なデザインシステムの下地を作る
    • デザインシステムを実際に作っていく場合には、UIコンポーネントを適切に分類して構築していく必要があるだろうけど、その際にInterface InventoryをやらずにプロダクトのUIパーツを俯瞰できる状態になってなければ、適切にUIコンポーネントを作っていけるのか疑わしい。
• Convince your boss/client/organization
  • デザインシステムの必要性を上司やクライアント、組織に対して訴える材料になる
    • Interface Inventoryによって、プロダクトのUIにどのような問題点を抱えているかが見えてくるので、その解決策としてデザインシステムを導入することを訴えることができる
• Promote consistency
  • 一貫性を促す
    • Interface Inventoryから似て非なるUIパーツが洗い出されて、無用な冗長さから一貫性のあるデザインシステムの必要性が明確になる
• Ensures all interface components are accounted for
  • 使用されてない状態で放置されるコンポーネントがなくなる
• Responsive Retrofitting
  • レスポンシブ対応への難易度を分析する助けになる

デザインシステムを作ることが決まってない場合には、組織に対してその必要性を訴える1つの材料になるし、デザインシステムを作ろことが決まっている場合には、UI上の問題点を洗い出して一貫性のあるデザインシステムの下地を作ることにつながるのがInterface Inventoryのメリットと考えられる。

Interface Inventoryでのカテゴライズ

どのようにカテゴリわけするかはそれぞれのプロダクトの事情によって異なってくるだろうけど、Conducting an Interface Inventory | Brad Frostでは、Interface Inventoryのカテゴリの例として以下のものをあげている。

• Global
  • ヘッダー、フッターのようなプロダクト全体で共通して利用されるUI
• Navigation
  • ナビゲーションの類
• Image types
  • 画像の類
• Icons
  • アイコン
• Forms
  • フォーム要素
• Buttons
  • ボタン
• Headings
  • 見出し
• “Blocks”
  • ?
• Lists
  • リスト
• Interactive Components
  • アコーディオン、タブ、カルーセルなどの動きを伴うコンポーネント
• Media
  • ビデオ、オーディオ要素
• 3rd Party
  • サードパーティの要素
• Advertising
  • 広告
• Messaging
  • アラートやエラー、ツールチップなどのメッセージ群
• Colors
  • カラー
• Animation
  • アニメーション

こういったカテゴリ分類によってすべてのUIパーツを選別すると、UI上の一貫性のない部分が発見できたり、使われているUIパーツをデザイナーもエンジニアも把握しやすい状況がつくれたりすると思う。

---

3日目はInterface Inventoryについて触れた。 4日目はデザインシステムを作る上でのtokenについて見ていきたい。