スタートクラスⅢ
アプリのUIUX制作講座

ペーパープロトタイピング初心者でも
楽しめるアプリのUIUX制作講座



講義で使用する資料はこちらからダウンロードできます。

■スタートクラス
 ペーパープロトタイピング初心者でも楽しめるアプリのUIUX制作講座


アプリ開発の7割はUIUXの開発に費やされると言われています。

今やアプリのデザインやユーザエクスペリエンスを向上させることは、アプリ開発にとって最も重要な開発要件になりました。しかし多くのエンジニアはそのアプリのUIUXに対する知見も経験も足りていません。またほとんどのウェブデザイナーや一般的なデザイナーはUIデザインができても、UXに紐付いたUIを設計することができません。

ここでは紙を使ったペーパープロトタイピング手法を身につけながら、UIUXの基礎を学び、実際にアプリ企画からアプリ開発までのUIデザインとUXの設計方法を身につけます。



■事前準備とダウンロードアプリ

講義を受ける前に以下の準備をお願いします。

①受講に必要なもの
iPhone または iPad, iPod touch, Android
本講座はMac(PC)は使いません。
鉛筆、ノートなどの筆記用具


②ダウンロードしておくべきアプリ(iPhone, iPad用)
※Androidで受講される方は同じアプリがあるかどうか探して下さい。
※有料アプリのDLは任意です。

★ペーパープロトタイピング
https://popapp.in/

必ずDLしておいてください。
POP(iPhone版)http://goo.gl/41GO65
POP(Android版)http://goo.gl/Pkw8z2

Twitter:http://goo.gl/4ZqcN(無料)
Aカード:http://goo.gl/LUtBqE(無料)
Airbnb:http://goo.gl/x5RzXx(無料)
Google検索:http://goo.gl/5SFlM(無料)
Searchlight:http://goo.gl/ckGPRV(無料)
Yahoo! Weather http://goo.gl/oJok01 英語版のみ(無料)
Start(タイマー)http://goo.gl/rN102 (有料)
※Android版は同じアプリがあるかどうかアプリ名で検索ください。


③ 自分で作ってみたいアプリの企画書(イメージなど)
講義の時に企画の仕方、アプリイメージの作り方を学びますが、まず自分なりにできるところまでやってみてください。

■使用するテキスト
・テキスト受講生用:http://goo.gl/Z7Jaz2
・UIUXレイアウト集:http://goo.gl/mep076
・UIUXレイアウト集印刷用:http://goo.gl/Kv1ejR
・鉛筆画像集:http://goo.gl/a2aBtu


・講義内容




1)UIUXの基礎について

紙と鉛筆(カラーペン)を使ったアプリのUIデザインおよびUXデザインを学びます。


・UIUXの基礎
 UIUXとは



 身近なUIUX

 クルマ
 UXのポイント


・シンプルなUIUX
 シンプルなアプリから最も基本的なアプリのUIUXとデザインを学びましょう。
 受講生にも聞いてみよう、1アプリ1機能


 コンパス 
 Yahoo! Weather http://goo.gl/oJok01
 Start(タイマー)http://goo.gl/rN102

・UIレイアウトの基本

 iPhoneには基本的なレイアウトの決まりがあります。


 この4つの基本レイアウントを参考にデザインしましょう。
 フラットページ
 タブバーページ
 ツリー構造ページ


 サイドハイドバーページ


・UXの基本(うごき)
 UXの基本とはアプリ内で画面をどう遷移させていくか、という基本の動きですが、ここではまずマルチタッチインターフェースの基本を身につけます。







2)優れたUIUXのアプリについて考察 30分

UIUXに優れたアプリのペーパープロトタイピングを作成します。
ここから実際に紙と鉛筆を使い、アプリのペーパープロトタイプを作成していきます。


■よく使われるUIUXのアプリ
それぞれの特徴を学びながらPaperプロトタイピングしてきましょう。

 フラットページ:天気
 タブバーページ:Twitter
 ツリー構造ページ:ニュース、Aカード
 サイドハイドバー:Airbnb







