この記事は Goodpatch UI Design Advent Calendar 2018の6日目の記事です。

私たちがあるサービス・プロダクトのUIデザインやUXデザインを行う上で、意識せずに行い明文化されずブラックボックスになっているプロセスや手法は無数に存在しています。

そんな無数に存在しているブラックボックスを認知するために、私たちはどのようなアプローチをとることができるのでしょうか?

本記事では、普段クライアントワークを通じて様々なサービスやプロダクトの立ち上げやリニューアルに関わっている私が、サービスデザイン・プロダクトデザインの構造を明らかにするために用いているリバースモデリングというアプローチを紹介します。

リバースモデリングとは?

一般的に「リバースモデリング」という言葉は、使用者によって曖昧に使用されています。
それよりも「リバースエンジニアリング」の方が認知されているのかもしれません。

私が本記事でお伝えするリバースモデリングとは、以下のようなアプローチを指しています。

▼ リバースモデリング
ある視点/観点で既存のアプリケーションやサービスなどの完成形から、構造のレイヤーまでを遡って観察・分析することによって、対象物の構造を明らかにし、対象物を0から作り出す上でのアプローチや最適な方法の理解を深める手法

ですので、リバースエンジニアリングのように様々な観点で実装の仕組みを細かに明らかにするアプローチではなく、あくまで完成形から「構造」のレイヤーまでを明らかにする手法のことを指しています。

構造層のデザインについて詳しく知りたい方は、弊社デザイナーとして活躍するkuniorockの 5段階モデルのStructure(構造)デザインの実践 やJIN Kzの なぜデザイナーが構造層に関わるべきか という記事を読んでいただけますと幸いです。

ただ、上記の定義だけですと少し抽象的なので、具体的な例と照らし合わせて、リバースモデリングをする上で重要な視点/観点をギャレットの5段階モデルを例にとってご紹介したいと思います。

リバースモデリングの観点

リバースモデリングをする上で重要になるのは、構造のレイヤーで行うUIモデリングという工程です。
UIモデリングとは、主に「構造」を組み立てていく時のアプローチのことを指します。ただし、厳密には「骨格」の部分もカバーしていくものとされています。

より詳しくUIモデリングがカバーする領域について知りたい方は、以下のusagimaru ⌘ Satori Maruによるソフトウェア開発に関わる「●●デザイン」の分類という記事をご覧ください。

このUIモデリングという工程では、一般的に情報設計と言われているものをイメージしてしまうかと思いますが、実際には情報デザインや広義でのインタラクションデザインなどが含まれています。
具体的には、扱うオブジェクトの定義やその関連について明らかにすることが目的となります。

ですので、このリバースモデリングを用いて「構造」のレイヤーへのアプローチの仕方や構造そのものを推察することによって、実際にどのようなことがUIモデリングという工程で行われているのかを紐解くことができます。

  • 対象物:既存のアプリケーション
  • 目的:アプリケーションの持つ情報の定義、その関連へのアプローチやモデルの定義についての分析
  • 視点/観点:要件から構造/骨格に当たる情報デザインと広義でのインタラクションデザイン

UIトレースはリバースモデリングではないのか?

さらに補足として、UIトレースという手法との比較をしてみます。

UIトレースとは、既存のアプリケーションのUIをトレースすることによって、そのアプリケーションの主に「骨格」と「表層」を観察し分析しながら、UIデザインの考え方やデザインアプローチを学んでいく手法です。

ですので、リバースモデリングが「表層〜構造」までを明らかにするアプローチだったのに対し、このUIトレースは「表層〜骨格」までを明らかにするためのアプローチとなります。
「骨格」や「表層」におけるUIデザインを学習する上で、UIトレースという自学手法に取り組んでいる方は多いのではないでしょうか。

また、UIトレースは以下のような目的や視点/観点で実施している方が多いでしょう。

  • 対象物:既存のアプリケーション
  • 目的:UIデザインの考え方やデザインアプローチの分析
  • 視点/観点:骨格、表層に当たるレイアウトやグラフィックを含むUIデザイン

まとめ

あるサービスやプロダクトのデザインをする上で、世の中に出回っている手法ばかりに気を取られていると、そのサービスやプロダクトの目的を達成するために最適な手段を選び取ることは難しいと日々感じています。

そして、特にそれらの手法が明らかになりづらい領域である「構造」に対しての学びを深めるために、リバースモデリングを行うことは非常に効果的であると考えています。
リバースモデリングによって既存のアプリケーションの構造を分析することで、これまでなんとなくやっていたフェーズやプロセスに対する新たな視点を獲得し、なぜそのデザイン・設計になっているのかを意図と一緒に理解できるようになるでしょう。

皆さんもシンプルな構造のアプリケーションを例にとって、リバースモデリングをしてみるのはいかがでしょうか?