ワイヤーフレーム作成ツールを比較した場合、どのような違いがあるのでしょうか。

Webサイトやモバイルアプリ向けのワイヤーフレームを作れるツールや、複数のメンバーが同時に編集作業ができるツール、テンプレートが豊富にあるツールがあります。

さらに、プロトタイプが作れるツールや、無料で利用できるツールもあります。そこで、ワイヤーフレーム作成ツールを選ぶ前に知っておきたいポイントをまとめました。

本記事は、ワイヤーフレーム作成ツールおすすめ6選を比較し、その違いを紹介します。

 

ワイヤーフレーム作成ツールおすすめ6選

ワイヤーフレーム作成ツールを選ぶにあたって、6つのポイントを検討したいところです。

• ワイヤーフレームを作る描画ツールが充実しているか。
• 使いやすいか。（ドラッグ＆ドロップで簡単に操作できるか）
• テンプレートは豊富にあるか。（Webサイト、iPhone、Android向け）
• チーム間で情報共有がしやすいか。（共有リンク、メール、QRコード）
• 他のツールと連携できるか。（Googleドライブ、DropBox）
• 料金はいくらか。

上記ポイントを踏まえて、おすすめのツール6選をご紹介します。

1. 　figma
2. 　cacoo
3. 　prott
4. 　moqups
5. 　wireframe cc
6. 　Marvel

それぞれを詳細にご紹介します。

 

1.　figma

Figmaは、インターネット上でワイヤーフレームの作成や共有ができるツールです。複数のメンバーで同時にワイヤーフレームを作れたり、編集できます。

ワイヤーフレームを作るにあたり、文字や余白の編集ができ、レイアウトを変更できます。

ボタンやフォントの色を設定できます。

ボタンをクリックしたときの動作や画面遷移を設定できます。

ワイヤフレームのためのキットが用意されているので、利用することで簡単に作業ができます。

ナビゲーション向けのキットが、4種類あります。

CTA向けのキットは3種類あります。

フッター向けのキットは3種類あります。

作成したワイヤーフレームは、リンクを共有することで、他のメンバーの閲覧や編集ができます。

また、データの取り込みはPDFファイルやGoogle Driveとなります。

◆　料金プラン

プラン	Starter	Professional
料金	無料	12ドル
プロジェクト	1プロジェクトにつき3ファイル	プロジェクト無制限
カスタム権限	利用不可	利用可能

◆　基本情報

• 　ワイヤフレームの作成：　◯
• 　同時の作業：　〇
• 　テンプレート：　〇
• 　メンバーの共有：　◯（URLリンクの共有）
• 　データの取り込み：　◯（PDFファイル、画像データ）
• 　他ツールとの連携：　◯（Googleドライブ）　
• 　日本語対応：　〇

figma 

 

2.　cacoo

Cacooはオンラインで利用できる図面作成ツールです。ブラウザ上で図を共有できるため、プロジェクトのチーム間での情報を管理できます。

ワイヤーフレームに関するテンプレートが12種類あります。

Webサイト向けのワイヤーフレームやSNS、モバイルアプリ向けのワイヤーフレームがあります。

また、ランディングページやFacebook向けのワイヤーフレームもあります。

テンプレートを選ぶと、ワイヤーフレームが作られているので、迅速に作業ができます。

図形を追加したり、編集をすることができます。

複数のメンバーで同時に作業をできます。具体的には、シェイプのドラッグ、拡大・縮小・回転、テキストの編集、ラインの描画、テーブルの編集ができます。

画像ファイルやGoogleドライブ、Dropbox、OneDrive からデータを取り込めます。

作成したワイヤーフレームは、他のメンバーと共有でき、編集もできます。

なお、ワイヤフレームだけでなく、フローチャートやサイトマップ、システム構成図、組織図などシステム開発プロジェクトで利用できる様々なテンプレートが用意されています。

カテゴリ	種類
フローチャート	BPMN 図
ウェブデザイン	ワイヤーフレーム, サイトマップ
開発	ネットワーク構成図、UML、データベース設計図、AWS構成図
プロジェクト管理	作業分解図（WBS）、 マインドマップ、ガントチャート、 PERT図
マーケティング / ビジネス	組織図、室内レイアウト、SWOT分析図

◆　料金プラン

プラン	プロ	チーム
料金	660円/月	1,980円/月
利用	個人での利用	チームでの利用

◆　基本情報

• 　ワイヤフレームの作成：　◯
• 　同時の作業：　〇
• 　テンプレート：　〇
• 　メンバーの共有：　◯（URLリンクの共有）
• 　データの取り込み：　◯（PNG、GIF、JPEG、SVG形式の画像ファイル）
• 　他ツールとの連携：　◯（Googleドライブ、Dropbox、OneDrive ）　
• 　日本語対応：　〇

cacoo 

 

3.　prott

Prottはプロトタイプ作成ツールで、コードを書かずに本物のようなWebサイト、アプリを作れます。ウェブサイトやiOS、Androidアプリに対応しています。

ユーザー登録をすると、ダッシュボードが表示されるので「プロジェクトを追加」を選びます。

新規作成を選びます。

プロジェクト名とデバイス（Web、iPhone、iPad、Apple Watch）を選びます。

「ワイヤフレームを描く」を選びます。

描画ツールが表示されます。

作られた画面を利用するときは、モバイルプロジェクトやWebプロジェクトを選びます。

事前に作られた画面が表示されます。

画面遷移図を簡単に作れます。

データの取り込みは、デスクトップかDropboxからできます。

◆　料金プラン（税込）

