アプリメーカー向けの7つの最高のワイヤーフレーミングおよびプロトタイピングツール

最近、UIとUXについてたくさんの議論がありました。誰も文句を言っていないので、アプリ開発に携わるすべての人がUIとUXの重要性を認識できるようになっていると思います。

優れたアプリのアイデアは、よく考えられていないインターフェースとエクスペリエンスによって簡単に台無しになります。また、迅速なワイヤーフレーミングとプロトタイピングに利用できる多くのツールが用意されているため、すばらしいエクスペリエンスを実行しない理由はありません。

これらの用語はよく一緒に使用されますが、ワイヤーフレームとプロトタイプには明確な違いがあります。

ワイヤーフレームは、アプリの構造の骨格的な最低限のレイアウトです。これは通常、色なし(単純な白黒)で行われ、ワイヤーフレームはテキスト、画像、その他のデザイン要素の行き先を示しますが、実際の画像、テキストなどは含まれません。ただし、ワイヤーフレーム要素のそれぞれは実物大で表示されます。これは、ワイヤーフレームが実際の設計ではなく、構造に注意を集中することを目的としているためです。家や建物の青写真と同じように、デザインに気を取られることなく、すべての構造と配置を明確に把握できます。

プロトタイプは、ワイヤーフレームと完全に機能するアプリの間にあります。プロトタイプの最も重要な部分はアニメーションの使用です。これにより、アプリがユーザーの操作やページまたは画面の遷移にどのように応答するかを調べることができます。プロトタイプには、実際の画像、アイコンセット、テキストを含めることもできますが、これはプロトタイプの目的によって決まります。インタラクションと画面フローのみをテストしている場合は、アニメーションと少しの色のみを含むプロトタイプを作成できます。アイデアを検証したり、潜在的な投資家に売り込んだりする場合は、適切な画像やテキストなどを使用して、プロトタイプをより洗練されたものにする必要があります。

このまとめに含まれているツールを使用すると、アニメーションに加えてより多くの要素や色のスプラッシュなど、プロトタイプの作成が簡単になりますが、プロトタイプに変更を加えるにはより多くの時間が必要になります。

1. Balsamiq

アプリのアイデアのワイヤーフレームをまとめることだけに興味がある場合は、Balsamiqが最適なツールです。Balsamiqは、デスクトップアプリケーションとWebアプリケーションの両方として利用でき、2008年から登場しています。

ワイヤーフレームはほとんど労力と時間を必要としないことを意図しているため、Balsamiqはワイヤーフレームをすばやく作成できるように設計されています。必要な基本要素を追加し、必要に応じてサイズ変更、配置、カスタマイズするだけです。 Balsamiqで作成したワイヤーフレームは少しラフに見えますが、それは意図的なものです。ツールの背後にあるクリエイティブチームは、スケッチのように見えるワイヤーフレームがブレーンストーミングを促進すると信じています。そもそもこれがワイヤーフレーミングの大きな理由です。

シンプルなバージョン管理により、開始した場所と現在の場所を追跡できます。そして、これがワイヤーフレームであるからといって、潜在的なユーザー/クライアントから入力を得ることができないという意味ではありません。Balsamiqを使用して完全にインタラクティブなプロトタイプを作成することはできませんが、作成した画面/ページをリンクして、単純なクリックスループロトタイプを生成することはできます。アニメーションやインタラクションはありません。目的は、フローを示すことだけです。

また、Balsamiqが少し制限されているように思われる場合は、コミュニティで作成された拡張機能、テンプレート、アイコンパックをいつでも追加できます。

Balsamiqは、ユーザーあたり89ドルのデスクトップアプリ、月額12ドルからのウェブベースのアプリ、またはユーザーあたり月額5ドルのGoogleドライブリンクアプリとして利用できます。ただし、最初に無料トライアルから始めて、それが自分に適したツールであるかどうかを確認することができます。

2. WireframePro

MockFlowライセンスには8つの異なるアプリへのアクセスが含まれていますが、独自のアプリの開発を開始するときに興味があるのはWireframeProです。繰り返しになりますが、これはWebベースのアプリであり、ドラッグアンドドロップインターフェイスを使用して簡単にワイヤーフレームを作成できます。

