ラフとUIデザイン〜UIデザインにおけるラフの使い分けのすゝめ〜

2023年6月23日に行われた「デザナレ展 vol.2 | 優れたチームのすごいラフを一挙公開！リアルで見知れるデザイン展」で登壇した内容です。

Transcript

1. | CONFIDENTIAL ラフとUIデザイン
 〜UIデザインにおけるラフの使い分けのすゝめ〜
 2023.06.23
2. | CONFIDENTIAL 2 ゆめみメンバー
 自己紹介 村上 雄太郎 Yutaro Murakami 株式会社ゆめみ リード・プロダクトデザイナー HCD-Net認定 人間中心設計スペシャリスト about 新卒でミャンマーで事業を展開する日系企業に入社。現地人向けメディアやサービスの開発・ 立ち上げに従事。 帰国後、株式会社ゆめみにプロダクトデザイナーとして入社。金融、メーカー、小売など様々な 業界のデジタルサービスにおけるコンセプトデザインやUIデザインなどを中心に携わる。 ゆめみ内ではサービス開発・推進にも携わっている。 Social utaromurakami
3. | CONFIDENTIAL 3 目次
 1. イントロダクション
 2. 優れたラフについて考えてみる
 3. UIデザイン時によく利用しているラフ
 4. それぞれのラフをどこで使うのか
 5. ラフとGenerative AI
 6. さいごに

4. | CONFIDENTIAL イントロダクション
 4
5. | CONFIDENTIAL 5 会社紹介
 イントロダクション

6. | CONFIDENTIAL 6 イントロダクション | 会社紹介

7. | CONFIDENTIAL 7 イントロダクション | 会社紹介

8. | CONFIDENTIAL 8
9. | CONFIDENTIAL 9
10. | CONFIDENTIAL 10 話題提供
 イントロダクション

11. | CONFIDENTIAL 11 イントロダクション | 話題提供
 ラフってなんだろう？

12. | CONFIDENTIAL 12 イントロダクション | 話題提供
 ゆめみのプロダクトデザイナー
 ゆめみのプロダクトデザイナーは、事業やサービスにおける様々なデザインの対象を取り扱う。
 その中で優れたUIをつくるために、日々様々なラフを活用している。
 ビジネス・PdM支援
 ワークショップ
 概念（オブジェクト）
 ワイヤーフレーム
 UI
 モデリング
 A B C いっぱいある

13. | CONFIDENTIAL 13 イントロダクション | 話題提供
 ラフとは
 参考：goo辞書 　1. 荒っぽいさま。
 　2. 大まかなさま。
 　3. 形式ばらず、気取らないさま。

14. | CONFIDENTIAL 14 イントロダクション | 話題提供
 roughの語源
 参考：語源英和辞典 ruh でこぼこの 整えられていない ruhaz でこぼこの 手荒な 　rough 荒っぽいさま 大まかなさま 形式ばらず、気取らないさま
15. | CONFIDENTIAL 優れたラフについて
 考えてみる
 15
16. | CONFIDENTIAL 優れたUIをつくりたいのに、
 なぜ荒っぽい、大まかなものをつくっているんだろう
 16 優れたラフについて考えてみる

17. | CONFIDENTIAL デザイナーとして働きはじめた頃、デザイン業務におけるコミュニケーションや合意の仕方に悩んでいた。
 （のを思い出した）
 17 優れたラフについて考えてみる
 デザイナーとして働き始めた頃の悩み

18. | CONFIDENTIAL 18 優れたラフについて考えてみる
 こんな経験はありませんか？
 合意まで辿り着けない 経営層、どんな情報がほしいの？ 他職種とのコミュニケーションが うまくとれない レビューほしいの そこじゃない はじめからUIをつくり込みすぎて、 修正に時間がかかる
19. | CONFIDENTIAL 優れたラフについて考えてみる
 優れたラフとは、
 目的や階層に応じて
 適切な粒度・情報量で形づくられたもの

20. | CONFIDENTIAL 20 優れたラフについて考えてみる
 例えば：目的に応じた粒度や情報量がずれている場合
 デザイナー
 構想段階での 情報構造について、 レビューがほしい 他者

21. | CONFIDENTIAL 21 優れたラフについて考えてみる
 例えば：目的に応じた粒度や情報量がずれている場合
 デザイナー
 つくる
 （2日）
 構想段階での 情報構造について、 レビューがほしい 他者

22. | CONFIDENTIAL 22 優れたラフについて考えてみる
 例えば：目的に応じた粒度や情報量がずれている場合
 デザイナー
 ボタンここにおくのか？ 一覧ってこんな見せ方だっけ？ 細かくつくってくれてるから 構造として捉えにくいな つくる
 （2日）
 確認する
 構想段階での 情報構造について、 レビューがほしい 他者

