ペーパープロトタイピングって何?
ペーパープロトタイピングって何

ペーパープロトタイピング- スマートフォンのAppを設計する

ペーパープロトタイピングとは、紙とペンで作る、アプリケーションのデザインです。丁度紙芝居(もしくは操り人ケーションのデザインです。丁度紙芝居 もしくは操り人形)のようなものです。のようなものです。

将来のソフトウェア・デザイナーの第一歩
スマートフォンのアプリケーションを設計しよう

でもプログラムも出来なくて、設計できるのかな?

http://www.youtube.com/watch?v=GrV2SZuRPv0
ブラウザ用
http://www.youtube.com/watch?v=6TbyXq3XHSc
スマートフォン用© Go Ota, 20141

情報システム開発とペーパープロトタイピング
要求分析

基本設計

詳細設計

プログラミング2

設計・開発方法の変化

どのような英単語の学習方法を実現するか分析・決定します
どのような単語を入れるか決めます(単語数など)

従来のコンピュータ中心の設計・開発

具体的な操作方法や画面を設計します。
データの構造を設計します(英単語のどのように体系づけて格納するか。音声を使う場合はどのような形式を使うかなど)
大まかなプログラムの構造(システムをどのような複数のプログラムに分けてつくるかなど)を設計します。
個々に細かく分けたプログラムの中身をどう作るか設計します。
具体的に英単語やファイルをどのように名前をつけたり、プログラムからどのように利用するかなど詳細に設計します。

新しい人間中心の設計・開発

コンピュータの専門家が使用する

一般の人が使用する

技術上の視点から設計

利用者の利便性から設計

ソフトウェアの機能からメニューの設計

利用者の使用場面からのメニューの設計

処理速度などからの評価

見た目や使い易さ、利用者の満足度からの評
価

ハードウェアやソフトウェアに最適な処理の流れをもとに設計。

利用者の最適な操作方法や作業の流れを考慮して設計。

利用者が使う機能を中心に設計

利用者が実際に使う場面を十分に考慮して設計

実際にプログラムを作成したり、データを準備します。

英単語アプリケーションが正しく動作するか試験します。

試験
Word 2000 : ファイル/ 編集/ 表示/ 挿入/ 書式/ ツール/ 罫線/ ウィンドウ/実際にプロトタイプを作成する前に、情報システムの開発の中でペーパープロトタイプがどのように位置づけられるか考えてみましょう。まず、英単語アプリケーションの開発を例に示しています。
3

Word 2007 : ホーム/ 挿入/ ページレイアウト/ 参考資料/ 差し込み文書/ 校閲/ 表示/ 開発

4

プロトタイピングを使った開発

ペーパープロトタイピンクの利点
1) 早い時期に利用者の意見を聞くことができる。利用者の使い方が理解できる。
2) 実際に利用した時の問題点を見つけることができる。
3) 設計(デザイン)を中心として開発になる。
4) 利用者がレビュー(確認)する時、細かい色や文字の大きさだけではなく機能や操作に注目できる。
5) 早く、安く、簡単にできる。
6) デザインに特別な技術がいらない。
7) 実際のソフトのような、多様な操作とその反応が実現できる。実際のソフトに近い動きができる。

従来の開発方法
何か使いにくいね
利用者はこんな機能がほしいはずだ

設計書通りにつくるぞ

プロトタイピングを使った開発方法
新しいソフトの試作品です

ここの使い方がわからない。
こんなことしたい。

少し改良してみました。
どうですか?

まだまだね。ここの意味が全然わからない。

プロトタイピングの利点を1)-7)に示しました。プロトタイピングは実際にプログラムでソフトを作る方法が一般的でしたが、4)-7)は最近注目されているペーパープロトタイピングの特徴です。
4)は理解しにくいかもしれませんが、実際本物に近いソフトで確認すると、「ここの色が悪い」とか「ここの文字が小さい」などの意見が多くなり、本質的な、機能や操作に目がいかなくなります。そこでペーパープロトタイピン
グではあえて、手書きの文字で作成します。
56

新しい人間中心の設計・開発の考え方(用語を中心に新しい人間中心の設計・開発の考え方 用語を中心に)用語を中心に課題 英単語帳アプリを設計する。
英単語の覚えるアプリをデザインします。アプリはスマートフォンで動くものとします。

