UXerならワイヤーフレームと切っても切れない関係ですが、
ワイヤーフレームを作る目的は、主に以下の5つです。
ついでに主に市場に出回っているワイヤーフレーム作成ツールをまとめてみました。
1. 情報の整理
- ユーザーが直感的に理解できるように、コンテンツの配置や情報の優先度を整理する。 - 例えば、ECサイトなら「検索バーを上部に」「購入ボタンを目立たせる」といった設計を決める。
2. レイアウトの検討
- 画面の構成（ナビゲーション、コンテンツエリア、CTAなど）を視覚化し、全体のバランスを調整する。 - 例：スマホでは縦スクロール、PCでは横幅を活かしたレイアウトにする。
3. 関係者との認識を揃える
- クライアント、開発者、デザイナーなど関係者間で仕様のズレを防ぐ。 - 言葉だけでは伝わりにくい部分を視覚化し、合意形成をスムーズにする。
4. UXの検証
- ユーザーがどのように操作するか、どのような動線が適切かを考える。 - 例：フォーム入力を短くする、メニューを開閉式にするなど。
5. デザイン・開発の効率化
- デザインや実装前に基本構造を決めておくことで、手戻りを防ぎ、作業をスムーズに進める。 - 例：デザイナーは配色やフォント選びに集中し、開発者はコーディングに専念できる。
要するに、「ワイヤーフレーム」はデザインと開発の橋渡しをするための設計図のようなもの。
特にUXデザイナーとしては、ユーザー視点を考慮した情報設計が重要になってきますね。
ワイヤーフレーム
Figma
Figmaは、UX/UIデザインを効率よく進めるための最強ツールの一つですね！特にチーム作業やクラウドでのデザイン管理が必要な場合には、ほぼ最適解です。UXデザイナーとしてスキルを強化するなら、Figmaを習得しておくとかなり役立つはずです。
無料プランあり。プロフェッショナルプランは月額$12/ユーザー。
Sketch
Sketch は、Mac専用のUI/UXデザインツール です。Webやアプリのデザインに特化しており、シンプルな操作性と軽快な動作が特徴です。特に、デザインシステムの構築やコンポーネントの管理に強みを持ち、多くのUIデザイナーに愛用されています。
年間ライセンス$99。
Balsamiq（バルサミック）
Balsamiq は、ワイヤーフレーム作成に特化したツール です。
手書き風のデザインが特徴で、素早くラフなワイヤーフレームを作成するのに向いています。
デスクトップ版は一度限りの購入で$89。クラウド版は月額$9から。
Adobe XD
Adobe XD（エックスディー）は、WebやアプリのUI/UXデザインとプロトタイピングに特化したツールです。Adobeが提供しており、IllustratorやPhotoshopと連携しやすいのが特徴です。
無料プランあり。単体プランは月額$9.99。
Justinmind（ジャスティンマインド）
Justinmind は、Webサイトやアプリのプロトタイピングに特化したツール です。ワイヤーフレームの作成から、高度なインタラクションやアニメーションを追加できるのが特徴で、特に詳細なプロトタイプを作りたい場合に向いています。
無料プランあり。プロフェッショナルプランは月額$19。
UXPin
UXPin は、UI/UXデザインとプロトタイピングを統合したツール です。
特に、コードを使わずにデザインと開発の橋渡しができる「インタラクティブなプロトタイピング」が強みです。
月額$19からのプランあり。
Wireframe CC
Wireframe.cc は、シンプルで直感的なワイヤーフレーム作成ツール です。
ブラウザ上で動作し、最小限の機能に絞られているため、素早くラフなワイヤーフレームを作るのに最適 です。
無料プランあり。プロプランは月額$16。
Miro
Miro は、オンラインホワイトボードツール です。
リモートワークやチームコラボレーションに最適で、ブレインストーミング・ワイヤーフレーム作成・UX設計・プロジェクト管理 などに幅広く使われます。
無料プランあり。チームプランは月額$8/ユーザー。
Moqups（モックアップス）
Moqups は、ワイヤーフレーム、モックアップ、プロトタイピングを作成できるクラウドベースのデザインツール です。
特に、シンプルなUIで直感的に操作でき、ワイヤーフレームからプロトタイプまで一貫して作成できるのが特徴です
無料プランあり。プロフェッショナルプランは月額$19。
MockFlow
MockFlow は、ワイヤーフレームとUIデザインの設計に特化したクラウドベースのツール です。
シンプルなUIで直感的に操作でき、ワイヤーフレーム作成、UIデザイン、サイトマップ設計、ユーザーフロー作成 など、UX設計に必要な機能が揃っています。
無料プランあり。プレミアムプランは月額$14。
Mockplus
Mockplus は、ワイヤーフレーム・モックアップ・プロトタイピングを一括で作成できるオールインワンツール です。
シンプルな操作性で、Webサイト・モバイルアプリのUI設計からインタラクションの追加まで対応しており、デザイナー・エンジニア・PM向けに幅広く使われています。
無料プランあり。プロフェッショナルプランは年間$199。
Axure RP（アクシュアRP）
Axure RP は、高度なワイヤーフレーム・プロトタイピング・UXデザインのシミュレーションができるツール です。
特に、条件分岐・動的データ・変数の設定が可能で、開発に近いリアルなプロトタイプを作れるのが最大の特徴です。
Pro版は年間$29/月。
Framer（フレーマー）
Framer は、UIデザイン、プロトタイピング、Webサイト開発を一括で行えるツール です。
特に、アニメーションやインタラクションを細かく設定でき、実際に動作するリアルなプロトタイプを作れるのが大きな特徴です。
最近では、ノーコードでWebサイトを構築できる機能も追加され、より多機能なデザインツールとして進化しています。
無料プランあり。プロプランは月額$20。
Lucidchart（ルシッドチャート）
Lucidchart は、オンラインで使えるビジュアル作成ツール で、特にフローチャート、ワイヤーフレーム、マインドマップ、データフローダイアグラム などの作成に優れています。
直感的な操作が可能で、チームでのリアルタイムコラボレーションやクラウド上での管理がしやすい のが特徴です。
無料プランあり。プロフェッショナルプランは月額$7.95。
Pencil Project
Pencil Project は、オープンソースのワイヤーフレーム作成ツール です。
Windows・Mac・Linuxで利用でき、手軽にワイヤーフレームやUIモックアップを作成できるのが特徴です。オフラインで動作するため、クラウドに依存せず作業できる のもポイント。
無料で利用可能。
Uizard（ユイザード）
Uizard は、AIを活用してワイヤーフレーム、UIデザイン、プロトタイピングを素早く作成できるノーコードツール です。
手描きのスケッチをAIが自動でデジタルUIに変換したり、テンプレートを使って簡単にデザインできるのが特徴です。
無料プランあり。プロプランは月額$12。
Cacoo（カクー）
Cacooは、「ワイヤーフレーム・フローチャート・情報設計に強いオンラインツール」 です。特に、UXデザインの設計や業務プロセスの可視化、チームコラボレーションに最適。
デザインツールというよりは、情報整理・フロー作成のためのツール なので、UXフローや業務プロセスの設計をするUXデザイナーやプロジェクトマネージャーにおすすめ です！
無料プランあり。プロプランは月額$5/ユーザー。
Fluid UI（フルイドUI）
Fluid UIは、「モバイルアプリやWebアプリのプロトタイピングを簡単に作成できるツール」 です。特に、ノーコードでUIを作りたい人や、スマホ向けのプロトタイピングを手軽に行いたい人に最適。
FigmaやAdobe XDよりもシンプルな操作感で、デザイン経験がなくてもすぐに使えるので、UI/UXの素早いアイデア出しや、開発前のユーザーテストに活用しやすいツール です！
無料プランあり。プロプランは月額$15。
Canva（キャンバ）
Canvaは、「デザイン初心者でも、簡単にプロフェッショナルなデザインを作成できるツール」 です。特に、プレゼン資料やSNS投稿、ポスター・チラシのデザイン作成に最適。
UI/UXデザインや詳細なワイヤーフレーム作成にはFigmaやAdobe XDが向いているが、手軽にデザインを作りたいならCanvaが最適！
無料プランあり。Canva Proは月額$12.95。
Draw.io（現在はdiagrams.net）
Draw.io（diagrams.net）は、「無料で使える、オフライン対応のダイアグラム作成ツール」 です。特に、業務フロー、ワイヤーフレーム、ネットワーク図、UMLの作成に適しており、クラウドなしで作業できる点が強み です。
FigmaやLucidchartのようなリアルタイム共同編集機能はないが、無料で使いたい場合や、オフライン環境で作業したい場合には最適な選択肢 です！
無料で利用可能。
Gliffy（グリフィー）
Gliffyは、「フローチャート・ワイヤーフレーム・開発ドキュメントを直感的に作成できるツール」 です。特に、Jira & Confluenceとの統合が強力で、開発チームやプロジェクトマネージャー向けのビジュアルドキュメント作成に最適。
FigmaやAdobe XDのような詳細なUIデザイン機能はないが、プロジェクト管理と情報整理をビジュアル化したいならGliffyが便利 です！
無料プランあり。プロフェッショナルプランは月額$7.99。
Jumpchart
Jumpchartは、「Webサイトのコンテンツ設計と情報設計（IA）に特化したツール」 です。特に、Webサイトのページ構成やコンテンツの流れを整理し、開発前にしっかり設計したい場合に最適。
FigmaやAdobe XDのような詳細なデザイン機能はないが、サイトの構成を可視化し、チームで設計を共有したいならJumpchartが便利 です！
無料プランあり。プロプランは月額$15。
注: 価格情報は執筆時点のものであり、変更される可能性があります。最新の情報は各公式サイトでご確認ください。
それにしてもこんなにツールあっても使いきれないなー
コメント