ワイヤーフレームを楽しく作ろう！

魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！

Fluid UI

http://www.fluidui.com/

プレビュー機能で画面遷移も作れる

UIパーツが本物にかなり近い形で表現されています(むしろそのまま？)。UIパーツはWireframe、iPhone、iPad、Android、Android 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこともできます。 何といっても最大の特長はパーツをタップしたときの遷移先が設定でき、プレビューで動作を確認できるところです！プロトタイピングツールとして使える、とても便利なツールです。

Proto.io

http://proto.io/

ライブプレビュー機能あり！シンプル操作でサクサク作れる

iPhone、iPad、Android、Android Tabletのプロトタイプが作成できるブラウザアプリです。 シンプルなUIが特徴的で、初めて使うかたでも操作に迷うことなく作り始められるのではないでしょうか。テンプレートを作れるので、複数の画面をサクサク作ることができます。 ライブプレビュー機能で、スマホで実際の操作感を試しながら作成することができます！画面遷移まではできませんが、リストやテキスト入力の操作感などを実際のスマホで試すことができます。QRコードを生成してくれるので、スマホからのアクセスも簡単です。

InVision

http://www.invisionapp.com/

画像だけでモックアップが作れる！レビューもしやすいグループウェア

画像をベースに画面遷移を作ることができるツールです。このツールはワイヤーフレーム作成ツールではありませんので、図の作成は別なツールで行うことが前提です。画像を矩形選択して別な画像にリンクを貼ることができるので画像を組み合わせて簡単なモックアップを作成することができます！ またユーザーどうしでレビューする機能も優れています！モックアップを共有し、画面の一部分に対してコメントを注釈のような形で貼ることができます。 画面遷移やワイヤーフレームの方向性がある程度決まった段階で、実際に動かしてみた感想や意見を話合うなどのレビューにぜひ使いたいツールです。

Prototyper

http://www.justinmind.com/prototyper/

ブラウザ上でプロトタイピングが可能

Windows、Mac、Linuxに対応しているプロトタイプ作成ツールです。スマホアプリ/スマホサイトに限らず、PC用のWebサイトやFacebookページのプロトタイプを作るための機能も備わっています。 ブラウザ上でシミュレートすることができるところが最大の魅力です！ テキスト入力したり、チェックボックスにチェックをつけたり、画面遷移させたりなどといった実際の操作ができます。サンプルが公開されているので、ぜひ見てみてください。かなりいろんなことができます！ 有償アカウント登録するとページをシェアすることができるので、ネット上でユーザーに実際に操作してもらい意見をもらうことができます。さらにスマホからプロトタイピングすることもできるようになります！30日間の無料トライアルもできるのでまずは試してみてはいかがでしょうか。

Moqups

https://moqups.com/

登録なしでも利用可能！手軽にサクサク作れる

シンプルなワイヤーフレーム作成ツールです。登録なしで利用することができるところがとても良いと思います！手軽に始められますね。また登録すると PNG, PDF 形式でエクスポートできるようになりますし、メールやURLで共有することができるようになります。登録は無料です。 ページのリンク機能もあり、UIパーツごとにリンク先を設定可能です。動作はプレビューボタンを押すと確認することができます。 iPhone用のUIが揃っていて、絶妙な具合に良い感じにラフです。自分で作成した画像をアップロードして使うこともできるので、足りないパーツを自分で補うこともできます。 何より手軽さが印象的でした。打ち合わせ中とかにサクッと作って話し合う、などといった用途で活用できると思います。

Cacoo

https://cacoo.com/

言わずと知れた国産リアルタイムコラボレーションツール

Web上で図版が作成でき、共有することができるツールです。国内でとても有名なサービスなので、知らない人はあまり居ないんじゃないでしょうか？ ステンシルがとにかく豊富です。フローチャートやUML、ER図、ワイヤーフレーム、その他いろいろな図版の作成に適しています。 また Cacooストア でステンシルを購入し使用することもできるので、パーツが足りない！っていうときも安心です。ジェスチャー用の手のステンシルなどもあります！ 何より素晴らしい機能は複数のユーザーとリアルタイムで共同編集ができる点です！チャット機能も付いているので、一緒に案を出し合いながら作業ができますね。 また作成した図版は PNG, SVG, PDF, PS, PPT といったさまざまな形式でエクスポートすることができます。パワポに埋め込んでそこでも編集できるのも良いところですね！ 使いかたはこちらで解説されているので、導入も簡単にできそうです！

Pencil

http://pencil.evolus.vn/

オンラインパーツが充実

Windows、Mac、Linuxに対応しているワイヤーフレーム作成ツールです。 デフォルトでiPhone、Android4.0、Webページ用のパーツが使えるほか、オンラインでパーツを検索し、ダウンロードすることができます！オンラインパーツは OpenClipart で共有されているSVGファイルをダウンロードして簡単に使うことができます。UIパーツが足りない！なんてときもすぐに探しだすことができますね。 ページの書き出しはSVG、HTML、PDF、PNG、ODFといったさまざまな形式がサポートされていてとても便利です。

おわりに

いかがだったでしょうか？ ワイヤーフレーム・モックアップ作成ツールと一言でいっても、それぞれに特長があるということが分かると思います。どれが一番良いとは言えませんが、それぞれのツールに向き・不向きはあると思うので、利用目的に合わせて一番適したツールを活用したいところです。 いままでワイヤーフレーム・モックアップ作成に専用のツールを使っていなかったあなた。この機会にぜひ活用してみてはいかがでしょうか♪ またいいツールが見つかったら記事にしたいと思います！