簡単!今スグ使えて便利!触って動くプロトタイプを作ろう!

yamaです。
今回は、モバイルアプリのプロトタイピングツールをいくつかご紹介したいと思います。

操作感をつかんで、 アクセシビリティ向上を!

アプリやwebサイトを作る過程で、GUIの時のイメージと、実際に実装されたものを見ると「…あれ?」と思うこと・・・ありませんか?

もしくは、事前に確認してOKをもらっていたのに、終盤のタイミングで「イメージと違ったからこうして~!」と言われてしまい、最悪、UI設計からやり直し…なんてことも!!

meeting

そんな手戻りを防ぐのはもちろん、使い勝手の良い最適なユーザインターフェースにするために、設計時に「プロトタイプ」を作って、利用者視点で操作をしてみることをお勧めします。

さて、そこで、今回ご紹介したいのが「プロトタイピングツール」
「プロトタイピングツール」の多くは、コードや専門的な知識は不要で作成可能です。

とりあえず必要なのは、この2つ。

  ・(元になる画面の)絵(データや紙に描いたものなど)
  ・どこをクリックしたら、どの画面に繋がるか…のイメージ

まずは、無料なものでトライしてみるのも良いでしょう。
※操作は簡単ですが、実際に始める時は、少し時間に余裕を持つことをお勧めします

プロトタイピングツールのご紹介

では早速、いくつかピックアップしてご紹介を。 いずれも、フリー版のみ使用してみました。
(いずれも、PC、モバイル対応あり(無料・有料)、外部連携あり(Dropboxやphotoshop、Sketchなど。ツールによって異なります)です)


img_marvelMarvel
https://marvelapp.com/

全部英語で、使いこなせるかな?と不安でしたが、とても使いやすく、すぐに慣れます。
画面遷移だけすぐに確認したい、なんて時に便利です。
スマホ上でもタップエリア範囲を指定できますが、 PCで設定した方が、楽ちんでした。

img_marvel_cuteところどころの、(↑)このようなかわいいイラストで説明をしてくれるので、分かりやすく、かつ楽しく作れましたよ!


img_InVisionInVision
http://www.invisionapp.com/ 

気になった個所にコメントをすることができるので、メンバー同士のコミュニケーションが活性化しそうです。
ただ、チームで使う場合は有料のようです。


img_prottPrott
https://prottapp.com/

日本では、海外ほど多くのツールは見受けられませんでしたが、その中の1つをご紹介。(日本語が嬉しい!て思うかも(笑)) 
他のツールと違うのは、ワイヤーフレームもこれで作れることです。UIからプロトタイプまで一貫してできるのは良いですね。


ほかにも「POP」「flinto」「Fluid UI」など、いくつかありますが、とりあえずはこのへんで…。 

事前に確認を!

とっても便利なツールたちですが、それらを使う前にお伝えしたいことがあります。

・海外(英語圏)のツールは…
とっても当たり前の話になりますが、海外(英語圏)のプロトタイピングツール「英語」です。 ツールを使う上では、直感的に利用できるものも多いので、それほど心配することはありませんが、「質問したい」「退会したい」時などは、少々手間を感じてしまうことも…。

・セキュリティ
閲覧にはパスワードを入れるものもあったり、セキュアな状態(有料)で利用できるものもありますが、お客様によっては、アップロード自体に懸念を抱く方も多いかと思いますので、事前に(お客様や上司の方などへの)確認が必要です。 

さいごに

ツールを利用するかどうかは、ケースバイケースだと思っています。
※紙だけでやる方が早い場合もありますしね!

ただ、ちょっと動きを確認したい時や、画面数が多くて組み込むのが面倒だな、という時の簡易ツールとしては、なかなか便利です。

 

ありがとうございました。

 

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社