プロトタイピング初心者が"prott"を使って、アプリの企画を考えてみました(前編)

こんにちは!
美味しい恵方巻きが食べたいなぁと思うこの頃です。

今回はプロトタイピング初心者である私が、
プロトタイピングツールprott」を使って、アプリの企画を考えた際のことをまとめます。

f:id:kakedashis:20160108104142p:plain
こんな感じのを作りました

・アプリのプロトタイピングに興味があるけど、やったことがない
・個人でアプリを作ってみたい。そのためのイメージを膨らませたい
・prottに興味がある

上記のような方の参考になれば幸いです。

前編では、アプリの企画・参考にした本・prottの導入方法
後編では、prottの使い方、ワイヤーフレームの作り方

についてお届けします。

※あくまでも個人でアプリを作るという企画をまとめているので、
現場調査、ペルソナ像などの絞り込みなどは割愛しています。
また、1回目のプロトタイプのため細かい画面遷移などは作り込まない想定です。


《アプリの企画ってどうやって考えるの?》

用意するもの:A4などの紙、付箋、ペン

①作りたいもののイメージを膨らませて、キーワードをA4用紙に箇条書きにする

イメージが湧きにくい場合は、自分の生活のまわりにある出来事で、
「不便だったこと」「こうなったらいいのに」と思うことを書きます。

私の場合は
・職場付近(田町)のランチスポットをうまく探せない、マンネリ化している
(最初の頃は先輩にくっついて行っていたけど、同じ場所に行きがち。
自力で探しても食べログの評価を気にして楽しく探せない...。冒険したい...)

・新しいテレビドラマの情報を探すのに苦労する
(2クールごとに変わるので、忘れがち。好きな局や、脚本家、好きな俳優などを事前に登録しておくと、
登録情報にあわせてドラマをプッシュ通知してくれるといいのに...)

・精神力を高めたいけど、どういう方法があるんだろう...
(滝に打たれる?座禅?瞑想?断食?詳しく知りたい...)


② 1で箇条書きにしたことの中から、アプリにしたら解決できそうなこと、
より身近に感じられるテーマを選び、"どう改善したいのか"を付箋に書く。

"職場付近のランチスポットをうまく探せない、マンネリ化している"をテーマに選ぶことにしました。

"どうしたい"
→職場付近(田町)のランチを気軽に探したい
→新しいランチスポットを開拓したい

②別の色の付箋に"感情"などの形容詞や動詞を書く。ネガティヴな形容詞は避ける。

・楽しい
・はげしい
・おもしろい
・もどかしい
・美しい
・興奮する
・冒険できる
・わくわくする
・すっきりする

f:id:kakedashis:20160109183356p:plain

③ 1で書いた付箋に、2の感情を組み合わせる。直感的にいいなと思った組み合わせを決定する。

f:id:kakedashis:20160109183408p:plain

「冒険できる」「わくわくする」×職場付近(田町)のランチを気軽に探す にピンときたので、
"冒険するように、わくわくするようにランチスポットを探せるランチ検索アプリ"にしてみます。
※よりニッチなイメージを掻き立てる場合は、感情部分を細かく書いてみることをおすすめします。

ポイント
・いくつか選択肢が出てきたら、より身近に感じられるものを選ぶ
・普段から"生活の中で不便だと思うこと"をストックしておくと、ひらめきやすくなる

《アイデアの参考になりそうな本やサイト》

アイデアのつくり方

アイデアのつくり方

有名な本。ページ数が少ないので1時間ぐらいで読めます。でも内容は濃い!この言葉に痺れます。

どんな技術を習得する場合でも、学ぶべき大切なことは第一に原理、第二に方法。アイデアも同じ 

ファストアイデア25 「 発想スイッチ 」 で脳を切りかえる

ファストアイデア25 「 発想スイッチ 」 で脳を切りかえる

アートディレクター秋山具義さんのアイデア捻出方法。
かなり具体的な方法が載っていて、非常に参考になりました。

企画案が固まったら、次は以下の点をまとめます。

・ネーミング

アプリの大枠となるコンセプトを十分に引き出した内容を心がけます。
田町でお店を探すときに使う→「田町のお昼」→「たまひる」→「ひるたま」になりました。
ネーミングをつけるときは、「語感がよいか」「一度聞いたら覚えられるか」が大事にしています。

このスライド、何回も読みました。

www.slideshare.net


・色

アプリ全体で使う色を決めておきます。
ランチ検索アプリなので、「食欲がわく色」(黄色,オレンジ,茶色)を中心に選びました。


・参考になるUI、アプリ内容、デザイン集め

・UI、デザイン
・インタラクション(動き)

競合になりそうなアプリはもちろん、良いなと思ったUIなどを拾い集めていきます。

テーマは「冒険するような」「わくわくするような」ランチ検索アプリ。
ただ普通に検索結果を表示してもつまらない...
じゃあどうする?と考えたとき、「自分では予想していなかった結果が出てくる」のが面白いかなと思いました。
そこで、最近流行りの「マッチングアプリ」のUIを取り入れることに。

メインUIで参考にしたサービス
Tinder

