UIデザインへのアプローチ Part 1: インターフェイスインベントリとパターンライブラリの構築（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

UX、IA、UI。これら略語はすべて紛らわしいものです。多くの場合、デザイナーは、総合的なユーザー体験 (UX) をデザインしながら、情報を論理的に整理して情報アーキテクチャ (IA) を考え、ユーザーインターフェイス (UI) の詳細なデザインを検討しています。

これまで、この『UXデザイン入門シリーズ』では、ユーザーのニーズとジャーニーを理解すること、人の振る舞いを念頭にデザインすること、そして全体的な見栄えを確立することについて、それぞれの重要性を説明しました。今回は、一貫性と拡張性を持つインターフェイスをデザインすることがテーマです。デザインプロセスにおけるこの段階は、ここまでに学んだ情報をUIデザインに適用することを目的に、以下の手順で進めます。

この記事は、さまざまなプロジェクトに幅広く適用できるユーザーインターフェイスを構築するための、体系的なアプローチの解説が目的です。そうした基盤ができれば、他の人から学び、デザインを改善し、ユーザーにより良い結果を提供できます。

UIは非常に幅広いトピックです。この記事は簡易な入門として読み進めてください。より広範な内容を理解できるように、Part 2の最後には推奨する読み物の一覧をまとめています。

インターフェイスインベントリに着手する

新製品をゼロから構築する場合でも、既存のサイトを検討し直す場合でも、インターフェイスインベントリの構築から始めるのは効果的です。コンテンツインベントリがコンテンツ の一貫性を補強するように、インターフェイスインベントリは、ユーザーインターフェイスを、全体として十分に考慮された枠組みの上に一貫性を持って構築するための基礎になります。

はじめにこの作業に少し時間を費やしておけば、長い目で時間を節約することにつながるでしょう。一貫性と拡張性を持つデザインシステムをチームメンバーと確立できるためです。インターフェイスインベントリは、スタイルガイドと同様に、開発の進捗とともに拡張できる文書であるべきです。

さて、インターフェイスインベントリとは一体何でしょうか？この呼び名は、ブラッド・フロストによって考案され広められました。彼は、コンテンツインベントリの基本的なアイデアを借りて、それをユーザーインターフェイスデザインの世界に適用しました。フロストは次のように述べています。

「インターフェイスインベントリはコンテンツインベントリと良く似ていて、コンテンツをかき集めて分類する代わりにWebサイト (または製品) を構成するコンポーネントを集めて分類します。インターフェイスインベントリは、インターフェイスを作り上げる小さな部品の包括的なコレクションです」

既存のUIをデザインし直すのであれば、インターフェイスインベントリは、すべてのコンポーネント、大きいものも小さいものも含めて体系的に文書化することから始まります。新しいデザインに着手しているのであれば、競合他社の画面から分類し、それを分析するとよいでしょう。そうすれば、これから考察することになるさまざまなインターフェイスコンポーネントの感触を得られます。

インターフェイスインベントリは、UIに組み込む必要のあるすべての要素を定義する。ブラッド・フロストが一般向けのテンプレートを提供している

この作業の第1段階では、デザインしたものすべてのスクリーンショットを体系的に集めていきます。時間はかかりますが、重要な作業です。というのも、特にデザインチームの規模が大きい場合は、様々な要素のデザインの一貫性のなさが浮き彫りになる可能性があるからです。インターフェイスインベントリを作り、そうした要素を特定できれば、修正が可能になります。

ユーザーインターフェイスを形成するあらゆるコンポーネントを考慮しましょう。含まれるのは次のようなものです。

以前の私のように知識や経験が少なければ、こうした体系的なアプローチをとらずに、必要になったらその都度コンポーネントをデザインしていることでしょう。インターフェイスインベントリの目的は、このプロセスに秩序を課し、すべてに一貫性を持たせることにあります。

この作業の第２段階は、キャプチャしたスクリーンショットを分類し、何らかの秩序を構築することです。スクリーンショットの整理はどんな手法でも構いませんが、KeynoteやPowerPointを使って整理すると、作業を完了した後にチームに紹介することができます。ブラッド・フロストは、私たちが使用できるテンプレートをzipファイルで提供しています。

以上の作業を終えたら、チームまたはクライアントと一緒に、すべての内容を確認すると良いでしょう。議論することで、デザインする必要のある様々なコンポーネントに対する理解をさらに深めることができます。また、共有パターンを特定し、コンポーネントをある程度合理化できる可能性もあるため、効率面にも貢献するかもしれません。

パターンライブラリの構築

インターフェイスインベントリを構築しすべてのコンポーネントを整理したら、共通するデザインパターンを特定し、それをベースにデザインを組み立てはじめます。インターフェイスインベントリにより、デザインの一貫性のなさが明確に表れたかもしれません。UIをモジュールごとに再構築して、一貫性を確保することが次の焦点になります。LEGOになぞらえて、このアプローチを考えてみましょう。

LEGOでは、小さなコンポーネントを使って非常に複雑なものを構築できます。インターフェイスもこれと同様です。インターフェイスは、一見非常に複雑に見えるかもしれませんが、基本的には小さなコンポーネントの組み合わせです。これらのコンポーネントを扱うのがパターンライブラリです。

パターンライブラリは、デザインにまつわる典型的な課題の解決策として繰り返し使用されるデザインパターンを特定し、分類するものです。よく知られているデザインパターンは次のようなものです。