23. | CONFIDENTIAL 23 優れたラフについて考えてみる
 例えば：目的に応じた粒度や情報量がずれている場合
 デザイナー
 ボタンここにおくのか？ 一覧ってこんな見せ方だっけ？ 細かくつくってくれてるから 構造として捉えにくいな つくる
 （2日）
 確認する
 一覧の見せ方〇〇が いいんじゃない？ そこじゃないですう ... 構想段階での 情報構造について、 レビューがほしい 他者

24. | CONFIDENTIAL 24 優れたラフについて考えてみる
 例えば：目的に応じた粒度や情報量が適切な場合
 デザイナー
 構造が把握しやすい！ つくる
 （1~2時間）
 確認する
 ツイート一覧 ツイート詳細 マイページ 余計な情報がない！ ツイート詳細からも マイページにいけるのはどう？ 悩ましいですね。 ペルソナのゴールを考えると〜〜 構想段階での 情報構造について、 レビューがほしい 他者

25. | CONFIDENTIAL 優れたラフについて考えてみる
 優れたラフとは、
 目的や階層に応じて
 適切な粒度・情報量で形づくられたもの
 スピードやクオリティの
 向上につながる

26. | CONFIDENTIAL UIデザイン時に
 よく利用しているラフ
 26
27. | CONFIDENTIAL 27 UIデザイン時によく利用しているラフ
 ラフを使い分けるレイヤー
 よく利用しているラフの中で意識しているレイヤーが大きく3つある。
 オブジェクト 属性情報 アクション アーティスト 名前 ジャンル 探す 選ぶ アルバム 名前 ジャンル 探す 選ぶ 曲 名前 ジャンル 探す 再生する 1.概念レイヤー 2.情報設計レイヤー ユーザー・ビジネスゴールとオブジェクトの関係性等を踏 まえて、それぞれの要求を満たす構造としての設計を行 う。 3.ビジュアルレイヤー サービスやプロダクトの中に存在する概念（＝オブジェク ト）の抽出と関係性の整理を行う。 ヒラギノ角ゴ
 Typography Color レイアウトやカラー含むビジュアルデザインの検討を行う。
28. | CONFIDENTIAL 28 UIデザイン時によく利用しているラフ
 1.概念レイヤー
 参考： Jeff Johnson , Austin Henderson Conceptual Models: Core to Good Design(2011)、ソシオメディア株式会社 ,上野 学, 藤井 幸多 オブジェクト指向 UIデザイン-使いやすいソフトウェアの原理 (2020) オブジェクト指向分析 コンセプトマップ ユーザーがサービスを使用する際に直接操作できる対象物（＝オブジェクト）と対象物に対してできること（＝アクション）などの整理と、 その関係性を可視化する。 このラフにより、本サービスでユーザーは何ができるのか（できる必要があるのか） 、それはサービスの中でどんな関係性でユーザーに認識されているのか （されるとよいのか）といった 比較的抽象度 の高いレイヤーでUIについての議論を行うことができる 。
29. | CONFIDENTIAL 29 UIデザイン時によく利用しているラフ
 2.情報設計レイヤー
 簡易アプリ・サイトマップ ワイヤーフレーム（Lo-fi） ユーザーがサービスを使用する際に、理解しやすく、見つけやすくなるような情報構造を検討する。 このラフにより、本サービスではどんな構造になっているとユーザーは理解しやすく見つけやすい構造となるか、目的を達成しやすくなるか といった画面に落とし込んだ際のインタラクションについてより具体的に議論を行うことができる。 ワイヤーフレーム（Hi-fi）
30. | CONFIDENTIAL 30 UIデザイン時によく利用しているラフ
 3.ビジュアルレイヤー
 サービスコンセプトやブランド、アクセシビリティ等を意識した上で、ユーザーに訴求したい視覚的なアウトプットを検討する。 このラフにより、サービスとしてユーザーに訴求したいイメージ・世界観や 、最終的なアウトプットのクオリティ といった実際のサービスとして具体化されたアウトプットをもとに議論を行うことができる。 イメージスケール ムードボード ビジュアルデザインカンプ
31. | CONFIDENTIAL 31 UIデザイン時によく利用しているラフ
 ラフのためのテンプレート
 ゆめみではそれぞれのラフを素早く利用できるために、テンプレート化している。
 1.概念レイヤー 2.情報設計レイヤー アプリ・サイトマップ チェックリスト 3.ビジュアルレイヤー オブジェクト指向分析 コンセプトマップ YUMEMI Design Kit （スタイルガイドライン及びUIコンポーネント集）
