2017.03.15フリーランスの基礎知識

おすすめプロトタイピングツール6選と必要性

  • このエントリーをはてなブックマークに追加
2b97613a f5e0 402c b556 69cc8c0361c3
皆さんは、『プロトタイピングツール』というものをご存知でしょうか。プロトタイピングツールとは、アプリケーションやWebサイトの使用感などを確認するためのプロトタイプを制作するツールの事です。今回は、このプロトタイピングツールについて詳しく解説しながら、プロトタイピングツールの選び方や、おすすめのプロトタイピングツールを紹介いたします。
 
10,000件以上の案件から希望の案件をご紹介!

未公開案件も多数ありますので「まずは相談したい。」という方もお気軽に登録ください。

あなたに合ったフリーランス案件を探す
Banner free wide 037b570405fddeb419957475d18a005501589cadc55bfe73d5000335887322fd
【目次】
プロトタイピングツールとは|使用目的と種類
プロトタイングツールとは
プロトタイピングツールの使用目的
プロトタイピングツールの必要性
プロトタイピングツールを選ぶときに必要な4つのポイント
プロトタイピングツールを必要としない場合
目的に合わせて選ぶ
ツールを比較して機能で選ぶ
UI/UXを考えて選ぶ
おすすめのプロトタイピングツール6選
Origami Studio
Atomic
Prott
ProtoPie
InVision
POP
まとめ
 

プロトタイピングツールとは|使用目的と種類


それではさっそくプロトタイピングツールの概要や使用目的、種類などについて詳しく解説していきます。
 

プロトタイングツールとは

プロトタイピングツールとは先述した通り、アプリケーションやWebサイトを制作する際に用いる「プロトタイプ」を制作するためのツールです。開発途中の制作物の使用感、言葉や画像では表現しづらいような動きなどを、顧客やプロジェクトメンバーに伝えるためのプロトタイプを制作するために使用されます。
 

プロトタイピングツールの使用目的

プロトタイプの役割はあくまで、ある程度の表現を確認することです。本格的に作り込む必要はないため、作業工数を削減することができます。そのため、簡単に素早くプロトタイプを制作できるプロトタイピングツールはよく使用されるようになりました。
 

プロトタイピングツールの種類

プロトタイピングツールには、特徴によって3つの種類に分けることができます。
 
トランジション型
トランジション型は、Webサイトやアプリケーションの全体的な動きを表現するのに向いている型です。ホームページから各ページに移動するときの動きなどを確認するためプロトタイピングを制作するときに向いています。トランジション型は比較的、学習コストが低いものが多いです。
 
インタラクション型
インタラクション型は、Webサイトやアプリケーションのページ一つひとつにフォーカスしており、細かい表現などを確認するためのプロトタイプを制作するときに向いています。インタラクション型は細か動きなどを表現するため、学習コストが高いものが多いです。
 
複合型
複合型は、上記2つの特徴を掛け合わせたようなもので、トランザクション型のように全体的な動きを設定できるうえに、インタラクション型ほどではありませんが画面一つひとつの動きも作り込むこともできます。複合型はトランジション型よりは学習コストが高めですが、インタラクション型より手軽なものが多いです。
 

プロトタイピングツールの必要性

プロトタイピングツールは、プロトタイプを少ない工数でつくることが目的です。それは同時に、プロトタイプを手軽でつくれるということでもあり、プログラミングを本職としないデザイナーなどにも重宝されています。
 
また、プロトタイプはプログラミングを本職としない人にも仕様などが理解しやすいため、社内やプロジェクト内での認識共有に有効です。そしてイメージもしやすくなるためMTG時などには意見が出しやすくなるというメリットがあります。その結果、ミーティングがスムーズにでき、品質を向上させられるからこそ、プロトタイピングツールの必要性が謳われています。

プロトタイピングツールを選ぶときに必要な4つのポイント


現在、プロトタイピングツール製品は数多く存在するため、その中からどれを選べばいいかわからないということがあるかと思います。この項目では、どのような点に考慮してプロトタイピングツールを選べば良いかを解説していきます。
 