パターンライブラリは、インターフェイスをより詳細な部品に分解し、それを再利用可能なインターフェイス構築のための要素として使用できるようにします。このアプローチには次のような利点があります。

ユーザーインターフェイスをデザインする際、他の人のデザインパターンを参照すると、何がうまく機能して何がうまく機能しないかを知るのに役立ちます。UI Patternsは数多くのデザインパターンが集められているこの作業にぴったりのリソースです。

インターフェイスインベントリを手がかりに共通したデザインパターンを特定したら、必要なコンポーネントを決定しデザインシステムを確立するまではあと一歩です。このアプローチは、UIに一貫性と拡張性を持たせるのに役立つでしょう。

アトミックデザインの採用

アトミックデザインの原則について詳しく説明する前に、それを提唱した人物について少しだけお話しします。アンディ・クラークは、かなりの間、ページのデザインではなく、デザインを構成する体系について執筆し、論じてきました。

クラークの洞察は、ページを個別にデザインすることをやめて、ページを構築する体系の構築に専念すべきだというものです。彼の著作物の多くには、デザインパターンに注目することの重要性が論じられています。

幸いなことに、多くのデザイナーがバトンを受け取って、この考え方をさらに進めています。ブラッド・フロストの『Atomic Design』とアラ・コールマトヴァの『Design Systems』には、有用なアドバイスが豊富に提供されており、必読書と言っても良いでしょう。この二冊は強くお勧めします。

インターフェイスのデザインにおいて、なんらかの系統的アプローチを採用することの重要性を強調して、フロストは次のように述べています。

「(私は) インターフェイスが何から構成され、どのようにより系統的にデザインシステムを構築できるのかに関心を抱いています。
啓示や類似を探る過程において、幾度となく化学的な発想に立ち戻りました。(…) すべての物質は原子で構成されています。原子は互いに結合して分子を組成し、その分子はさらに複雑な有機体を形成し、最終的に宇宙のすべての物質を作り上げているのです。
同様に、インターフェイスもより細かいコンポーネントで成り立っています。つまり、インターフェイス全体を基本となる構成単位に細分化し、そこから築き上げていくことができるはずです。これが、アトミックデザインの基礎をなす考えです」

フロストの方法論では、アトミックデザインを構成する5つの異なるレベルが提唱されています。原子、分子、有機体、テンプレート、そしてページです。原子から構築し始めることで、後々、あらゆるものを構築するための基礎となるデザインの構成単位が作られます。

ブラッド・フロストのアトミックデザイン方法論は、デザインシステムを作り上げるためのしっかりとした基礎になる。最も小さい構成単位に着目し、それらを組み合わせてより複雑なデザインを作ることで、一貫性のあるスケーラブルな体系を構築できるという。上図は、Instagram向けのネイティブモバイルアプリに適用された方法論。出典: Brad Frost

化学は決して私の得意分野ではありませんが、基本的に次のように解釈しています。

  1. 原子は、互いに結合して分子を構成する。
  2. 分子は、結合して有機体を組成する。
  3. 有機体は、テンプレートやページ (明らかに化学ではありませんね) の作成に使用される。

まとめるなら、インターフェイスの小さな構成単位を作成し、それらを組み合わせて、より複雑なインターフェイス要素を段階的に作成するということです。アトミックデザインの利点は、細かいレベルから要素を組み上げていくことで、一貫性を確保できる点にあります。

UIキットの使用

主にWebに携わるデザイナーとして幸いなことに、我々は作業過程の共有を重視するコミュニティに属しています。ここ数年、体系的にデザインされたユーザーインターフェイスコンポーネントをまとめたUIキットが大きな人気を得ており、デザイナーの作業をわずかながら手助けしてきました。

一般的に使われるUIコンポーネントに割く時間と手間をUIキットが省けるのであれば、それらを描き直す時間は無駄です。しっかりとデザインされたUIキットは、Webサイトかアプリかに関わらず、デジタル製品の土台として使えます。ルックアンドフィールや視覚的なアイデンティティに一貫性を持たせるのにも役立ちます。

UI kitを使用すると、デザインプロジェクトを素早く開始できる。典型的なコンポーネントが提供されているため、一般的なコンポーネントをわざわざ描き直す必要がなく、時間を大幅に節約できる

アドビは著名なデザイナーと手を組み、利用価値が高いAdobe XD UI kitsを作成しました。また、有益なチュートリアルも提供され、UIキットを使ったデザインにすぐ取り掛かれるようになっています。

加えて、豊富なアイコンセットが無料で提供されています。Webとモバイルプロジェクトの両方に使用できるテンプレートを含む、様々な無料のUIキットも作成されています。

UIキットは非常に便利なもので、一般的な要素を描き直す手間を省き、多大な時間を節約してくれます。ただし、注意点があります。すべての汎用キットと同様に、テンプレート主導型のアプローチに陥り、デザインがみな似通ってしまう危険性です。キットはあくまで開始点として使用し、その上にエレメントコラージュの作成により確定した独自のルックアンドフィールを被せることが大切です。

続けて『UIデザインへのアプローチ Part 2: インタラクションとアニメーション』をお読みください。

この記事はThe Fundamentals of Wireframing and Prototyping（著者: Christopher Murphy）の抄訳です