読者です 読者をやめる 読者になる 読者になる

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

デザイン

こんにちは!前回に引き続き、プロトタイプを作った過程をまとめていきます。
前回までで、「アプリの企画を固める」「プロトタイプについて理解する」「prottに登録」ができました。
いよいよ、もくもくと作っていきます。

・※失敗した点も入れながら進めていきます。
iPhone(iOS)のサイズで作っている想定です。

《制作の流れについて》※再掲

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

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


《手描きのプロトタイプを作る》

①手描きのプロトタイプを描いていく
私の場合は、A4用紙を四分割に裂いて、1枚に1つの画面構成を描きました。
「アプリの企画」で固めた内容をもくもくと描き起こしていきます。

f:id:kakedashis:20160111203808j:plain


②すべての画面を描き終えたら、1枚ずつ撮影する。
撮影した画像を管理画面から一気にアップロードする

オレンジ色で囲っている部分をクリックして、画像を選択すると...
f:id:kakedashis:20160111211001p:plain

無事にアップロードができました!
f:id:kakedashis:20160111220452p:plain

でもよく見てみると...縦に間延びしている...?

失敗ポイント:<取り込む画像の縦横比が異なっていた!>

原因:A4サイズを四分割に割いた用紙でまとめたプロトタイプをアップロードすると、
スマートフォンの縦横比と異なるため、間延びしてしまうことがわかりました。

そのため、手描きで書くときでも必ずスケッチシートを使うことをお勧めします。
pdfになっているスケッチシートを3flab inc.さんが配布していました。とっても便利!
3fl.jp
今回は一から書き直すのが大変だったので、photoshopでカンバスサイズ(縦)をつけたして対応しました。


<ポイント>
※手描きだけでプロトタイプを完成させたいという方はこの段階から、描き込んでいったほうがよいです!
※人に見せずに自分だけで整理するのであればスピード重視。(今回は「③〜⑤」を整理するために
作るためのラフだったので、時間をかけずにスピード重視で描いていたため、定規なども使わず、かなり汚いです。)

トランジション(遷移)を作る
次はいよいよ、トランジション(遷移)です!

この操作が、最初慣れるまでちょっと時間かかった気がします。
まずは、遷移させたいページとページをつないでみます。

※ここではわかりやすいように、遷移前のページ(A)と、遷移後のページ(B)とします

Aをクリックします
f:id:kakedashis:20160111230922p:plain

右側に拡大されたAが表示されるので、
Bにつなげたい場所をドラッグするように囲むと、黄色い四角形が出てきます。

ドラッグして四角形を作ると、そのまま細長い線がにょろにょろっと出てくるので
この線をBのスクリーンにくっつけます。

f:id:kakedashis:20160111231306p:plain


すると、"トランジション効果を選択"という画面が出てきます。
これがリンクの挙動を作るための大事なところ。

上部分
「Aのリンクを、どう触ると(タップ?スワイプ?ピンチ?)」

下部分
「Bにどんなイメージで移動するか(左にスワイプ?右にスライド?)」という意味があります。

f:id:kakedashis:20160111233015p:plain


実際に触ってもらうとつかめるかと思います。
最初はトランジションの部分で、リンクをうまくつなげられなかったりしますが
何度かやっていくうちに慣れてきて楽しくなります!

私が作業しててひっかかったところは、

・None でした。

最初見たときに、None...?ノーン...?と思っていたのですが、
上部分で設定した動きで、「何もせずに」リンク先へ移動するということでした。

None以外は色々な動きをしてリンクに移動する、と覚えておくと良いかもです。


また、今回は隣同士のトランジションを設定してみましたが、
同じスクリーンであればどこでも繋げられます。

<リンクを消したいときはどうするの?>
リンクをつけたスクリーンをクリックした際に、
表示されるゴミ箱アイコンを消すとリンクが消えます。(オレンジ色で囲った部分)
f:id:kakedashis:20160111233900p:plain


トランジションを変更したいときはどうするの?>
ゴミ箱と同じ場所にある右から二番目、三番目のアイコンで変更できます。
(一応、どちらをクリックしてもトランジションが変更できるそう)
f:id:kakedashis:20160111234204p:plain


などなど、色々と書いてみましたが
prott公式のヘルプにわかりやすく(動画もある)まとめられています。
docs-ja.prottapp.com


一通り、トランジションの設定ができたら、
「プレビュー」を使って、実際の動きを確認していきます。(オレンジ色で囲った部分)
f:id:kakedashis:20160111235630p:plain

プレビューをクリックすると、スマホ画面に表示されたプロトタイプが!
そしてリンクを指定した場所をタップすると、指定通りに遷移します。
THE感動の瞬間...!

リンクを指定したスクリーンが多ければ多いほど、
実際の動きを確認しやすくなり、よりリアルな感じがわかります。


スマートフォンで確認&不要な画面の整理》