プロトタイピングツールを必要としない場合

一見するとプロトタイピングツールは便利ですので、どのプロジェクトでも使用するべきかのように思えますが、プロトタイピングツールを必要としない場合もあります。それは、単純に動きのないようなプロトタイプをつくる場合です。

その場合、わざわざ専用のプロトタイピングツールを使ってプロトタイプを制作せずとも、簡単なイラストアプリやExcel、方眼用紙などを用いて作成した方が少ない工数で済み、表現も充分に伝えられるからです。
 

目的に合わせて選ぶ

どのようなプロトタイプが必要かによって、ツールを選ぶべきです。その基準としては、先に解説した3つの種類を考えると良いでしょう。例えば、Webサイトのページ移動やアプリケーションの全体的な動きを表現するためのプロトタイプを制作する場合は、トランジション型のプロトタイピングツールを使用すれば良いでしょう。

そしてトランジション型よりも、少しだけ細かなページの動きを表現したいときは複合型、もっと一つひとつの細かな動きを表現したい場合はインタラクション型を選択すれば良いということです。
 

ツールを比較して機能で選ぶ

現在、プロトタイピングツールは数多く存在しますが、人気の製品にはそれぞれ特徴があります。その特徴や使い勝手をみて、自分の使いやすいものを探すと良いでしょう。
 

UI/UXを考えて選ぶ

UI(ユーザーインターフェイス)とは、利用者が実際に見て、操作する画面のことです。さまざまな製品の中から1つの製品を選ぶときには、自分の気に入ったUIのツールを選ぶというのは重要なポイントかと思います。
 
UX(ユーザーエクスペリエンス)は、利用者が実際に使用して受ける使用感などのことです。よく「ユーザー体験」という表現もされます。UIもUXの1つの要因になります。プロトタイピングツールでいうと、起動速度や処理速度、操作感、プロトタイプに実装可能な表現の種類などがUXにあたります。
 
UIやUXについてはUI/UXデザインの違いと身に付けるべきスキルをご覧ください。

おすすめのプロトタイピングツール6選


それでは、おすすめのプロトタイピングツールをその特徴と併せて6つ、紹介いたします。
 

Origami Studio