プラン	Free	Starter	Pro	Team	Enterprise
価格	0円	1,900円	3,900円	7,400円	要相談
利用者数	1ユーザー	1ユーザー	1ユーザー	2ユーザー	15ユーザー以上
プロジェクト数	1	3	無制限	無制限	無制限
ワイヤーフレーム	–	–	〇	〇	〇
共同編集	–	–	–	〇	〇

◆　基本情報

• 　ワイヤフレームの作成：　◯
• 　同時の作業：-
• 　テンプレート：　〇
• 　メンバーの共有：　◯（メール、URL、QRコード）
• 　データの取り込み：　◯（画像データ）
• 　他ツールとの連携：　◯（Dropbox）　
• 　日本語対応：　〇

prott 

 

4.　moqups

Moqupsは、ワイヤーフレーム、モックアップ、プロトタイプ、そしてダイアグラムを作成するためのウェブベースのデザインツールです。

ワイヤフレームを作るときは、ユーザー登録をし、ワイヤフレームとモックアップを選びます。

選んだワイヤフレームが描画ツールに表示されます。

オブジェクトを選ぶと、色を変えたり、サイズや位置を変えられます。

なお、スマホ向けのワイヤフレームのテンプレートもあります。

作成しているワイヤフレームに付箋を貼って、コメントを残すこともできます。

作成したワイヤーフレームは、URLリンクの共有ができます。

また、ローカルディスクにある画像ファイルを取り込めます。

◆　料金プラン

プラン	Free	Solo	Team	Unlimited
価格（※1）	$0	$13	$23	$67
シート数	1	1	5	シート制限なし
プロジェクト数	2	無制限	無制限	無制限
オブジェクト数	400	無制限	無制限	無制限

※1：　月額・年間請求時

◆　基本情報

• 　ワイヤフレームの作成：　◯
• 　同時の作業：-
• 　テンプレート：　〇
• 　メンバーの共有：　◯（メール、URL）
• 　データの取り込み：　◯（画像データ）
• 　他ツールとの連携：　◯（Dropbox）　
• 　日本語対応：　-

moqups　

 

5.　wireframe cc

ウェブブラウザで使えるワイヤフレーム作成ツールです。ドラッグアンドドロップでオブジェクトを作れます。

また、文字を入力でき、フォントの大きさも変更できます。

また、オブジェクトの枠の色を変えられます。

また、コメントも入力できるため、チーム間で情報のやり取りもできます。

なお、プログレスバーやコンボボックス、スライダーも作れます。

作成したワイヤーフレームはURLリンクによる共有やPDFファイル、PNGファイルでのエキスポートができます。

◆　料金プラン

原則、無料。有料プランにしたい場合は、月額16ドルがかかる。

◆　基本情報

• 　ワイヤフレームの作成：　◯
• 　同時の作業：-
• 　テンプレート：　-
• 　メンバーの共有：　◯（URLリンク、PDFファイル、PNGファイル）
• 　データの取り込み：　-
• 　他ツールとの連携：　-　
• 　日本語対応：　-

wireframe cc 

 

6.　Marvel

Marvelは、ウェブサイトやアプリのプロトタイプ作成ツールであり、ワイヤーフレームの作成から始まり、モックアップの作成ができます。

ユーザー登録をすると、ダッシュボードが表示されます。右上の「Create project」を選びます。

プロトタイプとして、WebサイトやiPhone、iPad、Androidなどを選びます。

ワイヤフレームをゼロから作るときは、左側を選びます。

描画ツールが表示されるので、図や文字などを追加します。

作成したオブジェクトは、サイズや位置、色を変えられます。

また、ボタンの追加をしたり、ドロップダウンの追加ができます。

◆　料金プラン

プラン	Free	プロ	チーム	エンタープライズ
月額料金	$0	$12	$42	要問い合わせ
ユーザー数	1人	3人	10人	無制限
プロジェクト数	1	無制限	無制限	無制限

◆　基本情報

• 　ワイヤフレームの作成：　◯
• 　同時の作業：-
• 　テンプレート：　-
• 　メンバーの共有：　◯（URLリンク、PDFファイル、PNGファイル）
• 　データの取り込み：　-
• 　他ツールとの連携：　-　
• 　日本語対応：　-

Marvel　

 

【参考情報】　ワイヤーフレームの作成とは

ワイヤーフレームは、ウェブサイトやアプリの基本的な構造を示す設計図です。ページのレイアウト、配置される要素（ボタン、テキストボックス、画像など）を示します。

レイアウトと構造に焦点があり、詳細なデザイン要素（色や画像）は含まれていない場合が多いです。

◆　ワイヤーフレームの例

【出典】　cacoo 

 

まとめ

本記事は、ワイヤーフレーム作成ツールおすすめ6選を比較し、その違いを紹介しました。おさらいをすると、求める内容によって、おすすめのツールが変わります。

求める内容	おすすめのツール
複数のメンバーで同時に作業したい	figma、cacoo
日本語に対応してほしい	figma、cacoo、prott
無料で使いたい	wireframe cc
プロトタイプも作りたい	Marvel

なお、ナレッジベースツールやフリーランスのデザイナー募集サイトは別記事でまとめています。

【参考記事】　・　ナレッジベースツールおすすめ7選（料金表付き）
　　　　　　　・　フリーランスのデザイナー募集サイトを比較！おすすめ14選（在宅可、年収）

500mailsのFacebookやX（旧ツイッター）では、起業・副業に役立つ情報を配信しています。 是非「いいね！」をして最新情報をチェックしてください

Writer/編集者：　松田康