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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

| CONFIDENTIAL 2 ゆめみメンバー  自己紹介村上雄太郎 Yutaro Murakami 株式会社ゆめみリード・プロダクトデザイナー HCD-Net認定人間中心設計スペシャリスト about 新卒でミャンマーで事業を展開する日系企業に入社。現地人向けメディアやサービスの開発・立ち上げに従事。帰国後、株式会社ゆめみにプロダクトデザイナーとして入社。金融、メーカー、小売など様々な業界のデジタルサービスにおけるコンセプトデザインやUIデザインなどを中心に携わる。ゆめみ内ではサービス開発・推進にも携わっている。 Social utaromurakami

Slide 3

Slide 3 text

| CONFIDENTIAL 3 目次  1. イントロダクション  2. 優れたラフについて考えてみる  3. UIデザイン時によく利用しているラフ  4. それぞれのラフをどこで使うのか  5. ラフとGenerative AI  6. さいごに 

Slide 4

Slide 4 text

| CONFIDENTIAL イントロダクション  4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

| CONFIDENTIAL 8

Slide 9

Slide 9 text

| CONFIDENTIAL 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

| CONFIDENTIAL 14 イントロダクション | 話題提供  roughの語源  参考：語源英和辞典 ruh でこぼこの整えられていない ruhaz でこぼこの手荒な　rough 荒っぽいさま大まかなさま形式ばらず、気取らないさま

Slide 15

Slide 15 text

| CONFIDENTIAL 優れたラフについて  考えてみる  15

Slide 16

Slide 16 text

| CONFIDENTIAL 優れたUIをつくりたいのに、  なぜ荒っぽい、大まかなものをつくっているんだろう  16 優れたラフについて考えてみる 

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

| CONFIDENTIAL 優れたラフについて考えてみる  優れたラフとは、  目的や階層に応じて  適切な粒度・情報量で形づくられたもの 

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

| CONFIDENTIAL UIデザイン時に  よく利用しているラフ  26

Slide 27

Slide 27 text

| CONFIDENTIAL 27 UIデザイン時によく利用しているラフ  ラフを使い分けるレイヤー  よく利用しているラフの中で意識しているレイヤーが大きく3つある。  オブジェクト属性情報アクションアーティスト名前ジャンル探す選ぶアルバム名前ジャンル探す選ぶ曲名前ジャンル探す再生する 1.概念レイヤー 2.情報設計レイヤーユーザー・ビジネスゴールとオブジェクトの関係性等を踏まえて、それぞれの要求を満たす構造としての設計を行う。 3.ビジュアルレイヤーサービスやプロダクトの中に存在する概念（＝オブジェクト）の抽出と関係性の整理を行う。ヒラギノ角ゴ  Typography Color レイアウトやカラー含むビジュアルデザインの検討を行う。

Slide 28

Slide 28 text

| CONFIDENTIAL 28 UIデザイン時によく利用しているラフ  1.概念レイヤー  参考： Jeff Johnson , Austin Henderson Conceptual Models: Core to Good Design(2011)、ソシオメディア株式会社 ,上野学, 藤井幸多オブジェクト指向 UIデザイン-使いやすいソフトウェアの原理 (2020) オブジェクト指向分析コンセプトマップユーザーがサービスを使用する際に直接操作できる対象物（＝オブジェクト）と対象物に対してできること（＝アクション）などの整理と、その関係性を可視化する。このラフにより、本サービスでユーザーは何ができるのか（できる必要があるのか）、それはサービスの中でどんな関係性でユーザーに認識されているのか（されるとよいのか）といった比較的抽象度の高いレイヤーでUIについての議論を行うことができる。

Slide 29

Slide 29 text

| CONFIDENTIAL 29 UIデザイン時によく利用しているラフ  2.情報設計レイヤー  簡易アプリ・サイトマップワイヤーフレーム（Lo-fi）ユーザーがサービスを使用する際に、理解しやすく、見つけやすくなるような情報構造を検討する。このラフにより、本サービスではどんな構造になっているとユーザーは理解しやすく見つけやすい構造となるか、目的を達成しやすくなるかといった画面に落とし込んだ際のインタラクションについてより具体的に議論を行うことができる。ワイヤーフレーム（Hi-fi）

