ワイヤーフレームツールの必要性は？ワイヤーフレームツール18選

ワイヤーフレームツールの必要性とは？

Web制作に関わる仕事をするためには、ワイヤーフレームツールを使える、もしくはどういうものなのか理解しておく事が大事です。まずWeb制作で使用するワイヤーフレームツールの必要性を知っておきましょう。

ワイヤーフレームツールとはホームページのデザイン、レイアウトの設計図です。構成、仕組みなど企画段階から様々な部分で必要になります。またクライアントとの打ち合わせなどでもイメージの共有や実際の動きを見せることができ、とても役に立つツールです。

ワイヤーフレームツール18選

多数あるワイヤーフレームツールの中から、今回は18選を紹介します。

比較的良く使われているものや、デザインや機能が優れていたり、オンラインで共有しながら作成したりとそれぞれに特徴があります。実際と同じようにデザインだけで簡単に動かすことも可能です。また無料のツールから有料のツールと様々です。

仕事上でどういった特徴のツールを使っていくのがいいのかなど考えて検討してみましょう。

1：Adobe XD

Webサイト、アプリなど簡単に作成できるワイヤーフレームツールです。モックアップも作成でき高精度のデザイン作成も可能です。

また共有することもできるので、共同作業で1つのものを作り上げていくことも可能ですし、インタラクティブプロトタイプを構築し、あらゆるデバイスでテストができます。

2：Microsoft Excel

Windows、MacOS、iOSおよびAndroid向けの表計算ソフトです。ただExcelは表計算だけではなく、ワイヤーフレームツールとしても使うことが可能です。

Excel上でWebサイトやスマホなどのワイヤーフレームを書いたり、画像の編集、テキストのフォントサイズやカラーの変更も自由にできます。また、無料で試すことも可能です。

3：Microsoft PowerPoint

Microsoft PowerPointは、よくプレゼンテーションの資料作成などに使われています。

プレゼンテーションの資料を作成するように、Webサイトやスマホの画面に見立て、テキストや画像の編集、構成・レイアウトを使いワイヤーフレームとして作成可能です。

4：Justinmind Prototyper

様々なデスクトップとモバイルに適応するWebサイトやWebアプリワイヤーフレームの作成が可能です。画面の外観に合わせてUI要素のスタイル、サイズ、配置をデザインしやすく、インタラクションデザインもできます。

デザイン中のプロトタイプをユーザーにテストしてもらうことも可能です。またワンクリックでプロトタイプを公開することができ、関係者に共有して同時に作業したり、コメントを残したりできます。

5：Cacoo

ワイヤーフレームのテンプレートや図形も豊富にあるツールです。特徴としてオンラインで作成が可能で、チームでリアルタイムに編集や共有ができ、複数人で作り上げていくのに便利なツールです。

メンバーからの改善提案や編集履歴を残すことも可能です。また、ビデオ通話やチャットでリアルタイムに会話することもできます。価格は無料から有料なものまであります。

6：Wireframe.cc

Wireframe.ccの一番の特徴は、フリーで直感的にワイヤーフレームを作成することが可能というところです。

グリット用紙のように、サイズを示す線はありますが、あとは何も描かれていないので、手書きでデッサンするようにデザインを描いていくのが特徴です。

7：Prott

コンポーネントをドラッグ＆ドロップして作成したり、パーツを組み合わせたりしてPrott上で簡単にワイヤーフレームを作成できます。

URLなどでシェアすることもでき、Prott上でコメントをもらうことが可能です。コードを書かずに本物のようなアプリを再現できます。Prott自体は0円の無料からありますが、ワイヤフレーム機能は有料となっています。

8：Mavel

直感的な設計が可能で、Webサイト、アプリのワイヤーフレームを作成できます。また迅速にプロトタイプを作成することが可能なので、すぐに仕様を確認できます。

デザインを共有するコラボレーション機能があり、チーム内に共有しコメントや注釈などを残しておくことも可能です。

9：NinjaMock

比較的簡単に、最初のワイヤーフレームを作成できます。チームとリアルタイムでの共同作業も可能です。プロジェクトを管理し、進捗状況を追跡できます。

ワイヤーフレームとモックアップをテストすることも可能です。またそれぞれのデバイスでデザインをチェックしてもらうため共有し、フィードバックを受け取り、より良いワイヤーフレームの設計ができます。

10：Sketch

WebサイトやUIのデザインに特化しているツールです。無料から使えますが、MacOSのみの対応になります。各デバイス向けのテンプレートが用意されています。iOSアプリを通して、デザインがどう表示されるかすぐに確認することが可能です。

数人のクライアントや共同編集者と協力している場合でも、作業の共有、フィードバックの取得、アイデアのテスト、開発者への設計の引き渡しが簡単です。

11：MockFlow

UX Desingに強いツールとなっています。マニュアルがなくても、直感的に作成することが可能です。複雑さを伴わずに、インターフェイスレイアウトを短時間で迅速にスケッチします。

ワイヤーフレームのリアルタイム編集、注釈付きコメント、設計承認などクラウド機能を使用して、みんなで共同作業が可能です。ワイヤーフレームから設計仕様とドキュメントを自動生成することも可能です。

12：HotGloo

Webサイトやモバイルサイトなどのワイヤーフレームを構築するために設計されたUX、ワイヤーフレーム、プロトタイピングツールです。

計画プロセスの視覚化、ドライブの相互作用の構築とテストを非常に簡単に行うこともできます。インタラクティブなプロトタイプを作成してチームやクライアントと共有し、プロセスに関するフィードバックも可能です。

13：Pencil Project

ワイヤーフレームだけではなく、すべてのプラットフォームで利用できるオープンソースのGUIプロトタイピングツールです。

人気のあるデスクトッププラットフォームでモックアップを作成するために簡単にインストールして使用できる、無料のオープンソースGUIプロトタイピングツールを提供することを目的として構築されています。

14：Mockingbird

ワイヤーフレームのアイデアをすばやくモックアップできるように、UI要素をページにドラッグ&ドロップし、再配置やサイズ変更が簡単にできるようになっています。

複数のモックアップをリンクし、インタラクティブに表示して、アプリケーションの動きを確認することもできます。またリンクを共有することが可能で、クライアントとチームメイトがワイヤーフレームをリアルタイムで編集できます。

15：Moqups

コンセプトを視覚化し、迅速なワイヤーフレームと詳細なモックアップを使用して、アイデアを構想、テスト、検証できます。

いつでもどのデバイスでも、クラウドでリモート作業が可能です。またインターフェースを使用して共同作業も可能です。

16：Power Mockup

インスタント検索機能がありワイヤーフレームに必要な適切な形状を簡単に見つけることや、他にもライブラリからドラッグ＆ドロップ作成が可能です。

共有機能があり、OneDriveまたはSharePointを介して他のユーザーとドキュメントを共有したり、スライドにコメントを残したり、ドキュメントのさまざまなバージョンを1つのファイルにマージしたりできます。

17：Power Browse

手書きのスケッチブックのようなイメージのワイヤーフレームです。アイデアをすぐにスケッチできるようにというコンセプトがあります。

画面サイズの大枠だけ書かれていて、その中に自由に書くことが可能です。また画面解像度に比例して拡大縮小され、全体像を把握することもできます。

18：Adobe Camp CC

最後のツールはAdobe Camp CCです。スマートフォンやiPadなどのタブレットでワイヤーフレームを簡単に作成することが可能であり、手書きで描写したものもグラフィックに変換することができます。

また、同じAdobeのPhotoshopやIllustratorなどの編集も、プロジェクトでリンクされたアセットを使用している場合、更新された内容が全てのプロジェクトに自動で反映されます。作業中のものはPDFに書き出して共有することが可能です。

ワイヤーフレームツールを選ぶ時の8つのポイント

18個のワイヤーフレームツールを紹介しました。それぞれ、使いやすさなど特徴は様々です。自分はどのワイヤーフレームツールが合うのか、仕事上どういったシーンで使うのか、どういった仕組みがあれば便利なのかなどを考える必要があります。

次に、数多い特徴の中からどういった視点で選んだら良いか、ワイヤーフレームツールを選ぶ時の8つのポイントを紹介します。自分の用途にあったツールを探してみましょう。