32. | CONFIDENTIAL 32 UIデザイン時によく利用しているラフ
 個人的なポイント①
 概念レイヤー 情報設計レイヤー ビジュアルレイヤー UIデザイン A B C 情報設計レイヤーやビジュアルレイヤーでのラフはよく利用されているように思うが、
 概念レイヤーのラフも利用できると、コミュニケーションが取りやすく、最適なUIをつくりやすくなる（気がする）。

33. | CONFIDENTIAL 33 UIデザイン時によく利用しているラフ
 個人的なポイント②
 それぞれのレイヤーを行き来しながらUIデザインの制作を行う。
 ただ、目的に応じてどのレイヤーのラフを使うのかは適宜行っている。
 概念レイヤー 情報設計レイヤー ビジュアルレイヤー UIデザイン A B C
34. | CONFIDENTIAL 34 UIデザイン時によく利用しているラフ
 サービスやプロダクトという観点から考えると、
 デザイナーが普段よくつくっているデザインデータも
 そのサービスやプロダクトのラフ
 と言えるのかもしれない

35. | CONFIDENTIAL 35 それぞれのラフを
 どこで使うのか

36. | CONFIDENTIAL 36 それぞれのラフをどこで使うのか
 UXの5段階モデル
 例えば、有名なJesse James GarretのUXの5段階モデルの場合。
 戦略 要件 構造 骨格 表層 どのような見た目や動きが最適か 製品が組織のために何を達成したいの か、ユーザーのために何を達成したいの か どんな機能やコンテンツが必要か どんな構造やナビゲーションが最適か どんな遷移やレイアウトが最適か 各段階でやること 参考： Jesse James Garrett (著), ソシオメディア株式会社 (翻訳), 上野 学 (翻訳), 篠原 稔和 (翻訳) The Elements of User Experience ~5段階モデルで考える UXデザイン(2022)を参考に筆者による加筆
37. | CONFIDENTIAL コンセプトマップ 簡易アプリ・サイトマップ ワイヤーフレーム（Lo-fi） 37 それぞれのラフをどこで使うのか
 UXの5段階モデル
 例えば、有名なJesse James GarretのUXの5段階モデルの場合。
 戦略 要件 構造 骨格 表層 表層 どのような見た目や動きが最適か 製品が組織のために何を達成したいの か、ユーザーのために何を達成したいの か どんな機能やコンテンツが必要か どんな構造やナビゲーションが最適か どんな遷移やレイアウトが最適か アウトプット例 各段階でやること ビジネスモデルキャンバス ユーザーインタビュー結果 シナリオ、ストーリーボード オブジェクト指向分析 ワイヤーフレーム（Hi-fi） イメージスケール ムードボード ビジュアルデザインカンプ 表層 ラフを使い分けるレイヤー - - - 1.概念レイヤー 1.概念レイヤー 2.情報設計レイヤー 2.情報設計レイヤー 2.情報設計レイヤー 3.ビジュアルレイヤー 3.ビジュアルレイヤー 3.ビジュアルレイヤー 参考： Jesse James Garrett (著), ソシオメディア株式会社 (翻訳), 上野 学 (翻訳), 篠原 稔和 (翻訳) The Elements of User Experience ~5段階モデルで考える UXデザイン(2022)を参考に筆者による加筆
38. | CONFIDENTIAL 38 それぞれのラフをどこで使うのか
 人間中心設計（Human-Centered Design）
 例えば、人間中心設計の基本コンピタンスの場合。
 A 基本 コンピタンス A1 調査・評価 設計能力 A2 ユーザー調査 実施能力 A3 定性・定量データ分 析能力 A4 現状のモデル化 能力 A5 ユーザー体験の 構想・提案能力 A6 新製品・新事業の 企画提案能力 A7 ユーザー要求仕様 作成能力 A8 製品・システム・ サービスの要求仕 様 作成能力 A9 情報構造の 設計能力 A10 デザイン仕様 作成能力 A11 プロトタイピング能 力 A12 ユーザーによる 評価実施能力 ②：ユーザー要求事項の 明確化 ①：利用状況の 把握と明示 ④：要求事項に 対する設計の評価 ③：ユーザーの要求事項 を満足させる設計による 解決策の作成 適切な段階への反復 要求事項を 満たしている ⓪：人間中心設計 プロセスの計画 リサーチ 発見 デザイン テスト A13 専門知識に基づく 評価実施能力 参考： HCD専門資格コンピタンスマップ（ 2022年度）を参考に筆者による加筆