Slide 30

Slide 30 text

| CONFIDENTIAL 30 UIデザイン時によく利用しているラフ  3.ビジュアルレイヤー  サービスコンセプトやブランド、アクセシビリティ等を意識した上で、ユーザーに訴求したい視覚的なアウトプットを検討する。このラフにより、サービスとしてユーザーに訴求したいイメージ・世界観や、最終的なアウトプットのクオリティといった実際のサービスとして具体化されたアウトプットをもとに議論を行うことができる。イメージスケールムードボードビジュアルデザインカンプ

Slide 31

Slide 31 text

| CONFIDENTIAL 31 UIデザイン時によく利用しているラフ  ラフのためのテンプレート  ゆめみではそれぞれのラフを素早く利用できるために、テンプレート化している。  1.概念レイヤー 2.情報設計レイヤーアプリ・サイトマップチェックリスト 3.ビジュアルレイヤーオブジェクト指向分析コンセプトマップ YUMEMI Design Kit （スタイルガイドライン及びUIコンポーネント集）

Slide 32

Slide 32 text

| CONFIDENTIAL 32 UIデザイン時によく利用しているラフ  個人的なポイント①  概念レイヤー情報設計レイヤービジュアルレイヤー UIデザイン A B C 情報設計レイヤーやビジュアルレイヤーでのラフはよく利用されているように思うが、  概念レイヤーのラフも利用できると、コミュニケーションが取りやすく、最適なUIをつくりやすくなる（気がする）。 

Slide 33

Slide 33 text

| CONFIDENTIAL 33 UIデザイン時によく利用しているラフ  個人的なポイント②  それぞれのレイヤーを行き来しながらUIデザインの制作を行う。  ただ、目的に応じてどのレイヤーのラフを使うのかは適宜行っている。  概念レイヤー情報設計レイヤービジュアルレイヤー UIデザイン A B C

Slide 34

Slide 34 text

| CONFIDENTIAL 34 UIデザイン時によく利用しているラフ  サービスやプロダクトという観点から考えると、  デザイナーが普段よくつくっているデザインデータも  そのサービスやプロダクトのラフ  と言えるのかもしれない 

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

| CONFIDENTIAL 36 それぞれのラフをどこで使うのか  UXの5段階モデル  例えば、有名なJesse James GarretのUXの5段階モデルの場合。  戦略要件構造骨格表層どのような見た目や動きが最適か製品が組織のために何を達成したいのか、ユーザーのために何を達成したいのかどんな機能やコンテンツが必要かどんな構造やナビゲーションが最適かどんな遷移やレイアウトが最適か各段階でやること参考： Jesse James Garrett (著), ソシオメディア株式会社 (翻訳), 上野学 (翻訳), 篠原稔和 (翻訳) The Elements of User Experience ~5段階モデルで考える UXデザイン(2022)を参考に筆者による加筆

Slide 37

Slide 37 text

| 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)を参考に筆者による加筆

Slide 38

Slide 38 text

| CONFIDENTIAL 38 それぞれのラフをどこで使うのか  人間中心設計（Human-Centered Design）  例えば、人間中心設計の基本コンピタンスの場合。  A 基本コンピタンス A1 調査・評価設計能力 A2 ユーザー調査実施能力 A3 定性・定量データ分析能力 A4 現状のモデル化能力 A5 ユーザー体験の構想・提案能力 A6 新製品・新事業の企画提案能力 A7 ユーザー要求仕様作成能力 A8 製品・システム・サービスの要求仕様作成能力 A9 情報構造の設計能力 A10 デザイン仕様作成能力 A11 プロトタイピング能力 A12 ユーザーによる評価実施能力 ②：ユーザー要求事項の明確化 ①：利用状況の把握と明示 ④：要求事項に対する設計の評価 ③：ユーザーの要求事項を満足させる設計による解決策の作成適切な段階への反復要求事項を満たしている ⓪：人間中心設計プロセスの計画リサーチ発見デザインテスト A13 専門知識に基づく評価実施能力参考： HCD専門資格コンピタンスマップ（ 2022年度）を参考に筆者による加筆

