• MV_1120x330
  • MV_1120x330

WEBクリエイター必見。おすすめプロトタイピングツール8選

ほっしー ほっしー


LoadingMY CLIP

  • このエントリーをはてなブックマークに追加

アニメーション型

6. Pixate

https://www.machikado-creative.jp/wordpress/wp-content/uploads/2016/10/Pixate.png

ProttやAdobe XDほど直感的にサクッとプロトタイプが作成できる、というわけではありませんが、Pixateは詳しいUIアニメーションを表現することができます。デモムービーも豊富なので、参考になります。

  • 再現性 ○
  • 操作性 △
  • 互換性 ×
  • JPEG、TIFF、PNG、MP4(3)には対応。

  • プレビュー環境 △
  • デスクトップではできません。

  • その他
  • 共有がQRコードを読み取らなければいけないので面倒かもしれません。無料で使用できます。

7. Framer

https://www.machikado-creative.jp/wordpress/wp-content/uploads/2016/10/Framer.png

FramerはPixate同様、UIアニメーションを表現することができるプロトタイピングツールです。ただ、CoffeScriptでプログラミングをしてアニメーションを作成する必要があるので、難易度は高めです。

  • 再現性 ○
  • 操作性 △
  • 基本的にプログラミングする必要あります。常にプレビューしながら作業ができます。

  • 互換性 △
  • 「Photoshopからインポート可能」とありますが、
    やってみたら重いPSDはエラーがでて読み込んでくれませんでした。

  • プレビュー環境 ○
  • 様々なデバイスで可能。

  • その他
  • URLで簡単に共有できます。有料です。

8. Adobe Muse


https://www.machikado-creative.jp/wordpress/wp-content/uploads/2016/10/Adobe-Muse.png

Museはパララックスを表現するのに適しているようです。操作は慣れるまでは難しそうですが、チームやクライアントとの認識合わせが難しい「動き」についてできるだけわかりやすく説明できるように、ぜひ使っていきたいツールの一つです。

  • 再現性 ○
  • 操作性 △
  • 難しそうではあるものの、Adobe製品なのでPhosothopやIllustratorなどにUIが似ており、慣れるのは早そうです。

  • 互換性 △
  • 「Photoshopボタン」機能や「CC Libraries」等は一部あり。

  • プレビュー環境 ○
  • 様々なデバイスで可能(パブリッッシュ機能)。

  • その他
  • クライアントへの共有・社内共有もパブリッシュ機能で可能です。

Museのスクロールエフェクトのデモはこちらよりご覧いただけます。

今では様々なプロトタイピングツールがリリースされており、どれを使用するべきか悩みますよね。しかし、画面の遷移とUIアニメーションの両方の機能が完璧に備わっているものはまだ存在しません。「プロトタイピングツールで何を表現したいのか・説明したいのか」という目的に応じて、最適なものを選択していく必要があるでしょう。

街角のクリエイティブ ロゴ


  • このエントリーをはてなブックマークに追加

TOP