ワイヤーフレーム作成ツール比較18選

ワイヤーフレームとは?

ワイヤーフレームとは一言いえば、「WEBサイトの設計図」です。

例えば以下は、Wireframe.ccを使って作成したワイヤフレームです。
「どの要素をどこに配置するのか?」を作成します。

どんなときに活用するのか?

  • WEBサイト、ブログ、ネットショップのレイアウト(配置)を考えるとき。
  • 物販で商品ページの完成形のイメージをウェブデザイナーに伝えるとき

ワイヤーフレーム作成ツール比較18選

国産ツールcacoo(カク−)

Screenshot of cacoo.com

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

  • 動作環境:ブラウザ上で動作するワイヤーフレーム作成ツールです。Macも利用可能です。
  • 価格:無料〜

編集画面

Wireframe.cc

Screenshot of wireframe.cc

https://wireframe.cc/

複雑な操作は必要ありません。
ドラッグ&ドロップでサクサク感覚的にワイヤフレームを作成できるツールです。
はじめて、ワイヤフレームを作成する人でもすぐに使い始めることができます。

  • 動作環境:ブラウザ上で動作するワイヤーフレーム作成ツールです。Macも利用可能です。
  • 価格:無料〜$99/月額

編集画面

moqups

Screenshot of moqups.com

https://moqups.com/

  • 動作環境:ブラウザ上で動作するワイヤーフレーム作成ツールです。Macも利用可能です。
  • 価格:無料〜$99/月額

編集画面

UXPin

Screenshot of www.uxpin.com

UXPin

  • 動作環境:ブラウザ上で動作するワイヤーフレーム作成ツールです。Macも利用可能です。
  • 価格:$19〜$99/月額
  • フリートライアル(無料試用)あり

編集画面

Fluid UI

Screenshot of Fluid%20UI

Fluid UI

  • 動作環境:WEBブラウザ上で動作するワイヤーフレーム作成ツールです。Macも利用可能です。
  • 価格:$19〜$99/月額

Balsamiq Mockups

Screenshot of balsamiq.com

Balsamiq Mockups

  • 動作環境:WEBブラウザ,Mac, Windows web-based
  • 価格:

Balsamiq Mockupsb

Screenshot of balsamiq.com

https://balsamiq.com/products/mockups/

Axure

Screenshot of www.axure.com

Axure

Pidoco

Screenshot of pidoco.com

Pidoco

  • 動作環境:WEBブラウザ,Mac, Windows web-based
  • 価格: $12-$175/月

Visio

Screenshot of visio.microsoft.com

Visio

  • 動作環境: Windows
  • 価格:

InDesign CC

Screenshot of www.adobe.com

InDesign CC

  • 動作環境: Mac, Windows
  • 価格: 

Justinmind Prototyper

Screenshot of www.justinmind.com

Justinmind Prototyper

POP

https://popapp.in/

  • 動作環境 Mac
  • ダウンロードタイプ

Pencil Project

http://pencil.evolus.vn/

  • 動作環境 Mac
  • ダウンロードタイプ

PowerMockup

http://www.powermockup.com/

MockFlow

https://www.mockflow.com/

  • 動作環境: Mac, Windows

mockingbird

https://gomockingbird.com/home

  • 動作環境: WEBブラウザ

シンプルな直感的に使いやすいツールです。

Prott

Screenshot of prottapp.com

https://prottapp.com/ja/