3章 機能パターン 内容紹介（2）

3章「機能パターン」とは、ボタン、ヘッダー、フォーム要素、メニューなどインタフェースの具体的な構成要素であることを紹介しました。では、機能パターンを定義する際に有用なテクニックとは何か、いくつかのポイントを紹介していきましょう。最初は、パターンマップやインターフェースインベントリーの作成についてです。

このマガジンは、12月21日に全国書店、25日にAamazonで発売された「Design Systems − デジタルプロダクトのためのデザインシステム実践ガイド」を編集している私が、個人アカウントでこの本を紹介するものです。全貌をいち早くお読みになられたい方は、ぜひ購入ヨロシクでございます。

※こちらはコリスさんによる紹介記事です。

最近のWebサイトやスマホアプリのワークフロー、モジュール型でパターン主導のデザインシステムを学べる解説書

3章「機能パターン」
この章では、機能パターンの役割と、なぜそうしたパターンを、デザインプロセスの早い段階から定義する必要があるのかについて解説します。

1.パターンは進化、振る舞いは不動
2.機能パターンを定義する（その1） ※この記事で一部を紹介しています　
3.機能パターンを定義する（その2）
4.機能パターンを定義する（その3）

− − − − −

機能パターンを定義する

デザインプロセスの早い段階でパターンを定義するのに、多大な時間を割く必要はありません。余計な手間をかけなくても、プロセスにうまく組み込めます。ここでは、特に有用なテクニックをいくつか紹介します。

▷パターンマップを作成する
顧客のニーズ、目的、動機をマッピングするために、カスタマーエクスペリエンスマッピングや「Job To Be Done（JTBD）」など、カスタマージャーニーに関する演習を行ったことがあるかもしれません。

通常は、その結果を基に初期のデザイン検証およびプロトタイピングを進めます。この時点で、ユーザーにうながしたい行動はかなり明快に理解されています。たとえば、「学習する」、「受講する」、「参加する」といった行動です。しかし、話がインターフェースへと移ると、方向を見失うことがあります。印象的なページヘッダーを作ることに夢中になり、このヘッダーの目的や、ユーザーエクスペリエンスの様々な段階におけるユーザーへの影響が、頭から消えてしまうのです。これは、ユーザー行動と、そうした行動をうながすパターンとの間の結びつきが失われることを意味します。

パターンがユーザー行動全体にどう適合するかを確認するには、コアなモジュールをユーザージャーニーの該当する段階に分類、整理します。各段階での目的と、その段階がうながす行動について考えてみましょう。この時点では、すべてのアイコンやボタンを把握する必要はありません。全体像に焦点を当て、各部分がどのように連携しているのか理解します。FutureLearnでは、「発見する」、「学習する」、「達成する」という3 つのユーザーエクスペリエンスに的を絞りました。

このマップを念頭に置いておくと、個々のWebページではなく、共通の目的で結びついたパターン群で考えられるようになります。たとえば、コースリストページをデザインするのではなく、「発見する」段階全体をデザインするという観点に立てます。ユーザージャーニーのこの段階でうながしたい行動は何ですか？ そうした行動をサポートできるパターンは？ Webサイト上の他の場所で、そのパターンはどのように機能しますか？ 新しいパターンはシステム全体に対してどのように貢献しますか？ 体系的にデザインするためには、これらすべての問いに答える必要があります。

▷インターフェースインベントリーを作成する
ブラッド・フロスト（Brad Frost）によって提唱されたインターフェースインベントリープロセスは、インターフェースをモジュール化するための一般的な方法となりました。

考え方はシンプルです。インターフェースの画面を紙にプリントするか、KeynoteやPowerPointにインターフェースを収集します。紙の場合は切り貼りし、Keynoteの場合はカット＆ペーストして、様々なコンポーネントを分類します。

最終的には、ナビゲーション、フォーム、タブ、ボタン、リストなどのカテゴリにインターフェースをグループ分けします。このプロセスを行うと、重複するパターンを見つけたり、問題のある領域を特定できます。何十個ものヘッダーやドロップダウンメニューが見つかって、それらを秩序立てる方法について考え始めるのも、このタイミングです。

インベントリーには、すべてを含める必要はありません（ただし、最初は包括的なインベントリーが必要です）。宣伝モジュール、ヘッダー、すべてのプロダクト表示モジュールなど、一度に1つのパターングループに注力することも可能です。タイポグラフィー、カラー、アニメーションに的を絞ったインベントリーも作成できます。

より効果を出すには、インターフェースインベントリーを定期的に見直すべきです。パターンライブラリを保有していても、新しいパターンが生まれたらシステムに組み込まねばなりません。数ヶ月おきにインベントリーを作成するようにすれば、毎回の作業時間は長くかからないでしょう。回数を重ねるほど、システムをより深く理解して、向上させることができます。

− − − − −

noteの機能では表現しにくい画像のキャプションや、発言の引用や脚注などは省略しています。あくまで、書籍の概要としてイメージしてもらえれば幸いです。全貌はぜひ書籍でお確かめください。

次回は、機能パターンを定義する際に有用なテクニックのつづき。パターンを行為でとらえ構造を描き、パターンの機能を明らかにすることを紹介していきます。

では、次回をお楽しみに。

Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド