モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃

2,410 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/556/room
ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business

モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃

  1. 1. 1 モックを作ろう! アプリのための実践系UXデザイン 株式会社バスキュール UXディレクター 大塚晃
  2. 2. 2 アプリ企画者 自己紹介 仕事:企画/デザイン/設計/モック制作 デバイス:モバイル/PC/テレビ/ゲーム機 ダブルスクリーンの 釣りゲーが一番最初 ガラケーアプリUI ガラケーWeb開発 大手キャリアの ガラケー/スマホ アプリUI設計 自社開発& クライアントワーク スマホアプリ設計 UXディレクター 2008 2009 2011~
  3. 3. 3 アプリができるまで 1.企画 2.要件定義 3.仕様定義 4.実装 5.テスト 6.リリース 長い…
  4. 4. 4 実際にアプリに触れるまで 開始から2ヶ月~半年 多くの場合、実際に手で触れられるようになるまで 長い時間がかかる。PCのドキュメントか紙で仕様を読む、 デザインを眺めるだけしかできない。
  5. 5. 5 『こうすればよかった』 ユーザーテストが開始されるあたりで実際のアプリが 触れるようになる。触ってはじめて気づくことがある。 デザインを調整すれば対応できる事もあるが 開発中の調整は不安定さを招くこともあり 大きな調整となると現実的に対応が難しい。
  6. 6. 6 バージョンアップでの対応 開発終了後いろいろな事が判明し、バージョン2で 対応としようという話になる事は多い。 だが、人気アプリにならなければ実際は立ち消える。 開発後に分かることが、開発前に分からないのは なぜなんだろう?
  7. 7. 7 開発後に分かることが、 開発前に分からないのは なぜ? Question
  8. 8. 8 ・アプリがわからない ・ユーザーがわからない ・やってみないとわからない Answer  ?
  9. 9. 9 そういうのを モックアップで解消しよう
  10. 10. 10 モックアップで 例えばわかること 例:AQUA  Social  Drive
  11. 11. AQUA  Social  Drive AQUA  Social  Drive 11
  12. 12. ドライブしながらツイートするアプリ AQUA  Social  Drive ドライブ中は運転に集中している 画面操作はもちろん不可 外を見ているから、画面表示は無意味。 12 見ない・タッチしないアプリって何?
  13. 13. アプローチは? AQUA  Social  Drive ・メーター類やサイン標識のように   現状を簡潔に知らせるもの? ・スクリーンセーバーのような反応? ・オーディオやラジオのように耳で楽しませるもの? 13 モックを作りロケテストへ
  14. 14. 腕時計よりも遠い、小さなUI AQUA  Social  Drive 14 ・最小限の構成要素 ・1M離れても読める文字の大きさ →実際の環境はPC画面を見ていてもわからない。
  15. 15. 集中のノイズにならないように その風景にあるトンマナを使う →信号や交通標識 AQUA  Social  Drive 15
  16. 16. 安全のための配慮 メイン画面に触れようとするとアラート 放置しておくとすぐ解除され元にもどる ガイドラインに沿ったアラートであれば ドライバーは小さな【OK】ボタンを押そうとする。 これは危険な上にドライブが台無しになる。 AQUA  Social  Drive ガイドラインがいつも正しいわけではない! 16
  17. 17. 17 ドライブがコンテクスト スマホアプリは、電車の中、自分の部屋とか、 コンテクストを取り入れてはじめてその実態がわかる。 例えば、ドライブというコンテクストをPCの前で 完全に再現できるだろうか? いつもコンテクストの中にあるデバイスだからこそ、 実際の環境下でのテストが必要になる。
  18. 18. 18 コンテクストでチェック (実環境下テスト)するのに モックが必要なわけです
  19. 19. 19 モックって何?
  20. 20. 20 Wikipedia モックって何?
  21. 21. 21 モノを大量生産する前段に 実物を模擬的にチェックするもの 「口紅から機関車まで」 プロダクトデザイン全般に おいてモックは古くから使われている。 モノが大量生産されるのと同じく、アプリは大量に ダウンロードされる一種のプロダクトだといえる。 モックって何?
  22. 22. 22 モックって何? アプリのモックアップ 実際のハードにインストールして リリース版と同じように「触る」ことができる 演出も入っており、楽しいアプリか判断できる。 「こうしたい」というアイディアを取り込み すぐアップデートできる 本開発用環境で制作してもよいが 通常は  Flash  や  PhoneGap  などで制作 アプリ書き出しでインストール やったことがある人はFLASHオススメ
  23. 23. 23 モックを作るには デザイナー   ・・・ 0.5~1人 開発者(Flasher) ・・・ 0.5~1人 設計者 ・・・ 0.5~1人 設計者が開発かデザインを兼任することも多く ミーティングの量も少なめでOK。第二階層まで 触れるようなものを一週間程度で制作する。 モックって何?
  24. 24. 24 モックで何ができるのか 1) ロケテスト、実用性チェック 2) チームレビュー 3) フレンドレビュー(家族レビュー) 4) クライアントレビュー UXや実用性のチェックやレビューは紙では不可能 完成したアプリか、モックアップ以外に方法はない。 モックって何?
  25. 25. 25 モックって何? ボタンが押しやすいかとか デザインがいいかとか 開発的に問題ないかとか そういう確認のために モックを作ってはいけない
  26. 26. 26 モックって何? 持ち出す、見たおす、使いたおす。 モックアップといっしょに生活してみる。 メシを食ってる時はどんな感じか、 つり革を持った状態でとなりの人の視線を 気にしながらはどうか、飲んでる時はどうか 打ち合わせをしながらはどうか  etc… 必ず発見がある。設計の作りこみが楽しい。 生の「コンテクスト」を アプリ設計に取り込む
  27. 27. 27 モックって何? 生の「ユーザー」を プロジェクトに取り込む 不思議なことに、モックを手にして話すと だれでも自然にユーザー視線になっている。 ユーザーに提供しようとしているものについて 全員がフォーカスし、直球で話せる。 ペルソナ資料はUXを客観化・他人事化するが モックアップは逆に主観化・自分事化する
  28. 28. 28 モックって何? このアプリは 本当のところどうなのか?を 体験済みの「ユーザー」で 考え尽くす為にモックを作る。 プロジェクトメンバーやクライアントでなくとも 身の回りの人を参加させることができる。 リアルな意見やアイディアを事前に大勢から 吸い上げる事がモックを作る最大の意味。
  29. 29. 29 モックって何? 【モック】は =超コミュニケーションツール =全方向営業ツール さらに、コストパフォーマンスにも優れている。
  30. 30. 30 プロトタイピング もっと簡単にできるモックアップ
  31. 31. 31 プロトタイピング ペーパープロトタイピング 画面サイズの紙に手書きし、 それを手に持って使用感を確かめる。 一時間もあればプロトタイピングできる。 紙とペンがあれば、どんな場所でも可能 実際にアプリを利用してほしい場所で考えられる
  32. 32. 32 プロトタイピング ペーパープロトタイピングは 良くも悪くもただのコンテ。 ペーパープロトタイピングは触って見るためのコンテ。 ひらめいたアイディアをメモして残すことは やはり紙が一番すぐれている。 ただ、アプリの全画面や細部まで検討することは不可能。 アプリの主導線を考えたり、要件整理の準備初期に使う。
  33. 33. 33 プロトタイピング 100~300の画面を 手書きするのは間違い。 逆に時間かかりすぎ・・・ パワポで描こう! コピペ多めで効率アップ! 実質半日~1日で完成形まで起こせる 無限にかける、そのままシェアできる
  34. 34. 34 プロトタイピング Back Back Back まずテンプレを作る
  35. 35. 35 プロトタイピング Place  Name ★★★☆☆ Address  Text  99M Back 78  Peoples Place  Name ★★★☆☆   Address  Text  Address  Text チェックイン … … … コメントを書く           +Map |||| Back Check In Here Place  Name ★★★☆☆ Address  Text  99M Place  Name ★★★☆☆ Address  Text  99M Place  Name ★★★☆☆ Address  Text  99M Place  Name ★★★☆☆   Address  Text  Address  Text Place  Name ★★★☆☆ Address  Text  99M Place  Name ★★★☆☆ Address  Text  99M Place  Name ★★★☆☆ Address  Text  99M コピペしてどんどん書き込んでいく
  36. 36. 36 プロトタイピング シーケンスではなく ストーリーが見えてくる 描いたコンテを「2アップ」でプリントアウトすれば、 実際の画面の大きさで操作感がわかる 「4アップ」でプリントアウトして並べればアプリ全体を 眺める事ができる。この視点はユーザーの認識に近く、 どんなコンテクストで使われそうかストーリーが見えてくる 連続する画面などは、手書きよりもテンポよくサクサク 書けるので、思いついたアイディアをロストしない。
  37. 37. 37 プロトタイピング 「写真」を使う PhotoshopでテンプレートPSDなどを使い 画面を組んでみて、画像に番号をつけ iPhoneの写真アプリで順に閲覧 デザイナーがよくやっている手法。 持ったまま電車の中やランチ時に確認。 メイン画面の操作性などはアテがつく
  38. 38. 38 プロトタイピング 順番に画面を並べたPSDを作って切り出すとラク
  39. 39. 39 プロトタイピング Web上デモ アプリのようなサイトを制作し、スマホのブラウザから触る。 HTMLやJavascriptで制作 紙芝居のようなものから、実際にスクロールや 演出をつけたものまでアウトプットの幅は広い。 CSSやJavascriptに慣れている人はこちらがオススメ デモ動作する端末を一つに絞っておくとラク
  40. 40. 40 まとめ
  41. 41. 41 モックアップを使って 1.生の「コンテクスト」を取り入れられる 2.生の「ユーザー」を取り入れられる 3.リアルにUXをデザインできる 自分が体験し、関係者も体験した上で話ができる
  42. 42. 42 ありがとうございました

×