$30 off During Our Annual Pro Sale. View Details »

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

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

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

Yutaro Murakami

June 23, 2023
Tweet

More Decks by Yutaro Murakami

Other Decks in Design

Transcript

  1. | CONFIDENTIAL
    ラフとUIデザイン

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

    2023.06.23

    View Slide

  2. | CONFIDENTIAL 2
    ゆめみメンバー

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

    View Slide

  3. | CONFIDENTIAL 3
    目次

    1. イントロダクション

    2. 優れたラフについて考えてみる

    3. UIデザイン時によく利用しているラフ

    4. それぞれのラフをどこで使うのか

    5. ラフとGenerative AI

    6. さいごに


    View Slide

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

    4

    View Slide

  5. | CONFIDENTIAL 5
    会社紹介

    イントロダクション


    View Slide

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


    View Slide

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


    View Slide

  8. | CONFIDENTIAL 8

    View Slide

  9. | CONFIDENTIAL 9

    View Slide

  10. | CONFIDENTIAL 10
    話題提供

    イントロダクション


    View Slide

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

    ラフってなんだろう?


    View Slide

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

    ゆめみのプロダクトデザイナー

    ゆめみのプロダクトデザイナーは、事業やサービスにおける様々なデザインの対象を取り扱う。

    その中で優れたUIをつくるために、日々様々なラフを活用している。

    ビジネス・PdM支援
 ワークショップ
 概念(オブジェクト)
 ワイヤーフレーム
 UI

    モデリング

    A B
    C
    いっぱいある


    View Slide

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

    ラフとは

    参考:goo辞書
     1. 荒っぽいさま。

     2. 大まかなさま。

     3. 形式ばらず、気取らないさま。


    View Slide

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

    roughの語源

    参考:語源英和辞典
    ruh
    でこぼこの
    整えられていない
    ruhaz
    でこぼこの
    手荒な
     rough
    荒っぽいさま
    大まかなさま
    形式ばらず、気取らないさま

    View Slide

  15. | CONFIDENTIAL
    優れたラフについて

    考えてみる

    15

    View Slide

  16. | CONFIDENTIAL
    優れたUIをつくりたいのに、

    なぜ荒っぽい、大まかなものをつくっているんだろう

    16
    優れたラフについて考えてみる


    View Slide

  17. | CONFIDENTIAL
    デザイナーとして働きはじめた頃、デザイン業務におけるコミュニケーションや合意の仕方に悩んでいた。

    (のを思い出した)

    17
    優れたラフについて考えてみる

    デザイナーとして働き始めた頃の悩み


    View Slide

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

    こんな経験はありませんか?

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

    View Slide

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

    優れたラフとは、

    目的や階層に応じて

    適切な粒度・情報量で形づくられたもの


    View Slide

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

    例えば:目的に応じた粒度や情報量がずれている場合

    デザイナー

    構想段階での
    情報構造について、
    レビューがほしい
    他者


    View Slide

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

    例えば:目的に応じた粒度や情報量がずれている場合

    デザイナー

    つくる

    (2日)

    構想段階での
    情報構造について、
    レビューがほしい
    他者


    View Slide

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

    例えば:目的に応じた粒度や情報量がずれている場合

    デザイナー

    ボタンここにおくのか?
    一覧ってこんな見せ方だっけ?
    細かくつくってくれてるから
    構造として捉えにくいな
    つくる

    (2日)

    確認する

    構想段階での
    情報構造について、
    レビューがほしい
    他者


    View Slide

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

    例えば:目的に応じた粒度や情報量がずれている場合

    デザイナー

    ボタンここにおくのか?
    一覧ってこんな見せ方だっけ?
    細かくつくってくれてるから
    構造として捉えにくいな
    つくる

    (2日)

    確認する

    一覧の見せ方〇〇が
    いいんじゃない?
    そこじゃないですう ...
    構想段階での
    情報構造について、
    レビューがほしい
    他者


    View Slide

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

    例えば:目的に応じた粒度や情報量が適切な場合

    デザイナー

    構造が把握しやすい!
    つくる

    (1~2時間)

    確認する

    ツイート一覧 ツイート詳細
    マイページ
    余計な情報がない!
    ツイート詳細からも
    マイページにいけるのはどう?
    悩ましいですね。
    ペルソナのゴールを考えると〜〜
    構想段階での
    情報構造について、
    レビューがほしい
    他者


    View Slide

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

    優れたラフとは、

    目的や階層に応じて

    適切な粒度・情報量で形づくられたもの

    スピードやクオリティの

    向上につながる


    View Slide

  26. | CONFIDENTIAL
    UIデザイン時に

    よく利用しているラフ

    26

    View Slide

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

    ラフを使い分けるレイヤー

    よく利用しているラフの中で意識しているレイヤーが大きく3つある。

    オブジェクト 属性情報 アクション
    アーティスト
    名前
    ジャンル
    探す
    選ぶ
    アルバム
    名前
    ジャンル
    探す
    選ぶ

    名前
    ジャンル
    探す
    再生する
    1.概念レイヤー 2.情報設計レイヤー
    ユーザー・ビジネスゴールとオブジェクトの関係性等を踏
    まえて、それぞれの要求を満たす構造としての設計を行
    う。
    3.ビジュアルレイヤー
    サービスやプロダクトの中に存在する概念(=オブジェク
    ト)の抽出と関係性の整理を行う。
    ヒラギノ角ゴ

    Typography Color
    レイアウトやカラー含むビジュアルデザインの検討を行う。

    View Slide

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

    1.概念レイヤー

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

    View Slide

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

    2.情報設計レイヤー

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

    View Slide

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

    3.ビジュアルレイヤー

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

    View Slide

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

    ラフのためのテンプレート

    ゆめみではそれぞれのラフを素早く利用できるために、テンプレート化している。

    1.概念レイヤー 2.情報設計レイヤー
    アプリ・サイトマップ
    チェックリスト
    3.ビジュアルレイヤー
    オブジェクト指向分析
    コンセプトマップ
    YUMEMI Design Kit
    (スタイルガイドライン及びUIコンポーネント集)

    View Slide

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

    個人的なポイント①

    概念レイヤー
    情報設計レイヤー
    ビジュアルレイヤー
    UIデザイン
    A B
    C
    情報設計レイヤーやビジュアルレイヤーでのラフはよく利用されているように思うが、

    概念レイヤーのラフも利用できると、コミュニケーションが取りやすく、最適なUIをつくりやすくなる(気がする)。


    View Slide

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

    個人的なポイント②

    それぞれのレイヤーを行き来しながらUIデザインの制作を行う。

    ただ、目的に応じてどのレイヤーのラフを使うのかは適宜行っている。

    概念レイヤー
    情報設計レイヤー
    ビジュアルレイヤー
    UIデザイン
    A B
    C

    View Slide

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

    サービスやプロダクトという観点から考えると、

    デザイナーが普段よくつくっているデザインデータも

    そのサービスやプロダクトのラフ

    と言えるのかもしれない


    View Slide

  35. | CONFIDENTIAL 35
    それぞれのラフを

    どこで使うのか


    View Slide

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

    UXの5段階モデル

    例えば、有名なJesse James GarretのUXの5段階モデルの場合。

    戦略
    要件
    構造
    骨格
    表層
    どのような見た目や動きが最適か
    製品が組織のために何を達成したいの
    か、ユーザーのために何を達成したいの

    どんな機能やコンテンツが必要か
    どんな構造やナビゲーションが最適か
    どんな遷移やレイアウトが最適か
    各段階でやること
    参考: Jesse James Garrett (著), ソシオメディア株式会社 (翻訳), 上野 学 (翻訳), 篠原 稔和 (翻訳) The Elements of User Experience ~5段階モデルで考える UXデザイン(2022)を参考に筆者による加筆

    View Slide

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

    View Slide

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

    人間中心設計(Human-Centered Design)

    例えば、人間中心設計の基本コンピタンスの場合。

    A
    基本
    コンピタンス
    A1
    調査・評価
    設計能力
    A2
    ユーザー調査
    実施能力
    A3
    定性・定量データ分
    析能力
    A4
    現状のモデル化
    能力
    A5
    ユーザー体験の
    構想・提案能力
    A6
    新製品・新事業の
    企画提案能力
    A7
    ユーザー要求仕様
    作成能力
    A8
    製品・システム・
    サービスの要求仕

    作成能力
    A9
    情報構造の
    設計能力
    A10
    デザイン仕様
    作成能力
    A11
    プロトタイピング能

    A12
    ユーザーによる
    評価実施能力
    ②:ユーザー要求事項の
    明確化
    ①:利用状況の
    把握と明示
    ④:要求事項に
    対する設計の評価
    ③:ユーザーの要求事項
    を満足させる設計による
    解決策の作成
    適切な段階への反復
    要求事項を
    満たしている
    ⓪:人間中心設計
    プロセスの計画
    リサーチ
    発見
    デザイン
    テスト
    A13
    専門知識に基づく
    評価実施能力
    参考: HCD専門資格コンピタンスマップ( 2022年度)を参考に筆者による加筆

    View Slide

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

    View Slide

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

    アジャイル開発におけるプロセス

    例えば、アジャイル開発におけるプロセスの場合。

    MVP特定
    仮説立案
    検証計画 検証
    評価
    価値探索
    (正しいものを探す)
    アジャイル開発
    (正しくつくる)
    MVP検証
    スプリント
    プランニング
    スプリント
    開発
    スプリント
    レビュー
    スプリント
    レトロスペ
    クティブ
    開発計画
    参考: 市谷聡啓 (著) 正しいものを正しくつくる プロダクトをつくるとはどういうことなのか、あるいはアジャイルのその先について (2019)を参考に筆者による加筆

    View Slide

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

    アジャイル開発におけるプロセス

    例えば、アジャイル開発におけるプロセスの場合。

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

    View Slide

  42. | CONFIDENTIAL
    ラフとGenerative AI

    42

    View Slide

  43. | CONFIDENTIAL 43
    ラフとGenerative AI

    Generative AIツールの増加

    昨今Generative AIツールが増えている。

    UIを生成するツールも増えてきているが、これらがラフをつくることをどう変えるのか。

    Galileo AI
    Visily
    Chat GPT
    Autodesigner
    Midjourney
    Framer

    View Slide

  44. | CONFIDENTIAL 44
    ラフとGenerative AI

    Autodesiger:生成例①

    サービス概要を伝えると、瞬時にそれっぽいサービスの主要画面を生成してくれたり、

    ビジュアルを細かく伝えると、伝えた内容に近いアウトプットを生成してくれる。


    View Slide

  45. | CONFIDENTIAL 45
    ラフとGenerative AI

    Autodesiger:生成例②

    サービス概要を伝えると、瞬時にそれっぽいサービスの主要画面を生成してくれたり、

    ビジュアルを細かく伝えると、伝えた内容に近いアウトプットを生成してくれる。


    View Slide

  46. | CONFIDENTIAL 46
    ラフとGenerative AI

    Autodesiger:生成例③

    一方でサービスにおける機能の指定などをしても、反映されたものにはならない。


    View Slide

  47. | CONFIDENTIAL 47
    ラフとGenerative AI

    個人的な所感

    いくつかサービスを触ってみたところ、text to UIだとまだビジュアルデザインにおける生成がメインとなっているように思えた。

    (一部ワイヤーフレームも生成可能)


    概念レイヤー
    情報設計レイヤー
    ビジュアルレイヤー
    UIデザイン
    A B
    C
    ビジュアルデザインにおける生成 

    View Slide

  48. | CONFIDENTIAL 48
    ラフとGenerative AI

    個人的な所感

    今後それぞれのレイヤーにおける生成が可能となれば、今日話していた内容や我々の業務は大きく変わるかもしれない。


    概念レイヤー
    情報設計レイヤー
    ビジュアルレイヤー
    UIデザイン
    A B
    C
    全てのレイヤーにおける生成

    View Slide

  49. | CONFIDENTIAL
    さいごに

    49

    View Slide

  50. | CONFIDENTIAL 50
    YUMEMIではデザイナーを積極採用中です!

    カジュアル雑談会(新卒)
 リード・UIデザイナー(中途)


    View Slide

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

    View Slide