UI Lab 2018.3 正しい情報設計によるデザインプロセス | Peatix
講師はfreeeの伊原さん@magi1125でした。

調査により導き出されたユーザーモデルや、利用シーンといったシナリオ、そして UI デザインパターンがあれば完成度の高い UI はデザインできるはずです。

しかし従来のワークショップなどではリサーチや利用シーンを策定することはあっても、そこから UI という形に落とし込むまでのプロセスはそれぞれの経験則で行われ、言語化されることも少なかったと思います。

そこにはデザインコンセプトの策定、要件の取捨選択、それらの構造化や要素の配置を決める「情報設計」が介在し、UI を形にするための重要なプロセスがあります。

情報設計に携わるインフォメーションアーキテクト自らそのプロセスを明らかにし、UI を設計するまでの手法を皆さんと考えていければと思います。

まさに書いてあるような、策定したペルソナやジャーニーマップを画面のデザインへと落とし込む「情報設計」に興味があり、参加しました。

やったこと

デザインプロセスにはいくつかの段階があります。
※画像は、「ウェブ戦略としてのユーザーエクスペリエンス - 5つの段階で考えるユーザー中心デザイン」の著者であるJesseJames Garrett氏のサイトより引用。

ペルソナやジャーニーマップといったものは１層目（一番下）ですね。
またUIデザインの間にあるギャップとして挙げられたのは次の３つ。

1. ユーザーの要求事項の明確化（シナリオ）

2. ユーザーの要求事項を実現する情報構造の設計（IA）

3. インタラクションデザインのパターン

これらをどう埋めるのか、座学と「とあるアプリ」のリニューアル検討ワークを通し学びました。

ペルソナと利用シナリオは事前に用意されており、実際のワークは次の４ステップ。

1. シナリオから改善点を見出そう

2. 新しい分類体系と検索軸を作ろう

3. 新しいフロー図を作ろう

4. ペーパープロトタイピング

4時間半...座学や発表会も交えつつということでかなり濃密な時間でした。
作業に夢中で全然写真撮ってなかった…。

シナリオから改善点を見出そう

事前（前日）に配布されていた資料はこちら。

• ペルソナ

• 理想のシナリオ

• 現アプリの構造図

「理想のシナリオ」の内容はこちら。

• 価値（バリュー）のシナリオ...ペルソナが何をしたい(価値)と思っているのか

• 行動（アクティビティ）のシナリオ...ペルソナがどんな行動を取れると目標が達成できるのか

• 操作（インタラクション）のシナリオ...ペルソナが目標にたどりつくまでの具体的な操作

こうした情報を元に、実際にアプリをさわり、分析し、理想と現状とのギャップを洗い出します。そうして挙げた課題を、チーム内でグルーピングしました。

新しい分類体系と検索軸を作ろう

「とにかくモノが探しづらい」という共通の課題が挙がったので、それを解決すべく、まず分類体系＝商品のカテゴリ、検索軸＝フィルタ/ソートを考えていきました。

情報設計でコアになる観点が、「ユーザーニーズとコンテンツの属性をもとに、構造パターンを選択し分類方針を定める」だそうです。属性（メタデータ）というのは、例えば...名前・重さ・サイズ・色・大きさ・型番などをさします。

そこで大事なのが次のアプローチとのこと。

• トップダウン・アプローチ ...ユーザーやシナリオを元に考える

• ボトムアップ・アプローチ ...コンテンツを洗い出し、それらの属性を分析して考える

私たちのチーム（４人）では、半分に別れてそれぞれのアプローチにトライし、互いの分類を共有・整理しました。

新しいフロー図を作ろう

「ユーザーが見るもの（オブジェクト）」と「ユーザーがやること（アクション）」に着目した画面遷移図...UI Flowをつくりました。
UI Flowがどんなものなのかは、次のサイトがわかりやすいです。

画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ

なぜ「オブジェクト」と「アクション」にフォーカスするのかというと、UIパターン（粒度）は基本的に次の４つしかないからです。

さらにここでは「モードレスデザイン」という概念が紹介されました。

• モーダル (モードを持つ) ... 何か決められた行動（選択）をしないと他の行動ができない状態 ≒ やること（アクション）を決めるのに、見るもの（オブジェクト）を選ぶ必要がある

• モードレス ... モーダルではない状態 ≒ やること（アクション）を決めてから、見るもの（オブジェクト）を選ぶ

こう書くとイメージがわきにくいですが、次の記事が非常に詳しくわかりやすく書かれています。

モードレスデザイン｜ai｜note

ペーパープロトタイピング

主要な画面のラフをテンプレート用紙に手書きしました。 「独自のことをやらない」のも大事にして、その分野で人気の高いアプリなども参考にしながら具体化しました。

最後に、各チーム成果を発表。

まとめ

とにかく内容が濃く、参加して良かったです。今回書けてない内容も結構あります。２週間経ってようやくこの記事を書いてるわけですが、こうして振り返られるのはフォローアップや共有された資料が非常に充実していたからで、とてもありがたいですね。

最後に、学んだことをまとめてみます。
ペルソナ・ジャーニーをつくってからUI設計に落とし込む間には、次のようなプロセスがあります。

• ジャーニーの改善策とペルソナから、理想的なシナリオ（価値・行動・操作）を書き起こす

• シナリオを踏まえてデザイン対象を分析し、ユーザーの求めている情報と現状の課題を明らかにする

• 課題を解決すべく、トップダウン・アプローチとボトムアップ・アプローチを行き来しながら情報の分類方針を定める

• 分類を踏まえ、ユーザーが「見るもの（オブジェクト）」と「やること（アクション）」に着目したUI Flowをつくる

• ペーパープロトタイピングする

特に、画面ありきではなく、ユーザーのやること（やりたいこと）にフォーカスして考えるのがまだまだ不慣れなのでしっかり肝に命じます。

みなさま、ありがとうございました。

おまけ

UI Flowを手軽につくれるアプリがあります。以前、スクール課題でアプリデザインをした際にガッツリ使わせていただきましたが便利でした。

もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita