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

Webサイト、Webサービスを制作する上で必ず使うのが「ワイヤーフレーム」ですよね。

複数人でWeb制作するならもちろん、1人で行う場合でもデザインやプログラミングに入る前にワイヤーフレームを作るはずです。

ある程度頭の中でイメージしていても、実際にワイヤーフレームを作成してみると他の人との共通認識や自分の頭の整理にもかなり役立つと思います。

自分も初めてWebサービスを作った時は重宝しました。

ということで、いくつかワイヤーフレームを作成するツールを紹介していきます。

世の中には(特に海外には)多く、ツールが存在するので、自分にあったものをぜひ選んでください！

1. JustinMind

自分が初めてワイヤーフレームを作ったときは、JustinMindを使いました。

Webもモバイルのワイヤーフレームも作れてGUIで便利なツールなので、個人的にはおすすめしてます。

使い勝手は、Photoshopに近いものを感じますね。

2. POP

POPは、手書きのワイヤーフレームを写真に撮って、撮ったもの同士を紐づけることができます。

最初は、ペーパープロトから作るみたいな人も少なくないと思うので、そういった方には便利なツールになるでしょう。

3. wireframe.cc

リンク叩くとすぐワイヤーフレームの作成ページというシンプルさが魅力。

canvasな見た目でどちらかというとアプリ向きです。

4. AXURE

若干見た目がWindowsっぽいですが、それもそのはずでOffice系のデータをそのままコピペできるっぽいです。

ワイヤーフレームながら、スライドショーの動きなど実装できる点はプロトタイプに近い印象。

5. Mockflow

チャット機能があるという一風変わったツールがこちら。

リアルタイムで編集したいということであれば作業が競合などしないで済みそうですね。

6. mockingbird

他のに比べると驚くほど質素と感じるかもしれませんが、ブラウザで使える点を考えるとシンプルで良いのかも。

予めオブジェクトがいくつか並んでいたりするので、初心者には入りやすそうです。

7. BALSAMIQ

Webなのに手書き満載なとこが味があって好きですね笑

ツールのUIは、KeynoteやPowerPointに近いものを感じます。

8. moqups

moqupsは、ブラウザ上でワイヤーフレームを作成していきます。

使ってみた感じは、操作性やドラッグできるオブジェクトの数は他のサービスと似ていますが、アイコンなど細かい部分の装飾がたくさんできるので、かなり本番に近いワイヤーフレームを作成できる気がします。

9. Cacoo

Cacooは、かなり幅広く利用できるのが特徴です。

元々、プレゼンで見やすいグラフや表などを綺麗に図解できるツールとして人気でした。

チーム内で編集・共有できるというのも良い点でしょう。

10. UXPIN

国内含め海外のUXデザイナーでこのツールを使ってる人は多いんじゃないでしょうか。

Webはもちろんモバイルもかなり直感的にワイヤーフレームを作れるあたりは、使いやすさ抜群ですね。

ワイヤーフレーム、モックアップ、プロトタイプを一つのツールで作れます！

いかがだったでしょうか。

こういうのに慣れていると個人でWebサービスやアプリケーションを作るときにスムーズにできると思います。

一番最初とかは、自分の好きなWebサイトなどをワイヤーフレームに落とし込んでみる作業なんかをすると良いのかなと思います。