ラベル アプリのプロトタイピングを使ってみるシリーズ の投稿を表示しています。 すべての投稿を表示
ラベル アプリのプロトタイピングを使ってみるシリーズ の投稿を表示しています。 すべての投稿を表示

2016年3月14日月曜日

アプリのプロトタイピングツールをいろいろ使ってみる③ - InVision -

こんにちは。岡田です。

3月に入って暖かくなったり寒くなったり雨が降ったり花粉が飛んだり、忙しいですね。
私は花粉症を発症していないのですが、毎年「今年こそはデビューするんじゃないか」とビクビクしながら下積み時代を送っています。
できるだけデビューが先送りになることを願ってやみません。


前回の記事、読み返してみると、雑だなぁ、、と思ったので、(ごめんなさい)
今回はちょっと丁寧に書こうと思います。


InVision

前回の「POP」は、かなりシンプルで、単純な機能を簡単に使うアプリのプロトタイプを作るのに
かなり便利な印象でしたが、今回さわってみた「InVision」は、結構細かい設定まで簡単に行えるので
画面の動きを高度に再現できると思いました。


「InVision」のいいところ

他のプロトタイピングツールではあまりないな~と思ったのが、
ボタンをタップしたときの挙動に「URLをひらく」を設定できることです。

全部が全部ネイティブでないアプリを作る場合、これがあることによって
ネイティブの動きとWEBを見せる動きのイメージが
かなりつかみやすいのではないかと思いました。


あとは、、圧倒的な機能の充実具合でしょうか。

ベータ版とありますが、他サービスとの連携でユーザーテストを録画できたり、
更新状況をリアルタイムでメンバーと共有できるようです。

リアルタイム性はInVisionにとってかなり大きな特徴のような感じがします。


「InVision」のちょっと不便なところ

日本語対応していないところでしょうか。。

アプリのプロトタイプを作って、チーム内であーじゃねこーじゃねをしたり
ユーザーテストを録画してみたり、端末に共有してみたりと
かなり至れり尽くせりで便利だと思いますが


また、"お絵かき"をアップして画面を設定した時に、
ステータスバー(電波とか時間とか出ているところ)が"お絵かき"と被ってしまうので
ナビゲーションバーをちゃんと見たい場合は、ステータスバー分の余白を
あらかじめ"お絵かき"に入れておく必要がありました。

画面によって適当に入れていると、画面遷移したときにちょっとずれちゃったりして
結構気持ち悪くなってしまうので、
ステータスバー、考慮してほしいな~と思いました。


おまけ?

チャット機能が充実しているInVisionですが、面白いなと思ったのが
「ホワイトボード」というツールです。

ちょっと人と一緒に試せていないのですが、お絵かきチャットができます。

これでお絵かきしりとり、、したいなーーー。笑



「InVision」。全体的に、情報を共有することにとっても長けているプロトタイピングツールだと感じました。


2016年2月5日金曜日

アプリのプロトタイピングツールを使い倒してみる② -お手軽プロト「POP」ー

おかだです。

前回の投稿に引き続き、アプリのプロトタイピングツールについて実際に使ってみた感じを合わせて、少しずつご紹介していきます!


プロトタイピングツールを使う前に

プロトタイピングツールを使う前に、気を付けたほうがいいなと思うことがあります。

実際、プロトタイピングはとっても楽しいです。

たのしさへの期待感のあまり、いきなりツールを使い始めてしまうこともしばしば、、、、

ある?かもしれませんが、それはダメです。時間の無駄です。


ツールを使ってプロトタイプを作る前に、まずお絵かきをしましょう。

アプリの画面や遷移の構成を考えるのが本筋です。




ですが今回は、プロトタイピングツールを使ってみることが本筋なので、簡単にうさちゃんアプリの絵をかいてみました。

何をするアプリなのかよくわかりませんが、これを使って、プロトタイピング、するぞー!(こんな雑な絵で大丈夫か、不安です)

うさちゃんアプリ

お手軽プロトタイピング「POP」

POPは、いままで試したプロトタイピングツールのなかでは1,2位を争うお手軽さが特徴です。

メールアドレスだけで、無料で使えます!

また、ブラウザ版だけでなく、専用のAndroidアプリもあり、プロジェクトを共有できるので
実際に端末で動きのイメージを確認することもできます。

詳しい使い方をご紹介されているページがありましたので、参照させていただきます。




「POP」のいいところ

実際にうさちゃんアプリを作ってみて、いいなと思ったのは

