注釈付きワイヤーフレームは必要？
プロトタイピングを作ることで、デザインの認識の共有をしてアイデアのミスマッチを防げます。現在様々なプロトタイピングツールがあり、特に初心者の人だとどれを選ぶべきか迷ってしまうかもしれません。今回はおすすめのプロトタイピングツールを7つご紹介します。ぜひ参考にしてみてください。
Part 1: デジタルプロトタイピングとは何ですか
グラフィックデザインとは
プロトタイピングとは、デザインのアイデアをビジュアル化した試作品のことです。ペーパープロトタイピングとデジタルプロトタイピングの二種類があり、ペーパープロトタイピングでは各画面のデザインを一枚の紙に表します。各画面の紙を用意して紙芝居のように動かすことで画面の移り変わりを想定し、実装された時のシミュレーションを行います。デジタルプロトタイピングでは、この一連の過程をデザインソフト等を使ってシミュレーションします。
デジタルプロトタイピングのメリットとしては、実装された時により近い状態でシミュレーションできるという点です。紙だと大まかにデザインを確認できますが、フォントの大きさや画面を通して見たと時の色合いなどの細かな確認には向いていません。その点、デザインソフトだとサイズや色を完成品とほぼ同じ状態で確認ができます。また、アニメーションを付けられるのもデジタルプロトタイピングのメリットです。完成品に近い状態にすることで具体的なフィードバックを得られるので、デザインを忠実に再現したい場合はデジタルの方が良いでしょう。ただし、紙よりもできることが増える分作業に時間がかかります。どちらが適しているのか状況に応じて適当な方法を選びましょう。
Part 2: トップ7のデジタルプロトタイピングツール
① Mockitt
Wondershare Mockitt オンラインで使えるプロトタイピングツールです。このツールの特徴としては、豊富なテンプレートと直感的に操作ができる画面設計です。スマートフォンの画面やWebページ用のサイズなどがすでに設定されているので、わざわざ自分でサイズを調節する手間が省けます。また、作業するためのツールが1つのパネルにまとまっているので、初心者でも簡単に扱えます。プロトタイピングが作成できたらクライアントやチームと共有する必要があります。mockittではPDFやHTML、PNG、Android APK形式で書き出せるので、案件ごとに適したファイル形式での共有が可能です。使いやすいと言われているデザインツールでは英語のみ対応しているソフトが多いですが、Mockittは日本語に対応しています。ホームページではソフトの使い方なども解説しているので、日本人デザイナーにとってはとても使いやすいツールです。
② AdobeXD
人気の高いAdobe社が提供しているデザインソフトです。他のAdobe製品との互換性があるので、IllustratorやPhotoshopを導入している人はスムーズに作業ができます。AdobeXDでは、特にリピートグリッド機能が特徴です。これはオブジェクトを複製する機能で、個々のオブジェクトの編集も可能です。デザイン制作において簡単に複製できると作業効率も上がります。注意点としては、これらのソフトを全て使うためには月額6,248円のAdobeCCプランに加入する必要がある点です。
出典:AdobeXD
③ Figma
こちらもオンラインで使えるプロトタイピングツールです。無料で使えるので、一時的に利用したい場合におすすめです。Figmaでは基本的なデザインツールが揃っており、特にファイルの同時編集機能があるので、チームで作業する場合は効率よく作業ができます。無料でも利用できますが、チームで使いたい場合やより高機能を使いたい場合は、月額12ドル（約1,320円）・月額45ドル（約5,000円）のプランを利用してみましょう。ただし、日本語に対応していないため人によっては使いづらさを感じるかもしれません。
出典:Figma
④Sketch
デザインツールとプロトタイピングツールが一体化しており、デザイン設計の一連の流れをSketch1つで完結させられます。ソフトを切り替えたり別のソフトで作ったファイルを取り込んだりするのが面倒だという人におすすめです。ただし、プロトタイピングに特化していないので、高度な編集をしたい場合に対応していない機能があるかもしれません。また年間99ドルか月額9ドルのプランしかないので、無料で少しだけ試したいという利用の仕方ができない点に注意です。
出典:Sketch
⑤In Vision
In VisionではSlackやDropboxと連携していたり複数人で同時編集ができたりと、チームでの作業に向いているツールです。UIデザインやプロトタイピングの作成に特化しているので、機能が充実しており完成度の高いものを作れます。こちらも日本語に対応していないため、英語のみのソフトだと使いづらいという場合には向いていません。
出典:In Vision
⑥Prott
日本企業が提供しているオンラインデザインツールです。ホームページで「画像を取り込み、つなぎ合わせ、アニメーションを指定するだけ」と強調している通り、簡単な操作でプロトタイピングを作成できます。AndroidとiOSアプリもあるので、スマートフォンの画面で実際に見た時の見え方を確認したい時にもおすすめです。
出典:Prott
⑦UX pin
直感的な操作で簡単にプロトタイピングを作成できるツールです。様々なOSに対応したオブジェクトが用意されているので、初心者の人でも簡単にデザインを設計できます。月額19ドルと月額29ドルのプランがあるので、自分に合ったプランを選びましょう。企業単位で利用したい場合などはカスタムプランも利用できます。
出典:UX pin
プロトタイピングは制作現場において重要な役割を果たしています。しかし、プロトタイピングの作成に膨大な時間を費やすことはできません。Wondershare Mockittのような使いやすい機能がまんべんなく揃っていて簡単に操作できるツールを利用することで、効率的に作業ができます。ぜひ導入してクオリティの高いプロダクトを作りましょう。
