creatersnest57

誰でも簡単にモックアップが作れるWebサービスまとめ


モックアップとは、いわば「模型」のことです。
最近では、「ワイヤーフレーム」のことをモックアップと呼んだりするようですが、ワイヤーフレームはあくまで、レイアウトなどを指す場合が多いです。
今回はさらに上のステップのモックアップが簡単に作成できるWebサイトをご紹介させていただきます。

moqups

p2

https://moqups.com/

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

 

Adobe Edge Reflow

p1

https://creative.adobe.com/ja/products/reflow

Adobeが提供している、レシポンシブデザインWebデザインソフトです。
30日間の無償体験が可能です。
近年、スマートフォンやタブレットの需要が増え、レシポンシブデザインに注目が集まってきています。
CSSがベースのデザインツールになっており、CSSのコードの抽出もできます。

 

axure

p2

http://www.axure.com/

海外サイトになります。
画像やオブジェクトなどを配置して、モックアップを作成できるサービスです。
作ったモックアップをもとにHTML・CSS・Javascriptなどで書き出し、実際に完成したサイトを確認することが可能です。

 

balasmiq

p3

https://balsamiq.com/

海外サイトになります。
手書き風のモックアップが簡単に作れるサービスです。
レシポンシブデザインも可能です。
7日間の無料体験がついています。

 

FRAME

p4

http://frame.lab25.co.uk/

海外サイトになります。
MacやiPhone、Androidの画面にはめ込んだモックアップが簡単に作れるサービスです。
完成したら、pngデータとして抽出したり、Twitterやfacebookへ直接シェアしたりすることも可能です。

 

Framer

p5

http://framerjs.com/

海外サイトになります。
Javascriptで書けるモックアップツールです。
Photoshopから画像をインポートしたり、パソコン版やスマートフォン版のアニメーションも作成したりすることもできます。

 

Mockup Designer

p6

http://fatiherikli.github.io/mockup-designer/#document/

海外サイトになります。
ChromeやFirefox以外で作業すると文字化けする可能性がありますので、利用されるブラウザにご注意ください。
左から使用したいエレメントをドラッグするだけの簡単操作で作成できます。

 

Justinmind

p7

http://www.justinmind.com/

海外サイトになります。
WindowsやMac、iPhoneやAndroid、iPad向けのWebサイトやアプリのモップアップが作成できるサービスです。
無償版と有償版があります。

 

AppGyver

p10

http://www.appgyver.com/

海外サイトになります。
出来上がったモックアップはURLやQRコードを使ってシェアすることもでき、スマホ版のアプリもあるので、タブレットやスマートフォンからの作業も可能です。
無償版と有償版があります。

 

invision

p8

http://www.invisionapp.com/

海外サイトになります。
サポートされているファイルは、PNG・JPG・GIF・PDFですが、今後PSDやAIデータもサポート可能となります。
Dorpboxなどのオンラインストレージからも画像の取り込みが可能です。

 

MockFlow

p9

http://www.mockflow.com/

海外サイトになります。
パソコン版やスマホ版のWebサイトの他に、FaceookアプリやWordpressなどのCMSサイトのテーマにも適しています。
無償版と有償版があります。

 

Cacoo(カクー)

p1

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

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

 

Mockingbird

p3

https://gomockingbird.com/

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

 

Pencil

p11

http://pencil.evolus.vn/

無料の海外サイトになります。
Firefoxアドオンとして作動するモックアップ作成ソフトウェアです。
画像やテキスト、各種フォームが登録されているので、ドラッグ&ドロップで配置して文字を編集するだけの簡単操作です。

 

UXPin

p12

http://www.uxpin.com/

海外サイトになります。
シンプルで使いやすく、ドラッグ&ドロップでワイヤーフレームからモップアップまで作成することが可能です。
30日間無償で体験できます。

 

まとめ

今回は、誰でも簡単にモックアップが作れるWebサービスをまとめてみましたが、いかがでしたでしょうか?
ワイヤーフレームから実際に完成した時のイメージはまた違ってきます。
ぜひ、制作のご参考にしていただけたらと思います。

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

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

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


NESTonlineBlog編集部

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

Next Article【Illustrator】まずはこれを覚えたい!基本的なエフェクト集