yamaです。
今回は、モバイルアプリのプロトタイピングツールをいくつかご紹介したいと思います。
操作感をつかんで、 アクセシビリティ向上を!
アプリやwebサイトを作る過程で、GUIの時のイメージと、実際に実装されたものを見ると「…あれ?」と思うこと・・・ありませんか?
もしくは、事前に確認してOKをもらっていたのに、終盤のタイミングで「イメージと違ったからこうして~!」と言われてしまい、最悪、UI設計からやり直し…なんてことも!!
そんな手戻りを防ぐのはもちろん、使い勝手の良い最適なユーザインターフェースにするために、設計時に「プロトタイプ」を作って、利用者視点で操作をしてみることをお勧めします。
さて、そこで、今回ご紹介したいのが「プロトタイピングツール」。
「プロトタイピングツール」の多くは、コードや専門的な知識は不要で作成可能です。
とりあえず必要なのは、この2つ。
・(元になる画面の)絵(データや紙に描いたものなど)
・どこをクリックしたら、どの画面に繋がるか…のイメージ
まずは、無料なものでトライしてみるのも良いでしょう。
※操作は簡単ですが、実際に始める時は、少し時間に余裕を持つことをお勧めします
プロトタイピングツールのご紹介
では早速、いくつかピックアップしてご紹介を。 いずれも、フリー版のみ使用してみました。
(いずれも、PC、モバイル対応あり(無料・有料)、外部連携あり(Dropboxやphotoshop、Sketchなど。ツールによって異なります)です)
Marvel
https://marvelapp.com/
全部英語で、使いこなせるかな?と不安でしたが、とても使いやすく、すぐに慣れます。
画面遷移だけすぐに確認したい、なんて時に便利です。
スマホ上でもタップエリア範囲を指定できますが、 PCで設定した方が、楽ちんでした。
ところどころの、(↑)このようなかわいいイラストで説明をしてくれるので、分かりやすく、かつ楽しく作れましたよ!
InVision
http://www.invisionapp.com/
気になった個所にコメントをすることができるので、メンバー同士のコミュニケーションが活性化しそうです。
ただ、チームで使う場合は有料のようです。
日本では、海外ほど多くのツールは見受けられませんでしたが、その中の1つをご紹介。(日本語が嬉しい!て思うかも(笑))
他のツールと違うのは、ワイヤーフレームもこれで作れることです。UIからプロトタイプまで一貫してできるのは良いですね。
ほかにも「POP」「flinto」「Fluid UI」など、いくつかありますが、とりあえずはこのへんで…。
事前に確認を!
とっても便利なツールたちですが、それらを使う前にお伝えしたいことがあります。
・海外(英語圏)のツールは…
とっても当たり前の話になりますが、海外(英語圏)のプロトタイピングツール「英語」です。 ツールを使う上では、直感的に利用できるものも多いので、それほど心配することはありませんが、「質問したい」「退会したい」時などは、少々手間を感じてしまうことも…。
・セキュリティ
閲覧にはパスワードを入れるものもあったり、セキュアな状態(有料)で利用できるものもありますが、お客様によっては、アップロード自体に懸念を抱く方も多いかと思いますので、事前に(お客様や上司の方などへの)確認が必要です。
さいごに
ツールを利用するかどうかは、ケースバイケースだと思っています。
※紙だけでやる方が早い場合もありますしね!
ただ、ちょっと動きを確認したい時や、画面数が多くて組み込むのが面倒だな、という時の簡易ツールとしては、なかなか便利です。
ありがとうございました。