まだPowerPoint?便利なワイヤーフレーム作成ツール4選!

Webデザイン Webサービス

2017.05.19(Fri)

こんにちは。Webディレクターの立原です。
Webサイトを制作する際、その“設計図”としてワイヤーフレームを作成すると思いますが、皆さんは何を使っていらっしゃいますか?
PowerPoint? Excel? Illustrator? もちろんこれらでもワイヤーフレームを作成することはできますが、最近ではワイヤーフレームやモックアップを作成するためのツールがたくさん出ています。
今回は便利なワイヤーフレーム/モックアップ作成ツールを4つ紹介します。

Moqups

https://moqups.com/

Webブラウザ上で扱えるワイヤーフレーム作成ツールです。
現状は英語版のみですが、オブジェクトのドラッグ&ドロップなど、マウス操作がメインのインターフェイスなので、直感的にワイヤーフレームを作成できます。 有料プランに登録すれば、PNGやPDF形式で書き出しも可能です。

Prott

https://prottapp.com/ja/

こちらもWebブラウザ上で扱えるワイヤーフレーム作成ツールですが、国産なので安心の日本語インターフェイス! 他のツール同様にドラッグ&ドロップなどのマウスで簡単に操作できます。そして…Prottは、PCで作成したワイヤーフレームやプロトタイプを、すぐに専用アプリを使ってスマートフォン(iOS / Android両方に対応!)でプレビューできるのも便利です。
お試しで30日間無料で使えますので、まずは試してみて、ご自身の使い方に合っていれば有料プランに移行するのも良いですね。

Adobe Experience Design CC

http://www.adobe.com/jp/products/experience-design.html

こちらはブラウザ上ではなく、MacやPCにインストールして使うアプリケーションです。どちらかと言えばプロトタイプを作成するのに便利なツールだと思います。詳しい使い方は過去のコラムでも紹介していますので、そちらをご覧ください。PhotoshopやIllustratorを使用したことのある方であれば操作し易いと思います。
まだベータ版ですので、今後更に機能が増えると思います。ちなみに3月時点ではWindowsだと英語版のみでしたが、現在はWindowsでも日本語対応されました。

Cacoo

https://cacoo.com/

Webブラウザで使用できる日本語版のワイヤーフレーム作成ツールです。他のツールと同様、ドラッグ&ドロップなどのマウス操作中心で扱えますし、できあがったワイヤーをPNGで書き出すこともできます。
有料プランにするとPNGだけでなく、PDFやPowerPoint、SVG形式などに書き出すことができます。特にPowerPoint形式で書き出せるのは何かと便利!Cacooを使用していない他のディレクターやクライアントにデータを渡す際にも便利です。しかもその有料プラン、月額454円という破格!
私も使用していますが、便利ですよ~!

まとめ

今回紹介したようなツールを使用すると、効率的に作業を進めることができるだけでなく、複数のユーザー間での共有もできるので便利です。
新しいツールを使うときはそのツールの操作方法を覚える時間が必要だったりしますが、今回紹介したツールはどれも操作が直感的で解りやすいものだと思います。
ものは試し!PowerPointやExcelでワイヤーフレームを作成している方はチャレンジしてみてはいかがでしょうか?