「プロトタイプ作成にかなり時間がかかっている・・・」
「せっかく作ったサイトが使いにくいと言われた。デザインの段階で問題があるかも」
こんな悩みをお持ちではないですか？
プロトタイプは、ほぼ最終形に近いデザインを表現するものです。
あたかもユーザーが実際にサイトを閲覧しているかのように、画面遷移やクリックした際の動きなども確認する必要があります。
つまりデザインの見た目よりも、実際のユーザー目線で使い勝手を体験しやすい専用ツールが良いツールと言えます。そして求められる最終成果物によって、ツールは使い分けが必要です。
この記事では、プロトタイプ作成ツールの利用価値から実際のツールの選び方までお伝えしていきます。最後まで読んでいただければ、あなたにぴったりのツールが見つかるはずです。
プロトタイプ以外のツールをお探しの場合は別記事を御覧ください。デザインは、下記のフェーズに分けられます。
スケッチ（手書きのラフ画）
↓
ワイヤーフレーム（スケッチをデジタル化したもの）
↓
モックアップ（ワイヤーフレームよりさらに色やサイズなどデザインを意識したもの）
↓
プロトタイプ（モックアップに遷移やアニメーションなど動きをつけたもの）
※本記事でご紹介
目次
1.ツールを使ってプロトタイプを作成する目的
2.プロトタイプ作成ツールの種類
3.正しいツールの選び方
4.プロトタイプ作成ツールのご紹介
まとめ
1.ツールを使ってプロトタイプを作成する目的
具体的には主に下記のような効率化が図れます。
1-1.製作の前にユーザーテストに近いことができる
プロトタイプを作成するための専用ツールは、動きを表現する機能が満載です。実際のプロダクト画面に近い感覚で、レイアウト、サイズ感、操作感などを検証でき、実際に製作に入る前にクライアントやユーザーが求める細かい要件をブラッシュアップすることができます。
プロトタイプの時点でユーザーテストに近いものを実現できるので、実際の完成品を後で大きく直すような事態が起こらないようにできます。
1-2.案件の受注確度が上がる
クライアントへプレゼンテーションを行う際、平面のデザインを提示するより、動的なデザインの方が好まれます。ほとんど完成系に近いので、使い勝手までイメージがしやすいからです。クライアントが求めている動きを早い段階から把握できることで、他社との差別化もでき受注できる角度が上がる可能性も高いです。
1-3.コミュニケーションロスを防ぐ
特にオンライン(Web)ツールであれば、プロトタイプ上にコメントを残したり、リアルタイムでチャットができたりするものが多いので、関係者とのデザインの方向性を簡単に合わせることができます。仕様のやり取りの中でのコミュニケーションロスを防ぎ、「こんなデザインのはずではなかった」というような仕様齟齬を大きく削減できます。
2.プロトタイプ作成ツールの種類
2-1.トランジション型
全体的な遷移を確認できます。そこまで凝った動きは必要なく、全体的な動きを見たい場合に適しています。
| メリット | 実際に触ってみて全体的な動きを確認できる。 |
| デメリット | 適用できる動きはツール上に用意されたもののみのため、一つ一つの細い動きはカスタマイズできないことが多い。 |
2-2.インタラクション型
画面内の動きを細かく確認できます。画面や機能の一部分に焦点をあてプログラミングに近い形でプロトタイプを作成するためスキルが必要です。
| メリット | 細い単位での動きのカスタマイズができ、それを実際に触って確認できる。 |
| デメリット | 画面遷移の動きの確認には適していない。また、複雑な動きを表現するので、習得に時間がかかる。 |
2-3.アニメーション型
全体的な動きのアニメーションを作ることで動画として確認できます。細い動きを作成でき、上記インタラクション型よりも比較的容易に作れます。
| メリット | 細い単位での動きのカスタマイズができ、比較的作成が容易。 |
| デメリット | 一連の動きを動画で確認するため、実際に触ってみることができない。 |
まとめると下記のようになります。
| トランジション型 | インタラクション型 | アニメーション型 | |
| 実際に触って動きを確かめられる。 | ○ | ○ | × |
| 全体の動きを表現できる。 | ○ | × | ○ |
| 細い動きをカスタマイズできる。 | × | ○ | ○ |
| 作成難易度 | 易 | 難 | 易 |
もちろん、トランジション型とインタラクション型を組み合わせたような、繊維と動きどちらも確認できる複合型のツールも増えてきています。ただ、トランジション型に特化したツールと比べると細い機能はついていない場合があります。
3.正しいツールの選び方
では、実際にどうやってツールを選べばいいのでしょうか。
それは、まず「目的を明確にすること」です。
あなたは今どんな悩みをお持ちでしょうか？
どの悩みを改善していきたいか、その目的によってツールの選び方が変わってきます。
例えば・・・
◼動きのない画像では伝わらない細いニュアンスがずれないようにしたい。
→インタラクション型
◼全体的な設計に対しての共通認識を持てるようにしたい。
→トランジション型
◼デザインの方針をエンジニアにうまく説明できるようにしたい。
→アニメーション型
◼場所を問わず社内外のチームメンバーと円滑にコミュニケーションが取れるようにしたい。
→アプリタイプではなくWebツール
あなたに適したツールを選ぶには、今の課題を洗い出し目的を明確にした上で、実際に使ってみて使い心地を確認するのが確実な方法です。
ほとんどのツールで無料トライアル版が用意されていますので、ぜひ活用してください。
4.プロトタイプ作成ツールのご紹介
最後にツールのご紹介をします。ここで主要なツールは網羅されていますので、こちらのリストから検討を始めてみてください。
4-1.トランジション型
4-1-1. Prott
Web/アプリ：Web, アプリ
料金：¥1,900〜/月 無料トライアルあり
特徴：日本初のツールであるため、メニュー表示など日本語。コメント機能などコミュニケーション機能が充実している。
共有方法：URL
URL：https://prottapp.com/ja/
4-1-2. Marvel
Web/アプリ：Web
料金：¥1,300〜/月 無料トライアルあり
特徴：Dropboxアカウントと連携しデータの取り込みが簡単にでき、シェア機能も優れている。
共有方法：URL
URL：https://marvelapp.com/
4-1-3. Flinto
Web/アプリ：Web, アプリ(アプリ版はMacのみ)
料金：Macインストール約¥11,000〜 もしくは月額¥2,200〜
30日間無料トライアルあり
特徴：プログラミングなしで画面の大きな遷移を表現できる。
共有方法：URL, ファイル
URL：https://www.flinto.com/
4-1-4. InVision
Web/アプリ：Web
料金：月額約¥1,600〜 無料トライアルあり
特徴：デザインに対してのコメントや履歴を共有できる。またSNS機能があり、コメントを書いたりタイムリーに編集できる。
共有方法：URL
URL：https://www.invisionapp.com/
4-1-5. POP
Web/アプリ：アプリ
料金：月額¥1,400〜 無料トライアルあり
特徴：手書きのモックアップをスマートフォンで撮影することでツール内に取り込める。製作中のデータを自動でDropboxなどのストレージに保管する機能があるため、データの紛失が起こらない。
共有方法：URL
URL：https://popapp.in/
4-1-6. UXPin
Web/アプリ：アプリ
料金：月額約¥3,200〜 無料トライアルあり
特徴：Webやスマホに使える素材が豊富にプリインストールされている。
共有方法：URL, ファイル
URL：https://www.uxpin.com/
4-1-7. Adobe XD
Web/アプリ：アプリ
料金：Adobe IDがあれば無料
特徴：ツールバーがシンプルで直感的に使いやすい。
共有方法：URL, ファイル
URL：http://www.adobe.com/jp/products/experience-design.html
4-1-8. CanvasFlip
Web/アプリ：アプリ
料金：¥1,600〜/月 無料トライアルあり
特徴：プロトタイプを共有すると自動でユーザーの動きをトラッキングするため、ユーザーテストまで行うことができる。
共有方法：URL, ファイル
URL：https://www.canvasflip.com/
4-1-9. ViewFlux
Web/アプリ：Web
料金：約¥1,000〜/月 無料トライアルあり
特徴：デザイン画像とのシェアとフィードバックが簡易にできる。プロジェクト別にURLが発行され、メンバーを招待できる。
共有方法：URL
URL：https://viewflux.com/
4-1-10. Briefs
Web/アプリ：アプリ
料金：約¥1,100〜
特徴：MacとiOS専用。スマートフォン用アプリをインストールすれば、スマートフォンからの画面確認も即座に可能。
共有方法：ファイル
URL：http://giveabrief.com/index.html
4-1-11. Demonstrate
Web/アプリ：アプリ
料金：無料
特徴：トランジションパーツの種類が豊富。Dropboxと連携して簡単に画像読み込みが可能。
共有方法：ファイル
URL：https://itunes.apple.com/jp/app/demonstrate-mobile-prototyping/id726285449?mt=8
4-2.インタラクション型
4-2-1. Form
Web/アプリ：iOSアプリ
料金：無料
特徴：部品をドラッグ＆ドロップするだけで素早く作成できる。
共有方法：ファイル
URL：http://relativewave.com/form/
4-2-2. Framer
Web/アプリ：アプリ
料金：月額約¥1,600〜 無料トライアルあり
特徴：JavaScriptを使って作成可。パソコンやスマートフォンの画面上に表示させ、ページの確認もできる。
共有方法：URL
URL：http://framerjs.com/
4-2-3. Origami
Web/アプリ：アプリ
料金：無料
特徴：Facebook社のツール。細かくインタラクションを設定でき、自由度高くプロトタイプを作成できる。
共有方法：ファイル
URL：https://origami.design/
4-2-4. iRise
Web/アプリ：Web
料金：¥3,200〜/月 無料トライアルあり
特徴：ワイヤーフレーム作成からユーザーテストまで一貫して作成できるのがポイント。リアルタイムでプロトタイプ共有＆編集が可能。
共有方法：URL
URL：https://www.irise.com/
4-2-5. Proto.io
Web/アプリ：Web
料金：¥2,700〜/月 15日間無料トライアルあり
特徴：アニメーションが豊富で細かい動きを調整できる。画面サイズを自由に設定できるので、どんな端末向けのプロトタイプでも作成可能。
共有方法：URL
URL：https://proto.io/
4-2-6. Composite
Web/アプリ：アプリ
料金：約¥1,100
特徴：PSDファイルにさまざまな記載をしてプロトタイプを作成できる。
共有方法：ファイル
URL：http://www.getcomposite.com/
4-2-7. Hype
Web/アプリ：アプリ
料金：約¥5,600 無料トライアルあり
特徴：HTMLとJSでプロトタイプを作成できる。
共有方法：ファイル
URL：http://tumult.com/hype/
4-3.トランジションとインタラクションの複合型
4-3-1. Principle for Mac
Web/アプリ：アプリ
料金：¥14,400〜 無料トライアルあり
特徴：トランジション型と比較してより細かくアニメーションを設定でき、直感的に使いやすい。
共有方法：URL, ファイル
URL：http://principleformac.com/index.html
4-3-2. ProtoPie
Web/アプリ：アプリ
料金：¥11,000〜 無料トライアルあり
特徴：複合型であるため、限りなく完成系に近いプロトタイプが作成できる。
共有方法：URL, ファイル
URL：https://www.protopie.io/
4-4. アニメーション型
4-4-1. Adobe After Effects
Web/アプリ：アプリ
料金：¥2,180〜/月 ７日間の無料トライアルあり
特徴：映像編集ソフト。クリックした際のエフェクトやアニメーションを表現できる。
共有方法：ファイル
URL：http://www.adobe.com/jp/products/aftereffects.html
4-4-2. Atomic
Web/アプリ：Web
料金：¥2,100〜/月 30日間の無料トライアルあり
特徴：ブラウザ上で使え、コメント機能がある。
共有方法：URL
URL：https://atomic.io/
まとめ
いいツールの選び方についてご理解いただけましたでしょうか。
プロトタイプは、実際の製作に入る前にデザインの最終確認を行うためにあります。ここで確実に関係者全員の合意を得ていないと、後で大きく手戻りなどが発生するリスクがあります。だからこそ、ツールを選ぶ際に「Webサイトでオススメされていたから決めた」などと簡単に決めてはいけません。
まずツールを導入するのは何のためなのか、目的を明確にしてください。その上で、実際に無料トライアルを使い、プロトタイプ作成ツールの効果を感じましょう。ツール導入の目的がはっきりしていれば、あなたにとって最高のツールが必ず見つかるはずです。
