2014年7月5日 (土)、日本デザイン学会 第61回 春季研究発表（福井工業大学）で口頭発表したときのスライです。 日本デザイン学会第61回春季研究発表大会 http://www.fukui-ut.ac.jp/ut/des/jssd2014/

1. 2014.7.5
日本デザイン学会 第61回春季研究発表大会
坂本貴史
モバイルデザインにおける
情報アーキテクチャパターン

2. 坂本貴史
ネットイヤーグループ所属
UXデザイナー
HCD-Net 評議員
IA Institute, IxDA, UXPA メンバー
OpenUM プロジェクト発足
寄稿・講演多数
著書『IAシンキング』ほか
@bookslope

4. はじめに
モバイルにおけるユーザー体験
ユーザー体験の構造化
モバイルのIAパターン
モバイルのIAパターンの適用
モバイルの設計方針
モバイルのUIパターン
まとめ
発表内容

5. 17.5
35
52.5
70
日経BPコンサルティング2013年7月調べ
スマホ利用率 60%
普及率 28.2%
流通マネー 4兆円
15∼24歳
総人口比における普及率
年間総額
スマートフォンの普及

6. 利用状況が異なる
画面が小さい
利用状況を可視化する必要がある
表示する情報の優先順位を決める必要がある
モバイルにおけるユーザー体験

7. ステージ
ユーザー
コンテクスト
ビジネス
アクション
エモーション
どういう状況か
誰が関係するか
場所や環境
製品やサービス
何をしているか
どう感じるか
1 ユーザー体験の構造化

8. 課題分析やビジネス機会の開発手法

9. 課題分析やビジネス機会の開発手法
ステージ
ユーザーシナリオ
エモーション
デバイス
要求事項

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

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

12. 表示
遷移
関係性
タブビュー フィルタビュー
ハブ&スポーク 弁当箱
マトリョーシカ 階層型
モバイルにおけるIAパターン

13. タブビュー 並列の情報群をタブ切り替えで表示
概念図 画面サンプル

14. フィルタビュー 同画面内で並び替え表示したもの
概念図 画面サンプル

15. 弁当箱 1つの画面内に、さまざまな情報を表示したもの（遷移しない）
概念図 画面サンプル

16. ハブ&スポーク 1つの画面から、さまざまな行き先に遷移するもの
概念図 画面サンプル

17. マトリョーシカ 入れ子になった構造のもの
概念図 画面サンプル

18. 概念図
階層型 親子構造をもつもの
画面サンプル

19. アプリケーション
マーケティングキャンペーン
コンテンツソース
ブランドプレゼンス
会社のウェブサイトなど。ブランド価値やメッ
セージを伝えることがデザインゴール。
特定の割引を宣伝するランディングページなど。
興味を持たせ購買意欲を刺激することがデザインゴール。
ニュースや記事サイトなど。何度もそのサイト
に訪れたくなるようなコンテンツを提供するこ
とがデザインゴール。
ソフトウェアアプリケーションなど。他ではできないこ
とをユーザができるようにすることがデザインゴール。

20. シングルカラムで構成する
画面の表示順序は、優先順位に比例する
配置換え・隠す・削除するなどの編集
モバイルの設計方針

21. シングルカラムで構成する

22. 画面の表示順序は、優先順位に比例する

23. 配置換え・隠す・削除するなどの編集
PC向け モバイル向け

24. 配置換え・隠す・削除するなどの編集
PC向け モバイル向け

25. モバイルのUIパターン
ナビゲーション メイン画面やそのメニュー表示パターン
フォーム サインインや登録、チェックアウトなどの表示パターン
テーブル・リスト 表やリスト、画像付きリストの表示パターン
検索・ソート・フィルタ テキスト検索とその候補、並び替えや検索条件での絞り込み表示パターン
ツール ツールバーやアクションボタンの表示パターン
グラフ 棒グラフや円グラフ、データをもとにしたグラフ表示パターン
誘導 モーダルウィンドウやバルーン、チップス表示パターン
フィードバック・アフォーダンス レスポンスの表示でエラーや確認の表示パターン
ヘルプ ガイドやコーチ、ツアーなどの表示パターン
アンチパターン パターンに当てはまらない表示パターン

26. ナビゲーション 主にメニューリストなどのメニュー表示された要素
画面サンプル

27. フォーム 登録フォームなどでのインプット要素
画面サンプル

28. テーブル・リスト 表やリストなどで値を表示した要素
画面サンプル

29. 検索・ソート・フィルタ 検索手段や並び替え、絞り込みなどの要素
画面サンプル

30. ツール アクションをともなうボタンやリンク要素
画面サンプル

31. グラフ 棒グラフや円グラフなどのグラフ要素
画面サンプル

32. 誘導 注意喚起を行い、次にすることを明示する要素
画面サンプル

33. フィードバック・アフォーダンス エラーや完了などを明示する要素
画面サンプル

34. ヘルプ エラーや完了などを明示する要素
画面サンプル

35. アンチパターン 以上のパターンに含まれない要素
画面サンプル

36. まとめ
小さい画面内に表示する情報は、サイト
のタイプ別に目的や 手段が異なり、モバ
イル向けに整理すると、表示・遷移・関
係性から提供手段を選ぶことができる。
IAパターン
早期にモバイル向けの編集方針を決める
ことで、PC サイトの流用や汎用化では
なく、モバイルに適したコンテンツや
サー ビスを提供することができる。
UIパターン
問題解決としてのデザインパターンの有効性

37. Unger, R.: UX デザインプロジェクトガイド
Hinman, R.: モバイルフロンティア
カットシステム (2011)
丸善出版 (2013)
Theresa Neil.: モバイルデザインパターン
オライリー・ジャパン (2012)
参考文献

38. 日本デザイン学会 第61回春季研究発表大会
坂本貴史
bookslope@gmail.com
@bookslope