■参考情報
累計22種!UIが優れたiPhoneアプリの部分デザイン(ナビゲーション/メニュー編)
http://www.find-job.net/startup/iphone-app-ui-navigation

累計32種!UIが優れたiPhoneアプリの部分デザイン(ヘッダ・フッタ編)  
http://www.find-job.net/startup/iphone-app-ui-design

UIが美しいデザインのiPhoneアプリまとめ
http://grampixel.jp/blog/archives/840

UIインスピレーションを刺激されるUIデザインギャラリーサイトまとめ
http://w3q.jp/t/4156

今すぐ真似したい! フラットデザインのiOSアプリアイコン32個まとめ
http://www.find-job.net/startup/32-flat-designs



3)UIUXによって変わるアプリの機能と評価

同じアプリでもUIUXが変わるだけで使い勝手が大きく変わります。
検索アプリについてUIUXを考察します。


Google Search:http://goo.gl/5SFlM
Searchlight:http://goo.gl/rqOTjJ

両方のアプリを5分ほど使ってみて、その違い(UIUX)をまとめてください。
画像をクリックすると違いが表示されます。

https://lh3.googleusercontent.com/-hkTCoLP3fxM/UxZ6ODCukRI/AAAAAAAAAIY/KOBcqUT_AtQ/w894-h503-no/UIUX_Paper%25E3%2583%2595%25E3%2582%259A%25E3%2583%25AD%25E3%2583%2588%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2592%25E3%2582%259A%25E3%2583%25B3%25E3%2582%25AF%25E3%2582%2599_%25E8%25AC%259B%25E5%25B8%25AB%25E7%2594%25A8.049.jpg




4)オリジナルペーパープロトタイピング制作


学んだ知識を活かしてオリジナルペーパーアプリを作成します。
ペーパープロトタイピングを使って実際のアプリの動きを紙で実現します。

■POP - prototyping on paper ダウンロード
https://popapp.in/

POP(iPhone版)http://goo.gl/41GO65
POP(Android版)http://goo.gl/Pkw8z2


■アプリの企画書の描き方







企画書を描くための資料はこちらからダウンロード


① アプリのタイトル
タイトルでアプリの機能ややりたいことをシンプルにまとめる
★スマホ特化UI、UX重視型検索・レコメンデーションアプリ

② なぜ、そのアプリなの
何を解決するのか、なぜそのアプリにニーズがあるのか
•Googleの力が巨大すぎてだれも検索に商機を見出していない
→LINEは、完全に飽和していると思われていたメッセージサービス
(MSN、Yahoo!メッセンジャー、iMessage、QQ、Skypeなど)に参入し
新しい市場を開拓
•検索は、インターネットで最も巨大な市場(Google売上 5兆円)
→検索を制するものがインターネットの広告市場を制す
•スマホのGoogle検索は、スマホに最適化しておらず、使いにくい
→今こそ、スマホに特化した検索のあり方を再定義すべきチャンス

③ それはどんなアプリになるの?
簡単にそのアプリの機能や特徴を説明します
スマホ検索は、Googleの᷿うに結果の候補を返すのではなく、答えを返さなければならない
日常的な検索語は100万語
キーワード種別のDBを開発
キーワードから答えのDBを予測
DBから最適な答えを探す
最適なUIが最適な答えに素早く到達

④ そのアプリのイメージ(プロトタイプ)はどんなもの
そのアプリの特徴を示すUIとUXをペーパープロトタイプで証明します。
最も特徴的な1枚を描きます。



5)発表会とアンケート


何名かに実際に発表してもらいます。

フリースクールの受講アンケート・アンケート提出
今日のペーパープロトタイピングの講義はどうでしたか。
アプリ制作は何もコードを書くエンジニアリングだけではありません。
こうしたアプリの企画からUIデザイン、そしてそのUIから得られるユーザエクスペリエンスUXがいかに重要か身にしみて感じていただければと思います。

アンケートは必ず提出ください。ご協力よろしくお願いします。



※途中休憩あり
※内容は変更になる場合があります。