「めっちゃお手軽!」なところです。

さきほどのうさちゃんアプリの各画面のお絵かきを写メで撮影して

それをPOPアプリでそのまま使って、ボタンの遷移などを設定することができてしまいます。

かなりお手軽!!!そして日本語対応!!!!!!(とってもいいです)

また、自分のプロジェクトを作る前から、見本のプロジェクトが入っているので

アプリのディレクターさん以外の方やプロトタイプ初めてやってみる方も、使いやすいと思います。




「POP」のちょっと不便なところ

ちょっと不便なところは、画面内のこまか~いところを再現できないところです。

もしかしたらプロトタイピングツールあるあるなのかもしれませんが

・ヘッダー固定ができない
・リストビューのスクロールができない

など、ちょっとここはこう動いてほしいのになー!というところに手が届かない感じがしました。

お手軽な反面、できないこともある程度あるみたいです。



「POP」でこんなことできるよ!

大まかな画面遷移を再現するだけならとてもお手軽にできるので

アプリの構想段階で、ある程度の構成をプロトタイプしてアプリのイメージをメンバーに共有するのが

かなり簡単にできると思いました!




今日はおしまいです。TGIF!!

2016年1月27日水曜日

アプリのプロトタイピングツールを使い倒してみる① -プロトタイピングとはー

こんばんは、おかだです。



昨年の話になってしまうのですが、Googleさん主催の「Google for Mobile」というイベントに参加してまいりました。

イベントでは、スマホに限らずさまざまなモバイル端末周辺にまつわる最近のお話を
たくさんのスピーカーの方から聞けるセッションがたくさん設けられていて

中でもウェアラブル端末や仮想現実のお話が非常に興味深かったです。

個人的には購入したばかりだったChrome Castが、スタイリッシュにアップグレードして
発売されるというお話がショックでした。
うちのテレビ、HDMI端子を画面に垂直に差し込むタイプなので、以前のCastちゃんでは
壁方向に端末のお尻が突出してしまうので、接触とか壁との隙間とかが結構気になっていたんですよね。

しかたないので、気が向いたら新しいCastちゃんを購入しようかと思います。

Chrome Cast、持ってると本当に便利でたのしいので、オススメです!



あたらしいアプリをつくることになりました


Google For Mobile では、アプリ開発に関するお話もたくさん聞けました。

音楽がきけるアプリ「AWA」のデザイナーさんの、実際にAWAを作った時のお話もとても参考になったので、こんどあたらしいアプリを作る時にぜひ意識していきたいと思いました。


なんですが今日書きたいのはその話ではなくて、プロトタイピングツールのおはなしです。


プロトタイピングとは


プロトタイピングは、アプリの設計段階で画面のイメージや動きを実装する前にみんなで共有するための素敵な手段です。

WEBのデザインと違って、アプリの場合は見た目だけではなく
アニメーションの動きなども伴ったユーザー体験が大事になってくるので
そのへんのいろいろを含め、作ってしまう前にみんなで共有したいよね!ということです。

"動き付きのモック"っていうイメージでしょうか。。



最近は簡単にプロトタイプをつくれる便利なツールがあるらしい


プロトタイピングについていろいろ調べると、けっこう書いてあります。

「あまり時間をかけないことが大事」



あくまでイメージの共有手段でしかないので、そこに時間かけるのは本題じゃないよね、ということでしょう。


なので、世の中のやさしい人たちが作ってくれた「プロトタイピングツール」をつかって
新しいアプリのプロトタイプを作ってみようと思います!


ツールには、無料のものから有料なものまで、お手軽なものから本格的なものまで
海外のものをあわせると10サービスくらい有名なものがあるみたいですが

今回は「Pixate」というツールを使って、いろいろ試してみたいと思います!




、、、というのは、「Pixate」のお話が冒頭のイベントで紹介されていたからなのです
(残念ながらそのセッションは私は聞いていなかったのですが、、、、汗)



プロトタイプが会議で役に立つといいなぁ。




ちなみにおかだはアプリの開発者ではないので、わからないこともありそうで結構ドキドキしています。

次回インストールから始めてみたいと思います!




わくわく!


【2016/02/05 追記】
コメントでもご要望をいただいたのですが、数あるプロトタイピングツールをいろいろとご紹介するのも
おもしろいかも!ということで
次回からは「実際に使ってみた」シリーズを何回か連載したいと思います!

早速ですが次回は「POP」と「InVision」の2つをご紹介していきます~~~