creatersnest56

ワイヤーフレームを簡単に作れるWebサービス10選



Webサイトを作るにあたり、必ずと言っていいほど必要になってくるのがワイヤーフレームです。
でもワイヤーフレームを作成するには、以外と時間が必要になります。
そんなときのための簡単かつ正確にワイヤーフレームが作成できるサービスを、今回はピックアップしたいと思います。

Cacoo(カクー)

p1

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

国内サイトのCacoo(カクー) は、Web上で簡単にワイヤーフレームが無料で作れるドローツールです。
ワイヤーフレームの他にサイトマップやフローチャート、マインドマップやネットワーク図などWeb制作に必要なさまざまなツールが利用できます。
出来上がったデータをPDFやSVGなどでエクスポートも可能です。

 

 moqups

p2

https://moqups.com/

英語サイトになります。
InternetExplorer11では今の段階では対応できておらず、Chome・Firefox・Safariでの利用をお願いします。
英語ツールなのですが、ネット上で検索すると解説記事もありますので、比較的使いやすいと言えます。

 

HotGloo

p4

http://www.hotgloo.com/

英語サイトになります。
ワイヤーフレームに特化したサイトです。
だだし、有料版になります。
web上で作成できるので、チームでの制作などの時に役立ちそうです。

 

iPlotz

p5

http://iplotz.com/index.php

英語サイトになります。
ワイヤーフレーム以外に、プロジェクトマネージメントも可能です。
作成したワイヤーフレームをHTML表示でき、とても便利です。
また、png・jpg・pdf出力もできます。

 

Mockingbird

p3

https://gomockingbird.com/

英語サイトになります。
InternetExplorer11では今の段階では対応できておらず、Chome・Firefox・Safariでの利用をお願いします。
左のツールボックスからドラッグ&ドロップで簡単に作業できます。

 

Gliffy

p6

http://www.gliffy.com/#wireframes
chomeアプリ版 http://bit.ly/lzuNGo

英語サイトになります。
ワイヤーフレームの他にサイトマップやフローチャート、UMLやネットワーク図などWeb制作に必要なさまざまなツールが利用できます。
また、Chromeアプリ版もあります。

 

UXPin

p7

http://www.uxpin.com/

英語サイトになります。
有料版ですが、30日間無料でお試しいただけます。
シンプルで使いやすく、作成したワイヤーフレームはURLを発行してweb上でシェアさせることが可能です。

 

SlickPlan

p8

http://slickplan.com/

英語サイトになります。
シンプルに作りたいときに最適です。
ドラック&ドロップでの簡単操作が可能で、ページ追加も自由自在。
HTML変換やPDF変換もでき、ネット上で共有したい時などに便利です。

 

Lovery Charts

p9

http://lovelycharts.com/

英語サイトになります。
その名の通り、女性向けでアイコンなどがちょっとかわいいです。
有料会員になると、他ユーザーとのコラボレートも可能。
ただし、日本語入力ができないなどのデメリットもあり。

 

MockFlow

p10

http://www.mockflow.com/

英語サイトになります。
ある程度のテンプレートがあり、選択して作成することもできます。
プランによって、HTMLでの出力も可能。
他英語サイトと同じように、日本語入力が使えないのが難点ですが、Fireworksに似ているとの声もあります。

 

まとめ

今回は、ワイヤーフレームを簡単に作れるwebサービスをまとめてみましたが、いかがでしたでしょうか?
他にもたくさんのwebサービスがありますが、自分にあったサイトを見つけられるのが一番です。
ぜひご活用くださいませ。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleWebサイトを高速化するためのテクニック20選