2014年3月29日 (土) に開催したセミナーイベント CSS Nite LP33 UI /UX セッションで講演した「Bridge Builder: IAシンキングで進める体験とコンテンツの構造化」のスライドです。 CSS Nite LP, Disk 33「UI/UX」（2014年3月29日開催） http://cssnite.jp/lp/lp33/ 講演ログを Storify でまとめてみましたので、こちらもご覧ください。 CSS Nite LP33 UI/UX session #1 Bridge Builder - Storify https://storify.com/bookslope/css-nite-lp33-ui-ux-session-1

1. BridgeBuilder
坂本貴史
2014.3.29
IAシンキングで進める体験とコンテンツの構造化
CSS Nite LP33 #cssnite_lp33
by Kamil Porembiński

2. グラフィックデザイナー出身
ネットイヤーグループ参画
デジタルマーケティングエージェンシー
HCD-Net 評議員
IA Institute, IxDA, UXPA メンバー
OpenUM プロジェクト発足
寄稿・講演多数
著書『IAシンキング』ほか
坂本貴史
@bookslope

3. IA Thinking
人間中心デザインに基づいた、情報アーキテクチャの
分野におけるソリューションを提供するための手法。

4. ブリッジビルダーとは
ジャーニーマップの要求整理
タッチポイントのデザイン
デザインパターンの活用

5. ブリッジビルダーとは
ジャーニーマップの要求整理
タッチポイントのデザイン
デザインパターンの活用

6. by Peter Morville

7. ユーザー コンテンツ
戦略 戦術
プラットフォーム チャネル
研究 実践

8. お見合い になりがちなさまざまな間を取り持つ役割。
その関係性を構築すること。
BridgeBuilder

9. IAインフォメーションアーキテクト

10. UX UIユーザーエクスペリエンス ユーザーインターフェース

11. 研究分野現象 実践
User Experience White Paper
ユーザーエクスペリエンス白書

12. UXD
User Experience White Paper
ユーザーエクスペリエンス白書

13. あなたは何をつくりますか?
What do you make?

14. サービスデザインプロダクトデザイン
・ステークホルダーマップ
・ジャーニーマップ
・サイトやアプリ
・広告

15. プロダクトエクスペリエンス サービスエクスペリエンス
PX SX

16. あなたは何視点を持っていますか?
What perspective do you have?

17. ブリッジビルダーとは
ジャーニーマップの要求整理
タッチポイントのデザイン
デザインパターンの活用

19. 企画
仮説シナリオの開発
分析
チャネル横断の動線分析
Customer Experience Journey Map
カスタマーエクスペリエンスジャーニーマップ

20. サービス提供者 クロスチャネル状況の可視化

21. 現状課題の可視化 制作者

22. エモーション
ステークホルダー
ユーザーフロー
ステージ

23. 住宅ローンのジャーニーマップ
ステージ
ユーザーフロー
コンテンツ・機能
ビジネス課題
改善点
ユーザー課題

25. ステージ
ユーザーシナリオ
エモーション
デバイス
要求事項

26. タッチ
ポイント
クロス
チャンネル
マルチ
スクリーン
網羅性は重要ではない

27. 要求事項を整理するためのツール

28. ブリッジビルダーとは
ジャーニーマップの要求整理
タッチポイントのデザイン
デザインパターンの活用

29. タッチポイント

30. 登録に時間がかかる
登録メリットの説明
会員登録数
登録ページ
ISSUE
EMOTION
KPI

31. プロトタイピング
ユーザーシナリオにある画面
その画面の目的は明確
全面リニューアルとは異なる

33. 表層
骨格
構造
要件
戦略
ビジュアルデザイン
ナビゲーション
デザイン
インタラクション
デザイン
機能仕様
インターフェース
デザイン
情報デザイン
コンテンツ要求
情報アーキテクチャ
ユーザーニーズ
サイトの目的
逆工程

35. 既会員向け新規会員向け
専用アカウント向け

37. 現状を調査し情報を可視化したうえで、目的や課題を
明らかにし新たな情報の提供方法を構築すること。
IA Thinking

38. タッチポイント

39. 現状の課題
モバイル向けレイアウト
文字が多く読みにくい
読んだら終わりの利用方法

40. プロトタイピング
モバイル向けレイアウト
文字サイズを大きく読みやすく
ブックマークや共有の利用方法

41. Prototyping
デザインは仮説です。その仮説が合っているか間違って
いるかを見極めるのが評価であり、分析につながります。

42. ブリッジビルダーとは
ジャーニーマップの要求整理
タッチポイントのデザイン
デザインパターンの活用

44. Design Pattern
ノンデザイナーの仮説を手助けするツール「デザインパター
ン」があります。アイデア具現化の手助けをしてくれる。

45. IAパターン UIパターン

46. タブビュー
フィルタビュー
ハブ・スポーク
弁当箱
マトリョーシカ
階層型
IAパターン

47. タブビュー フィルタビュー ハブ・スポーク 弁当箱

49. ナビゲーション
フォーム
テーブル・リスト
検索・ソート・フィルタ
ツール
グラフ
誘導
フィードバック・アフォーダンス
ヘルプ
アンチパターン
UIパターン

51. RWD

54. 具現化
表層
骨格
構造
要件
戦略
ビジュアルデザイン
ナビゲーション
デザイン
インタラクション
デザイン
機能仕様
インターフェース
デザイン
情報デザイン
コンテンツ要求
情報アーキテクチャ
ユーザーニーズ
サイトの目的

55. IA Thinking
現状を調査し情報を可視化したうえで、目的や課題を
明らかにし新たな情報の提供方法を構築すること。

56. 異なる視点と共通言語
ジャーニーマップと要求整理
仮説としてのプロトタイピング
具現化のためのデザインパターン

57. by Kamil Porembiński
坂本貴史
@bookslope
www.bookslope.jp/blog/
Thank you!

58. 4.8 IN STORE