【2024年最新版】無料で使えるワイヤーフレーム作成ツール12選
世の中には、ワイヤーフレーム作成ツールが多く存在しています。
それぞれのワイヤーフレーム作成ツールの強みや弱みを把握しておらず、自社で選ぶべきワイヤーフレーム作成ツールがわからないという方も多いのではないでしょうか。
本記事では、ワイヤーフレーム作成ツールの選定基準や、無料で使えるワイヤーフレーム作成ツールを紹介します。
目次
ワイヤーフレームとは何か？
ワイヤーフレームとは、Webページの設計図のことを指します。
Webページ内の「どこに、何の項目を、どのように配置するのか」をまとめたWebサイトのレイアウトの骨組みを、視覚的にわかるようにしたものです。
ページの構造やCTAや画像などの配置をシンプルに可視化することにより、ディレクターやWebデザイナーは、実際のデザインや開発に進む前に、作業内容を整理をすることが可能となります。
ワイヤーフレームは、通常、要件定義が完了した後に、ページの目的や機能に応じて作成しますが、フォントや色彩などの具体的なデザイン要素は排除され、シンプルな骨組みのみを作成します。
ワイヤーフレームを作成することにより、Webサイトの改善に関わるメンバー全員が共通のイメージを持つことができ、誤解を防ぐことができます。
また、ワイヤーフレームは、モックアップやプロトタイプといった他の設計段階のアウトプットと混同されることがありますが、モックアップやプロトタイプの元になるものと理解しておきましょう。
モックアップとは、ワイヤーフレームにデザイン要素を加えたものであり、プロトタイプはさらに機能などが追加されている「完成版のサイト」に近いものを指します。
ワイヤーフレームは、ユーザーの視点を重視して設計されるため、UI/UXの向上のために必要なものです。
この設計図を用いることで、Webページの作成や更新をスムーズかつハイクオリティに行うことが可能となります。
ワイヤーフレーム作成ツールで使える基本的な機能
ワイヤーフレーム作成ツールには、様々な機能があります。
その中でも基本的な機能で、特に活用する機能を3つ紹介します。
- テンプレート機能
- 共同編集機能
- コメント機能
テンプレート機能
ワイヤーフレーム作成ツールには、事前に用意されたテンプレートを使用できる機能があります。
このテンプレート機能があることにより、初心者でも簡単にワイヤーフレームを作成できます。
また、Webデザイナーがゼロからワイヤーフレームを作成する手間を省くことができ、効率的にワイヤーフレームの作成を進めることが可能となります。
テンプレート機能の中には、トップページや料金ページ、会員登録ページなどページの目的に合わせたテンプレートが設けられています。
ボタン配置などもテンプレートの中から選択することができ、必要に応じて自由にカスタマイズできることも多いです。
簡単にわかりやすく視覚化することができるため、構成を考えることが苦手な人でもワイヤーフレームの作成が可能となります。
共同編集機能
ワイヤーフレームのもう一つ重要な機能が、複数人で同時に編集できる共同編集機能です。
共同編集機能により、プロジェクトメンバーと遠く離れていてもリアルタイムで会話しながら柔軟にワイヤーフレームを作成することが可能です。
Webページの制作時には、様々なメンバーの意見を集約するケースが多く、リアルタイムで他者の意見を反映できる共同編集機能は、作業効率を上げるのに役立ちます。
コメント機能
コメント機能は、ワイヤーフレーム上で具体的な改善箇所にコメントを追加し、フィードバックや確認事項を残すための機能です。
コメントは、スレッド形式でやり取りが可能なため、コミュニケーションツールを利用する必要がありません。
ワイヤーフレーム作成ツール上でやり取りできるため、わざわざ他のコミュニケーションツールへ切り替えずに済み、効率的な意思決定を行うことができます。
外部のクライアントなどとワイヤーフレームを共有する際などにも、コメント機能は大いに活用できます。
無料で使えるおすすめワイヤーフレーム作成ツール12選
ワイヤーフレーム作成ツールは、有料のものも存在しますが、無料で活用できるものも多く存在します。
具体的に、おすすめの12個のツールをそれぞれ紹介します。
Cacoo
Cacooとは、日本でのシェアNo.1のプロジェクト管理ツール「Baclog（バックログ）」を運営しているヌーラボ社が開発提供している「オンライン作画ツール」です。
ワイヤーフレームやフローチャートや組織図、マインドマップなど様々な種類の図を作成することが可能となっています。
Caccoの主な強みとしては、下記のようなものが挙げられます。
- 多様な図表作成が可能：ワイヤーフレームからフローチャート、組織図まで幅広い図表を作成可能
- 共同編集：ビデオ通話やチャットなどが搭載されており、リアルタイムで共同編集が可能
- 豊富なテンプレート：多数のテンプレートが存在しており、初心者でもテンプレートを活用して簡単にワイヤーフレームなどの作成が可能
- 日本語対応：日本企業が開発しており、サポートやツール内も完全に日本語でわかりやすい
- 他ツールとの連携：JIRA、Confluence、Backlogなど他の開発時に活用するツールと連携が可能
Cacooは、基本的には有料のツールですが、導入までに30日間無料で全機能を試すことができます。
もし、ワイヤーフレーム作成ツールの導入を検討している場合は、導入前に無料版を試してみましょう。
Figma
Figmaとは、一部無料で活用できる、UIデザインとプロトタイプ作成のためのクラウド上で活用可能なツールです。
主にWebデザインやアプリケーションのプロトタイプ作成の際に活用するケースが多いです。
また、時間や場所を選ばずに利用が可能であり、リアルタイムでの共同作業が可能なため、リモートワークを推奨している企業でも活用しやすいツールです。
Figmaの強みとしては、下記のようなものが挙げられます。
- ワイヤーフレーム作成機能：インタラクティブなワイヤーフレームを作成することができ、実際のWebページの完成系をイメージ出来る
- 共同編集：複数のユーザーが同時に作成しているワイヤーフレームにアクセスし、編集出来るため、作業の効率化を図ることが可能
- 拡張性が高い：AdobeXDなど様々なツールとプラグインでの連携を行うことが可能であり、作業効率を高めやすい
- クラウドで活用可能：特別なソフトウェアのインストールが不要で、アカウント作成さえすれば、どこからでもアクセスが可能
また、Figmaは基本的には有料のツールですが、2名まで共同で編集する場合は、無料で活用することが可能です。
無料で作成できるプロトタイプの上限があり、1つまでであれば無料となります。
一度使い勝手を試してから有料プランへのアップグレードを検討できるため、まずは無料で試してみましょう。
Adobe XD
https://helpx.adobe.com/jp/support/xd.html
Adobe XDとは、Webサイトやアプリのデザインとプロトタイプに特化したソフトウェアです。
デバイスごとにテンプレートが準備されており、スマートフォンなどでもワイヤーフレームを作成することが可能となっています。
余白表示やリピート機能などの便利な機能が豊富で、簡単にハイクオリティなレイアウトを作成できることが特徴です。
直感的な操作性と軽快な動作が強みで、デザインからプロトタイプ作成・共有までをスムーズに行えます。
Adobe XDの強みとしては、下記のようなものが挙げられます。
- 直感的な操作性：操作が簡単で動作が軽いため、初心者でも使いやすい
- ワイヤーフレーム作成機能：Webページの遷移や項目の動きを把握できる
- 他のAdobe製品との連携：PhotoshopやIllustratorなど他のAdobe製品とシームレスに連携が可能
- 共有機能：作成したワイヤーフレームデータをURLで共有が可能なので、速やかな情報伝達が可能
また、AdobeXDは、無料版が過去は存在しましたが、現在は有料版のみの提供となっています。
ただし、有料版を契約する前に7日間の無料トライアルが存在します。
有料版と同じ機能を活用できるため、導入前のテストとして活用ができるでしょう。
Sketch
Skechとは、Bohemian Coding社が開発したMac専用のワイヤーフレームツールで、主にUIデザインやプロトタイプ作成の際に仕様されるツールです。
直感的な操作性と軽快な動作が特徴で、デフォルトのテンプレートやショートカット機能が豊富であり、活用できれば作業時間を大幅に短縮することができます。
Sketchの強みとしては、下記のようなものが挙げられます。
- Macで活用しやすい：Macの専用アプリケーションとして設計しているため、iOSとの親和性が高く、動作が軽く使いやすい
- Webデザイン特化：Webデザインに特化しているツールのため、Webサイト制作時に活用しやすい機能がそろっている。
- iOSアプリとの連携：iOSアプリを通してデバイス上のデザインを確認することができる
- スマートレイアウト機能：レスポンシブデザインを容易にする機能があり、異なる画面サイズに対応したデザインを効率的に作成することが可能
Sketchは、基本的に有料のツールとなっています。
ただし、無料で30日間の無料トライアル期間があり、有料版と同じ機能を活用することができます。
全ての機能を試すことができるため、導入検討時には、トライアル利用をしてから有料版へのアップグレード要否を判断しましょう。
moqups
Moqupsは、ブラウザ上で活用できる、ワイヤーフレームやプロトタイプの作成が可能なツールです。
主にデザイナーやプロダクトマネージャーなどが活用しやすいツールで、ステンシルやフォントアイコンが豊富にそろっているため、細かいレイアウト設計が可能となっています。
また、インターフェースは英語ですが、直感的に操作することが可能です。
Moqupsの強みとしては、下記のようなものが挙げられます。
- 操作性が良い：ドラッグ＆ドロップで操作でき、初心者でも簡単にワイヤーフレームを作成できる
- 豊富なデザインパーツ：多数のステンシル、アイコン、フォントが用意されており、素早くデザインを構築できる
- クラウドで利用可能：ブラウザ上で動作するため、特別なソフトウェアのインストールが一切不要
- 画像アップロード機能：画像アップロード機能があり、オリジナルのレイアウトを作成することができる
- 共有機能：リアルタイムで共同作業が可能
Moqupsは、基本的には有料のツールですが、無料プランも準備されています。
無料プランは、1プロジェクトまで活用できるようになっており、全ての有料プランで14日間の無料トライアルがあります。
無料プランでは、共有機能などチームで活用する際に利用したい機能を利用できないため、実際に導入の検討をする際には、14日間のトライアルを活用した上で判断しましょう。
Wireframe.cc
Wireframe.ccとは、クラウドで利用可能なシンプルで直感的に活用可能なワイヤーフレームツールです。
Wireframe.ccは、登録せずにサービスを利用することが可能です。
ドラッグするだけで、簡単にワイヤーフレームを作成することが可能なため、初心者でも簡単に必要最低限のレイアウトを作成することが可能です。
Wireframe.ccの強みとしては、下記のようなものが挙げられます。
- 簡単に操作できる：シンプルなインターフェースで、初心者でも直感的に操作可能
- 即時利用可能：ユーザー登録不要で、ブラウザを開いてすぐに利用開始できる
- 共有機能：作成したワイヤーフレームを簡単にURLで共有できる
- サポート：解説ムービーがあるため、初心者でも安心して利用できる
Wireframe.ccは、基本的には有料で利用するツールとなりますが、無料プランも用意されています。
ただし、無料プランで作成したワイヤーフレームは公開状態となってしまうため、機密情報が含まれる場合は、有料プランの利用を検討しましょう。
また、有料プランには、7日間の無料トライアルが提供されていますので、導入前に一度使い勝手などを試してみましょう。
Mockingbird
https://gomockingbird.com/home
Mockingbirdは、ブラウザ上で活用が可能なワイヤーフレーム作成ツールです。
必要な素材をドラッグで配置するだけで、ワイヤーフレームを作成することが可能です。
また、作成したワイヤーフレームをダウンロードする際には、PNGやPDF形式でのダウンロードに対応していることも特徴と言えるでしょう。
Mockingbirdの強みとしては、下記のようなものが挙げられます。
- 簡単に操作できる：ドラッグ＆ドロップでワイヤーフレーム作成が可能であり、直感的なUIで初心者にも使いやすい
- クラウドで利用可能：ブラウザ上で動作するため、特別なソフトウェアのインストールが一切不要
- 共同編集が容易：プロジェクトメンバーとリアルタイムで共同作業が可能
- 素材のわかりやすさ：プロフィール写真や動画など完成イメージがしやすい素材が多い
- エクスポート形式が豊富：作成したワイヤーフレームをPDFやPNGなど様々な形式でエクスポートが可能
Mockingbirdは、基本的には有料のツールですが、1プロジェクトまで利用できる無料プランも存在しています。
また、有料プランの機能がすべて使える30日間の無料トライアルも提供されています。
導入前には、フリープランと30日間の無料トライアルを試したうえで意思決定を行いましょう。
NinjaMock
NinjaMockとは、クラウドで利用できるワイヤーフレーム作成およびモックアップ作成ツールです。
WebサイトやアプリのUI設計に特化しており、直感的な操作と手書き風のデザインが可能となっています。
また、Webサイトやアプリなど様々なプラットフォーム向けのデザインが可能なツールで、豊富な機能があることも特徴です。
作成したワイヤーフレームやモックアップを、PNG・HTML・PDFなど様々な形式でエクスポートできる点も魅力でしょう。
無料版の機能が充実しているため、フリーランスやスタートアップ企業でも活用しやすいツールです。
NinjaMockの強みとしては、下記のようなものが挙げられます。
- マルチプラットフォーム対応：iOS、Andrid、Webなど様々なプラットフォーム向けのデザインが可能
- 手書き風のデザイン：手書き風のフォントで構成されており、おしゃれなワイヤーフレームを作成可能
- 共同編集が容易：プロジェクトメンバーとリアルタイムで共同作業が可能
- 豊富な機能：動画の埋め込み、フリーハンド描画など多様な機能を兼ね備えている
- エクスポート形式が豊富：作成したワイヤーフレームをPDFやPNG、HTMLなど様々な形式でエクスポートが可能
NinjaMockは、無料でも活用ができるツールです。
無料プランでは、商用利用（二次利用）はできないものの、自社のデザイン制作で活用したい場合には、十分なツールだと言えます。
Marvel
Marvelとは、ブラウザ上で活用可能なワイヤーフレーム作成ツールです。
全てのデバイス向けに数百種類のワイヤーフレームのテンプレートが設けられています。
また、様々なデバイスにも対応しており、スマートフォンやタブレットからでもレイアウトの設計を行うことが可能です。
アプリを使えば、手書きのワイヤーフレームをスマートフォン内でプロトタイプ化できることも大きな特徴でしょう。
Marvelの強みとしては、下記のようなものが挙げられます。
- マルチデバイス対応：パソコンだけでなく、スマートフォンやタブレットなどからもレイアウトの設計が可能
- 豊富なテンプレート：数百種類のワイヤーフレームのテンプレートが用意されている
- 共同編集が容易：プロジェクトメンバーとリアルタイムで共同作業が可能
- モバイルアプリ連携：専用アプリを使用することで、手書きのワイヤーフレームをスマートフォン内でプロトタイプ化できる
Marvelには、無料プランも存在しています。
無料プランには、プロジェクトの制限などはなく、機能が一部制限されている形です。
基本的な機能のみでよい場合は、無料プランでも問題ないでしょう。
InVision
InVisionとは、複数人で共同編集可能なワイヤーフレーム作成ツールです。
作成したワイヤーフレームに対して、コメントやログを共有出来るようになっており、Live Share機能を活用することで、サービスに登録していなくともコメントの書き込みが可能です。
そのため、特に外部の企業と連携する際に活躍するツールです。
また、デザイン、プロトタイプ作成、アニメーション作成が一つのツールで完結することも特徴です。
InVisionの強みとしては、下記のようなものが挙げられます。
- オールインワンプラットフォーム：デザイン、プロトタイプ作成、アニメーション作成が1つのツールで作成可能
- クラウドで利用可能：ブラウザ上で動作するため、特別なソフトウェアのインストールが一切不要
- 共同編集が容易：プロジェクトメンバーとリアルタイムで共同作業が可能
- ベクターベースのデザイン：高品質で応答性の高いデザインを作成できる
- エクスポート形式が豊富：作成したワイヤーフレームをPDFやPNG、JPG、GIFなど様々な形式でエクスポートが可能
- 外部サービスとの連携が可能：DropboxやGoogleドライブなどと連携している
InVisionは、1つのプロトタイプ作成のみとはなりますが、無料で活用できるプランが用意されています。
有料プランを検討する場合は、まず無料プランを試してみてからにしましょう。
UXPin
UXPinとは、UXデザインに特化したオールインワンプラットフォームです。
ワイヤーフレーム作成、プロトタイプ、インターフェースデザイン、デザインシステムの構築など幅広い領域をカバーしています。
また、独自技術などを提供している点も特徴の一つです。
UXPinの強みとしては、下記のようなものが挙げられます。
- 豊富なデザインパーツ：豊富なUIデザイン用のデザインパーツを提供している
- 高度なプロトタイプ作成が可能：実際の製品のように機能するプロトタイプを作成することが可能
- 共同編集が容易：プロジェクトメンバーとリアルタイムで共同作業が可能
- Merge技術：コードコンポーネントをデザインツールに直接統合することができる独自の機能を提供している
UXPinは、基本的に有料のツールです。
ただし、導入検討者向けの14日間の無料トライアルを提供しています。
無料トライアルを活用し、有料版を契約するか検討しましょう。
Prott
Prottとは、Goodpatch社が開発したWeb・iOS・Android向けのワイヤーフレーム作成ツールです。
素材をドラッグ＆ドロップするだけで簡単にワイヤーフレームの作成が可能です。
また、コードを書かずに、画面遷移や動くプロトタイプも作成可能で、完成形のイメージがしやすいこともProttの強みです。
アプリの設計やワイヤーフレーム作成に必要な機能がそろっており、ノーコードで活用可能なツールなので、初心者でも安心して利用できるサービスと言えるでしょう。
Prottの強みとしては、下記のようなものが挙げられます。
- 簡単に操作できる：ドラッグ＆ドロップでワイヤーフレーム作成が可能であり、直感的なUIで初心者にも使いやすい
- 実機テスト：作成したプロトタイプを実際のデバイスで動かすことができ、リアルな動作テストを行うことが可能
- 共同編集が容易：URLを発行することにより、Prottを利用していない人とも簡単に作成したワイヤーフレームを共有できる
- 素材の登録と保存が可能：ワイヤーフレーム作成でよく使う素材を登録すれば、いつでもすぐに利用が可能
Prottは、基本有料のツールですが、無料で活用できるプランも存在します。
具体的には、1プロジェクトまでであれば、無料で活用することが可能です。
また、有料プランでは、30日間の無料トライアルが提供されています。
ただし、Prottは2024年8月31日をもってサービスを終了することが発表されています。
長年にわたり多くの企業で活用されてきましたが、2024年9月からは全機能が使えなくなり、サポートが必要な場合のみ対応してもらえる、という状況になる予定です。
ワイヤーフレーム作成ツールを選ぶ時のポイント
ワイヤーフレーム作成ツールを選ぶ際には、様々な要素を加味したうえで選定する必要があります。
その中でも重要な3つをご紹介します。
- 必要な機能が搭載されているか
- チームで共有することができるか
- 使いやすいかどうか
必要な機能が搭載されているか
まず、ワイヤーフレーム作成ツールを選ぶ際には、無料トライアルや無料プランで実際に利用し、必要な機能が搭載されているかを確認しましょう。
また、ワイヤーフレーム作成ツールは、ワイヤーフレームだけでなく、その他の機能が備わっているケースも多くあります。
他の要件でも使えるタイミングがないのかも含めて検討を行いましょう。
チームで共有することができるか
ワイヤーフレームは、Web制作チームのメンバーで共有することが多いので、共有機能は必須だと言えます。
ワイヤーフレームには、オンプレミス型（パソコンにインストールして使うソフトウェア）とクラウド型（オンライン上でデータを管理する）が存在します。
基本的には、チームで共有することができるクラウド型を選択した方がよいでしょう。
ただし、クラウド型のツールの方が運用コストはかかりやすい傾向にあるため、予算や使用するユーザー数に応じて意思決定をしてください。
使いやすいかどうか
ワイヤーフレーム作成ツールを使うのは、専門的な知識がある人ばかりではないことを理解しておきましょう。
プロジェクトメンバーの中には、デザインやツールに疎い人もいます。
そういった初心者でも活用しやすいツールかどうかという点も、検討材料に入れておくべきです。
直感的に活用しやすいツールの方が、導入後に社内で浸透もしやすいです。
ExcelやPowerPointでもワイヤーフレームは作成できる
ExcelやPowerPointでもワイヤーフレーム作成は可能です。
ただし、Webサイトとパーツやフォントのサイズ指定に使う単位が異なるため、失敗しやすいことも事実です。
Webサイトのサイズに合わせるような形でPowerPointの設定を行うことができれば、ワイヤーフレーム作成ツールを活用せずともワイヤーフレームを作成することは可能です。
とはいえ、基本的にはワイヤーフレーム作成ツールを活用することをおすすめします。
まとめ
本記事では、無料で利用可能なワイヤーフレーム作成ツールを紹介しました。
それぞれのツールには、強みや弱みが存在しています。
自社のワイヤーフレーム作成に必要な機能や使いやすさなどを考慮したうえで、自社に最適なワイヤーフレーム作成ツールを選定しましょう。