これには、すべての標準UI要素に加えて、AppleおよびAndroidスマートウォッチの選択を含む、必要になる可能性のある他の多数のコンポーネントが付属しています。このアプリでは、モックストアにアクセスすることもできます。モックストアでは、インスピレーションを得たり、独自のワイヤーフレームのクイックスタートポイントとして使用したりできるサードパーティのテンプレートを幅広く提供しています。

ここにリストされているすべてのツールと同様に、WireframeProは個人およびチーム向けに設計されており、コラボレーションツールが組み込まれています。優れた機能は、各要素の仕様を自動的に生成する機能です。したがって、自分で設計作業を行っていない場合は、設計者がデザインに関連するすべての詳細に簡単にアクセスできます。

最後に、プロジェクトを共有するときに、権限を割り当てることができます。これにより、一部のユーザーはプロジェクトの表示とコメントのみが可能になり、他のユーザーはプロジェクトを編集できるようになります。

WireframeProには無料プランはありませんが、有料プランに切り替える前に30日間試してみることができます。ライセンスは、1人のユーザーが月額19ドルから、最大3人のチームメンバーが月額39ドルから始まります。

3. UXPin

名前が示すように、UXPinの背後にあるチームはUXを強調しています。何も問題はありません。ワイヤーフレーミングとプロトタイピングは、アプリのUXを改善するのに役立つことを目的としています。UXPinを使用すると、ワイヤーフレーミングとプロトタイピングの両方を処理できるため、ツールを切り替える必要がありません。

ご想像のとおり、UXPinはSketchソースファイルとPhotoshopファイルをサポートしています。ただし、CSSコードスニペットをサポートするエディターも組み込まれているため、ワイヤーフレームとプロトタイプで使用される要素をカスタマイズできます。また、UXPinを使用すると、追加または作成するすべてのファイルの各反復を非常に簡単に追跡できるため、元のバージョンを探すために数十のファイルをクリックする必要がありません。

基本的なワイヤーフレームとプロトタイプの作成は迅速かつ簡単で、すべての標準的なプロトタイプの相互作用が利用可能です。もちろん、必要に応じてカスタムインタラクションを作成することもできます。プロトタイプの準備ができたら、テストのために誰にでも送信できます。すべてのインタラクションは、各テスターのコメントの音声とともにビデオにキャプチャされます。

UXPinは、Webサイト、モバイルアプリ、およびWebアプリのワイヤーフレーミングとプロトタイピングをサポートし、14個のブレークポイントが事前設定されているため、複数のデバイスでデザインを簡単に表示できます。料金は、基本プランの場合は月額19ドルから、高度な機能のロックを解除する場合は月額29ドルからです。

4.プロット

Prottはプロトタイピングツールとしてブランド化されていますが、ワイヤーフレーミング機能も含まれています。アプリのアイデアが大まかに描かれたスケッチにすぎない場合は、スケッチを写真に撮ってアプリに直接インポートできます。これらのスケッチは、アニメーション化するか、ワイヤーフレームの基盤として使用できます。事前設定されたシェイプとUI要素をスケッチに直接ドラッグアンドドロップして、不安定なラインからプロのローファイワイヤーフレームに瞬時に移行します。

Prottには、iOSからAndroidやWebに至るまで、さまざまなデバイス用の多数のUIキットが含まれています。ただし、インターフェイス要素の独自のライブラリを作成することもできます。

プロトタイプを他の人と共有するだけでなく、アプリの構造を明確に示す詳細な地図を含めることもできるようになりました。また、プロトタイプを共有する人は誰でも各画面に直接コメントできるため、コメントが何に関連しているかを理解しやすくなります。

Prottは、フル機能の30日間の試用版を提供しており、作成できるプロジェクトの数以外に制限のない無料プランがあります。さらにプロジェクトを作成する必要がある場合は、月額19ドルからのスタータープランまたはプロプランに切り替えることができます。

5. InVision

InVisionはプロトタイピング専用ですが、さまざまな用途をサポートしています。InVisionを使用すると、Webサイト、Webアプリ、またはモバイルアプリのインタラクティブなプロトタイプをすばやく作成し、実際のデバイスでプロトタイプを表示できます。これには、携帯電話だけでなく、タブレットやウェアラブルも含まれます。

