Webディレクターにオススメしたい！さくさくワイヤーフレームが作れちゃう便利ツールまとめ

更新日: 2018年05月31日

ビジネススキル

Web、アプリを制作する上で無くてはならないワイヤーフレーム作成ですが、普段どのようにして作っているでしょうか。紙にそのまま手書きしたり、ドローソフトを使って作ることもできますが、専用のツールを使えば効率的に作ることができるのでオススメです。

最近では、無料のツールも沢山あり、手軽に使えて便利な反面、どのツールを使うか決められないという方も多いのではないでしょうか。

今回は、ワイヤーフレーム作成ツールの中から無料で使えるものをまとめてご紹介します。
これまでワイヤーフレーム作成に時間がかかりすぎていた方、良いツールをお探しの方はぜひ参考にしてみてください。

無料で使えるワイヤーフレーム作成ツール10選

1.Justinmind Prototyper

Justinmind Prototyper
http://www.justinmind.com/
インストールして使用するタイプのツールです。分かりやすい操作方法で誰にでも使える設計となっています。まずは「DOWNLOAD FREE」ボタンからパソコンにインストールします。
完了後ツールを起動しプロジェクトを開くと、はじめにデバイスの選択と設定があります。

設定後は作成画面となりますので、あとは左側から使用するアイテムを配置していくだけです。最初にインストールする手間はかかりますが、ブラウザ上で動作するタイプとは異なりオフラインでも使えるのがメリットです。

2.Cacoo

Cacoo
https://cacoo.com/lang/ja/
オンライン上で使えるワイヤーフレーム作成ツールです。インストールいらずで、インターネット環境さえあれば会社、自宅、外出先とどこでも作業ができます。

Cacooの便利な点は、チームで作業しやすくなっているところです。クラウド上で作成したワイヤーフレームを簡単に共有したり、同時に編集することができるほか、チャット機能でやり取りすることも可能です。

また、Dropbox Box、Adobe Creative Cloud Assets、Google Driveとの連携ができますので、これらサービスを利用している方にはオススメできるツールです。

日本語を含む多くの言語に対応しており、外国語のツールと比べて使いやすいのも嬉しい点です。

3.POP

POP
https://popapp.in/
POPは、スマートフォンから手書きのワイヤーフレームを撮影することで、ワイヤーフレームが作成できるツールです。ワイヤーフレームを作るときに、まずは紙に簡単に書いて検討しているという方も少なくありません。

そういった手書き派の方には、特にオススメ。使い方はいたって簡単で、手書きスケッチのワイヤーフレームをスマートフォンに取り込み、画面のリンクを設定するだけです。これだけでアプリの画面遷移をシュミレーションすることができます。

POPを導入することで、開発前に簡単なUIの確認ができ、プログラミング後の不要な修正を防ぐことが可能です。無料のプランではプロジェクト数が限られ、一部制限もありますがアプリ開発には十分使える機能と言えます。

4.moqups

moqups
https://moqups.com/

moqupsは、ブラウザ上でワイヤーフレームを作成するツールです。あらかじめ用意してある、ステンシルをドラッグ＆ドロップで好きな場所に配置することで直感的に作業できます。一度使えば誰でも理解できる簡単さなので、英語が苦手な方でも安心です。

このようなツールではログイン必須のサービスも多くありますが、moqupsはログインしない状態でも利用できます。また、本格的な使用にぴったりな有料プランも用意されているので、まずは無料プランからはじめてもいいでしょう。

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

5.Wireframe.cc

https://wireframe.cc/
こちらもmoqups同様、ブラウザ上で動作するワイヤーフレーム作成ツールです。パッと見て分かるようなミニマルな作りで分かりやすく、直感的に操作できるのが魅力となっています。沢山のツール、アイコンが配置してあるサービスだと初めから難しそうに感じてしまう、英語表記が苦手な方でも安心。

無駄はないものの必要な機能は備わっていますので、本格的なワイヤーフレーム作成が可能です。完成したワイヤーフレームは、独自のURLで他の人に共有することができます。共有方法の手軽さ、簡単さも魅力の一つと言えます。

6.Pencil Project

http://pencil.evolus.vn/
Pencil Projectは、豊富なテンプレートと簡単に使える画面が魅力的なツールです。画面左側にあるパーツをキャンバス上にドラッグして配置するだけで、直感的にワイヤーフレームが作成できます。

操作感はPowerpointに近い印象があり、初心者でも使いやすい設計です。各パーツも充実したラインナップです。作成したものはPNG、PDFを含む複数の出力形式でエクスポート可能。

ワイヤーフレームを全く作ったことがない方、Powerpointを日頃使う機会がある方には特にオススメのツールです。

7.PowerMockup

http://www.powermockup.com/
PowerMockupは、Power pointでのワイヤーフレーム作成をサポートするプラグインです。これまでご紹介した単体で動くツールとは違い、インストールすることで機能を拡張してくれるというものです。

最大のメリットは、Power pointが使えることです。ワイヤーフレーム作成初心者の方、普段Power pointを愛用している方にオススメできるツールとなっています。

8.MockFlow

https://www.mockflow.com/
ブラウザ上で動作し、Web・モバイル用ワイヤーフレームが作れるツールです。利用するには会員登録が必須となりますが、無料でも使うことができます。

フォーム、ナビゲーション、図形、注釈といったUIコンポーネントが充実していて、これらをドラッグ＆ドロップで配置するだけでサクッとワイヤーフレームが完成します。日本語対応していないもののとにかく操作が分かりやすいため、英語力は必要ありません。

また、特徴的なチャット機能が備わっており、他のメンバーとの作業にも適しています。

9.mockingbird

https://gomockingbird.com/home
シンプルな機能で使いやすい、ブラウザで動くツールです。多くの機能を搭載しているわけではありませんが、欲しい機能は揃っており、初めてでも使いこなしやすいのが特徴。ツールボックス内から要素を移動するだけの簡単な操作で、ワイヤーフレームができます。