全部無料で試せる!厳選ワイヤーフレーム作成ツール10

    
2013/07/17
    

wirekit_main サイト制作はもとよりアプリ開発、Webサービスの設計などあらゆるプロジェクトにおいてほぼ必ず必要になっているワイヤーフレーム。それを作るための最適なツールは一体何なのか?

実際に数十のツールを試してみて「使える!」と思ったものだけを10個、厳選して紹介いたします。

【1】Prototyper


http://www.justinmind.com/

豊富なウィジェットと「もうこのままリリースできるのでは!」と言いたくなってしまうほどの完成度で仕上げられる細かな作りこみが素晴らしい、ワイヤーフレーム作成専用ソフト。

正直、なぜこれが無料なのか僕にはよくわかりません。

UIは英語ですが直感的に作られていてサクサク動かせますし、プロジェクトそのものを単一のファイルに保存することも、もちろんHTMLにパブリッシュすることも可能。

なぜかパブリッシュしたHTMLファイルをChromeで開くと怒られるという謎の仕様があったりしますが、Firefoxあたりで開けば共有もOKです。

【2】Power Mockup


http://www.powermockup.com/

普段使っているパワーポイントをワイヤーフレーム作成に特化させてしまう拡張機能(のようなもの)。

ダウンロード後インストールして普通にパワーポイントを起動させると、画面上に数百種類のワイヤー用ステンシル(ワイヤー用パーツ)キャンバスが出現します。

それぞれがかなり高い完成度で、もちろんテキストの差し替えやサイズ変更も可能。普段ワイヤー作成にパワーポイントを使っている方には絶対オススメです。

※無料版だと全ステンシルの3割くらいしか使えないのがちょっと残念。
※有料版はグローバルナビの「Download」から「BUY NOW」をクリック。1アカウント$59.95

【3】Smart Canvas


http://smartcanvas.net/

国産のスマホアプリ&スマホサイト簡単作成ツール。ブラウザで完全に完結してしまう形式ながら、本当にアプリやサイトが作れてしまうという驚きのサービス。しかも無料。

本来はサービスそのものを作るツールなので、ワイヤー作成に使ってるなんて知られたら怒られてしまいそうですが、アプリのプロトタイプ作成にはピッタリの機能と操作性を持っています。

【4】Cacoo


https://cacoo.com/

すでに使っている人も多いと思いますが、国内においてほぼ決定版といって良いオンラインツール。日本製なのでUIがわかりやすいですし、複数人でチャットを行いながら同時編集可能というのも魅力的。

以前使った時よりずっと操作も直感的になっていて、ほぼ迷うポイントは無かったです。数年前話題になった時に使って諦めてしまった人も、今こそ試してみる時かもしれません。

オンラインツールなので画像のアップが面倒なのはまぁ・・・もうしょうがないんですかね。

【5】ProtoShare


http://www.protoshare.com/

かなり細かく色々な事ができてしまうオンライン系ワイヤーフレーム作成ツール。日本語に対応していないのが本当に残念なのですが、機能・操作性ともにかなり優秀なツールです。

30日間はどのプランでも無料で試せるので「Cacooじゃちょっと物足りなくなってきてたんだよね!」という方にはぜひ試してみていただきたいですね。

【6】HotGloo


http://www.hotgloo.com/

ProtoShareよりもちょっとお安い月額$28。シンプルなデザインと使い勝手の良さで、日本でも割と人気になったワイヤー作成ツールです。

全体のデザインをシンプルにしすぎてしまったためか、プロパティウィンドウがちょっと邪魔に感じる以外は普通に使い倒せます。無料で15日間試せるので、デザイン的に気に入ったらこちらもオススメ。

【7】axure


http://axure.nttdata.com/

少々クセがあるものの、UIはWindowsのそれに近く使いやすいダウンロード型ツール。

他のソフトとの連携にも強く、画像をドラッグアンドドロップで挿入できたり、Office系のデータをそのままコピペできたりなど、インストール型ソフトらしい使いやすさが魅力です。

保存形式が独特で、やたらと大量のファイルが生成されてしまうのが難点といえば難点ですが、仕様書の印刷やプロトタイプ生成機能など豊富な機能で古くからのファンも多いツール。

ちょっと見た目が古臭いのが残念ポイントではありますが。

【8】PENCIL PROJECT


http://pencil.evolus.vn/Default.html

完全無料のツールとしてはなかなか豊富なテンプレートとツールを持っていて割と使いやすい印象でした。インターフェースが見慣れたWindowsに似せて作られているせいか、英語版であることはあまり気づかず使えますね。

思いっきり大規模なWebサービスのワイヤーを書きまくる!という用途よりは、イメージを伝えるためのツールという印象です。

【9】SIMPLEDIAGRAMS


http://www.simplediagrams.com/

黒板に直接書き込んで行くような可愛らしい仕上がりでワイヤーを書けるちょっと楽しいソフト。

Adobe Airで動くインストール型ソフトで、あまり細密なワイヤーフレームには向きませんが、あえてラフに仕上げてデザイナーのインスピレーションに期待したいときには重宝します。こちらもあんまりゴリゴリ書くのには向いてないですね。

【10】Balsamiq Mockups


http://www.balsamiq.com/products/mockups

鉛筆で直書きしたような可愛らしい仕上がりでワイヤーを作り込めるツール。

動作が若干重く、テキストの入力方式が面倒な上に日本語を入力すると途端に明朝体になってしまうという難点がありますが、最初からセットされているパーツ一つ一つが可愛らしく、そのまま並べてざっくり説明するときにはつい使いたくなってしまう魅力があります。

 

【あわせて読みたい!】
デザイナーができるWebサイト高速化!JavaScript/CSS圧縮ツール厳選10個
デザイナーなら知っておかないと損するGoogleWebフォント特選10個


 

自分の脳内アイデアの状態のモノをフワーッと形にしていくようなフェーズで使うと、ちょっとワクワクして捗りました。

(執筆/編集 中村健太

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2017 mixi recruitment, Inc. all rights reserved.