【保存版】WEBアプリ開発に最適なワイヤーフレームツール厳選5選

こんにちは！ ライターのderutaです。

アプリやWEBサイトを設計するのに必要なワイヤーフレーム。制作の現場ではよく使われる業界用語で、よく「モックアップ」などと呼ばれることもあります。

一般的には、制作物の画面イメージ図、画面の遷移の完成イメージのことを言います。

ワイヤーフレームを作成するのは手間ですが、作成することで開発メンバーやクライアントが「完成はしたけど、こんなはずじゃなかった！」と頭を抱えてしまうリスクを大幅に減らすことができます。

今回はWEBアプリ開発に最適なワイヤーフレームツールを5つ紹介していきます。それぞれに細かい違いがあるので、ぜひうまく使い分けていただければと思います！

そもそもワイヤーフレームとは

ツールの説明に入る前に、そもそも「ワイヤーフレームとは何か？」について知っておきましょう。ワイヤーフレームとは、一言で言うとサイトの設計図です。

サイトを開発する前に

画面に配置するかを明らかにすることができます。

詳しい内容は、下記記事で紹介しています。

それでは、早速ツールの紹介をしていきます。

Adobe Comp

ADOBE COMP ⇨ https://www.adobe.com/jp/products/comp.html

WEBサイトや制作物のデザインに使うのが、Adobeが出しているCompというソフトです。このAdobe Compが優れているのは、インプレースホルダーや画像をiPadやiPhone上で処理することができることです！

電車の中、カフェなどで画面イメージを作成し、最後は事務所に帰って細かい修正をかけるだけ。

おすすめポイント

こんな人におすすめ

Cacoo

Cacoo ⇨ https://cacoo.com/ja/pricing

Cacooは、画像のインプレースホルダ―の配置や画像そのものの配置もできる本格的なモックアップツールの一つです。有料版に移行したとしても、1ユーザーあたり490円という低価格で利用することができます。

最大の特徴は、作業をしている他のユーザーとチャットする機能があるということ。同じ画面イメージを見ながら、変更した方がいい部分・変えない方がいい部分を指摘しあえる環境があることは、非常にいいのではないでしょうか。

おすすめポイント

こんな人におすすめ

Moqups

Moqups ⇨ https://moqups.com/

Moqupsは、無料で使えるモックアップ・画面イメージ作成ツールです。ブラウザ上から使用できることに加え、画面イメージの作成までできます。

また、無料プランであっても数ページまでは無料でモックアップの作成が可能なのも大きな特徴の一つといえるでしょう。

おすすめポイント

こんな人におすすめ

Prott

Prott ⇨ https://prottapp.com/ja/

ワイヤーフレーム、モックアップツールの中でも珍しい、国産のモックアップツールです。リクルートやDeNAも使用しているツールであり、画面遷移図の自動作成など、かゆいところに手が届く、サービスとなっています。

１プロジェクトまでならば無料で使用することも可能なので、ぜひ一度インストールして使ってみてはいかがでしょうか（iOSなどでも使えます)

おすすめポイント

こんな人におすすめ

Marvel

Marvel ⇨ https://marvelapp.com/

Marvelは、ほぼすべての機能が無料であるという点が大きな特徴です。画面イメージの作成はできないものの、Adobe Compや手書き写真を活用することで本物のアプリケーションのようなデモンストレーションを行うことが可能です。

フェードインなどの画面の遷移パターンをつけることも可能です。特にiOS愛用者にとっては画期的なツールとなるでしょう。

おすすめポイント

こんな人におすすめ

まとめ

ワイヤーフレームを作成するうえで欠かせないのが、WEBサイトのデザインの理論。ひたすら描くのも大事ですが、ぜひWEBデザインの勉強もしてみてください。

どこに目が行きやすいか、ユーザーがクリックしたくなる仕掛けは何かなどを、自分目線ではなく客観的な目線で考えれるようになるころには、一人前になる日ももう目の前です！

関連記事

【初心者向け】Webサービス開発の作り方をステップ形式で解説

更新日：2024年3月1日