1：スマホ・PCは別レイアウトで用いる

スマホ・PCは別レイアウトで用いることです。スマホからPCのレイアウトで見る事も可能ですが、どうしてもサイズが違うのでユーザビリティ上もよくありません。

現在はスマホで見る人やアプリを使うシーンも多いので、PC・スマホそれぞれで見やすいレイアウト、フレームを考え作成することがおすすめです。

2：ワイヤーフレームを共有編集するか確認する

ワイヤーフレームを共有編集するか確認することです。ワイヤーフレームを考える場合、ディレクター、デザイナー、エンジニアなど多数の担当者が関わりみんなで作りあげていく場合が多くあります。

そういった場合、共有編集ができるととても便利です。一度に同じタイミングで共有しながら修正や変更も可能ですし、コメントなどを書き込むことも可能なので、より多数の意見を取り組みながら短時間で作りあげることができます。

3：デザインは考えない

ワイヤーフレームは基本的にはホームページの枠や構成、設計図を考えるのが目的となりますので、デザインは必ずしも考える必要はありません。大まかなレイアウトや仕組みのチェックがメインです。

あまりデザインにこだわり過ぎると、実際に作成していく上で、使いやすさやUIなどが後回しになってしまうことがあります。またワイヤーフレームをデザイナーが作るとも限らないので、レイアウトを考えたらあとはデザイナーに任せましょう。

4：オフライン・オンラインのどちらで利用するか念頭に置く

ツールを選ぶ時のポイントとして、オフライン・オンラインのどちらで利用するか念頭に置く事も大切です。

社内共有時やクライアントなどにワイヤーフレームを共有する場合、オフラインであればPDFなどに落とし込みデータとして共有できますが、データが重くなることがあります。オンラインですとネット環境があれば、すぐに共有や編集も可能です。

5：ワイヤーフレームが利用可能な端末であること

注意しなくてはいけない点があり、それはワイヤーフレームが利用可能な端末であることです。ワイヤーフレームツールによって、MacOsにしか対応していないものもあったり、互換性が良くなく同じように表示されなかったりする場合もあります。

使い勝手だけを優先せずに、きちんと利用可能な端末であるかチェックしておきましょう。

6：競合サイトをチェックして参考にする

選ぶ時のポイントとして、競合サイトをチェックして参考にすることも大切です。それぞれワイヤーフレームツールの使い勝手や利点が紹介されているので、いくつか絞ってお互いの機能をチェックすることをおすすめします。

仕事にあった機能を見つけたり、必要のない機能が何なのか考えたりなど、比較することで必要性が見えてきます。

7：参考にするサイトを見つけて参考にする

またどういったサイトを作りたいかなど方向性が決まっているのであれば、参考にするサイトを見つけて参考にするのがおすすめです。

サイトイメージが固まっていれば、ワイヤーフレームツールの必要な機能が見えてきます。その機能が備わっているツールを探せばより使いやすくなります。

8：価格面で選ぶ

最後のポイントは価格面で選ぶことです。無料ツールもいくつかありますし、オプションとして機能を追加するごとに料金が発生するものもあります。また始めの一定期間だけ無料で使えるツールもあります。

使える機能や基本的に備わっている機能は比較的同じになってくるので、仕事上で使うボリュームに合わせたり、価格で使えるツールなどを確認したりして選ぶことをおすすめします。

ワイヤーフレームを作成する時のポイント

ワイヤフレームを作成する時のポイントをご紹介します。

最初にディレクトリマップを作成することです。サイトに必要なページやコンテンツを確定させてからワイヤーフレームを作成した方が効率的です。漠然と作成してしまうと、変更などが発生してしまう原因になります。

ワイヤーフレームツールを選ぶ時は用途に合わせて選ぼう

必要性やいくつかのワイヤーフレームツールを紹介してきましたが、それぞれいろいろな特徴があります。簡単に使えたり、機能が多すぎて使いこなすのに時間がかかったりします。

できれば自分の仕事内容にあったツールを使うのがベストです。必要な機能、あったらいいなと思う機能を把握して、ワイヤーフレームツールを選ぶ時は用途に合わせて選びましょう。