wireframe-tools-min

ワイヤーフレーム作成ツールおすすめ6選(料金表付き、無料あり)


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

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

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

wireframe-tools-min (1)

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

 

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

wireframe-tools-min

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

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

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

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

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

 

1. figma

figma-min

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

figma-collaboration-min

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

figma-wireframe-edit1-min

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

figma-wireframe-edit-color-min

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

figma-wireframe-move-min

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

figma-kit-1-min

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

figma-kit-2-min

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

figma-kit-3-min

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

figma-kit-4-min

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

figma-sharring-min

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

figma-import-min

◆ 料金プラン

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

◆ 基本情報

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

figma 

 

2. cacoo

cacoo-min

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

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

cacoo-wireframe-template-min

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

cacoo-wireframe-template2-min

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

cacoo-wireframe-template3-min

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

cacoo-wireframe-template-selection-min

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

cacoo-wireframe-object-add-min

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

cacoo-same-edit-min

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

cacoo-wireframe-import-min

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

cacoo-wireframe-sharing-setting-min

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

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

◆ 料金プラン

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

◆ 基本情報

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

cacoo 

 

3. prott

prott-min

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

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

prott-dashoboard-1-min

新規作成を選びます。

prott-dashoboard-2-min

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

prott-dashoboard-3-min

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

prott-dashoboard-4-min

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

prott-dashoboard-5-min

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

prott-start1-min

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

prott-start2-min

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

prot-gamen-seni-min

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

prottype-data-import-min

◆ 料金プラン(税込)

プラン 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-min

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

moqups-wireframe-example-min

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

moqups-selection-min

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

moqups-wireframe-1-min

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

moqups-wireframe-3-min

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

moqups-wireframe-2-min

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

moqups-wireframe-4-min

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

moq-ups-sharring-min

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

moq-ups-import-min

◆ 料金プラン

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

※1: 月額・年間請求時

◆ 基本情報

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

moqups 

 

5. wireframe cc

wireframe-cc-min

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

wireframe-cc-register-object-min

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

wireframe-cc-font-change-min

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

wireframe-cc-border-color-change-min

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

wireframe-cc-comment-input-min

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

wireframe-cc-combo-box-min

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

wireframe-cc-sharing-min

◆ 料金プラン

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

◆ 基本情報

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

wireframe cc 

 

6. Marvel

marvel-top-min

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

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

marvel-start1-min

プロトタイプとして、WebサイトiPhoneiPadAndroidなどを選びます。

marvel-start2-min

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

marvel-start3-min

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

marvel-start4-min

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

marvel-app-design-color-setting-min

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

marvel-app-button-add-and-listbox-add-min

◆ 料金プラン

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

◆ 基本情報

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

Marvel 

 

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

what-is-wireframe-min

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

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

◆ ワイヤーフレームの例

what-is-wireframe-sample-min

【出典】 cacoo 

 

まとめ

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

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

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

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

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

Writer/編集者: 松田康


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です