Webサービス・アプリケーションを作るにあたって、初めの設計段階でアイディアをしっかり形にしておくことは非常に重要です。例えば、概念的な話が中心で実機能が不明瞭なまま発注が進んだりすると、思わぬ成果物ができてしまい、差し戻しが起こるということも多々あります。

そういったコミュニケーションロスから生じる制作の問題と、初期段階で予防するためにもプロトタイピングツールの活用は必須です。
手書きのイメージを取り込んだり、ワイヤーを組んだりしながらプロトタイプが簡単に作成できます。

つまり、実際のユーザーが遷移することを意識しながら、各ページのUI/UXを複数人で検証しつつ完成形を目指せるようになるわけです。

プロトタイピングツールを活用する際のポイント

制作プロジェクトは、各専門のメンバーで構成されていると思います。各メンバー・ディレクター・クライアント・ユーザー等、できれば様々な視点を持った方がプロトタイプを触ってフィードバックを共有し、最適な設計案を作成した後、制作へと移りましょう。

そうすることで、プロトタイプを通じた体験から、より多くの気づきを得られることと思います。

以下では、プロトタイピングツールならメジャーな2つの国産ツールをご紹介します。

Prott

4.PNG
https://prottapp.com/ja/

手書きで書いたような写真を取り込んで、それをアプリケーションのように挙動させることができるのが最大の特徴です。手書きで書いたワイヤーの紙面を撮り、ボタン等を当て込んでページ遷移を簡単に設定することができます。

また、PCweb版ではワイヤーフレームの機能がリリースされました。種類豊富な必要パーツをドラッグアンドドロップで構成させていけば、すぐに完成形をイメージできるようなプロトタイプを作成できます。モバイル上でも同期させておけば、実機でも確認可能です。

主な機能
・URL共有
・様々なデバイス対応
・パスワード設定
・アーカイブ
・検索
・組織管理
・グループ（プロトタイプをグルーピング）
・権限振り分け（各メンバーに設定）
・外部サービス連携（Slack,Sketchなど）アクティビティ（メンバーが何をしたかを確認）
・プライベートプロジェクト（特定メンバーのみ公開）
・バージョン管理（前のスクリーンに戻して確認）

料金プラン（月額）
・Free：¥0
・Starter：¥1,900（Free + 2プロジェクト）
・Pro：¥3,900（Starter + ワイヤーフレーム・画面遷移図）
・Team：¥7,400（Pro + 1ユーザー・共同編集・組織管理機能）
　※ユーザー数は課金して増やせる
・Enterprize：要問い合わせ（Team + グループ機能）

参考：
スマホサイトやアプリのワイヤーデザインを簡単に作れるProttの使い方

PLOGLESS

1.PNG
https://plogless.com/ja/

Prottと同じようにワイヤーフレームを使ってプロトタイプを作成します。初めにサンプルページがあるので、それをある程度試してみてください。ページを並べたり・並べ替えたりしながらフローを俯瞰して作業できるので、全体を見失わずに作業可能です。

また、QRコード発行機能も対応しています。Freeプランは1アカウントのみですが、試してみて操作感が合うようであれば有料プランも他と比べて非常に安いので購入してみても良いでしょう。

主な機能
・ポートフォリオ公開
・ワイヤーフレーム
・フローチャート
・様々なデバイス対応
・パスワード設定

料金プラン（月額）
・Free：¥0（プロトタイプ数1）
・Pro：¥490（プロトタイプ数100）
・Enterprise：要問い合わせ（企業向けお得なプラン）

海外で有名なプロトタイピングツール一覧

以下のツールは海外で好評なツールです。ご参考に一部ピックアップいたしました。

FLINTO

5.PNG
https://www.flinto.com/

for MacではSketchの画像も一度に取り込めます。3Dアニメーションも作成可能です。

inVISION

2.PNG
https://www.invisionapp.com/

登録なしでコメントを残せるのが便利。ただ英語表記となっています。

pixate

3.PNG
http://www.pixate.com/

こちらも同様の英語表記のみとなってますが、リッチなアニメーションを利用できます。

まとめ

プロトタイピングツールを使うことで制作プロジェクトはリバート（逆戻り）を防ぎ、効率的に要件定義・開発を進めることができます。

基本的に直感的な操作ができますので、学習コストは高くないはず。実際にフリープランなどで使いやすいと感じたものを選びましょう。

是非、ご紹介したツールを一度お試しください。

このニュースを読んだあなたにおすすめ

煩わしいアカウント管理もコレで一発！アカウント情報の管理ツール・アプリ15選
外回りが多い営業マンの仕事効率をアップさせるのに役立つ記事4選
IT業界希望の就活生必見！面接やインターンで飛びかうWebマーケティング用語43選

Web戦略カリキュラム

Web戦略カリキュラム

Webマーケティングを実践するうえで、まずは押さえておくべきWeb戦略の基礎カリキュラムです。Web戦略の基礎は、様々なプロモーション手法やマーケティング活動の基本と言える考え方なので必ず押さえましょう。