Web事業部LP
Web事業部LP
2019.10.18

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

はるか

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

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

今回は無料でワイヤーフレームが作成できるオススメのツールを厳選しましたので紹介します。



※ 本記事は、2016年4月27日に公開された記事を、最新状況をふまえて再編集したものです。

無料で便利なワイヤーフレームツール4選

POP

ワイヤーフレームツール「POP」
https://marvelapp.com/pop/

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

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

スマートフォンサイトのワイヤーフレームはどうしても縦長になりがちな印象がありますが、このように実際のスマートフォンから確認ができれば、そこまで気にならなくなるかもしれません。プレゼンテーションにもオススメです。

Justinmind Prototyper

Justinmind Prototyper1
http://www.justinmind.com

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

 
Justinmind Prototyper2

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

 
Justinmind Prototyper2_1

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

 
Justinmind Prototyper3

するとこのような画面になります。

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

 

moqups

moqups
https://moqups.com/

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

 
moqups

タブやマップの配置やアイコンなどももサクサク変更できます。

 

PDF、PNG、HTMLでの出力も可能ですが、使用するには有料プラン(3ユーザー20ドル/月〜)への登録が必要になります。

 

Cacoo

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

こちらは私がLIGに入社してからずっと使用しているワイヤーフレーム作成ツール。15日間は無料で使用することができます。

日本語なので使いやすいです。複数のメンバーでの編集が可能で、チャット機能もついています。

 
Cacoo

作成画面はこんな感じです。テンプレートもたくさんあります。

 
Cacooのエクスポート機能

PNG、SVG、PDF、PS、PPTでの書き出しが可能です。



まとめ

こういったツールに使い慣れると作業スピードがあがりますし、Web制作の過程においても直感的に適したツールが選べるようになっていくと思います。

どれも無料で使用ができますので、気になるツールがありましたらぜひ試してみてはいかかですか?

Web制作のご相談・料金のお見積りはこちらから

 

Web制作に便利なツール

Web制作者のためのワイヤーフレーム講座「役割と考え方」編UIデザインが捗る!Prottでスマホサイトのプロトタイプを作成しよう
スケジュール調整ツールSmartsheetで案件やタスクを管理しよう
専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選
スケジュール作成をより簡単・綺麗に!iTaskXを使ってみた