• Like
  • Save
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
Upcoming SlideShare
Loading in...5
×

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

  • 912 views
Uploaded on

ーーーーーーーーーーーーーーーーーーーーーーー …

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

More in: Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
912
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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