ユーザー中心設計（User-centereddesign, UCD））
ユーザー中心設計（
デザインの各段階でエンドユーザーのインタフェースに関するニーズ・要求・制限などに多大な注意を払って設計を行うこと、またはそのようなデザイン哲学。

1時限目: 今の授業とアプリの設計
2時限目: アプリの設計(必要に応じてグループ内で見てみましょう)
3時限目: アプリの相互評価と改善のレポート
デザインは各自作成します。相互評価は3名1グループでグループ内で評価します。

ユーザビリティ
特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。
アクセシビリティ
高齢者・障害者を含む誰もが、さまざまな製品や建物やサービスなどを支障なく利用できるかどうか、あるいはその度合いをいう。
ユニーバーサルデザイン
文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計

材料:

ベースのスマー
トフォンの台紙

ソース: ウィキペディア

7

紙,はさみ、ペン: 適当な大きさに切り取って画面を書きます8より良い設計をするためのコツ(1)より良い設計をするためのコツ
1) 単純で自然な操作の流れにする。

設計っていっても何から始めていいかわかりません。

設計には、ここでは二つのやり方から始めてみましょう1. 自分でどのように英単語を学習したいか考えてみる
実際に自分で英単語を勉強する場面を考えて、過去の経験などももとに、アプリがどのように動けばいいか考えてみましょう。
2. 類似のソフトを調べてみる
いくつか英単語の学習ソフトを調べてみましょう。そのソフトで自分で満足できない点や、もっとこうなったら良いという点を考えてみましょう。(但し、他のソフトを詳しく調べすぎると自分のアイディアが出なくなることがあるので、ざっと見てみるのも一つの手のです)[選択]
英語の意味を覚える
日本語の意味を覚える[選択]
高1の英単語高2の英単語高3の英単語

どっちが先の操作

2) ユーザーが考えたり、覚えたりしないで使えるようにする。
発音
英語の発音を聞くにはどっちがいい3) ユーザーが日常に使っている言葉の意味で操作できる。
コンフィグ

ペーパープロトタイピングの特徴は簡単に作りやすいことです。一人で考えるよりは、どんどん作って友達に見てもらって改良していったほうがいいでしょう。
何回か作り直すかもしれませんが、がんばっていきましょう。

システム設定

環境

動作設定

設定

同じ画面に移動しますが、どれがわかりやすい

4) アプリの中で操作の一貫性がある。
完了

終了

OK

戻る

中止

キャンセル

同じようなボタンがあると9

10

友達に使ってもらう、見てもらう (ユーザビィリティテストユーザビィリティテスト)ユーザビィリティテスト

より良い設計をするためのコツ(2)より良い設計をするためのコツ
5) 誤った操作をしないように作る。
OK

キャンセル

例:使え無い時のボタンは隠す

設計した人

6)途中や誤った時に楽に元に戻れるようにする。
途中や誤った時に楽に元に戻れるようにする。
Top

戻る

初期値

・作ったペーパプロトタイプの紙を持っておきます。
・使っている人の操作に従って、紙を置き換えていきます。
・まだ作っていない画面などに移動する操作があった場合は「そこはまだです」といいます。

取り消し7) 操作したらアプリが何らかの反応をする。
しばらくお待ちください
8) 間違った操作をした時に、適切なメッセージを方法を示す。(が前提だが)間違った操作をした時に、適切なメッセージを方法を示す。 5)が前提だがが前提だがエラー!!!

使う人・ペーパプロトタイプのトップの画面から操作していきます。
・操作したいこと、疑問に思ったことなど声に出して方がいいでしょう。

例:次に何していいかわからない

9) 時には近道ができる。
操作する内容1. 自由に使う
2. 設計した人がある状況を想定してお願いする。
例: 高校1年の英単語の日本語を表示して英語を覚える操作をしてください。

前回の続きから

11

12

評価シートを使ったユーザビィリティテスト
1. 実施方法:
・3名で1グルーブ・各自2枚の評価シートを使用する。
2. テストの実施
1) 一人の設計者作ったプロトタイプを一人が操作する。
(各約5分)
2) 設計者以外の2人が評価シートを記入(各約5分)
3) 1)-2)をグループ内で3回実施する。
4) 3)後、設計者は自分のアプリの改良方法を記入する。
(約10分)

13