Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bridge
UXからUIへ
宮村和実
ネットイヤーグループ株式会社(2001年∼)
デジタルマーケティングの支援において、様々
な企業のウェブサイト、サービスにおけるUX/
情報デザイン、評価に幅広く携わる。
社内における新入社員・既存社員のUXデザイン
教育にも尽力している。
宮...
伝えたいこと
• スキルアップのために、UXデザイナーにとって
必要なスキルセット群をシンプルに捉える
• デザインプロセスの中でUXデザイナーにとって
大事な力はなにか?
前提
(あくまでもネットイヤーグループでの

僕の知見によっています)
(事業会社サイドではなく

受託でクライアントサービスをしている立場からの話です)
(UXデザイナーといっても幅広いので

ギャップはあると思いますがご了承ください)
(U...
Skill set
• デジタルマーケティング領域に関わる職種は、ど
の職種でも求められるスキルセットが幅広く、
大量
• しかも求められるスキルが被っている
USER
EXPERIENCE

DESIGN
INFORMATION

ARCHITECTURE
VISUAL DESIGN
INTERACTION

DESIGN
INDUSTRIAL

DESIGN
CONTENT CREATION

(...
HCD-Netによる人間中心設計のコンピタンスマップ(2012年)
能力視点の例
人間中心設計専門家としてのコンピタンスマップには

UXデザイナーが求められる能力が多く含まれている。
ユーザーエクスペリエンスデザインプロセスのタスクには

UXデザイナーが役割を担うタスクが多く含まれている。
デザインプロセス/タスク視点の例
途方に暮れる
デザインプロセス視点で
どのように力を伸ばすか?
をシンプルに考える
UX設計 UI設計リサーチ
リサーチとは?
• どんな人がどんな体験をしているのか?
• そこにどのようなニーズや課題があるのか?
 を発見するインプット&課題分析領域。
UX設計とは?
• だれが?
• どのような体験をするのか?
• それを実現するための要件は何か?
 を決める概念的な設計領域。
UI設計とは?
主にUX視点の要件ならびにKPIを中心としなが
ら、様々な設計要件を満たす具体的な構造・画面
設計領域。
UX設計 UI設計リサーチ
ユーザー定義
UXシナリオ
構造設計
画面設計
ユーザー調査
評価
主なタスク
UX設計 UI設計リサーチ
ユーザー定義
UXシナリオ
構造設計
画面設計
ユーザー調査
評価
理想的な学びは?
一気通貫で体験しながら学ぶことを繰り返す。
UX設計 UI設計リサーチ
ユーザー定義
UXシナリオ
構造設計
画面設計
ユーザー調査
評価
現実的には?
UI設計やリサーチのアシスタントから

OJT的に経験を積んでいくことが多い。
UX設計 UI設計リサーチ
ユーザー定義
UXシナリオ
構造設計
画面設計
ユーザー調査
評価
現実的には?
UX設計を任せられるように

なるのはその後。
なぜか?
UX設計 UI設計リサーチ
ユーザー定義
UXシナリオ
構造設計
画面設計
ユーザー調査
評価
具体か概念か + 要件が決まっているかどうか

の違い
!
設計要件が
決まっている
!
設計要件が
決まっていない
!
リサーチ要件が
決まってい...
概念レベルで整理し、
設計の要件・考えを見出すとは?
そもそもどうあるべきか?
UX設計は戦略的な作業
コンサルテーションの領域
クライアントの理解・共感を得て

方針として納得いただくように

形にしていく難しさ
UX設計 UI設計リサーチ
ユーザー定義
UXシナリオ
構造設計
画面設計
ユーザー調査
評価
UX系採用応募者
リサーチや評価の経験を専門的に積んだ人

UI設計の経験を専門的に積んだ人

が多い。
UX設計 UI設計リサーチ
ユーザー定義
UXシナリオ
構造設計
画面設計
ユーザー調査
評価
UXデザイナーのコア
リサーチやUI設計も当然役割・タスクを担うが

コアはUX設計。
UX設計 UI設計リサーチ
ユーザー定義
UXシナリオ
構造設計
画面設計
ユーザー調査
評価
UXリサーチャーのコア UIデザイナーのコアUXデザイナーのコア
UX設計 UI設計リサーチ
アシスタント アシスタント
ユーザー調査 評価
メイン
アシスタント アシスタント
ユーザー定義 UXシナリオ
メイン
ベテラン
メイン
ベテラン
アシスタント アシスタント
構造設計 画面設計
メイン
ベテラン
メ...
UX設計 UI設計リサーチ
アシスタント アシスタント
ユーザー調査 評価
アシスタント アシスタント
ユーザー定義 UXシナリオ
アシスタント アシスタント
構造設計 画面設計
未経験からの初年度
UX設計 UI設計リサーチ
アシスタント アシスタント
ユーザー調査 評価
メイン
アシスタント アシスタント
ユーザー定義 UXシナリオ
アシスタント アシスタント
構造設計 画面設計
メインメイン
2年目
メインメインメイン
UX設計 UI設計リサーチ
アシスタント アシスタント
ユーザー調査 評価
メイン
アシスタント アシスタント
ユーザー定義 UXシナリオ
アシスタント アシスタント
構造設計 画面設計
メインメイン
3年目
メインメインメイン
UX設計 UI設計リサーチ
アシスタント アシスタント
ユーザー調査 評価
メイン
アシスタント アシスタント
ユーザー定義 UXシナリオ
メインメイン
アシスタント アシスタント
構造設計 画面設計
メイン
ベテラン
メイン
ベテラン
メイン...
※いまのはあくまでもイメージです
新人
例えば先ほどのイメージで

どうスキルアップするかを計画する。
経験者
自分が足りていない領域はどこか?

そこを伸ばすべきか?

強みとして伸ばすべき領域はどこか?

より詳細に分解して考える。
ベテラン
経験者で考えること

+

新人の育成の計画&目標設定
UXデザイナーの一番大事な力
UX設計 UI設計リサーチ
Bridge
UX設計 UI設計リサーチ
具体的なファクトを概念的なUX設計へ
リサーチ  UX設計へのBridge
• (そもそもの前提として)UX設計のために必要な情
報をリサーチできるように計画すること
• リサーチして得たファクトを分析しUX設計に活かす
こと
• 沢山の情報を整理し「重要な」「特徴的な」UX要素
...
そもそもUX設計自体が
リサーチ  UI設計へのBridge
UX設計 UI設計リサーチ
概念的なUX設計を具体的なUI設計へ
UX設計  UI設計へのBridge
• UI設計のために必要なUX視点での要件を見
出すこと
• 設計の幹となる考えを、設計方針としてまと
めること
UX設計 UI設計リサーチ
設計の方針(考えやコンセプト)が

特に重要なBridge要素
設計方針
設計方針とは?
!
設計のコンセプトであり、
設計のポイントであり、
どのような設計となるのかを示した概要図
イメージ
設計コンセプト
!
今を感じ、発見を楽しむ。


旬な情報に触れやすく、
目的とする情報を探しやすいことを両立。
必要な情報を得る流れで、
その商業施設エリアで過ごす様々な価値があることに気づき、
価値発見をウェブでもリアルでも楽しめ...
イメージ
設計のポイント
!
• 最新のイベント、店舗、商業施設の状況は、視覚的に眺めながらウォッ
チできるようにする(ホーム中心)。
• 商業施設エリアの来訪目的のために調べる情報は、「種別によるカテ
ゴリ」「目的によるカテゴリ」「タグ」の3...
イメージ
概要図
ホーム
!
!
目的軸種別軸
タグ軸 キーワード検索
商業施設エリア
の概要
楽しみ方 イベント 店舗 エリアマップ アクセス
検索エンジン
ソーシャル
検索エンジン
ソーシャル
イメージ
詳細な設計方針
シナリオから導き出された
UX要件
具体的な設計方針 現状 実現に向けた検討課題
複数の視点でフラットに情報
を探す
ホームに「種別」「目的」「タグ」の3つの探索軸を
用意する
探索軸と他要素とのプラ
イオリティの検討...
設計の幹となる考えがなければ、
UI設計は拠り所のない、
意味を持たない存在でしかない。
いきなりWFは描けない

(ただ描くことはできるが)
社内の入社・既存社員対象

UXデザイン教育の受講者の声
「設計の方針、コンセプトをまとめる

ことが一番むずかしい」
言い換えれば…
「コンセプトを立てられますか?」
ということ。
ファクトから
仮説、アイディアを組み上げる力が
Bridgeする部分においてとても大事。
仮説力、アイディア力を高めるために、
UXデザインに関連したグループワークを
沢山やっています。
Bridge
UXからUIへ
Thank you!
Bridge UXからUIへ
Bridge UXからUIへ
Upcoming SlideShare
Loading in …5
×

Bridge UXからUIへ

1,076 views

Published on

UX Sketch 第三回「UXデザイナーのスキルセット」というテーマに合わせてプレゼンしたスライドです。

http://mtl.connpass.com/event/18884/

UXデザイナーとしてこれから力をつけていきたい人向けに、幅広いスキルセットの話をシンプルに捉えてスキルアップを考えようという話と、デザインプロセスの中でUXデザイナーにとって大事な力はなにか?という話をしています。

Published in: Design
  • Be the first to comment

Bridge UXからUIへ

  1. 1. Bridge UXからUIへ 宮村和実
  2. 2. ネットイヤーグループ株式会社(2001年∼) デジタルマーケティングの支援において、様々 な企業のウェブサイト、サービスにおけるUX/ 情報デザイン、評価に幅広く携わる。 社内における新入社員・既存社員のUXデザイン 教育にも尽力している。 宮村和実
 UX Designer
 Information Architect
  3. 3. 伝えたいこと • スキルアップのために、UXデザイナーにとって 必要なスキルセット群をシンプルに捉える • デザインプロセスの中でUXデザイナーにとって 大事な力はなにか?
  4. 4. 前提 (あくまでもネットイヤーグループでの
 僕の知見によっています) (事業会社サイドではなく
 受託でクライアントサービスをしている立場からの話です) (UXデザイナーといっても幅広いので
 ギャップはあると思いますがご了承ください) (UXデザイナーとして
 これから力をつけていきたい人向けです)
  5. 5. Skill set • デジタルマーケティング領域に関わる職種は、ど の職種でも求められるスキルセットが幅広く、 大量 • しかも求められるスキルが被っている
  6. 6. USER EXPERIENCE
 DESIGN INFORMATION
 ARCHITECTURE VISUAL DESIGN INTERACTION
 DESIGN INDUSTRIAL
 DESIGN CONTENT CREATION
 (Text, Data, Graphiics) MECHANICAL
 ENGINEERING ELECTRIAL
 ENGINEERING Signage Info Viz Navigation INTERFACE DESIGN USABILITY
 ENGINEERING Interactive
 Environments Controls Ubicomp ARCHITECTURE HUMAN-COMPUTER
 INTERACTION 領域視点の例 ユーザーエクスペリエンスデザインが内包する領域は、
 UXデザイナーが関わる領域を多く内包している。 The Disciplines of User Experience by Dan Saffer
 http://www.kickerstudio.com/ 2008/12/the-disciplines-of- user-experience/
  7. 7. HCD-Netによる人間中心設計のコンピタンスマップ(2012年) 能力視点の例 人間中心設計専門家としてのコンピタンスマップには
 UXデザイナーが求められる能力が多く含まれている。
  8. 8. ユーザーエクスペリエンスデザインプロセスのタスクには
 UXデザイナーが役割を担うタスクが多く含まれている。 デザインプロセス/タスク視点の例
  9. 9. 途方に暮れる
  10. 10. デザインプロセス視点で どのように力を伸ばすか? をシンプルに考える
  11. 11. UX設計 UI設計リサーチ
  12. 12. リサーチとは? • どんな人がどんな体験をしているのか? • そこにどのようなニーズや課題があるのか?  を発見するインプット&課題分析領域。
  13. 13. UX設計とは? • だれが? • どのような体験をするのか? • それを実現するための要件は何か?  を決める概念的な設計領域。
  14. 14. UI設計とは? 主にUX視点の要件ならびにKPIを中心としなが ら、様々な設計要件を満たす具体的な構造・画面 設計領域。
  15. 15. UX設計 UI設計リサーチ ユーザー定義 UXシナリオ 構造設計 画面設計 ユーザー調査 評価 主なタスク
  16. 16. UX設計 UI設計リサーチ ユーザー定義 UXシナリオ 構造設計 画面設計 ユーザー調査 評価 理想的な学びは? 一気通貫で体験しながら学ぶことを繰り返す。
  17. 17. UX設計 UI設計リサーチ ユーザー定義 UXシナリオ 構造設計 画面設計 ユーザー調査 評価 現実的には? UI設計やリサーチのアシスタントから
 OJT的に経験を積んでいくことが多い。
  18. 18. UX設計 UI設計リサーチ ユーザー定義 UXシナリオ 構造設計 画面設計 ユーザー調査 評価 現実的には? UX設計を任せられるように
 なるのはその後。
  19. 19. なぜか?
  20. 20. UX設計 UI設計リサーチ ユーザー定義 UXシナリオ 構造設計 画面設計 ユーザー調査 評価 具体か概念か + 要件が決まっているかどうか
 の違い ! 設計要件が 決まっている ! 設計要件が 決まっていない ! リサーチ要件が 決まっている 具体的 概念的 具体的
  21. 21. 概念レベルで整理し、 設計の要件・考えを見出すとは?
  22. 22. そもそもどうあるべきか?
  23. 23. UX設計は戦略的な作業
  24. 24. コンサルテーションの領域
  25. 25. クライアントの理解・共感を得て
 方針として納得いただくように
 形にしていく難しさ
  26. 26. UX設計 UI設計リサーチ ユーザー定義 UXシナリオ 構造設計 画面設計 ユーザー調査 評価 UX系採用応募者 リサーチや評価の経験を専門的に積んだ人
 UI設計の経験を専門的に積んだ人
 が多い。
  27. 27. UX設計 UI設計リサーチ ユーザー定義 UXシナリオ 構造設計 画面設計 ユーザー調査 評価 UXデザイナーのコア リサーチやUI設計も当然役割・タスクを担うが
 コアはUX設計。
  28. 28. UX設計 UI設計リサーチ ユーザー定義 UXシナリオ 構造設計 画面設計 ユーザー調査 評価 UXリサーチャーのコア UIデザイナーのコアUXデザイナーのコア
  29. 29. UX設計 UI設計リサーチ アシスタント アシスタント ユーザー調査 評価 メイン アシスタント アシスタント ユーザー定義 UXシナリオ メイン ベテラン メイン ベテラン アシスタント アシスタント 構造設計 画面設計 メイン ベテラン メイン ベテランベテラン メイン ベテラン スキルアップのシンプルな階層
  30. 30. UX設計 UI設計リサーチ アシスタント アシスタント ユーザー調査 評価 アシスタント アシスタント ユーザー定義 UXシナリオ アシスタント アシスタント 構造設計 画面設計 未経験からの初年度
  31. 31. UX設計 UI設計リサーチ アシスタント アシスタント ユーザー調査 評価 メイン アシスタント アシスタント ユーザー定義 UXシナリオ アシスタント アシスタント 構造設計 画面設計 メインメイン 2年目 メインメインメイン
  32. 32. UX設計 UI設計リサーチ アシスタント アシスタント ユーザー調査 評価 メイン アシスタント アシスタント ユーザー定義 UXシナリオ アシスタント アシスタント 構造設計 画面設計 メインメイン 3年目 メインメインメイン
  33. 33. UX設計 UI設計リサーチ アシスタント アシスタント ユーザー調査 評価 メイン アシスタント アシスタント ユーザー定義 UXシナリオ メインメイン アシスタント アシスタント 構造設計 画面設計 メイン ベテラン メイン ベテラン メイン 4∼5年目 ベテラン
  34. 34. ※いまのはあくまでもイメージです
  35. 35. 新人 例えば先ほどのイメージで
 どうスキルアップするかを計画する。
  36. 36. 経験者 自分が足りていない領域はどこか?
 そこを伸ばすべきか?
 強みとして伸ばすべき領域はどこか?
 より詳細に分解して考える。
  37. 37. ベテラン 経験者で考えること
 +
 新人の育成の計画&目標設定
  38. 38. UXデザイナーの一番大事な力
  39. 39. UX設計 UI設計リサーチ
  40. 40. Bridge
  41. 41. UX設計 UI設計リサーチ 具体的なファクトを概念的なUX設計へ
  42. 42. リサーチ  UX設計へのBridge • (そもそもの前提として)UX設計のために必要な情 報をリサーチできるように計画すること • リサーチして得たファクトを分析しUX設計に活かす こと • 沢山の情報を整理し「重要な」「特徴的な」UX要素 をピックアップすること
  43. 43. そもそもUX設計自体が リサーチ  UI設計へのBridge
  44. 44. UX設計 UI設計リサーチ 概念的なUX設計を具体的なUI設計へ
  45. 45. UX設計  UI設計へのBridge • UI設計のために必要なUX視点での要件を見 出すこと • 設計の幹となる考えを、設計方針としてまと めること
  46. 46. UX設計 UI設計リサーチ 設計の方針(考えやコンセプト)が
 特に重要なBridge要素 設計方針
  47. 47. 設計方針とは? ! 設計のコンセプトであり、 設計のポイントであり、 どのような設計となるのかを示した概要図
  48. 48. イメージ 設計コンセプト ! 今を感じ、発見を楽しむ。 
 旬な情報に触れやすく、 目的とする情報を探しやすいことを両立。 必要な情報を得る流れで、 その商業施設エリアで過ごす様々な価値があることに気づき、 価値発見をウェブでもリアルでも楽しめるようなサイトへ。
  49. 49. イメージ 設計のポイント ! • 最新のイベント、店舗、商業施設の状況は、視覚的に眺めながらウォッ チできるようにする(ホーム中心)。 • 商業施設エリアの来訪目的のために調べる情報は、「種別によるカテ ゴリ」「目的によるカテゴリ」「タグ」の3軸で、サイトのどこから でもすぐに探索行動に移ることができる。 • 複数の施設横断で情報を探せる。 • 情報は施設に縛り付けず、商業施設全体でフラットに扱い、後から目 的の店舗やイベントがどの施設・どの場所にあるのかを知る流れとす る。 • 商業施設エリアの体験価値を理解できるコンテンツへ、適切な文脈で 誘導し、楽しみ方の発見に繋げる。
  50. 50. イメージ 概要図 ホーム ! ! 目的軸種別軸 タグ軸 キーワード検索 商業施設エリア の概要 楽しみ方 イベント 店舗 エリアマップ アクセス 検索エンジン ソーシャル 検索エンジン ソーシャル
  51. 51. イメージ 詳細な設計方針 シナリオから導き出された UX要件 具体的な設計方針 現状 実現に向けた検討課題 複数の視点でフラットに情報 を探す ホームに「種別」「目的」「タグ」の3つの探索軸を 用意する 探索軸と他要素とのプラ イオリティの検討が必要 下層ページにおいても、3つの探索軸をすぐに呼び出 せる or その場で使えるエリアを用意する 3つの探索軸は施設・店舗・イベントを横断的に探索 できるものとする 軸内の項目を選択したらざっと結果を一覧で俯瞰して 見ることができる。条件の絞込はその後可能とする △ コンパクトなUI表現の検 討が必要 検索機能の拡充と、メタ データの追加が必要 検索結果のレスポンス向 上が必要
  52. 52. 設計の幹となる考えがなければ、 UI設計は拠り所のない、 意味を持たない存在でしかない。
  53. 53. いきなりWFは描けない
 (ただ描くことはできるが)
  54. 54. 社内の入社・既存社員対象
 UXデザイン教育の受講者の声 「設計の方針、コンセプトをまとめる
 ことが一番むずかしい」
  55. 55. 言い換えれば… 「コンセプトを立てられますか?」 ということ。
  56. 56. ファクトから 仮説、アイディアを組み上げる力が Bridgeする部分においてとても大事。
  57. 57. 仮説力、アイディア力を高めるために、 UXデザインに関連したグループワークを 沢山やっています。
  58. 58. Bridge UXからUIへ
  59. 59. Thank you!

×