プロセスは次のように簡単です。

  • ドラッグアンドドロップまたはDropboxとの同期により、デザインアセット(InVisionはGIF、PNG、JPEG、PSD、およびスケッチソースファイルをサポートします)を追加します。
  • 各アセットにホットスポットを描画し、他のアセット、外部URL、またはアンカーにリンクするように設定します。
  • ジェスチャー(タップまたはスワイプ)、固定領域(メニューバーなど)、およびトランジションの形式でインタラクティブ機能を追加します。

完了したら、携帯電話、タブレット、コンピューター、またはSMSでプロジェクトを表示したり、友人や同僚にリンクを電子メールで送信したりできます。これにより、他の人を設計プロセスに参加させることが容易になり、リンクを送信した人は誰でも各設計にコメントできるようになります。

InVisionの価格は、1つのプロトタイプで無料、無制限のプロトタイプで$ 25 /月、最大5人のメンバーのチームで$ 99 /月から始まります。

6.マーベル

InVisionと同様に、Marvelアプリはプロトタイピング用です。SketchファイルとPhotoshopファイルの標準サポートが含まれています。または、組み込みのCanvasデザインツールを使用することもできます。MarvelにはiOSおよびAndroidアプリもあり、独自のDoodleやデザインを写真に撮って、Marvelライブラリに直接アップロードできます。

デザインにホットスポットを作成するのは簡単で、プロトタイプを実現するために利用できる多数のインタラクションと画面遷移があります。また、AppleWatchを含む多数の画面でプロトタイプをテストできます。

もちろん、コラボレーションが含まれていない場合、プロトタイピングツールについて説明する価値はありません。また、Marvelを使用すると、プロトタイプに注釈を付けて、人々にコメントしてもらいたい特定の領域を強調することができます。コメントは、最初にMarvelアカウントを作成する必要なしに、プロトタイプを送信する誰でも作成できます。

Marvelの価格は、1人のユーザーと最大2つのプロジェクトで月額$ 0から始まりますが、機能が制限されています。月額14ドルで、無制限のプロジェクトとすべての機能を、チームとエンタープライズクライアントに別々の価格で提供します。

7. Proto.io

Proto.ioは、2016年に大規模な更新を受け取った人気のあるプロトタイピングツールです。Proto.ioには、プロトタイピングツールに必要なすべての機能が含まれていますが、この更新により、多数の簡略化された機能も提供されます。

Proto.ioは、すべてのコア機能にアクセスしやすくするために再設計されたUIに加えて、アニメーションにも重点を置いています。モーションはモバイルアプリの重要な機能であり、Proto.ioの状態遷移機能を使用すると、誰でも簡単にプロトタイプでアニメーションを作成およびカスタマイズできます。

Proto.ioは、インタラクションデザインパターンライブラリも導入し、インタラクションの追加を簡単にしました。これらのパターンには、スライドインメニューやプルして更新などの操作が含まれます。あなたがしなければならないのはあなたのプロジェクトに相互作用を追加し、それをカスタマイズすることです。

新しいバージョンのProto.ioは、ユーザーがプロトタイプをテストしてコメントできるようにする機能を拡張します。ValidatelyやUserTestingなどのユーザーテストプラットフォームと統合され、実際のユーザーのより大きなプールにアクセスできるようになります。また、ルックバック統合により、ユーザーがアプリをどのように操作およびナビゲートしているかを示す、無制限の記録(iOSのみ、現時点では)を取得できます。

Proto.ioは、フル機能の15日間の試用版を提供しています。その後、非常に限られた無料アカウントに切り替えることができます。有料プランは、チームの規模にもよりますが、月額$ 29から始まります。

結論

アプリ開発を始めたばかりの場合は、ワイヤーフレームとアプリアイデアのプロトタイプの両方を作成することをお勧めします。しかし、開発プロセスに慣れてきたら、どちらか一方を実行することを検討できます。

ワイヤーフレームは設計が非常に基本的であるため、フローとユーザーエクスペリエンスを正しくすることに集中する必要があります。プロトタイプは、フローとUXの両方を改善し、設計上の欠陥を強調し、さらに重要なことに、クライアントや投資家に提示する必要がある場合は、ワイヤーフレームよりも見栄えを良くするのに役立ちます。ワイヤーフレーミングとプロトタイピングの両方を組み合わせたツールを選びたくなるかもしれませんが、決定要因は常に、実際に必要なすべての機能を備え、最も使いやすいツールである必要があります。また、ここにリストされている各ツールは無料のプランまたはトライアルを提供しているので、決定を下す前に1日かけてすべてをテストしてみませんか?