39. | CONFIDENTIAL 39 それぞれのラフをどこで使うのか
 人間中心設計（Human-Centered Design）
 例えば、人間中心設計の基本コンピタンスの場合。
 A 基本 コンピタンス A1 調査・評価の 企画書 A2 各種 インタビュー A3 記述統計 KJ法 A4 ペルソナ 価値マップ A5 シナリオ CJM A6 ビジネスモデル キャンバス A7 要求仕様書 オブジェクト 指向分析 A8 PRD 基本設計書 A9 コンセプトマップ サイトマップ ワイヤーフレーム A10 イメージスケール ムードボード ビジュアル デザインカンプ A11 コンセプト ムービー プロトタイピング A12 受容性評価 ユーザビリティ 評価 ②：ユーザー要求事項の 明確化 ①：利用状況の 把握と明示 ④：要求事項に 対する設計の評価 ③：ユーザーの要求事項 を満足させる設計による 解決策の作成 適切な段階への反復 要求事項を 満たしている ⓪：人間中心設計 プロセスの計画 リサーチ 発見 デザイン テスト A13 ヒューリスティック 法 参考： HCD専門資格コンピタンスマップ（ 2022年度）を参考に筆者による加筆
40. | CONFIDENTIAL 40 それぞれのラフをどこで使うのか
 アジャイル開発におけるプロセス
 例えば、アジャイル開発におけるプロセスの場合。
 MVP特定 仮説立案 検証計画 検証 評価 価値探索 （正しいものを探す） アジャイル開発 （正しくつくる） MVP検証 スプリント プランニング スプリント 開発 スプリント レビュー スプリント レトロスペ クティブ 開発計画 参考： 市谷聡啓 (著) 正しいものを正しくつくる プロダクトをつくるとはどういうことなのか、あるいはアジャイルのその先について (2019)を参考に筆者による加筆
41. | CONFIDENTIAL 41 それぞれのラフをどこで使うのか
 アジャイル開発におけるプロセス
 例えば、アジャイル開発におけるプロセスの場合。
 MVP特定 仮説立案 検証計画 検証 評価 価値探索 （正しいものを探す） アジャイル開発 （正しくつくる） MVP検証 スプリント プランニング スプリント 開発 スプリント レビュー スプリント レトロスペ クティブ 開発計画 参考： 市谷聡啓 (著) 正しいものを正しくつくる プロダクトをつくるとはどういうことなのか、あるいはアジャイルのその先について (2019)を参考に筆者による加筆 概念レイヤー 情報設計レイヤー ビジュアルレイヤー
42. | CONFIDENTIAL ラフとGenerative AI
 42
43. | CONFIDENTIAL 43 ラフとGenerative AI
 Generative AIツールの増加
 昨今Generative AIツールが増えている。
 UIを生成するツールも増えてきているが、これらがラフをつくることをどう変えるのか。
 Galileo AI Visily Chat GPT Autodesigner Midjourney Framer
44. | CONFIDENTIAL 44 ラフとGenerative AI
 Autodesiger：生成例①
 サービス概要を伝えると、瞬時にそれっぽいサービスの主要画面を生成してくれたり、
 ビジュアルを細かく伝えると、伝えた内容に近いアウトプットを生成してくれる。

45. | CONFIDENTIAL 45 ラフとGenerative AI
 Autodesiger：生成例②
 サービス概要を伝えると、瞬時にそれっぽいサービスの主要画面を生成してくれたり、
 ビジュアルを細かく伝えると、伝えた内容に近いアウトプットを生成してくれる。

46. | CONFIDENTIAL 46 ラフとGenerative AI
 Autodesiger：生成例③
 一方でサービスにおける機能の指定などをしても、反映されたものにはならない。

47. | CONFIDENTIAL 47 ラフとGenerative AI
 個人的な所感
 いくつかサービスを触ってみたところ、text to UIだとまだビジュアルデザインにおける生成がメインとなっているように思えた。
 （一部ワイヤーフレームも生成可能）
 
 概念レイヤー 情報設計レイヤー ビジュアルレイヤー UIデザイン A B C ビジュアルデザインにおける生成　
48. | CONFIDENTIAL 48 ラフとGenerative AI
 個人的な所感
 今後それぞれのレイヤーにおける生成が可能となれば、今日話していた内容や我々の業務は大きく変わるかもしれない。
 
 概念レイヤー 情報設計レイヤー ビジュアルレイヤー UIデザイン A B C 全てのレイヤーにおける生成
49. | CONFIDENTIAL さいごに
 49
50. | CONFIDENTIAL 50 YUMEMIではデザイナーを積極採用中です！
 カジュアル雑談会（新卒）
 リード・UIデザイナー（中途）

51. | CONFIDENTIAL 51 Thank you ! 󰢐󰢏󰤈󰢧