wireframe-tools-min

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


ワイヤーフレーム作成ツールは、UI/UX設計の品質や作業効率を変えます。どのツールがベストかを見極めるには、機能使いやすさ連携のしやすさなどの視点から比較する必要があります。

Webサイトモバイルアプリに特化したツールから、リアルタイムでチームで共同作業がしやすいツール、業種別テンプレートを備えた汎用性の高いツールまで、さまざまなツールがあります。

また、プロトタイプを作成する機能や無料プランの有無も、ツール選定において見逃せない要素です。そこで、実務に役立つ観点から、押さえておくべきポイントを整理しました。

wireframe-tools-min (1)

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

 

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

wireframe-tools-min

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

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

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

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

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

 

1. figma

figma-min

Figmaは、UI/UXデザイナーの間で広く採用されている、クラウド型のデザインツールです。ブラウザ上で動作するため、環境を選ばず利用でき、リアルタイムで共同編集にも対応しています。

figma-collaboration-min

直感的な操作で文字サイズ余白グリッドの調整が可能で、ピクセル単位のレイアウト設計にも対応しており、高精度なUI設計が求められるプロジェクトにも対応できます。

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は株式会社ヌーラボが提供するクラウド型の図面作成ツールで、企業・教育機関でも導入実績のある信頼性の高いツールです。

ワイヤーフレームサイトマップUMLなどの設計資料をブラウザ上で作成・共有でき、チームでの作業を効率化します。

ワイヤーフレーム専用のテンプレートが12種類以上用意されており、WebサイトモバイルアプリSNS向けのインターフェースも短時間で設計できます。

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 DriveDropboxOneDriveといった主要なクラウドストレージと連携し、設計素材を柔軟に取り込めます。

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

国産のプロトタイピングツールで、直感的にWebサイトモバイルアプリのプロトタイプを作れます。UI設計に必要な画面設計遷移設計レビューを行えるため、エンジニアやデザイナーだけでなく、業務担当のメンバーも巻き込んだ開発におすすめです。

アカウント登録した後は、ダッシュボードから即座に新規プロジェクトを作成でき、対象デバイス(Web、iOS、Android、Apple Watchなど)を選んでUI設計をスタートできます。

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

UIの素材ローカル環境または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は、ワイヤーフレームにとどまらず、モックアッププロトタイプフローチャートUML図など幅広い設計資料を作成できるクラウドベースの統合デザインツールです。

Webブラウザ上で動作し、企画から設計、開発までをサポートします。

moqups-wireframe-example-min

アカウントを作成した後、目的に応じてワイヤーフレームモックアップなどのモードを選択し、テンプレートベースまたはゼロベースからデザインを始めることが可能です。

moqups-selection-min

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

moqups-wireframe-1-min

オブジェクトのサイズ位置レイヤー構成などの詳細設定がGUIベースで調整でき、プロトタイプの視認性や検証にも活用できます。

moqups-wireframe-3-min

Webサイトモバイルアプリ(iOS/Android)向けのUIテンプレートも豊富に用意されており、レスポンシブデザインの設計にも対応できます。

moqups-wireframe-2-min

付箋コメント機能を使ってフィードバックを可視化できるため、チーム内レビューや顧客との意思疎通を円滑に進められます。

moqups-wireframe-4-min

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

moq-ups-sharring-min

画像やSVGファイルのインポートにも対応しており、外部の素材もスムーズに活用できます。

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 

 

7. Lucidspark

lucidpark-min

Lucidsparkは、直感的な操作でワイヤーフレームを作成できるオンラインホワイトボードツールです。アイデアの整理やUI設計、チームでのブレインストーミングができます。

作図をするためのテンプレートもあり、ドラッグ&ドロップで図を作れます。

lucidpark-wireframe-min

◆ 料金プラン

プラン 無料 個人 チーム 大企業
料金 無料 1,300円 4,500円 4,917円
編集可能な Lucidchart 文書 3件 無制限 無制限 無制限
バージョン管理 なし なし あり あり
SAML 認証 なし なし なし あり

◆ 基本情報

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

Lucidspark

 

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

what-is-wireframe-min

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

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

◆ ワイヤーフレームの例

what-is-wireframe-sample-min

【出典】 cacoo 

 

まとめ

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

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

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

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

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

Writer/編集者: 松田康


コメントを残す

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