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：要問い合わせ（企業向けお得なプラン）