2023年6月23日に行われた「デザナレ展 vol.2 | 優れたチームのすごいラフを一挙公開！リアルで見知れるデザイン展」で登壇した内容です。
| CONFIDENTIALラフとUIデザイン 〜UIデザインにおけるラフの使い分けのすゝめ〜 2023.06.23
View Slide
| CONFIDENTIAL 2ゆめみメンバー 自己紹介村上 雄太郎Yutaro Murakami株式会社ゆめみ リード・プロダクトデザイナーHCD-Net認定 人間中心設計スペシャリストabout新卒でミャンマーで事業を展開する日系企業に入社。現地人向けメディアやサービスの開発・立ち上げに従事。帰国後、株式会社ゆめみにプロダクトデザイナーとして入社。金融、メーカー、小売など様々な業界のデジタルサービスにおけるコンセプトデザインやUIデザインなどを中心に携わる。ゆめみ内ではサービス開発・推進にも携わっている。Socialutaromurakami
| CONFIDENTIAL 3目次 1. イントロダクション 2. 優れたラフについて考えてみる 3. UIデザイン時によく利用しているラフ 4. それぞれのラフをどこで使うのか 5. ラフとGenerative AI 6. さいごに
| CONFIDENTIALイントロダクション 4
| CONFIDENTIAL 5会社紹介 イントロダクション
| CONFIDENTIAL 6イントロダクション | 会社紹介
| CONFIDENTIAL 7イントロダクション | 会社紹介
| CONFIDENTIAL 8
| CONFIDENTIAL 9
| CONFIDENTIAL 10話題提供 イントロダクション
| CONFIDENTIAL 11イントロダクション | 話題提供 ラフってなんだろう？
| CONFIDENTIAL 12イントロダクション | 話題提供 ゆめみのプロダクトデザイナー ゆめみのプロダクトデザイナーは、事業やサービスにおける様々なデザインの対象を取り扱う。 その中で優れたUIをつくるために、日々様々なラフを活用している。 ビジネス・PdM支援 ワークショップ 概念（オブジェクト） ワイヤーフレーム UI モデリング A BCいっぱいある
| CONFIDENTIAL 13イントロダクション | 話題提供 ラフとは 参考：goo辞書 1. 荒っぽいさま。 2. 大まかなさま。 3. 形式ばらず、気取らないさま。
| CONFIDENTIAL 14イントロダクション | 話題提供 roughの語源 参考：語源英和辞典ruhでこぼこの整えられていないruhazでこぼこの手荒な rough荒っぽいさま大まかなさま形式ばらず、気取らないさま
| CONFIDENTIAL優れたラフについて 考えてみる 15
| CONFIDENTIAL優れたUIをつくりたいのに、 なぜ荒っぽい、大まかなものをつくっているんだろう 16優れたラフについて考えてみる
| CONFIDENTIALデザイナーとして働きはじめた頃、デザイン業務におけるコミュニケーションや合意の仕方に悩んでいた。 （のを思い出した） 17優れたラフについて考えてみる デザイナーとして働き始めた頃の悩み
| CONFIDENTIAL 18優れたラフについて考えてみる こんな経験はありませんか？ 合意まで辿り着けない経営層、どんな情報がほしいの？他職種とのコミュニケーションがうまくとれないレビューほしいのそこじゃないはじめからUIをつくり込みすぎて、修正に時間がかかる
| CONFIDENTIAL優れたラフについて考えてみる 優れたラフとは、 目的や階層に応じて 適切な粒度・情報量で形づくられたもの
| CONFIDENTIAL 20優れたラフについて考えてみる 例えば：目的に応じた粒度や情報量がずれている場合 デザイナー 構想段階での情報構造について、レビューがほしい他者
| CONFIDENTIAL 21優れたラフについて考えてみる 例えば：目的に応じた粒度や情報量がずれている場合 デザイナー つくる （2日） 構想段階での情報構造について、レビューがほしい他者
| CONFIDENTIAL 22優れたラフについて考えてみる 例えば：目的に応じた粒度や情報量がずれている場合 デザイナー ボタンここにおくのか？一覧ってこんな見せ方だっけ？細かくつくってくれてるから構造として捉えにくいなつくる （2日） 確認する 構想段階での情報構造について、レビューがほしい他者
| CONFIDENTIAL 23優れたラフについて考えてみる 例えば：目的に応じた粒度や情報量がずれている場合 デザイナー ボタンここにおくのか？一覧ってこんな見せ方だっけ？細かくつくってくれてるから構造として捉えにくいなつくる （2日） 確認する 一覧の見せ方〇〇がいいんじゃない？そこじゃないですう ...構想段階での情報構造について、レビューがほしい他者
| CONFIDENTIAL 24優れたラフについて考えてみる 例えば：目的に応じた粒度や情報量が適切な場合 デザイナー 構造が把握しやすい！つくる （1~2時間） 確認する ツイート一覧 ツイート詳細マイページ余計な情報がない！ツイート詳細からもマイページにいけるのはどう？悩ましいですね。ペルソナのゴールを考えると〜〜構想段階での情報構造について、レビューがほしい他者
| CONFIDENTIAL優れたラフについて考えてみる 優れたラフとは、 目的や階層に応じて 適切な粒度・情報量で形づくられたもの スピードやクオリティの 向上につながる
| CONFIDENTIALUIデザイン時に よく利用しているラフ 26
| CONFIDENTIAL 27UIデザイン時によく利用しているラフ ラフを使い分けるレイヤー よく利用しているラフの中で意識しているレイヤーが大きく3つある。 オブジェクト 属性情報 アクションアーティスト名前ジャンル探す選ぶアルバム名前ジャンル探す選ぶ曲名前ジャンル探す再生する1.概念レイヤー 2.情報設計レイヤーユーザー・ビジネスゴールとオブジェクトの関係性等を踏まえて、それぞれの要求を満たす構造としての設計を行う。3.ビジュアルレイヤーサービスやプロダクトの中に存在する概念（＝オブジェクト）の抽出と関係性の整理を行う。ヒラギノ角ゴ Typography Colorレイアウトやカラー含むビジュアルデザインの検討を行う。
| CONFIDENTIAL 28UIデザイン時によく利用しているラフ 1.概念レイヤー 参考： Jeff Johnson , Austin Henderson Conceptual Models: Core to Good Design(2011)、ソシオメディア株式会社 ,上野 学, 藤井 幸多 オブジェクト指向 UIデザイン-使いやすいソフトウェアの原理 (2020)オブジェクト指向分析 コンセプトマップユーザーがサービスを使用する際に直接操作できる対象物（＝オブジェクト）と対象物に対してできること（＝アクション）などの整理と、その関係性を可視化する。このラフにより、本サービスでユーザーは何ができるのか（できる必要があるのか）、それはサービスの中でどんな関係性でユーザーに認識されているのか（されるとよいのか）といった比較的抽象度の高いレイヤーでUIについての議論を行うことができる。
| CONFIDENTIAL 29UIデザイン時によく利用しているラフ 2.情報設計レイヤー 簡易アプリ・サイトマップ ワイヤーフレーム（Lo-fi）ユーザーがサービスを使用する際に、理解しやすく、見つけやすくなるような情報構造を検討する。このラフにより、本サービスではどんな構造になっているとユーザーは理解しやすく見つけやすい構造となるか、目的を達成しやすくなるかといった画面に落とし込んだ際のインタラクションについてより具体的に議論を行うことができる。ワイヤーフレーム（Hi-fi）
| CONFIDENTIAL 30UIデザイン時によく利用しているラフ 3.ビジュアルレイヤー サービスコンセプトやブランド、アクセシビリティ等を意識した上で、ユーザーに訴求したい視覚的なアウトプットを検討する。このラフにより、サービスとしてユーザーに訴求したいイメージ・世界観や、最終的なアウトプットのクオリティといった実際のサービスとして具体化されたアウトプットをもとに議論を行うことができる。イメージスケール ムードボード ビジュアルデザインカンプ
| CONFIDENTIAL 31UIデザイン時によく利用しているラフ ラフのためのテンプレート ゆめみではそれぞれのラフを素早く利用できるために、テンプレート化している。 1.概念レイヤー 2.情報設計レイヤーアプリ・サイトマップチェックリスト3.ビジュアルレイヤーオブジェクト指向分析コンセプトマップYUMEMI Design Kit（スタイルガイドライン及びUIコンポーネント集）
| CONFIDENTIAL 32UIデザイン時によく利用しているラフ 個人的なポイント① 概念レイヤー情報設計レイヤービジュアルレイヤーUIデザインA BC情報設計レイヤーやビジュアルレイヤーでのラフはよく利用されているように思うが、 概念レイヤーのラフも利用できると、コミュニケーションが取りやすく、最適なUIをつくりやすくなる（気がする）。
| CONFIDENTIAL 33UIデザイン時によく利用しているラフ 個人的なポイント② それぞれのレイヤーを行き来しながらUIデザインの制作を行う。 ただ、目的に応じてどのレイヤーのラフを使うのかは適宜行っている。 概念レイヤー情報設計レイヤービジュアルレイヤーUIデザインA BC
| CONFIDENTIAL 34UIデザイン時によく利用しているラフ サービスやプロダクトという観点から考えると、 デザイナーが普段よくつくっているデザインデータも そのサービスやプロダクトのラフ と言えるのかもしれない
| CONFIDENTIAL 35それぞれのラフを どこで使うのか
| CONFIDENTIAL 36それぞれのラフをどこで使うのか UXの5段階モデル 例えば、有名なJesse James GarretのUXの5段階モデルの場合。 戦略要件構造骨格表層どのような見た目や動きが最適か製品が組織のために何を達成したいのか、ユーザーのために何を達成したいのかどんな機能やコンテンツが必要かどんな構造やナビゲーションが最適かどんな遷移やレイアウトが最適か各段階でやること参考： Jesse James Garrett (著), ソシオメディア株式会社 (翻訳), 上野 学 (翻訳), 篠原 稔和 (翻訳) The Elements of User Experience ~5段階モデルで考える UXデザイン(2022)を参考に筆者による加筆
| 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)を参考に筆者による加筆
| CONFIDENTIAL 38それぞれのラフをどこで使うのか 人間中心設計（Human-Centered Design） 例えば、人間中心設計の基本コンピタンスの場合。 A基本コンピタンスA1調査・評価設計能力A2ユーザー調査実施能力A3定性・定量データ分析能力A4現状のモデル化能力A5ユーザー体験の構想・提案能力A6新製品・新事業の企画提案能力A7ユーザー要求仕様作成能力A8製品・システム・サービスの要求仕様作成能力A9情報構造の設計能力A10デザイン仕様作成能力A11プロトタイピング能力A12ユーザーによる評価実施能力②：ユーザー要求事項の明確化①：利用状況の把握と明示④：要求事項に対する設計の評価③：ユーザーの要求事項を満足させる設計による解決策の作成適切な段階への反復要求事項を満たしている⓪：人間中心設計プロセスの計画リサーチ発見デザインテストA13専門知識に基づく評価実施能力参考： HCD専門資格コンピタンスマップ（ 2022年度）を参考に筆者による加筆
| CONFIDENTIAL 39それぞれのラフをどこで使うのか 人間中心設計（Human-Centered Design） 例えば、人間中心設計の基本コンピタンスの場合。 A基本コンピタンスA1調査・評価の企画書A2各種インタビューA3記述統計KJ法A4ペルソナ価値マップA5シナリオCJMA6ビジネスモデルキャンバスA7要求仕様書オブジェクト指向分析A8PRD基本設計書A9コンセプトマップサイトマップワイヤーフレームA10イメージスケールムードボードビジュアルデザインカンプA11コンセプトムービープロトタイピングA12受容性評価ユーザビリティ評価②：ユーザー要求事項の明確化①：利用状況の把握と明示④：要求事項に対する設計の評価③：ユーザーの要求事項を満足させる設計による解決策の作成適切な段階への反復要求事項を満たしている⓪：人間中心設計プロセスの計画リサーチ発見デザインテストA13ヒューリスティック法参考： HCD専門資格コンピタンスマップ（ 2022年度）を参考に筆者による加筆
| CONFIDENTIAL 40それぞれのラフをどこで使うのか アジャイル開発におけるプロセス 例えば、アジャイル開発におけるプロセスの場合。 MVP特定仮説立案検証計画 検証評価価値探索（正しいものを探す）アジャイル開発（正しくつくる）MVP検証スプリントプランニングスプリント開発スプリントレビュースプリントレトロスペクティブ開発計画参考： 市谷聡啓 (著) 正しいものを正しくつくる プロダクトをつくるとはどういうことなのか、あるいはアジャイルのその先について (2019)を参考に筆者による加筆
| CONFIDENTIAL 41それぞれのラフをどこで使うのか アジャイル開発におけるプロセス 例えば、アジャイル開発におけるプロセスの場合。 MVP特定仮説立案検証計画 検証評価価値探索（正しいものを探す）アジャイル開発（正しくつくる）MVP検証スプリントプランニングスプリント開発スプリントレビュースプリントレトロスペクティブ開発計画参考： 市谷聡啓 (著) 正しいものを正しくつくる プロダクトをつくるとはどういうことなのか、あるいはアジャイルのその先について (2019)を参考に筆者による加筆概念レイヤー情報設計レイヤービジュアルレイヤー
| CONFIDENTIALラフとGenerative AI 42
| CONFIDENTIAL 43ラフとGenerative AI Generative AIツールの増加 昨今Generative AIツールが増えている。 UIを生成するツールも増えてきているが、これらがラフをつくることをどう変えるのか。 Galileo AIVisilyChat GPTAutodesignerMidjourneyFramer
| CONFIDENTIAL 44ラフとGenerative AI Autodesiger：生成例① サービス概要を伝えると、瞬時にそれっぽいサービスの主要画面を生成してくれたり、 ビジュアルを細かく伝えると、伝えた内容に近いアウトプットを生成してくれる。
| CONFIDENTIAL 45ラフとGenerative AI Autodesiger：生成例② サービス概要を伝えると、瞬時にそれっぽいサービスの主要画面を生成してくれたり、 ビジュアルを細かく伝えると、伝えた内容に近いアウトプットを生成してくれる。
| CONFIDENTIAL 46ラフとGenerative AI Autodesiger：生成例③ 一方でサービスにおける機能の指定などをしても、反映されたものにはならない。
| CONFIDENTIAL 47ラフとGenerative AI 個人的な所感 いくつかサービスを触ってみたところ、text to UIだとまだビジュアルデザインにおける生成がメインとなっているように思えた。 （一部ワイヤーフレームも生成可能） 概念レイヤー情報設計レイヤービジュアルレイヤーUIデザインA BCビジュアルデザインにおける生成
| CONFIDENTIAL 48ラフとGenerative AI 個人的な所感 今後それぞれのレイヤーにおける生成が可能となれば、今日話していた内容や我々の業務は大きく変わるかもしれない。 概念レイヤー情報設計レイヤービジュアルレイヤーUIデザインA BC全てのレイヤーにおける生成
| CONFIDENTIALさいごに 49
| CONFIDENTIAL 50YUMEMIではデザイナーを積極採用中です！ カジュアル雑談会（新卒） リード・UIデザイナー（中途）
| CONFIDENTIAL 51Thank you !
yutaromurakami
uxaustralia
ashapiro
shoty_k2
littlebusters
uxevents
transit_kix
usagimaru
aicocco
onf
lovchikov
maggiecrowley
tammielis
lara
marktimemedia
eitanlees
chrislema
tammyeverts
nonsquared
zakiyama
keavy
trallard
dougneiner