次世代デザインツール 〜リアルデータを用いたデザイン〜

英語記事を翻訳し紹介しています。元の記事は読みたい場合は下記のリンクを確認ください。 https://medium.com/@joshpuckett/modern-design-tools-using-real-data-62d499e97482

適切な情報源が欠如しているプレゼンテーションや、先入観を与えるような情報、厳選されたソースのみを使用したプレゼンテーションは、即時に懐疑的になるべきである。 ー Edward Tufte（エドワード・タフテ）

今日のデザインツールの最大の欠点の一つは、デザイナーがリアルデータを使用して簡単に作業が出来ないことです。そのためデザイナーは、美しく構成された写真、完璧なサイズの文章、そこに収まるだけの適切な量のコンテンツなど、モックアップに理想的な情報ばかりを詰め込みます。 まず始めに、私たちはピクセルパーフェクト（見た目上完璧）な成果物を制作するために非常に多くの時間を費やします。その後、作成された完璧なデザインの状態を保つことを考慮した、最低限の決定を下します。しかし最終的に実装された時、エッジケース（限界ギリギリの特別なケース）や様々な問題を解決できていないことにあなたは驚くでしょう。リアルデータを使用しないと、自分自身を誤魔化すことに繋がるのです。

対照的にデザイナーがリアルデータを用いてデザインをすると、非常に現実的なデザインが仕上がります。リアルデータはデザイナーの仕事に適切な情報を与え、情報を制約することを可能にします。
リアルデータを活用することにより、
・実装の細部まで慎重に検討されている
・エッジケースは解決されている
・ユーザーが様々な状況で体験することに共感を感じている
などデザインにおける意思決定は明確になります。 そして、デザインの段階でリアルデータを使用しているため、実装されても驚くことはありません。 現代のデザインツールによって、デザイナーがリアルデータを簡単かつ迅速に使用できる方法を見てみましょう。リアルデータを使用するには、コンポーネントとデータソースという二つの重要な要素が必要です。

コンポーネント

既存のツールの中には、コンポーネントの概念を持つものもありますが、実装に展開させる必要があります。コンポーネントは、定義された要素（画像・テキスト）、プロパティ（サイズ・色）、また動作（レイアウト順）を持つ、動的で再利用可能なオブジェクト、またはオブジェクトのグループです。コンポーネントは、適応可能なレイアウトオブジェクトという考えに基づくことができます。 最も一般的な二つのコンポーネントは、リストとグリッドです。コンポーネントを使用して設計することは、膨大な時間を削減します。オブジェクトを複製してリストを制作するのではなく、リストアイテムを一度だけ制作し、リアルデータを使用して完全なリストを作ります。

データソース

拡張性のあるコンポーネントができたら、あとはリアルデータを取り込むだけです。最新のデザインツールを使用すると、APIまたはJSONファイルを簡単に使用し、その内容を視覚的に確認することができます。これによって、技術力に関わらず誰もがリアルデータを使用してデザインを行うことが可能になります。URLを貼り付けたり、ファイルをドラッグすることと同じくらい単純な作業です。

リアルデータでデザインをする

コンポーネントとデータソースの準備ができたら、データを直接コンポーネントと結び、視覚的に確認しながらデザインを始めましょう。 例として、Spotifyのプレイリストの検索画面をデザインしてみましょう。 実際の代表的なデータをデザインに反映するのがどれだけ速いか気づくでしょう。飛躍的に効率が上がるだけでなく、モックアップを綺麗に見せるために整頓された写真や名前を使用することはありません。リアルデータを使用することは、デザインが実装された時、どのように表示され機能するのかなど正確な情報を得ることができます。また、設計が不十分なところをすぐに発見することも可能にします。

ここでは、プレイリストに長いタイトルを使用してる人がいることに気づきます。そして、レイアウトを再考する必要があることを気づくでしょう。動的なコンポーネントを使用していることで、グリット表示がどのように見えるか確認でき素早くデザインを変更することができます。 このようなツールでも、使用しているクエリを解析する必要はありますが、別のデータセットを簡単に使用して試すことも可能です。少しデータを見やすくして、使用しているキーと値だけを表示してみましょう。

