いいUI(ユーザーインターフェース)をつくるために、主にアプリの受託開発でおこなっている開発手法、手順を紹介します。各工程で使用しているツールも一緒に紹介します。

1. いいUIをつくるために
している開発手法
各工程で使っているツール、サイトも紹介しながら進めます。
SEREAL 安達誠寛

2. UX、ビジネス要件、開発要件など
さまざまな要件を整理（優先順位化、取捨選択）して
最適化、具現化したインターフェースのこと
いいUIとは？
と思ってます。。。

3. 安達誠寛（あだちのぶひろ）
SERAL プランナー
年齢30才
飲食経験8年
デザイナー歴3年
フォトショップ歴2年
イラストレータ歴5年
個人事業主2年
起業1回
福岡歴10年
バレーボール歴10年

4. 仕様決めにとんでもない時間がかかった。
できたのみたら思ったのと違った。
作りこんだけど、誰も使わなかった。
ウォータフォール型の問題点

5. プロトタイピング
（アジャイル）
チーム開発
シリアルの開発手法

6. 『なにをつくるのか』ではなく
『なぜつくるのか』へ

7. ①ステートメントシート作成
②ぺルソナシート作成
③機能一覧作成
④画面一覧作成
⑤ワイヤー作成
⑥ワイヤープロトタイプ（インタラクション）作成
⑦ビジュアルデザイン
⑧デザインプロトタイプ作成
⑨フィニッシング
⑩ステートメントビュー作成
PLANNING
DESIGN
DEVELOPMENT
⑪フロント実装
⑫バックエンド実装
各工程と作業内容

8. PLANNING

9. ステートメントシート
①
このシートは
エクスペリエンス・ビジョンというフレームワークをSEREAL式にカスタマイズしました。

10. 1. なぜするのかをチームで共有する
（各作業で最適な判断が各自でできるように）
2. 漏れ、蛇足をなくす
ステートメントシートを使う理由

11. ペルソナ / 機能一覧 / 画面一覧
名前 吉田真里
年齢 36歳
住所 鹿児島県鹿児島市紫原
家族構成 夫・子（息子6歳・娘3歳）
家賃 ¥85,000
出身地 千葉県
職業 専業主婦
年収 600万
学歴 私立短大卒業
趣味 学生時代はバレーボール、今は特
に無し性格 明るく社交的だがめんどくさがり
人生ストー
リー
生まれも育ちも千葉県。部活はバ
レー部で短大で保育士の資格を取
得。協調性があり、空気を読め
る。学生時代からの付き合いの夫
と結婚。夫は商社営業で、5年前
生活パター
ン
朝から家事。子どもと夫を送りだ
した後も家事。ひと段落したら娘
の幼稚園のお迎え。夕方から家事求めている
こと
子どもが遊べる場所や、みんなの
思い出になるような機会の情報。
自身の健康関連の運動や、スキル利用サービ
ス
Livingかごしま、市民のひろば、
ママ友の情報
リテラシー
FacebookやYhooなどを空いてい
る時間に眺めるが、情報が多すぎ
たり、わかりにくいので、あまり
積極的に調べものをしてはいな
タイムラン
・イベントを表示
・時系列
・表示項目（イベントタイトル、写真、場所、時間、タグ）
イベント詳細
・イベント情報（写真、タグ、場所、地図、日時、詳細、作
成者、金額）
・お気に入り
・Facebookシェア
・通報、投稿削除
お気に入り
・表示（写真、タイトル、日時、場所）
・イベント詳細へ
検索
・キーワード検索（タイトル、詳細分から検索）
・日程検索（複数の日程を選択可能）
・カレンダーUI(カレンダーAPI）
マイページ
・ユーザネーム
・写真
・タグ選択（屋内、屋外、季節、グルメ、スポーツ...）
ログイン/サインイン
・Facebookログイン
・idpassログイン
投稿画面
・写真投稿（カメラ）
・イベントタイトル、詳細、金額、
・場所情報取得（プレイスAPI）
②③④

12. ①「なにを」つくるのかではなく
「なぜ」つくるのかが大事
②ステートメントシートで
チームにサービスの本質理解、共有する
プランニングまとめ

13. ①ステートメントシート作成
②ぺルソナシート作成
③機能一覧作成
④画面一覧作成
⑤ワイヤー作成
⑥ワイヤープロトタイプ（インタラクション）作成
⑦ビジュアルデザイン
⑧デザインプロトタイプ作成
⑨フィニッシング
⑩ステートメントビュー作成
PLANNING
DESIGN
DEVELOPMENT
⑪フロント実装
⑫バックエンド実装
各工程と作業内容

14. DESIGN

15. ワイヤー作成 / ワイヤープロト作成
ミラーリングアプリでリアルタイムに確
認しながら作成
⑤⑥
（繰り返す）
POP,Prottで遷移をつける
クライアントに確認して
イメージと違っていたらそく修正

16. ビジュアデザイン / デザインプロト / フィニッシング
四角いタグ
角丸タグ
→
↓
⑤⑥⑦⑧⑨
（繰り返す） （繰り返す）
クライアントの「わくわくさせたい」と
いう思いをビジュアルに表現
もっと「わくわく」するように
アイコンを修正

17. [名前]⃝⃝
[概要] イベントを知らせたい人（ホスト）とイベントを知りたい人（ゲスト）をむすぶアプリ
[ビジョン] 地域を盛り上げたい、みんなをわくわくさせたい
[コア機能] イベント作成、投稿＆イベント閲覧（タイムライン）
[ペルソナ] (ゲスト)専業主婦:女性(36) (ホスト)居酒屋店主:男性(42)
[ユースケース] (ゲスト)家事のあいまに気になるイベントがないかチェックしてクリップ
(ホスト)お店の営業時間で暇な時に作成、FACEBOOKでシェア
⑩ステートメントイメージ

18. 1. シートよりもより視覚的にサービスを理解で
きるようにする
2. 開発チーム以外にも、ユーザーやビジネス
パートナーなどすべてのステークホルダーに
すぐ伝わるように
ステートメントイメージの役割

19. ①タンジブル（見れる、触れる、試せるもの）を
なるべく早くつくってフィードバックをもらう
②クライアント要求、仮説と違っていたら素早く
修正する
③上記サイクルを早くまわす
（バグや機能漏れを気にし過ぎない、チームの理解が必要）
デザインまとめ

20. ①なぜやるのかを皆が理解することが大切
②プロトタイピングでPDCAを素早くまわす
③チーム(クライアント含む)の文化形成、意思疎通が大事
（チーム開発でないと上記開発手法は不可能と思う）
さいごに

21. Whyを共有して
デザイン1px、プログラム1行に
反映できるプロダクト開発を
目指しています。
どんな問題を解決するのか、
誰にどう感じでほしいのか、

22. 『 Sketch嫌いのための
Photoshopで
UIを爆速でつくるTIPS 』
次回やってみたいこと、
有能コンポーネント紹介
Photoshopの環境設定、機能紹介など

23. 友達申請OKです。
SEREAL
安達 誠寛 (Adachi Nnobuhiro)
プランナー、UIデザイナー、アプリ解析
http://sereal.jp/