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

ワイヤーフレームツール 5つを厳選しました

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

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

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

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

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

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

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

サイトを開発する前に

  • 何を
  • どこに
  • どのように


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

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

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

Adobe Comp

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

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

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

おすすめポイント

  • Photoshopとも連動する
  • 短時間で高精度な制作物を作ることが可能
  • 簡単に線を引いたり四角を作図できる
  • iOSアプリでも作業可能

こんな人におすすめ

  • 外出先で作業することが多い方
  • デザインの方向性や画面の遷移図を作成することが多い方
  • 画面イメージを作成する機能のない(画面遷移を記録することに特化した)ワイヤーフレームツールを使用する場合

Cacoo

prott

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

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

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

おすすめポイント

  • ブラウザ上で作業できる
  • チャット機能があり、コミュニケーションが取りやすい
  • 有料版を買ったとしても安いため、社内導入が容易

こんな人におすすめ

  • 全社的に使用していきたいという場合
  • 作業環境が時と場合によって大きく変わる人
  • チームでのチャットが即時でできる環境が整っており、スピード感が強く要求される環境の場合

Moqups

moqups

Moqups ⇨ https://moqups.com/

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

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

おすすめポイント

  • ブラウザ上で作業が簡潔する
  • GoogleDriveなどへの画像の書き出し機能がある
  • ツールのデザインが洗練されている

こんな人におすすめ

  • お客様や他社に対しワイヤーフレームや画像イメージを提出する場合
  • ブラウザ上での作業がメインの方

Prott

prott

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

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

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

おすすめポイント

  • 日本産ならではの完成度の高いプロトタイピングツール
  • iOSアプリやブラウザ上でも作業が可能
  • 手書きをもとにワイヤーフレーム、モックアップを作成することが可能

こんな人におすすめ

  • 海外産が不安という方
  • 変更履歴を保存しなくてはいけない場合
  • iOSアプリでも作業をしたい場合

Marvel

marvel

Marvel ⇨ https://marvelapp.com/

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

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

おすすめポイント

  • 原則無料
  • リンク共有できる

こんな人におすすめ

  • 外出先での利用が多い方
  • 外部に対して完成イメージやデモを提供しなくてはならない場合
  • 費用がかけられない人

まとめ

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

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

関連記事


初心者向け!0からWEBサービス開発しリリースするまでに必要な3つのコト
更新日 : 2019年4月24日

アプリ開発の始め方やアイディアの出し方が分からない人へ
更新日 : 2018年11月30日

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

deruta

deruta

都内の小さい会社でシステム企画の仕事に携わっています! いわゆる「何でも屋」として、またphpを書く1エンジニアとして。役立つ情報の発信に努めています!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説