改めてデータが反映されるスピードの速さを実感するでしょう。さらに、さまざまなデータを使用することで、そのデザインがどこまで維持できるのか試すこともできます。これは簡単に拡張できます。デザインツールの中で、即座に異なる言語や地域をテストできることを想像してみてください。

データは私たちに知らせるべき

リアルデータを使用して設計することで様々な洞察が得られ、最終的により良い製品となる他の例を見てみましょう。 例として、フォトギャラリーをデザインするとしましょう。ユーザーの写真を自動的に整頓する機能を作ります。また日ごとに写真を整頓する必要があるとしましょう。これは合理的な仮説であり、デザインツールを使用して下図のような静的なモックアップから始めるでしょう。綺麗ですよね？

しかし問題はこれが現実ではないということです。これは単なる見栄えの良い整頓された写真を使用し、完璧な状態を示したハリボテです。 一方、リアルデータを使用して設計すると次のようになります。

実際は、ほとんどの日が数枚の写真、あるいは一枚であることにすぐに気づくでしょう。モックアップの段階では、ユーザーの写真習慣に願望を抱いた（最終的には間違った）考えに基づいてデザインを決定していました。リアルデータを使用してデザインを行うことで、これらの習慣が明らかになり、現実に基づいてデザインを決定することができます。

• 一度に表示される写真の数が少なくてもいいですか？

• 白く残ったスペースをどのように扱いますか？

• 写真が一枚しかない日はどうしますか？

• 日数を集計しますか？週や月など異なった期間で写真を表示しますか？

リアルデータを使用することは、このような質問を繰り返し最初の仮定を再検討でき、最終的にはより良いデザインを決定すること繋がります。

さらに良い方法とは

今日のほとんどのデザインツールは、視覚的な問題に焦点を当てています。デザイナーはモックアップを制作するために多くの時間を費やし、完璧な仮の情報で内容を埋め、細かい視覚的部分を考えます。現在の多くのツールが、視覚的な問題を解決するために構築され、解決策を提供していることは驚くべきことではありません。 リアルデータを使用する最新のデザインツールは、私たちのデザインの方法を段階的に変えていくでしょう。リアルデータを簡単かつ迅速に扱うことは、視覚的な問題だけでなく製品やインタラクションに関わる問題の解決に集中することができます。ユーザーがそうであると想定する方法ではなく、現実的に実際のユーザーをそのまま見ることができます。 リアルデータ使用した制作は、作業を効率化させ、問題を素早く発見しデータに基づいた制約を追加でき、ユーザーにとってより良い体験を生み出すことができます。

まとめ

1. リアルデータを使用することは、特にユーザーテストにおいて非常に有益です。既存の製品をもとに制作を行なっている場合、実際に収集されたユーザーのデータを使用して新しいデザインをテストすることが可能なため、桁違いの洞察、フィードバックを得ます。ユーザーIDを渡す、またはアカウント認証をしてデータのサンプリングを取得するといった簡単な方法で、ユーザーはデザインの表面レベルを超えて反応するため、機能の実用的な可能性と使いやすさについて非常に質の高いフィードバックを得ることができます。

2. 実際にはリアルデータを使用できない場合もあるでしょう。新規の製品に取り組んでいるのであれば、APIがなく、データが存在していない可能性があります。

3. リアルデータの使用をサポートするツールを待つ間にも、デザイナーは可能な限りリアルデータを使用した制作に努力すべきだと私は考えます。おそらくそれは、あなたの会社とあなたが解決しようとしている問題に対して、特別な何かを作ることを意味するでしょう。Instagramは、デザイナーが既存のツールを使用してリアルデータを使用できるようにするプラグインを構築しました。

4. カスタムツールを構築しなくても、デザイナーは自身の制作に素直になる努力をするべきです。美しく構成された写真、完璧なサイズの名前、適切な量の文章など、都合のいいものだけを選ぶのをやめましょう。リアルデータを扱うことは、優れたツールを持つように、私たちの精神的な思考に変化をもたらします。