教育系スタートアップatama plusでUX/UIデザイナーをしている秋元です。デザインシステムを取り組みたいけれどどこから手を付けたらいいかわからない、そんな方に向け、私の実体験をもとにお伝えしていきます。
本連載では「デザイン原則」や「認知パターン」についてお話してきましたが、第4回ではいよいよ具体的なUIの整理である「機能パターン」について解説します。初回の記事で「課題とデザインシステムに期待していた効果」として、複数のプロダクトメンバーでデザインの一貫性と秩序、また効率化をもたらすことを期待していました。それらの効果を発揮する本丸と言えるのがこの機能パターンです。
機能パターンで、ユーザーの行動目的別にUIを共通化
第1回で『機能パターン』とはなにか、以下のようにお伝えしました。
機能パターンは、インターフェイスの構成要素についてのパターンです。ユーザーの行動目的に対して必要な要素や構造を定義し共通化します。たとえば、ボタン、フォーム、テーブルなどの定義やパターン化がそれにあたります。
機能パターンがないとデザイナーによってデザインするUIが異なり、ユーザーが同じような目的を達成したいのに操作方法が違う、といった「迷うUI」になってしまいます。そうならないよう、機能パターンではユーザーが迷わず目的を達成しやすいようにするべく、UIパターンをユーザーが操作する目的別（情報を閲覧したい、削除したい、編集したいなど）によって共通化します。
また、ユーザーだけではなくプロダクトを制作する側としても、整理した共通のUIを使い回せるようにすることで、開発の効率化を図ることができます。
UIを機能ごとにまとめ、使いかたを定義する
機能パターンの整理は、すでに使われているたくさんのUIを共通化するところから始めます。そして共通化したUIをまとめ、ドキュメント化し、デザイナーとエンジニアが使いやすい状態にします。
ここからは、私たちがどのように整理をしていったのか、ご紹介していきます。
STEP1：UIを印刷して、切り分ける
まず、各UIをカテゴリ別に分類してまとめた「インターフェースインベントリ」を作成します。ここでは、プロダクト内にあるナビゲーション、フォーム、リンク、ボタンなどのカテゴリにそれぞれ集約してUIパーツを並べていきます。
たくさんのUIを分類して整理するために、アナログではありますが、UIを印刷して切り貼りするところから始めました。まず各ページを印刷し、それぞれのUIに切り分けます。
その次に、切り分けたUIを目的別にまとめていきます。
紙に印刷すると、分量が多くても俯瞰しながら手を動かすことができるので、素早くまとめることが可能になります。
