astamuse Lab

astamuse Labとは、アスタミューゼのエンジニアとデザイナーのブログです。アスタミューゼの事業・サービスを支えている知識と舞台裏の今を発信しています。

プロトタイピングツールでデザインの作業効率を上げる

アスタミューゼデザイン部のMatsumotoです。
ここ最近astamuse.comastaIDのスマホ最適化の取り組みに合わせて、プロトタイピングツールを実験的に使い始めました。 ツールを使い始めてからまだあまり月日が経っていませんが、とにかく便利!
ストレスなく今までのデザインプロセスが改善しそう!
ということで、今回はプロトタイピングツールを使う利点や、実際のサービス開発において、どう作業効率がUPしたのかについて紹介させていただきます。

 目次

プロトタイピングツール概要

そもそもプロトタイピングとは何?

プロトタイピング(Prototyping)とは、実働するモデル(プロトタイプ)を早期に製作する手法およびその過程を意味する。その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。

プロトタイピング - Wikipediaより

Webデザインで使うプロトタイピングツールとは、Webやスマホサイト・アプリを設計する際、チームで共有しながら、コードなしで、デザイン画面の画像のみでプロトタイプを効率的に作れるWebサービスのことです。
年々多くの便利なツールが登場してきているので、現在知っているだけでもすごい数ありますが、その中でもデザイナーの評価が高くて、多数の企業が使っているツールを試験的に使ってみました。

ツールを使用するようになった経緯

冒頭でふれましたが、astamuse/astaIDでは、現在スマホ最適化を進めています。
モバイルでの実機確認を手軽にしたかったので、ツールを使用し始めました。
リリース当初のターゲットユーザー像は、オフィスで仕事時間中に使うことを前提としていましたが、現在はスマホ・タブレットの普及やユーザー層の変化もあり、段階的にいくつかのコンテンツのスマホ対応を進めています。

f:id:astamuse:20160809174727p:plain
現在制作中 / marvelの画面

ツールを使う目的

私が主にツールを使い始めた目的は、以下4つです。

  1. モバイルでの実機確認したい
  2. ワイヤーフレームや画面遷移・トランジションの確認をしたい
  3. ボタンタップ後の動きインタラクション検討したい
  4. デザイナー・エンジニア間での共有&認識の相違をなくしたい

f:id:astamuse:20160809182003p:plain
現在制作中 / Prottのプレゼン用画面 ※背景画像、端末設定が細かく設定できるのが楽しい

使ってみた3つのサービス比較

基本機能はほとんど同じです。

  • プロトタイピング
  • モバイルでの実機確認
  • デザインレビュー
  • 複数メンバーとのプロジェクト共有
  • Slackとの連携
  • コメント付与

ただ、それぞれのサービスごとに、わずかですが機能の違いはあります。(下記表まとめ参照)

サービス [inVision]
f:id:astamuse:20160809105559p:plain:w120
[marvel]
f:id:astamuse:20160809105603p:plain:w120
[Prott]
f:id:astamuse:20160809105607p:plain:w120
会社場所 ニューヨーク ロンドン 東京
主な利用企業 twitter
UBER
Linkedin
salesforce
Evernote
sony
ustwo
M&S
DigitasLBi
GA
TransferWise
DICE
Yahoo!Japan
DeNA
RECRUIT
cookpad
GREE
IDEO
同期 Dropbox
Googledrive
Slack
Basecamp
Dropbox
Googledrive
Slack
Basecamp
Dropbox(自動更新なし)
Slack
ワイヤーフレーム作成機能 なし あり(無料) あり(有料)
インポートファイル形式 JPEG
GIF
PNG
PSD
ai
Sketch
JPEG
GIF
PNG
PSD
PDF
Sketch
JPEG
GIF
PNG
PSD
Sketch
シェア URL
Email
SMS
Embed
URL
Email
SMS
Embed
URL
Email
Embed
料金(月額) 無料(FREE)
$15(Starter)
$25(Professional)
$99(Team)
応相談(Enterprize)
無料(FREE)
$15(Pro)
$19(Plus)
$45(Company)
応相談(Enterprize)
※年間契約20%OFF
無料(Free)
1,900円(Starter)
3,900円(Pro)
7,400円(Team)
応相談(Enterprize)
※年間契約10%OFF 
その他特徴 -バージョン管理機能
-画面単位での進捗管理機能
-ユーザーテスト機能
-無料版でプロジェクト2つまで作成可能
-ユーザーテスト機能
-プレゼン機能(背景画像、端末設定)が細かく設定可
-日本語対応

2016/08/17時点まとめ

どのツールもUIが美しくて、直感的に操作できて、各種ツールの使い方もほとんど同じなので学習コストも低く、ほんと使いやすい!
こんな素晴らしいツールを提供してくれるなんて、制作&開発者に感謝です。

私個人的には、marvelのUIが好きです。UIのアニメーションの動きの気持ちよさや、色使い、アイコン、イラスト等、ポップな感じが使っていてとても楽しいです。ただ、今後デザインメンバーが増えてプロジェクト数が増えていくと、inVisionが使いやすいかなと思っています。(バージョン管理や進捗管理機能など充実)
どのツールを有料プランに切り替えて使い続けるかは、もう少し様子みて検討(+他メンバー&上司と相談)しようかなと思います。

何が変わった?

使い始めてからあまり月日が経っていないので、まだ使いこなせていない感はありますが、改善しはじめている点はいくつかあります。

デザインに対してエンジニアからのフィードバックが増えた

ツールを使う目的の1つである「デザイナー・エンジニア間での共有&認識の相違をなくしたい」と言う事が、プロトタイプを作って共有することで、エンジニアからの意見をもらいやすくなり、デザインラフの段階から、そのフィードバックを反映しやすくなった。

デザインレビューの回数&時間が短くなった

今まで1画面づつデザインの確認をしていましたが、画面遷移する複数ページをすべてまとめてレビューしてもらえるようになったので、レビューの回数&時間が総合的に短くなった。

フィードバックからのデザイン修正、共有のフローが楽になった

下図で詳細を記載していますが、これが一番うれしい。
今まで、4ステップだったのが、1ステップになった。かなりの効率アップ!

f:id:astamuse:20160810162726p:plain

まとめ

色々使っていて楽しいプロトタイピングツールですが、今現在に限っては、スマホ化対応のためだけに使用しています。通常のwebサイトの開発&改善の際は、今まで通り上記で述べているようなフロー(プロトタイピングツールを使用しないフロー)で進めている状態です。 プロトタイピングツールと言っても、ただ単にデザインレビューやデザインチェックツールとして、メンバーからの意見を反映しやすかったりと重宝しそうなので、積極的に使って、より効率的にプロジェクトを進めていきたいです。

アスタミューゼではサービスをより良くしていくため、一緒に働いてくれるデザイナー・エンジニアを募集しています。ご応募おまちしております!

参考サイト

Copyright © astamuse company, ltd. all rights reserved.