アイデアの独自の価値、Unique value proposition(UVP)を決めてある方向けのスライドです。 顧客に与える価値が具体的になっているアイデアに対して、ユーザーインターフェース、モックアップを作るための方法を紹介しています。 モックアップの作り方が分かる、作れる状態になることを目的としています。

1. アプリ･サービスのUI/UXの
モックアップ(ワイヤフレーム)の
簡単な描き方
http://www.spath.jp/

2. まえがき
• アイデアの独自の価値、Unique value
proposition(UVP)を決めてある方向けの
スライドです
• 顧客に与える価値が具体的になっているア
イデアに対して、ユーザーインターフェー
ス、モックアップを作るための方法を紹介
しています
• モックアップの作り方が分かる、
作れる状態になることを目的としています
© 2013 Actcat, Inc. All Rights Reserved 2

3. 目次
1. UI/UXとは？
2. UIの一例
3. Viewという概念
4. 代表格のインターフェイスパターン
5. 細部のインターフェイスパターン
6. ツールの選択
7. 実際に描く流れ
© 2013 Actcat, Inc. All Rights Reserved 3

4. UI/UXとは？
• ユーザとアプリ･サービスが触れる場が
User Interface
ユーザが受け取る価値･体験が、
User Experience
• 使い方が分からない機能は、
価値がありません
• アプリやサービスは
UI/UXをベースに考えましょう
© 2013 Actcat, Inc. All Rights Reserved 4

5. 2. UIの一例(スマホ or PCファースト)
© 2013 Actcat, Inc. All Rights Reserved 5

6. UIの一例(Facebook)
© 2013 Actcat, Inc. All Rights Reserved 6
Mobile, PC コンテンツはほぼ同様。
PC側はコアコンテンツ以外に、ナビゲーション、お知らせなどを常時表示可

7. UIの一例(Twitter)
© 2013 Actcat, Inc. All Rights Reserved 7
Mobile, PC コンテンツ･各ボタン配置共にほぼ同様。
優先度が低い扱いの情報もPC版では表示している程度

8. スマホファーストを提案
• 最もユーザが長時間触れる端末はPCから
スマホに移行が進む…と想定
• スマホ対応が必須に
• スマホを主軸にUI作成後、PCはスマホ版
をより便利にする程度が、主流になってく
るのでは。コスパは高い。
© 2013 Actcat, Inc. All Rights Reserved 8

9. 3. Viewという概念
© 2013 Actcat, Inc. All Rights Reserved 9

10. View Partsの組み合わせでUIは作られている
© 2013 Actcat, Inc. All Rights Reserved 10

11. 4. 代表格のインターフェイスパターン
=> Viewの組み合わせのパターン
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 11

12. ナビゲーションパターン
© 2013 Actcat, Inc. All Rights Reserved 12

13. タブバーパターン
© 2013 Actcat, Inc. All Rights Reserved 13

14. ユーティリティ / 没入
© 2013 Actcat, Inc. All Rights Reserved 14

15. 5. 細部のインターフェイスパターン
© 2013 Actcat, Inc. All Rights Reserved 15

16. パターンだけで本が出来ちゃう
• オススメ☆
© 2013 Actcat, Inc. All Rights Reserved 16

17. パターン多すぎ
• 細かなUIの作りこみはMVPには一旦不要
• ユーザビリティテストなどを通じて、
デザイナと共に構築していこう
• まずはシンプルな、MVPのための、
UIを描こう
© 2013 Actcat, Inc. All Rights Reserved 17

18. 6. ツールの選択
© 2013 Actcat, Inc. All Rights Reserved 18

19. ツールの選択
• 手書き
– 用紙を用意しましょう。チラシの裏でも構い
ません。罫線が引いてあるデザイナーっぽい
ノートなどもオススメです
– ペンを用意しましょう。100円均一のボール
ペンでも構いません。12色など入ったマイン
ドマップでも使えそうなペンもオススメです
• ソフトウェア
– Balsamiq Mockups 最もメジャー。79$
http://www.balsamiq.com/
– SwordSoft Layout 上記とそっくり。6.99$
http://www.swordsoft.idv.tw/
© 2013 Actcat, Inc. All Rights Reserved 19

20. 始めての方には手書きがオススメ
• 個人的には初めは手書きがオススメです
• 手書きのほうが何かを見ながら作業しや
すいですし、変更も簡単です
• 注釈コメントを書くこともできます
© 2013 Actcat, Inc. All Rights Reserved 20

21. パーツ例(Balsamiq Mockups)
© 2013 Actcat, Inc. All Rights Reserved 21
http://www.balsamiq.com/

22. 7. 実際に描く流れ
© 2013 Actcat, Inc. All Rights Reserved 22

23. 実際に描く流れ 1/2
1. 手元に参考となる類似のアプリやサイト、
デザインパターンの本などを用意する
2. コアとなるViewを描く
=> ユーザにとって最も価値あるページ
1. 外枠の線をとりあえず引く
2. とりあえずナビゲーションバー(ヘッダー)を
つけても良し
• コアとなるViewの例:
– Facebookのタイムライン
– Cookpadのレシピページ
© 2013 Actcat, Inc. All Rights Reserved 23
ソフトウェアを使っている場合には、外枠の線を引く
代わりに、iPhoneなどを使用する

24. 実際に描く流れ 2/2
1. コアとなるViewを描く(続き)
1. 「他の人に見せる」ことを前提に、
思いつくままに描く
2. パーツなど、参考になるものを参考に
試行錯誤する
2. コアとなるViewへの動線となる、
各Viewを描く
1. タブ、ナビ、ユーティリティから選択
2. 登録画面、一覧画面、なども
3. 自分で使うイメージを思い浮かべて、
機能の優先度、使用頻度に応じて並び替え、
入れ替えなどを行う
© 2013 Actcat, Inc. All Rights Reserved 24

25. 最後に
• ユーザ体験ファーストで作っていくために、
ユーザの各機能の使用頻度などに応じたデ
ザイン設計をしましょう
• デザインを0から創造することは難しく、
ユーザフレンドリーじゃない。
みんなが慣れた自然なUIを目指そう
• 開発を開始するのは
UI/UXが出来てからをおすすめします
© 2013 Actcat, Inc. All Rights Reserved 25

26. 会社概要
会社名 株式会社アクトキャット
設立年 2012年5月10日
代表取締役 角 幸一郎
本社所在地 東京都港区赤坂8丁目9番14号 ローザ赤坂 107号室
40以上の自社iOS/Androidアプリの開発実績
iOS/Androidアプリ 累計 350万ダウンロード以上
Apple iOS App Store Best of 2010
雑誌掲載数十冊以上
App Store 総合無料 5位 50位 多数
26© 2013 Actcat, Inc. All Rights Reserved

27. お問い合わせ先
下記までお気軽にお問い合わせ下さい
Copyright 2012© Actcat, Inc. All Rights Reserved. 27
担当: 角 幸一郎"
Mail: koichiro.sumi@actcat.co.jp"
Tel : 03-6434-5905"
HP : http://www.actcat.co.jp/
http://www.spath.jp/