Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

ラフと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 2 ゆめみメンバー
 自己紹介 村上 雄太郎 Yutaro Murakami 株式会社ゆめみ

    リード・プロダクトデザイナー HCD-Net認定 人間中心設計スペシャリスト about 新卒でミャンマーで事業を展開する日系企業に入社。現地人向けメディアやサービスの開発・ 立ち上げに従事。 帰国後、株式会社ゆめみにプロダクトデザイナーとして入社。金融、メーカー、小売など様々な 業界のデジタルサービスにおけるコンセプトデザインやUIデザインなどを中心に携わる。 ゆめみ内ではサービス開発・推進にも携わっている。 Social utaromurakami
  2. | CONFIDENTIAL 14 イントロダクション | 話題提供
 roughの語源
 参考:語源英和辞典 ruh でこぼこの

    整えられていない ruhaz でこぼこの 手荒な  rough 荒っぽいさま 大まかなさま 形式ばらず、気取らないさま
  3. | CONFIDENTIAL 23 優れたラフについて考えてみる
 例えば:目的に応じた粒度や情報量がずれている場合
 デザイナー
 ボタンここにおくのか? 一覧ってこんな見せ方だっけ? 細かくつくってくれてるから 構造として捉えにくいな

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

  4. | CONFIDENTIAL 24 優れたラフについて考えてみる
 例えば:目的に応じた粒度や情報量が適切な場合
 デザイナー
 構造が把握しやすい! つくる
 (1~2時間)
 確認する


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

  5. | CONFIDENTIAL 27 UIデザイン時によく利用しているラフ
 ラフを使い分けるレイヤー
 よく利用しているラフの中で意識しているレイヤーが大きく3つある。
 オブジェクト 属性情報 アクション アーティスト

    名前 ジャンル 探す 選ぶ アルバム 名前 ジャンル 探す 選ぶ 曲 名前 ジャンル 探す 再生する 1.概念レイヤー 2.情報設計レイヤー ユーザー・ビジネスゴールとオブジェクトの関係性等を踏 まえて、それぞれの要求を満たす構造としての設計を行 う。 3.ビジュアルレイヤー サービスやプロダクトの中に存在する概念(=オブジェク ト)の抽出と関係性の整理を行う。 ヒラギノ角ゴ
 Typography Color レイアウトやカラー含むビジュアルデザインの検討を行う。
  6. | CONFIDENTIAL 28 UIデザイン時によく利用しているラフ
 1.概念レイヤー
 参考: Jeff Johnson , Austin

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

    B C 情報設計レイヤーやビジュアルレイヤーでのラフはよく利用されているように思うが、
 概念レイヤーのラフも利用できると、コミュニケーションが取りやすく、最適なUIをつくりやすくなる(気がする)。

  8. | CONFIDENTIAL 36 それぞれのラフをどこで使うのか
 UXの5段階モデル
 例えば、有名なJesse James GarretのUXの5段階モデルの場合。
 戦略 要件

    構造 骨格 表層 どのような見た目や動きが最適か 製品が組織のために何を達成したいの か、ユーザーのために何を達成したいの か どんな機能やコンテンツが必要か どんな構造やナビゲーションが最適か どんな遷移やレイアウトが最適か 各段階でやること 参考: Jesse James Garrett (著), ソシオメディア株式会社 (翻訳), 上野 学 (翻訳), 篠原 稔和 (翻訳) The Elements of User Experience ~5段階モデルで考える UXデザイン(2022)を参考に筆者による加筆
  9. | 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)を参考に筆者による加筆
  10. | CONFIDENTIAL 38 それぞれのラフをどこで使うのか
 人間中心設計(Human-Centered Design)
 例えば、人間中心設計の基本コンピタンスの場合。
 A 基本 コンピタンス

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

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

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

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