prottは、スマートフォン(実機)で確認できる、とても便利なアプリがあります。
これを使って実際の挙動を確認していきます。

※さっきプレビューで確認したのに...と思った方がいるかもしれませんが、
実機で見てみるとリンクの場所や、トランジションに違和感がないかどうか、
一通りチェックするとPC上で作業していたときに気がつかなかった点に
気がつけてとても良いと思います。

※PCで登録したアカウントでログインすると、PCで作ったプロトタイプがそのまま表示されます。

iOS

Prott - Rapid Prototyping

Prott - Rapid Prototyping

  • Goodpatch Inc.
  • Productivity
  • Free

Android
Prott-プロトタイピングのための簡単UIデザインツール - Google Play の Android アプリ


※紙だけでプロトタイプを終わらせる人は、ここまでで「プロトタイプ」が出来上がるかと思います。
あとは、不要な画面と必要な画面を確認してブラッシュアップしていけばOK!


photoshopやsketchでイメージカンプを作る》

よりイメージを作りこみたい&周りの人に見せる機会があるという場合は、
photoshopやsketchでイメージカンプを作ってprottに取り込むと、
本当にアプリが動いているみたいになるのでオススメです。

f:id:kakedashis:20160111235332p:plain
こんな感じで、作ったカンプを並べるだけでもわくわくする

今回、私はphotoshopillustratorでカンプを作っていましたが、
巷ではsketchがとても便利で使いやすいとのこと。

(後日、sketchを取り入れてみたのですが本当に使いやすかった!
必要なUIのパーツやiOSのアイコンなどが一通り揃っているので
より細かく作りこみたい方はsketchを使ったほうが良さそう)

どちらも試用期間があるので、しばらくはフリーで使えます。

photoshop 
www.adobe.com

sketch
Sketch - Professional Digital Design for Mac


今回のアプリ企画を通して、私が実際にphotoshopで作ってみたデモページはこちら
細かい作りこみはしていませんが、全体的に説明するときのイメージはできたかなと思います。

とても長くなってしまいましたが、一通りプロトタイプを作るイメージがわいたら幸いです!

他にも作ったプロトタイプをシェアしたり、コメントをつけてもらったり、
便利な機能があるので実際に触ってみて確かめてみるのをお勧めします。


《もう一度、気をつけてほしいところのおさらい》

・ペーパープロトタイプを作るときは、スマートフォンの縦横比のサイズの紙を使うこと
→私のようにA4用紙を四分割にしないようにお気をつけください...!

photoshopやsketchで作る場合は、必ず「倍のサイズ」で作ること
iPhone 6 375×667 @2x と指定されていれば、750×1334 ですね。

間違えて、375×667で作るとアップロードした後の画像が荒くなってしまうのでお気をつけください!
(ちなみに会社で同じように作っていたメンバーも、同じミスをしていた模様)


《作った後に、周りの人からフィードバックをもらう》

実はこのアプリ企画は、会社の自主練グループに参加していたときに考えたものでした。
企画した内容を発表してフィードバックをもらうことができました。

・検索段階であえてジャンルを絞らないほうが楽しいのでは?

・検索するときの条件で「定休日」「距離」を指定できるようにしてほしい
マッチングしたお店が定休日だったときに悲しいor遠いといけない

・TinderのUIを参考にしたそうだが、なぜ"スワイプ"でしか操作できないのか?
(※Tinderはタップでも操作できる)
→これには理由があったのでその場で説明しました。「冒険するような"感覚で探して欲しいので、
ゲーム要素を崩さないため(ハートと×ボタンをコントローラーに見立てている)」

たしかに。たしかに。
自分だけでは見えてこなかった課題がくっきりと浮かび上がってきたので、
人からもらうフィードバックって超重要だな〜と感じました。
特に「定休日」だったときの哀しみは計り知れないですね...。

個人でプロトタイプを作った場合でも、必ず周りの人に触ってもらい、
生の声をもらうのが大事ですね!身に沁みました。

《さいごに。プロトタイピングはもっと身近になっていいと思った》

捉え方次第で、自分を売り込める武器になるのではという感じがしました。

企画を上司に提案したいディレクタはもちろん、
就職活動でweb業界に入りたい大学生の子は、ポートフォリオor履歴書代わりに使ってみてもいいし、
フラッシュモブパフォーマンスの一部としても使えるのではないでしょうか。

あとは付き合ってる人へのプロポーズに使うのとか、どうでしょう...!
ある日、自分のスマホのホーム画面に「◯◯へ」というなぞのアプリアイコンがあって、
タップしてみたら、画面上でプロポーズのはじまった...のような...(妄想!)
(もしかしたら幻滅されるかもしれないので、一か八かですね...。)

アプリを作るためのデザイナ、ディレクタだけではなくて、
もっとその枠を超えて、多くの人が身近に使えるようになれたら、
ものづくりって楽しいなと思う人が増えそうでいいなぁと思ったのでした。