Web担当者必見！ワイヤーフレーム作成時の注力ポイント9個と便利ツール20選

ワイヤーフレーム作成の便利ツール20個

Cacoo

https://cacoo.com/lang/ja/

100種類もの豊富なテンプレートを収録した、ドローイングツールです。
ワイヤーフレーム、モックアップはもちろんグラフや表など、様々なジャンルの作図を手軽に作成することができます。
コラボレーションしやすいのが特徴で、作成したものを簡単にチーム内で編集・共有できます。
　　

UXPIN

https://www.uxpin.com/

ワイヤーフレーム、モックアップ、プロトタイプがサクッと作成できるツールです。
あらかじめ用意してあるパーツを使って、直感的に綺麗なワイヤーフレームが作れます。
　　

Justinmind Prototyper

https://www.justinmind.com/

ドラッグ＆ドロップするだけの簡単な操作で、手早くワイヤーフレームが作成できるツールです。
ウィジェット、ライブラリもたくさん収録しているため、初心者でも参考にしながら手軽に作れます。
有料ツールで使用料は月$19からですが、無料トライアルが可能です。
　　

ProtoShare

http://www.protoshare.com/

オンラインで使えるワイヤーフレーム作成ツールです。
共同編集者がコメントを残したり、フィードバックをもらうことができるため、チームメンバーと一緒に作業したい時にぴったりです。
有料ツールで使用料は月$29からですが、30日間無料トライアルができます。
　　

POP

https://marvelapp.com/pop/?popref=1

手書きでワイヤーフレームを作りたい方にぴったりのツールです。
紙に書いたワイヤーフレームをスマホで撮影して取り込み、リンクを設定することでワイヤーフレームが作成できます。
無料でも使うことができますが、FREEプランだとプロジェクト・メンバー数に限りがあります。
有料のBASICプランは月$10からです。
　　

MockFlow

https://www.mockflow.com/

多彩なテンプレートを使い、オンライン上で簡単にワイヤーフレームが作成できるツールです。
UIコンポーネントも豊富ですので、とにかく時間をかけずに本格的なワイヤーフレームが完成します。
有料プレミアムプランも月$14から提供していますが、無料でも使うことが可能です。
　　

moqups

https://moqups.com/

用意されたステンシルや手持ちの画像を使って、ワイヤーフレームを作成することができるオンラインツールです。
説明書なしでも使えるようになるほどの手軽さが魅力的です。
無料プランあり、有料プランは月$10から提供しています。

参考：
ブラウザ上で簡単にワイヤーフレームを制作できる「moqups」の使い方を解説
　　

Prott

https://prottapp.com/ja/

直感的に使える操作性が特徴のツールです。
画像を用意しアニメーションを設定するだけで、動くプロトタイプが作れます。
無料プランのほかに、5種類の有料プラン（月間契約 月1,900円から）を用意しています。
　　
参考：
スマホサイトやアプリのワイヤーデザインを簡単に作れるProttの使い方

PowerMockup

http://www.powermockup.com/

PowerMockupは、インストールすることでパワーポイントを拡張できるプラグインです。
パワーポイントを普段使っている方にはオススメです。
フリートライアル、個人向け$59.99、小規模チーム$ 269 .95の3つのプランを提供しています。
　　

mockingbird

https://gomockingbird.com/home

ドラッグ＆ドロップ、コピーペーストといった基本的な操作だけで扱えるオンラインツールです。
シンプルな操作性で、新しいツールが苦手という方にも安心です。
　　

Wireframe.cc

https://wireframe.cc/

誰にでもわかりやすい、ミニマルなインターフェイスが印象的なワイヤーフレーム作成ツールです。
作成作業も簡単な上、共有方法も独自URLを教えるだけとシンプルなのが魅力的です。
　　

Pencil Project

http://pencil.evolus.vn/

パワーポイントのような感覚で使える、Win,Mac,Liinux用ダウンロード型ツールです。
オンラインツールが苦手という方、パワーポイントの操作性が好みという方にオススメです。
　　

AXURE

http://www.axure.com/

手早くシェアし、チームメンバーで確認しながらプロジェクト進行ができるツールで、コラボレーション重視の場合にオススメです。
有料プランは$29から提供しています。
　　

balsamiq

https://balsamiq.com/

手書き風で味のあるワイヤーフレームを作成できるツールです。
たくさんのパーツも収録しており、気軽にワイヤーフレームを完成させたい方にぴったりです。
価格はmyBalsamiqで月間契約の場合、3プロジェクト月$12から提供しています。
　　

SIMPLEDIAGRAMS

http://www.simplediagrams.com/

インスピレーションにしたがって、ラフにワイヤーフレームを書きたいときにぴったりなツールです。
無料トライアルは7日間、有料では1ユーザーライセンス $39です。
　　

HotGloo

https://www.hotgloo.com/

シンプルな見た目で使い勝手のいいツールです。
ワイヤーフレームに特化しており、オンライン上で作業ができます。
プランはグループで月$13から提供しており、チームの大きさにあわせて選択することが可能です。
　　

NinjaMock

https://ninjamock.com/

ワイヤーフレーム作成に特化したツールで、ホームページはもちろんアプリのワイヤーフレームが無料で作れます。
最大限に活用したい場合には、有料プランが月$12から利用できます。
　　

invision

http://www.invisionapp.com/

ワイヤーフレーム作成からブレストまでをサポートするツールです。
作業中のワイヤーフレームを共有し、メンバーにリアルタイムでコメントをもらうことができます。
　　

Adobe Comp CC

http://www.adobe.com/jp/products/comp.html

スマホ、タブレットを使って、紙に書くようにどこででもワイヤーフレームが作れるツールです。
思いついたアイデアをすぐに形にできるため、外出先や時間が空いた時に便利です。
　　

Google Drawings

https://chrome.google.com/webstore/detail/google-drawings/mkaakpdehdafacodkgkpghoibnmamcme?hl=ja

Google Drawingsは、Googleドキュメントの図形作成ツールです。
レイアウト図、グラフ、フローチャートなどを簡単に作成することができます。