UXプロト タイピングツールを紹介する

David
Peter Martinez 更新日 : 2020-09-25 17:19:49

プロトタイプツールは今やWebサイトやアプリ開発のプロセスに欠かせない重要になっております。一方アプリ開発が頻繁に行われる中、ツールも数多くなっております。 デザインを考えるうえでどういった点に注意していけばいいのでしょうか。ツールは道具であって、目的ではありません ツールを使いこなす前にプロトタイプについて紹介いたします。


UXプロト タイピング と は?

UXとは何でしょうか。UXは「ユーザーエクスペリエンス(User Experience)」の略です。Experienceとは「体験、経験」を意味し、UXとは「ユーザーが製品・サービスを通じて得られる体験」を指します。

具体的にいうと、デザインがキレイ、 フォントが読みやすい、お問い合せフォームや購入ページまでの導線がわかりやすいといったWebページの印象から、商品を注文したらすぐに届いた、対応が丁寧だった商品のクオリティが高いというようなサービスの質に関わる部分も「UX」です。 プロトタイプとは、プロトタイプとは、試作モデルを意味します。 Webサイト制作においては、動作や機能を検証するために最小限の規模で制作された試作品のことを指します。

よって、UXプロトタイピングとは、ユーザに優しい、わかりやすい、試作品のことになります。発注者であるお客様にわかりやすい試作品を使ってもらうためにプロトタイプツールがあるということです。
では、そのプロトタイプツールはどういったものがあるのでしょうか。


UXプロト タイピングツールの紹介

プロトタイプツールは大きく分けると3つに分かれます。トランジション型、インタラクション型、複合型です。

トランザクション型は画面遷移をプロトタイプで行うことができます。プロダクト全体の流れや、操作のフローを確認したい場合はトランジション型が使われます。
インタラクション型は、同じ画面内での細かなアニメーションや動き方をプロトタイプに落とし込むのに使われます。
複合型は、トランジション型とインタラクション型のどちらも行うことができるタイプです。

1. InVision(トランザクション型)

InVisionは海外でよく使われているプロトタイピングツールで、LIVE SHAREという機能があり、リアルタイムでコメントを残したり、音声通話をすることだってできます。チームのメンバーでInVisionに集合し、リアルタイムでのコミュニケーションを取りながらフィードバックできます。

2.Origami Studio(インタラクション型)

Origami StudioはFacebookが提供するプロトタイピングツールです。画面遷移をプロトタイピングで表現することはできませんが、同じ画面内での動きやアニメーションをプロトタイプに組み込みたい場合はインタラクション型のプロトタイピングツールがおすすめです。設定する項目が多く、他のツールと比べると使いこなせるようになるまで少し時間はかかってしまいますが、使い方を覚えてしまえば他のツールとは一味違ったプロトタイプを作成することができます。

3.ProtoPie(複合型)

ProtoPieは複合型のプロトタイピングツールです。トランジション型はアニメーションをプロトタイプで表現することができず、インタラクション型は画面遷移をプロトタイプで表現することができません。しかし、ProtoPieは複合型のプロトタイピングツールなので、限りなく実際にプロダクトに近い状態のプロトタイプを作成することができます。 ユーザビリティも非常に高いツールで、直感的な操作でプロトタイプを作成することができます。


UXプロト タイピングツールMockitt

Wondershare Mockitt はインタラクション型のツールです。UXを意識した非常に使いやすいツールです。MockittはすべてのUXデザイン初心者にとって最も重要なUXデザインの原則に作成されております。ツールを使いこなすまでの時間はたったの3時間でほぼ使用できるようになります。

ipad wireframe app

特徴

  • オンラインツールのため、場所にとらわれず作業ができることや、共同作業にも向いていて、同時作業ができます。メンバーの作業を待たずにどんどん作業を進められることは大変よいです
  • お客様との共有もオンラインでできるため、素早いフィードバックを得られます。
  • ZOOMやSkypeと一緒に組み合わせれば、時間を有効に活用できます。
  • 初心者の方は、膨大なアイコンやコンポーネントライブラリ、20以上の業界固有のテンプレート、簡単なドラッグアンドドロップ機能を使用して、コンポーネントを追加、配置、接続できるエキスパートのように作業できます。

いかがでしょうか。今回紹介させていただいた3種類プロトタイプにはメリットデメリットがございます。 Webサイトの目的に合わせて使い合わせていただくことが非常に重要になります。ぜひ本記事を参考にツールを選んでいただければと思います。

製品に関する質問がありますか? サポートチームへお問い合わせ >