プロダクト開発においてスピードも重視するVASILYでは、効率的・効果的にデザインを行えるよう様々なツールを活用しています。

今回は、これまで使ってきた中でオススメのアプリやサービスをいくつかご紹介したいと思います。

---

プロトタイピングをつくる

アプリ制作は、

- どこからどこへ遷移するのか
- どのようなアクション・アニメーションで遷移するのか

など、実際に動いているものを検討してみないとわからないケースが多いものです。

実装後、「やっぱこれって変じゃない？」とならないためにも、VASILYではプロトタイピングでの確認・検討を必ず行うようにしています。 

 

POP

https://popapp.in/jp/
［iPhone / Android］※2015年3月12日現在

POP（Prototyping on Paper）という名前からもわかる通り、ペーパープロトタイピングに特化したアプリです。紙に書いた手書きワイヤーを「スマホで撮影」「リンクを設定」するだけで、画面遷移をするモックが簡単につくれます。

プロト制作に必要な最低限の機能で構成されているので、アプリデザインの初期段階や、はじめてペーパープロトに挑戦したい方、ノンデザイナーの方にもオススメです。

 

Prott

 

https://prottapp.com/ja/
［iPhone］※2015年3月12日現在

基本機能はPOPと同じですが、機能やUIをさらにリッチにしたアプリです。

リンクや画面遷移の指定がより簡単で直感的に行え、アクションやアニメーションの種類もPOPよりやや豊富。プレビューの際にステータスバーの色が変えられるのも、かゆいところに手が届いている感じでグッドです。

また、Slackとの連携も可能なので、社内でSlackを導入している場合はより効率的な開発が可能になるかと思います。

ただ、2プロジェクト以上つくる場合は有料版への登録が必要なので、ノンデザイナー含め複数人でプロトタイプを制作したり、Slackなど外部サービスとも連携させたい場合にオススメです。 

 

InVision

http://www.invisionapp.com/
［iPhone / Android］※2015年3月12日現在

ペーパープロトからちょっと進んで「ラフデザインで動きも確認したい」というときには、InVisionがオススメです。

POPやProttと同様のプロト制作機能を備えつつ、縦スクロール可能なモックもつくれるため、より実際の使用感を意識したプロトタイプがつくれます。もちろん、ペーパープロトをつくるだけでもまったく問題はありません。

ペーパープロト〜ラフデザインという幅広い制作段階で使用できることから、VASILYデザインチームではInVisionでのプロトタイプ制作を積極的に取り入れています。

  

---

デザインを手軽に実機で確認する

実際のデザイン制作を進めていくと、マージンや文字の可読性など、どうしてもスマホで実機確認をしたくなる場面がやってきます。

画像を書き出してメールに送ったり、あるいはサーバにアップしたりと、スマホでデザインを確認するのはなかなか大変な作業です。

そんなときは、Macの画面をiPhone上にリアルタイムプレビューしてくれるアプリがオススメです。

 

Skala Preview

http://bjango.com/mac/skalapreview/
［iPhone / Android］※2015年3月12日現在

まずは、MacとiPhoneの両方に専用アプリをダウンロード。同じLAN内に接続することで、PhotoshopのキャンバスをリアルタイムにiPhone上で見ることができます。

もちろん修正もリアルタイムで反映されるため、細かな微調整を実機で確認しながら行えます。

都度書き出して、サーバにアップして、実機で確認…というわずらわしさをカットできるので、作業効率がぐっと上がります。

 

Live View

［iPhone］※2015年3月12日現在

Skala PreviewがPhotoshopとのリアルタイムリンクなのに対し、Live ViewはPCに表示されている画面ならどこでもリンクさせることが可能です。

デザインはIllustratorじゃなきゃ。という方にはこちらのアプリがオススメです。

 

---

アプリのモーションを録画する

デザインをするにあたり、みなさんも参考になりそうなアプリを日々キャッチアップしているかと思います。このメニューの表示の仕方が素敵だなとか、スクロール時のぬるぬるした動きが気持ち良いなとか。素敵な表現はぜひとも参考にしたいですよね。

とはいえ、アプリの細かな動きを言葉で表現するのはなかなか難しいものです。そんなときは、実際にモーションを録画してしまうほうが早いかもしれません。 

 

Reflector

［iPhone］※2015年3月12日現在

まずはMacにReflectorをインストールし、iPhoneをAirPlayでミラーリング。すると、iPhoneで表示されている画面が、Macでも同時に見えるようになります。iPhone内の動きや音もきちんと同期されるので、Mac上でリアルタイムに録画することが可能になります。

動画はMP4形式で保存されるので、チーム内で情報共有をしたい場合はもちろん、Evernoteに蓄積して自分専用のモーション・アーカイブをつくるのもオススメです。 

 

Telecine

https://play.google.com/store/apps/details?id=com.jakewharton.telecine
［Android］※2015年3月12日現在

Androidアプリのモーションを録画したいという場合には、Telecineがオススメです。

ReflectorのようにPCをミラーリングデバイスとして使用する必要がなく、録画・保存までAndroid内で手軽に行えることが大きなポイントです。

ただし、Android 5.0以上でないと使えないのでご注意ください。

 

---

最後に

以上、VASILYデザイナーチームが選ぶ、アプリデザインを効率的に行うためのツール紹介でした。

VASILYではこのようなツールを最大限に活用し、スピーディなプロダクト開発に貢献してくれるデザイナーを絶賛募集中です！

https://www.wantedly.com/projects/5485

連絡先：info[at]vasily.jp