• LIGの広告成功事例
WEB

Web制作に超便利な無料ワイヤーフレームツール4選

Web制作に超便利な無料ワイヤーフレームツール4選

こんにちは、ディレクターのはるかです。

Web制作で必ずといってもいいほど行うワイヤーフレーム作成、みなさんはどんなツールを使っていますか?

今回は無料でワイヤーフレームが作成できるツールをいくつかご紹介します。

使える無料のワイヤーフレームツール4選

POP

POP1
https://popapp.in

スマートフォンから手書きのワイヤーフレームを撮影して、ページとページを紐付けることができるアプリです。

こちらの動画を見ていただく方が、言葉でご説明するより早そうです。

無料版ではプロジェクトは2件、閲覧者は3名まで登録可能のようです。
スマートフォンサイトのワイヤーフレームはどうしても縦長になりがちな印象がありますが、このように実際のスマートフォンから確認ができれば、そこまで気にならなくなるかもしれません。プレゼンテーションにもオススメです。

Justinmind Prototyper

Justinmind Prototyper1
http://www.justinmind.com

こちらはインストールして使用するツールです。

 
Justinmind Prototyper2

インストールすると、最初にデバイスを選択する画面がポップアップで表示されます。

 
Justinmind Prototyper2_1

次に作成するサイズを選択します。

 
Justinmind Prototyper3

するとこのような画面になります。
あとは必要な要素を左からドラッグ、配置をしてワイヤーフレームを作成していきます。英語表記ではありますが、英語が読めなくても感覚的に使いやすいツールだと思います。

moqups

moqups1
https://moqups.com/

こちらはブラウザ上でワイヤーフレームを作成するツール。配置したいステンシルをドラッグで配置することができます。

 
moqups2

アイコンもサクサク変更できます。

 
moqups3

登録をしなくても使用できますが、無料版に登録すると、PDF、PNGで出力が可能になりますので登録してからの使用がオススメです。

Cacoo

CACOO1
https://cacoo.com/lang/ja/

こちらは私がLIGに入社してからずっと使用しているワイヤーフレーム作成ツール。
日本語なので使いやすいです。複数のメンバーでの編集が可能で、チャット機能もついています。

 
CACOO2
作成画面はこんな感じです。

作成するページ数が多いときは不向きかもしれません。開くときも保存するときも時間がかかるようになっていきます……。
(もちろん、その時の環境によるとは思いますが…!)
また、無料版では書き出しがPNGのみとなります。

あとは、Cacooのステンシルやテンプレートを売買できるCacoo Storeもあります。
無料のものもありますので、必要に応じて使用しそうなものはいれておいても良いかと思います。

まとめ

こういったツールに使い慣れると作業スピードがあがりますし、Web制作の過程においても直感的に適したツールが選べるようになっていくと思います。
どれも無料で使用ができますので、気になるツールがありましたらぜひ試してみてください。
参考になりましたら幸いです。

それでは〜!

 

【Web制作に便利なツール】

Web制作者のためのワイヤーフレーム講座「役割と考え方」編

UIデザインが捗る!Prottでスマホサイトのプロトタイプを作成しよう

スケジュール調整ツールSmartsheetで案件やタスクを管理しよう

専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選

スケジュール作成をより簡単・綺麗に!iTaskXを使ってみた

この記事を書いた人

はるか
はるか ディレクター 2013年入社
ディレクターのはるかです。声がかなり低いですが、酒やけではなく地声です。インドアすぎるのでアウトドアになれる趣味が欲しいです。よろしくお願いします。