検索画面などのUIで参考にしたサービス
Retty,食べログ

Tinderは海外発祥の出会い系マッチングアプリです。
ゲーム感覚で「好きか」「嫌いか」をスワイプorボタンをタップするだけの簡単なUI。
「単純な操作でおもしろく、わかりやすい」直感的な仕様。

参考UIを元に、思いついた内容を紙に書いて整理していきます。

・検索画面で「今日食べたいもののジャンル」と「予算」を選択して検索
・田町/三田周辺エリアのランチ情報が表示される
・料理の写真とお店の名前だけで直感的に判断して、「食べたい」と思ったら右にスワイプ、「まだ探したい」と思ったら左にスワイプ
・右にスワイプしたら"ランチマッチ"で、お店の情報を知ることができる
・左にスワイプし続けた場合、どこかのタイミングで強制的に"マッチング"させられる(タイミングはその時々)

「冒険するような」という部分は、左にマッチングし続けたら、
いずれどこかのタイミングで「強制的にマッチングさせられる」という部分で演出できそうです。
課題となっていた「ランチスポットのマンネリ化」はクリアできそうな構成になったので、
この内容で詰めていきます。


・ユーザー層
田町/三田エリアを絞ったランチ検索アプリを作ると決めたので、
田町で働くサラリーマン(20〜30代)やOL(20~40代)が対象。

ユーザ中心ウェブビジネス戦略

ユーザ中心ウェブビジネス戦略

ペルソナ像やユーザーを設定するときに読んでおくと良い本。
アプリを使うユーザーの全体像がつかみやすくなります。
ユーザー層まで決めたら、いよいよプロトタイピングのスタート!


《まずはじめに。プロトタイプってなんだろう。》

プロトタイプとは、モノを完成させる手前の段階である「試作品、原型」のことを指します。
プロトタイピングとは、プロトタイプを作る上での手法や過程のことを指します。

プロトタイピング(Prototyping)とは、実働するモデル(プロトタイプ)を早期に製作する手法およびその過程を意味する。 その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。(Wikipediaより)


《アプリのプロトタイピングってどんな方法があるの?》


大きく分けて、2つあります。

・手描きのプロトタイピング(ペーパープロトタイプ)
紙だけで構成されている手描きのプロトタイプ。アナログ手法なので、すぐにまとめられる。
その場で意見を交わしながら、パーツを切ったり貼ったりして修正・追加ができる。

ツールを使ったプロトタイピング
手描きのプロトタイプや、photoshopなどで作成したイメージカンプをとりこんで、スマートフォンなどの実機で確認できる。
手描きに比べて時間はかかるものの、より実際に使った感覚をイメージしやすい。

より詳しく、それぞれの手法について知りたいという方にオススメの本がこちら。

かなり細かく実例も踏まえてまとめられていました。
とてもわかりやすかったです。


《制作の流れについて》

今回は以下の流れで作りました。

①手描きのプロトタイプを作る
②プロトタイピングツールに1をとりこむ
トランジション(遷移の仕方)などの動きをつける
スマートフォンで確認
⑤不要な画面などの整理
⑥画面構成が固まったら、photoshopやsketchでイメージカンプを作る


《プロトタイピングツールって具体的にどんなもの?》

手描きやphotoshopなどで作ったイメージカンプを、
スマートフォンやPCなどの実機で確認できるのが「プロトタイピングツール」です。

プログラミングをしないと実機で動かせない...と思っていた私にとっては衝撃的でした。

なんといっても、サービスを作る場合は実装前の企画段階で"ユーザーテスト"ができますし、
フィードバックを受けて修正ができるので、
リリース後に、「使いにくい」「ニーズのない機能」がでてしまうことを未然に防げます。

現在のプロトタイピングツール市場では、
国内でのサービスが少なく、海外サービスが主流となっているようです。
pop」「InVision」「Marvel」などなど。

それぞれに良いポイントがあって楽しかったのですが、
その中でいちばん使いやすくて楽しいと思った「prott」で作り進めていくことにしました。

《prottとは》

prottは、日本で作られている"プロトタイピングツール"です。

・国産サービス
・UIがわかりやすい
チュートリアルがあって親切

わからないことがあればサポートも受けられますし、
はじめて使う人のためのチュートリアルもあって親切。

《登録してみる》

①以下のページから「無料ではじめる」ボタンをクリックして登録

prottapp.com

登録したては、まっさらで何もない状態なので、
「アクティブ」にはチュートリアルやサンプルが置かれています。

②右側に表示されている「新規プロジェクト」のボタンをクリック

f:id:kakedashis:20160108222911p:plain


③プロジェクト名とデバイスを選択して、「作成ボタン」をクリック

f:id:kakedashis:20160108233956p:plain


④プロジェクトのベースが完成
f:id:kakedashis:20160108234859p:plain

はじめの一歩、プロジェクトの土台が立ち上がました!
わかりやすい動画もあるので、参考にされるとよいかと思います!
docs-ja.prottapp.com


今回はここまで。
後編で、「prottの使い方」「失敗したところ」「フィードバックをもらった話」「所感」をお伝えしていきます。