この前、打ち合わせの帰り、大通りを歩いていると向こうから来る人がいて・・・ 知らない人だったんです。だから、目も合わせずに通り過ぎましたよ。ええ。
こんにちは、ディレクターのはるかです。
Web制作で必ずといってもいいほど行うワイヤーフレーム作成、みなさんはどんなツールを使っていますか？
今回は無料でワイヤーフレームが作成できるツールをいくつかご紹介します。
使える無料のワイヤーフレームツール4選
POP
スマートフォンから手書きのワイヤーフレームを撮影して、ページとページを紐付けることができるアプリです。
こちらの動画を見ていただく方が、言葉でご説明するより早そうです。
無料版ではプロジェクトは2件、閲覧者は3名まで登録可能のようです。
スマートフォンサイトのワイヤーフレームはどうしても縦長になりがちな印象がありますが、このように実際のスマートフォンから確認ができれば、そこまで気にならなくなるかもしれません。プレゼンテーションにもオススメです。
Justinmind Prototyper
こちらはインストールして使用するツールです。
インストールすると、最初にデバイスを選択する画面がポップアップで表示されます。
次に作成するサイズを選択します。
するとこのような画面になります。
あとは必要な要素を左からドラッグ、配置をしてワイヤーフレームを作成していきます。英語表記ではありますが、英語が読めなくても感覚的に使いやすいツールだと思います。
moqups
こちらはブラウザ上でワイヤーフレームを作成するツール。配置したいステンシルをドラッグで配置することができます。
アイコンもサクサク変更できます。
登録をしなくても使用できますが、無料版に登録すると、PDF、PNGで出力が可能になりますので登録してからの使用がオススメです。
Cacoo
こちらは私がLIGに入社してからずっと使用しているワイヤーフレーム作成ツール。
日本語なので使いやすいです。複数のメンバーでの編集が可能で、チャット機能もついています。
作成画面はこんな感じです。
作成するページ数が多いときは不向きかもしれません。開くときも保存するときも時間がかかるようになっていきます……。
(もちろん、その時の環境によるとは思いますが…！)
また、無料版では書き出しがPNGのみとなります。
あとは、Cacooのステンシルやテンプレートを売買できるCacoo Storeもあります。
無料のものもありますので、必要に応じて使用しそうなものはいれておいても良いかと思います。
まとめ
こういったツールに使い慣れると作業スピードがあがりますし、Web制作の過程においても直感的に適したツールが選べるようになっていくと思います。
どれも無料で使用ができますので、気になるツールがありましたらぜひ試してみてください。
参考になりましたら幸いです。
それでは〜！
【Web制作に便利なツール】
※ Web制作者のためのワイヤーフレーム講座「役割と考え方」編
※ UIデザインが捗る！Prottでスマホサイトのプロトタイプを作成しよう
※ スケジュール調整ツールSmartsheetで案件やタスクを管理しよう