Slide 39

Slide 39 text

| CONFIDENTIAL 39 それぞれのラフをどこで使うのか  人間中心設計（Human-Centered Design）  例えば、人間中心設計の基本コンピタンスの場合。  A 基本コンピタンス A1 調査・評価の企画書 A2 各種インタビュー A3 記述統計 KJ法 A4 ペルソナ価値マップ A5 シナリオ CJM A6 ビジネスモデルキャンバス A7 要求仕様書オブジェクト指向分析 A8 PRD 基本設計書 A9 コンセプトマップサイトマップワイヤーフレーム A10 イメージスケールムードボードビジュアルデザインカンプ A11 コンセプトムービープロトタイピング A12 受容性評価ユーザビリティ評価 ②：ユーザー要求事項の明確化 ①：利用状況の把握と明示 ④：要求事項に対する設計の評価 ③：ユーザーの要求事項を満足させる設計による解決策の作成適切な段階への反復要求事項を満たしている ⓪：人間中心設計プロセスの計画リサーチ発見デザインテスト A13 ヒューリスティック法参考： HCD専門資格コンピタンスマップ（ 2022年度）を参考に筆者による加筆

Slide 40

Slide 40 text

| CONFIDENTIAL 40 それぞれのラフをどこで使うのか  アジャイル開発におけるプロセス  例えば、アジャイル開発におけるプロセスの場合。  MVP特定仮説立案検証計画検証評価価値探索（正しいものを探す）アジャイル開発（正しくつくる） MVP検証スプリントプランニングスプリント開発スプリントレビュースプリントレトロスペクティブ開発計画参考：市谷聡啓 (著) 正しいものを正しくつくるプロダクトをつくるとはどういうことなのか、あるいはアジャイルのその先について (2019)を参考に筆者による加筆

Slide 41

Slide 41 text

| CONFIDENTIAL 41 それぞれのラフをどこで使うのか  アジャイル開発におけるプロセス  例えば、アジャイル開発におけるプロセスの場合。  MVP特定仮説立案検証計画検証評価価値探索（正しいものを探す）アジャイル開発（正しくつくる） MVP検証スプリントプランニングスプリント開発スプリントレビュースプリントレトロスペクティブ開発計画参考：市谷聡啓 (著) 正しいものを正しくつくるプロダクトをつくるとはどういうことなのか、あるいはアジャイルのその先について (2019)を参考に筆者による加筆概念レイヤー情報設計レイヤービジュアルレイヤー

Slide 42

Slide 42 text

| CONFIDENTIAL ラフとGenerative AI  42

Slide 43

Slide 43 text

| CONFIDENTIAL 43 ラフとGenerative AI  Generative AIツールの増加  昨今Generative AIツールが増えている。  UIを生成するツールも増えてきているが、これらがラフをつくることをどう変えるのか。  Galileo AI Visily Chat GPT Autodesigner Midjourney Framer

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

| CONFIDENTIAL 47 ラフとGenerative AI  個人的な所感  いくつかサービスを触ってみたところ、text to UIだとまだビジュアルデザインにおける生成がメインとなっているように思えた。  （一部ワイヤーフレームも生成可能）    概念レイヤー情報設計レイヤービジュアルレイヤー UIデザイン A B C ビジュアルデザインにおける生成　

Slide 48

Slide 48 text

| CONFIDENTIAL 48 ラフとGenerative AI  個人的な所感  今後それぞれのレイヤーにおける生成が可能となれば、今日話していた内容や我々の業務は大きく変わるかもしれない。    概念レイヤー情報設計レイヤービジュアルレイヤー UIデザイン A B C 全てのレイヤーにおける生成

Slide 49

Slide 49 text

| CONFIDENTIAL さいごに  49

Slide 50

Slide 50 text

| CONFIDENTIAL 50 YUMEMIではデザイナーを積極採用中です！  カジュアル雑談会（新卒）  リード・UIデザイナー（中途） 

Slide 51

Slide 51 text

| CONFIDENTIAL 51 Thank you ! 󰢐󰢏󰤈󰢧