(引用: http://origami.design/)
 
Origami Studioは、Facebookが開発、提供し、Facebook社内でも実際に使用されているMac OS用のプロトタイピングツールです。Origami Studioのもっとも注目すべき特徴は、モバイルデバイスを繋いでいれば同期が可能で、変更内容が常に更新されていくということです。

そして、スマートフォン向けアプリで使用頻度の高いパーツがデフォルトで用意されているのもポイントで、すぐにプロトタイプの政策を開始できます。そして無償提供されているというのは何よりも注目ポイントです。プロトタイピングツールに悩んだらまず試してみて欲しい製品です。
 

Atomic


(引用: https://atomic.io/)
 
Atomicは、ブラウザで使用できるプロトタイピングツールで、 Windows、Macの両方に対応しています。AdobeのPhotoshopやSketchとの連携が強く、これらで制作したデザインをコピー&ペーストで取り込むことができます。そして、制作したプロトタイプを共有したいときには、ツール内で共有用のURLをしてくれるため、素早く共有できます。
 
料金プランには月額コースが3つあり、月に5つのプロトタイプが制作できるスタータープラン($15)、月に25個のプロトタイプを制作でき、コメント機能なども使用できるプロプラン($25)、全ての機能を制限なく使用できるアンリミテッドプラン($35)の中から自分の用途に合ったものを選択できます。
 

Prott


(引用: https://prottapp.com/ja/features/)
 
Plottは操作の簡単さが売りで、Mac OSと iOS、Androidに対応したプロトタイピングツールです。紙にデザインを描いたらiOSやAndroidのPlottで写真を撮って読み取り、そのままプロトタイプを制作し始めることもできますし、MacのPlottにすぐ同期し、作業自体はPCで始めることもできます。また、Plottはバージョン管理ができるため、一度変更したプロトタイプも気に入らなければ、すぐに元のバージョンへと戻すことができます。
 
料金プランには、スタータープラン、プロプラン、チームプランという3種類のプランがあり、さらに月間プランと、10%offになるお得な年間プランがあります。スタータープランは\1,900で、ひと月に3つのプロジェクトを制作できるプランです。プロプランは\3,900で、プロジェクトを無制限に制作することができ、さらにワイヤーフレーム機能や画面遷移機能などが追加されます。

チームプランは\7,400で2ユーザーが使用でき、プロプランの機能に加え、共同編集機能、組織管理機能などが追加されます。
 

ProtoPie


(引用: https://www.protopie.io/)
 
ProtoPieは、動作速度に定評のある複合型のスマートフォンアプリ向けのプロトタイピングツールです。現在はMac OSのみの対応ですが、今後Windows版もリリースする予定です。なお、プレビュー用のアプリはiOS、Androidアプリでリリースされています。ProtoPieは動作速度が速いだけでなく、使用難易度が低いという点も人気の理由になっています。

機能面では、マイクや3DTouch、3本指タップ、加速度センサなどが利用でき、複数デバイスをアプリで連携するような表現も可能なため、プロトタイプの中でも高度なUXを確認できるようになっています。
 
料金プランはシングルライセンス、ボリュームライセンス、エンタープライズライセンスの3つがあり、シングルライセンスが買い切り$99で、1年間のアップデートが付いています。また、ボリュームライセンスというものもあり、こちらは複数のライセンスを買うと割引価格が適用されるプランです。エンタープライズライセンスはクラウドサーバーを使用して、複数人で共同作業できるプランです。詳細はお問い合わせが必要です。
 

InVision


(引用: https://www.invisionapp.com/)
 
InVisionは、ブラウザで使用できるWindows、Mac両対応のプロトタイピングツールです。大きな特徴は、制作したプロトタイプにフリーハンドでコメントができるという点です。文字だけでは表現しづらいことなどもメモ書きのように指摘できるため、複数人で共有するときに活躍します。
 
料金プランは、フリープランとスタータープラン、プロフェッショナルプラン、チームプランがあります。フリープランはその名の通り無料で利用できるプランで、月に1つのプロトタイプを制作できます。スタータープランは月額$15で3つのプロトタイプを制作できます。プロフェッショナルプランは月額$25で無制限にプロトタイプを制作するとこができます。

そしてチームプランは月額$99で5人まで無制限にプロトタイプを制作できます。また、企業向けにエンタープライズプランも用意されています。
 

POP


(引用: https://marvelapp.com/pop/)

POPは、iOS、Androidで使用可能なスマートフォン向けのペーパープロトタイピングツールです。ペーパープロトタイピングツールとは、紙などに描いたデザインを取り込んでプロトタイプにするためのツールです。こちらはスマホやタブレットでいつでもどこでも簡単なプロトタイプを制作可能で、操作も直感的に行えるため小難しい操作を必要としない手軽さが人気です。
 
料金プランは3つあり、1つ目は無料で2つのプロジェクトを制作できるフリープラン。2つ目は月額$15で無制限にプロジェクトを制作できるプロプラン。そして利用人数によって月額料金が変わる会社向けのカンパニープランがあります。また、有料プランは年間利プランにすると20%offになります。
 

まとめ


いかがでしょうか。Webサイトやアプリケーションを制作するプロジェクトでは、顧客やメンバー内でなるべく認識の相違がないようにしないと、もしプロジェクト後半で相違が発覚した場合に大幅なロスが発生してしまいます。そのため、動きの多い制作物のプロジェクトでは、プロトタイプの制作は必須です。

また、本当のプログラミングと比べれば、学習コストもかなり低いものばかりですし、無料で利用できるものもあるため、気になった方は気軽に利用を始めてみましょう。
  • このエントリーをはてなブックマークに追加
10,000件以上の案件から希望の案件をご紹介!

未公開案件も多数ありますので「まずは相談したい。」という方もお気軽に登録ください。

あなたに合ったフリーランス案件を探す
Banner free wide 037b570405fddeb419957475d18a005501589cadc55bfe73d5000335887322fd

新着のコラム記事

人気のコラム記事