logo

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

スクリーンショット 2016-01-17 1.26.16


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

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

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

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

 

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

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

 

1. JustinMind


スクリーンショット 2016-01-16 19.49.06

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

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

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

 

 

2. POP


スクリーンショット 2016-01-16 19.53.23

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

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

 

 

3. wireframe.cc


スクリーンショット 2016-01-17 1.47.14

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

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

 

 

4. AXURE


スクリーンショット 2016-01-17 1.49.22

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

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

 

 

5. Mockflow


スクリーンショット 2016-01-17 1.02.14

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

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

 

 

6. mockingbird


スクリーンショット 2016-01-17 1.07.50

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

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

 

 

7. BALSAMIQ


スクリーンショット 2016-01-17 1.16.19

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

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

 

 

8. moqups


スクリーンショット 2016-01-17 1.52.45

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

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

 

 

9. Cacoo


スクリーンショット 2016-01-17 1.01.48

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

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

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

 

 

10. UXPIN


スクリーンショット 2016-01-17 1.10.57

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

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

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

 

 

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

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

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




コメントを残す

メールアドレスが公開されることはありません。