Written by Manabu Bannai

【比較あり】Web制作にモックアップツールならmoqupsが神【愛用】

PROGRAMMING

モックアップツールの利用価値から、おすすめツールをご紹介します。

「モックアップツールなんて使わなくていいっしょ」「モックアップ作る前にラフデザイン作ればいいっしょ」と思っている人も少しだけお時間ください。もしかしたら考えが変わるかもです。

スポンサードサーチ


モックアップツールってなに?紙で良くない?


モックアップツールとは制作イメージ共有用ツールです。

Web制作ってデザインがキモだったりする場合が多いので、口頭だけだと伝わりづらいです。そこで登場するのがモックアップツール。ラフデザインに入る前の、ざっくりしたサイト概要の共有に便利です。

いきなりラフデザイン作ればよくない?

たしかにそうなのですが、ラフデザインの方向性がズレていたときにデザイナーの負担が増えます。モックアップはサクっと作れるので、デザイナーの負担を減らすためにも利用価値があるかなと。

こういった部分に気配りできると、デザイナーから好かれますよ。きっと笑。

紙でよくない?

紙のほうが早いって人はそれでいいと思います。

僕も紙を使っていた時期がありましたが、今となってはモックアップツール一択です。その理由は次のとおり。

  • よく使う素材が揃っている(アイコン・メニューボタンなど)
  • モックアップ作成時点でピクセルをFIXできる(デザイナーと円滑に連携出来る)
  • 参考サイトのスクショをベタベタ貼れる(デザイナーと円滑に連携出来る)

僕がmoqupsをオススメする理由

動画のとおりですが、サクサクモックアップが作れます。その中でも特に僕が気に入ってる機能が次のとおりです。

  • URLから簡単にモックアップを共有できる
  • 動作がサクサク(日本だと有名なCacooというツールは重たい)
  • ダウンロード不要(基本はシェアする為のツールなのでアプリ化されると逆に不便)
  • 値段が安い(月に13ドル程度で似たツールよりも安い/無料プランもあります)

実際に僕が作成したモックアップを公開


» ブラウザからモックアップを見る

URLリンクはスマホだと動かなかったりしますが、PCだと問題なく動くかと。こんな感じでモックアップを作り、チームメンバーに共有できます。

モックアップツール比較表:まずは各種ツールを触ってみるのがオススメ

個人的にはmoqups一択なのですが、人によって用途が変わると思うので比較表を作りました。

サービス名 無料プラン 月額費用 公式サイト
Cacoo あり 454円〜 cacoo.com
Fluid UI あり 8.25ドル〜 fluidui.com
moqups あり 13ドル〜 moqups.com
Marvel あり 14ドル〜 marvelapp.com
invision あり 15ドル〜 invisionapp.com
Justinmind あり 19ドル〜 justinmind.com
proto.io あり 24ドル〜 proto.io

とりあえず、ずべて無料プランがあるので予算に合わせて試してみましょう〜。以上、便利なモックアップツールを利用して、開発プロジェクトを加速させましょう!

※参考記事
ワイヤフレーム作成ツールの料金プランをまとめてみる
Web制作に超便利な無料ワイヤーフレームツール4選

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社