ワイヤーフレームツールのおすすめ15選を紹介したいと思います。正直PPTとかエクセルとかでも大丈夫ですが、せっかくなのでツールを使った方がということで紹介します。ちなみに僕は普段エクセルユーザなのでこれを機にツールを使うようにしますw
— なう@会社員ブロガー&筋トレ (@now_weblife) April 19, 2019
ワイヤーフレームツールのおすすめ15選を紹介します。無料が多いので初心者でも気軽に使い始められると思います。ワイヤーフレームを作れるのは、webデザインで稼ぐ第一歩です。ツールはあくまでツールなので、どれを使うかよりもワイヤーフレームを作る方の行動を優先させましょう。
僕は、webデザイン歴5年でワイヤーフレームを最初は作りまくってました。今ではワイヤーフレームツールは数多くあるので、臆することなくワイヤーフレームツールを使いこなしてwebデザインで稼げるようになることを目指して欲しいと思います。
参考：webデザインで稼ぐ方法【初心者からのロードマップを体験談付きで解説】
参考：webデザイン初心者におすすめな本7冊【分野網羅、行動が大事】
参考：webデザイン初心者向け独学方法【UXデザイン歴5年の僕が解説】
ワイヤーフレームツールおすすめ15選
では早速ワイヤーフレームツールのおすすめ15選を解説したいと思います。15個もあるので自分が使いやすいワイヤーフレームツールを使うといいかと思います。ワイヤーフレームを作る上では、そこまで機能による差分はないので、あくまで使いやすいというところに絞って選ぶのがおすすめですね。
cacoo
1つ目はcacooです。cacooの特徴は、フローチャートやマインドマップなど色々なテンプレが自由に使えるというところですね。ワイヤーフレームでは必ずしも使わない機能もあるので、色々な用途で使えるワイヤーフレームツールですね。日本語対応もされています。コンセプトがチームコラボレーションなのでチャット機能などもありますね。
Wireframe.cc
2つ目のワイヤーフレームツールのおすすめは、WireFrame.ccです。特徴としては、ドラッグアンドドロップで直感的に使えます。なので初心者向けかなと思います。ただ、日本語対応していないので英語がわからないと使いこなせないのが難点です。
NinjaMock
3つ目のワイヤーフレームツールのおすすめは、NinjaMockです。NinjaMockの特徴は、今様々なデバイスが開発されていて、それごとに最適化されたワイヤーフレームを作るのはなかなか手間という課題を解決してくれるワイヤーフレームツールですね。なので、アプリなどwebサイト以外も含めて作りやすいです。ただこちらも日本語対応してないところが難点ですね。
Moqups
4つ目のワイヤーフレームツールのおすすめは、Moqupsです。ワイヤーフレームツールは登録必須なツールが多いんですが、Mockupsは登録不要です。なのでまずは手軽に始めたいという初心者にもおすすめできます。ただ、日本語対応していないのでこれまた英語ができないと辛いです。
prott
5つ目のワイヤーフレームのおすすめは、prottです。prottはご覧の通り、日本語対応されているので使い始めやすいです。特徴としては、ドラッグアンドドロップで直感的に操作が可能です。スマホ対応されているパーツが多いので、スマホやアプリのワイヤーフレームを作りたい方にもおすすめです。画面遷移も出来るので実際のweb制作のイメージもしやすいのもおすすめな理由です。
mockingbird
6つ目のワイヤーフレームのおすすめは、mockingbirdです。ユニークな名前ですが、ドラッグ&ドロップで直感的に操作可能なだけでなく動画や地図画像など色々なコンテンツを配置してワイヤーフレームを作りたい場合におすすめです。ただ日本語対応していません。
参考：https://gomockingbird.com/home
mockflow
7つ目のワイヤーフレームツールのおすすめは、MockFlowです。MockFlowは無料で使えるのがおすすめなポイントですね。テンプレも豊富に用意されているので、初心者でも始めやすいかと思います。ワイヤーフレーム作成はテンプレがあるとはるかに効率的に作業が進むのでそういう点でもおすすめできますね。
HotGloo
8つ目のワイヤーフレームツールのおすすめは、HotGlooです。最初の7日間は、無料で試せるトライアウト期間があります。難点は日本語対応していないので、これまた英語ができないと使いづらいというところですね。なかなか言語別対応しているワイヤーフレームツールはないのが実情です。
Justinmind Prototyper
9つ目のワイヤーフレームツールのおすすめは、Justinmind prototyperです。名前が長いんですが、初期設定としてよく作るデバイスやサイズを指定すればそれにあったキャンバスが出るので、あとはそこにドラッグアンドドロップしてワイヤーフレームを作れるという形になっています。これも日本語対応していません。
参考：https://www.justinmind.com/
PowerMockup
10個目のワイヤーフレームツールのおすすめは、PowerMockupです。PowerMockupは、パワポユーザにとてもおすすめなワイヤーフレームツールでして、というのもインストールしてパワポに拡張することが出来るためです。あとはドラッグアンドドロップしてワイヤーフレームを作れるのでパワポが好きな人にはおすすめなワイヤーフレームツールですね。
参考：https://www.powermockup.com/
Pencil Project
11個目のワイヤーフレームツールのおすすめは、Pencil Projectです。Pencil Projectも日本語対応できてないのですが、インストールすればオフラインでも使えるワイヤーフレームツールなので、ネット環境がなくても使えるところがいいかと思います。
Paper Browse
12個目のワイヤーフレームツールのおすすめは、Paper Vrowseです。Paper Browseは、独特でテンプレを印刷してあとはそれに直接書いていくスタイルのワイヤーフレームツールです。アナログ好きはいいかもしれません。ただ日本語対応はしてないです。
参考：http://www.raincreativelab.com/paperbrowser/
Adobe Comp CC
13個目のワイヤーフレームツールのおすすめは、お馴染みのAdobeです。Adobe Comp CCは、スマホなどでもワイヤーフレームを作れるのがおすすめなポイントですね。思いついたらすぐに作ることができます。またAdobeなので、安心感もあるのもいいですね。
参考：https://www.adobe.com/jp/products/comp.html
POP
14個目のワイヤーフレームツールのおすすめは、POPです。POPもスマホでワイヤーフレームを作成できます。機能としては、スマホで手書きのワイヤーフレームを撮影し、それに対して画面遷移を反映できるところが面白いです。
Sketch
15個目最後のワイヤーフレームツールのおすすめは、Sketchです。Sketchは、高機能なので企業向けのワイヤーフレームツールですね。それなりにアカウント料金もかかるので、プロ向けのワイヤーフレームツールだと認識した方がいいでしょう。その分、イケてます。
ワイヤーフレームツールの選び方
ワイヤーフレームツールはご覧の通り、結構なツールが存在します。ワイヤーフレームツールのおすすめの選び方は、あくまで継続して使いやすい、楽しいと感じることだと思います。特に個人であれば、継続が大事なので簡単で日本語対応しているワイヤーフレームツールがいいでしょう。個人的には、パワポに拡張できるPowerMockupがおすすめですね。
ワイヤーフレームツールは自分が使うならエクセルやパワポでも十分
しかし、必ずしもワイヤーフレームツールを使わないといけない訳ではありませんね。面倒だったりそこまでクオリティを求めないとか、個人で使う場合はエクセルやパワポでも十分です。ワイヤーフレームは、見た目が大事なんじゃなくて、どんな配置でどんな情報を配置するかがわかれば役割的には十分だからです。
そういう意味では、やはりパワポ拡張ができるPowerMockupが、使えればいいのかなと思いますね。ただ日本語対応していないのが難点です。ちなみに企業ではエクセルやパワポから、Sketchへの移行が行われている会社が多いです。
ワイヤーフレームの作り方は簡単
最後にワイヤーフレームツールはあくまでツールなので、どっちかっていうとどう作るかの方が大事です。形から入りたい場合は、ワイヤーフレームツールの選定からしてもいいとは思います。ワイヤーフレームの作り方が気になる、どう作ればいいかは結構簡単です。作り方が知りたい場合は、下記の情報をご覧になるといいかと思います。
参考：ワイヤーフレームの作り方をwebデザイン歴5年が解説【サンプル無料】
まとめ
ということでおすすめのワイヤーフレームツールを紹介しました。この中でいうと現実的には、日本語対応しているワイヤーフレームツールかあるいは使い方がとても簡単なワイヤーフレームツールを使うのが無難なのかなと思いますね。