ワイヤーフレームをツールで作成！今の作業を圧倒的に効率化したい方に

「ワイヤーフレーム作成にかなり時間がかかっている・・・」
「途中でワイヤーフレームからデザインを書き直すことが多い」
そんな悩みをお持ちではないですか？

あなたはワイヤーフレームを作成するときに、どのように作成されているでしょうか。手書き一択だという方もいらっしゃると思いますし、パワーポイント、またはイラストレーターだという方が比較的多いのではないでしょうか。
今はワイヤーフレームを作成するための専用ツールがたくさんあり、とても便利になってきています。

ワイヤーフレームとは、デザインの骨組みです。
完成物の土台となるものなので、ワイヤーフレームをしっかりと確定させないと先に進めません。もし無理に進んだとしても、後からイメージが違うことが判明して最初から作り直さなければならないといった事態にもなりかねません。

つまり最も大事なことは、ワイヤーフレーム作成時点で、いかに関係者全員が共通認識を持つかということだと考えます。
そのためには、特にオンライン（Web）ツールが優れています。オンラインであれば、関係者が場所を問わずリアルタイムに最新版のワイヤーフレームを確認することができますし、その場でコメントも残したりチャットをしたりできるものもあります。

この記事では、ツールでワイヤーフレームを作成すると具体的にどのように効率化できるのか、どうやってツールを選べばいいのかを解説します。
最後までご覧いただければ、あなたにとって最高のツールが選べるようになります。

ワイヤーフレーム以外のツールをお探しの場合は別記事を御覧ください。デザインは、下記のフェーズに分けられます。
スケッチ（手書きのラフ画）
↓
ワイヤーフレーム（スケッチをデジタル化したもの）※本記事でご紹介
↓
モックアップ（ワイヤーフレームよりさらに色やサイズなどデザインを意識したもの）
↓
プロトタイプ（モックアップに遷移やアニメーションなど動きをつけたもの）

1. ツールを使ってワイヤーフレームを作成する目的
 2. ワイヤーフレーム作成ツールの種類は大きく２種類
 3. 導入後どう変わるか？ツール導入体験談
 4. いいツールを選ぶためのチェック項目
 5. ツール選定までのスケジュール案
 6. ワイヤーフレーム作成ツールのご紹介
 まとめ

1.ツールを使ってワイヤーフレームを作成する目的

具体的には主に下記のような効率化が図れます。

1-1. コミュニケーションロスを防ぐ

特にWebツールは、誰がいつ編集したかがわかるようになっているものが多いので、チーム内でのコミュニケーションを円滑に進めることができます。クライアントともイメージを共有することもできるので、仕様のやり取りの中でのコミュニケーションロスを防ぎ、手戻りを大きく削減できます。

1-2. ワイヤーフレーム作成スピードが速くなる

ワイヤーフレームを作るためのツールなので、ワイヤーフレーム作りに特化した作業がしやすくなる機能が搭載されています。例えば、同じようなコラムをリスト形式でデザインする際に使える「リピート機能」や、パソコンで作ったワイヤーフレームをすぐにスマートフォンでも確認できる「共有機能」など、専用ツールならではの機能がスピードを早めてくれます。

1-3. プレゼンがしやすくなる

社内のトップへの説明の際や、クライアントへのプレゼンの際にツール上でワイヤーフレームを見せることができます。もしその場で指摘があっても、リアルタイムにワイヤーフレームを編集することができるので、その場でイメージの共通認識を作ってしまうことが可能です。指摘されて修正してまた提出して、また指摘されて修正・・・といった手間が省けます。

2.ワイヤーフレーム作成ツールの種類は大きく２種類

作成ツールは、オフラインとオンラインの２つのカテゴリーに分けられます。作業効率化のためにはオンラインツール（Webツール）に軍配が上がると感じています。

オフラインツール

専用ツールではありませんが、パワーポイントやイラストレーターなども含まれます。オフラインなのでセキュリティ面も比較的安心です。普段使い慣れているツールであれば、他のオブジェクトから部品をコピーするなどで作業時間はある程度抑えられているかもしれません。

オンラインツール（Webツール）

手書きやオフラインツールと違い、すでに用意されている画像やフォームなどの部品をドラッグ＆ドロップで直感的にワイヤーフレームを作成することができます。

また、オフラインツールだと誰かが修正を加えている間に他の人が修正するなど、どれが最新版データかわからなくなってしまう可能性がありますが、オンラインであれば、複数人共同でリアルタイムに編集作業もできますので、変更履歴を残しつつ常に最新版を共有することができます。

3.導入後どう変わるか？ツール導入体験談

デザインの見やすさだけを追求するのであれば、専用のツールでなくても手書きでも問題ありません。ワイヤーフレームを作成するためのツール導入を決めた理由で一番多いのが、「コミュニケーション円滑化のため」というものです。経緯と効果について実際の声を聞いてみましょう。

＜Webワイヤーフレーム作成ツールを導入したA社の場合＞

“開発者やデザイナー、プロダクトマネージャーと打合せをするときに便利”

■導入前の悩み：

手書きでワイヤーフレームを作っているためチーム内外で共有をしにくい

■導入後の効果：

・オンライン上でプロジェクトメンバーはもちろん、外部の人とも共有が簡単にできるようになった
・場を問わずミーティング中の提案をすぐに反映できるため、チーム内での仕様の齟齬がなくなった
・全員が同時にデータの編集ができるので、編集途中で他の人が編集してしまいどちらが最新版かわからないということがなくなった

こちらの会社は、関係者とのコミュニケーション円滑化に重きを置いてツールの導入を決め、明らかな効果が出ているようです。

4.いいツールを選ぶためのチェック項目

ここまでで、ワイヤーフレーム作成ツールを活用した方が良いということを説明しました。では実際にどんなツールを選べばいいのでしょうか。
何よりもまず、実際に使ってみることです。どんな人がどんな目的でツールを使うかによって、どんな機能を持ったツールがいいのかそれぞれです。ほとんどのツールが無料体験版を提供していますので、実際に使ってみて合っているものを探してください。

その際に、下記のような評価のためのチェックポイントを整理しましょう。
チェックすべきポイントはどこかデザイナーやエンジニアなど関係者とすり合わせ、それぞれの優先度を決めた方が、スムーズに選択ができます。

＜チェックポイント例＞

No.	チェックすべきポイント	優先度低—————高
1	ツールバーが直感的に使いやすいデザインか	１・２・ 3
2	日本語UIか	１・２・ 3
3	フィードバック機能が充実しているか	１・２・ 3
4	デザインのリピート機能があるか	１・２・ 3
5	チーム内共有がしやすいか	１・２・ 3
6	クライアントとの共有がしやすいか	１・２・ 3
7	クラウドストレージなど外部サービスとの連携がしやすいか	１・２・ 3
8	モックアップやプロトタイプへの連携がスムーズか	１・２・ 3
9	セキュリティ対策がなされているか	１・２・ 3
10	コストがかかり過ぎないか	１・２・ 3
11	既存のデザインパーツが豊富にあるか	１・２・ 3

5.ツール選定までのスケジュール案

ほとんどのツールがオンラインでの登録ですぐに利用開始できます。優先順位の洗い出し、体験版を試すなど意思決定の時間を十分にとりスケジューリングをする必要があります。急いで選んだツールが、実は違う方が良かったとなってしまったら、また新しいツールに切り替える手間もコストもかかります。
反対に、スケジュールをひかないと、日々の業務に忙殺され時期がどんどん伸びて意思決定ができなくなりますので、事前のスケジュール策定はやっておきましょう。

＜ツール選定スケジュール案＞

2月　優先順位の洗い出し
3月　ツールのトライアル〜ツールの選定
4月　運用開始
※もし自社サーバーでの導入を検討される場合は、より長い期間の確保が必要です。

6.ワイヤーフレーム作成ツールのご紹介

最後にツールのご紹介をします。ここで主要なツールは網羅されていますので、こちらのリストから検討を始めてみてください。

6-1. オンラインツール

6-1-1. Cacoo

ユーザー数：150万人以上
プラン：14日間無料トライアルあり
料金：1アカウント月額¥454〜
特徴：インターネット環境さえあればどこでも作業可能。同時編集が可能であったりチャット機能があるなどチームで共同作業がしやすい。またDropboxなどのクラウドストレージとの連携が可能。Cacooから直接ストレージサービスにログインでき、ストレージ内に保存している画像を直接挿入できるため、いちいちデータを引っ張ってくる手間が要らない。
URL：https://cacoo.com/ja/

6-1-2. Prott

ユーザー数：3万人以上
プラン：30日間無料プランあり
料金：月額¥1,900〜
特徴：データはURLを送ればチーム共有が可能で、コメント機能もあり。
URL：https://prottapp.com/ja/

6-1-3.POP

ユーザー数：—
プラン：2プロジェクト分だけ使える無料プランあり
料金：月額¥1,400〜
特徴：手書きのワイヤーフレームをスマートフォンで撮影することでツール内に取り込める。製作中のデータを自動でDropboxなどのストレージに保管する機能があるため、データの紛失が起こらない。
URL：https://popapp.in/

6-1-4.ProtoShare

ユーザー数：—
プラン：30日間の無料トライアルあり
料金：月額約¥3,200〜
特徴：日本語未対応だが、細かい設定がしやすい機能が多い
URL：http://www.protoshare.com/

6-1-5.Invision

ユーザー数：70万人以上
プラン：無料プランあり（一部機能制限あり）
料金：月額約¥1,600〜
特徴：SNS機能があり、コメントを書いたりタイムリーに編集できる。
URL：https://www.invisionapp.com/

6-1-6.Balsamiq Mockups

ユーザー数：—
プラン：30日間の無料トライアルあり
料金：約¥9,900〜
特徴：手書き風に書ける。
URL：https://balsamiq.com/products/mockups/

6-1-7.HotGloo

ユーザー数：—
プラン：15日間無料トライアルあり
料金：月額約¥1,400〜
特徴：シンプルな見た目で直感的な操作が可能。
URL：http://www.hotgloo.com/

6-1-8.Adobe XD

ユーザー数：—
プラン：Adobe IDがあれば無料
特徴：ツールバーがシンプルで直感的に使いやすい。
URL：http://www.adobe.com/jp/products/experience-design.html

6-1-9.Fluid UI

ユーザー数：23万人以上
プラン：無料プランあり
料金：月額約¥1,600〜
特徴：スマホリンク機能ですぐにスマホでデザインを確認できる。
URL：https://www.fluidui.com/

6-1-10.Prototyper

ユーザー数：—
プラン：無料プランあり（一部機能制限あり）
料金：月額約¥2,000〜
特徴：イラストレーターで作成したデータをPrototyperに読み込めば、変更があった場合もイラストレーターで編集した内容をリアルタイムにPrototyperにも反映することができる。
URL：https://www.justinmind.com/

6-1-11.UXPIN

ユーザー数：—
プラン：無料トライアルあり
料金：月額約¥3,200〜
特徴：Webやスマホに使える素材が豊富にプリインストールされている。
URL：https://www.uxpin.com/

6-1-12.Moqups

ユーザー数：100万人以上
プラン：登録不要で無料で利用できるが一部機能制限あり
料金：月額約¥1,500〜
特徴：UIは英語だが、あらかじめ用意してある部品をドラック＆ドロップして配置ができるので、英語がわからなくても直感的に操作可能。
URL：https://moqups.com/

6-1-13.Webflow

ユーザー数：60万人以上
プラン：30日間無料トライアルあり
料金：月額約¥8,400〜
特徴：豊富なテンプレートからデザインの大枠を決めることができる。
URL：https://www.webydo.com/

6-1-14.Webydo

ユーザー数：−
プラン：30日間無料トライアルあり
料金：月額約¥8,400〜
特徴：コードを一切使わずにパーツをドラック＆ドロップすることで簡単にWebページが作成できる。動的なワイヤーフレームも作成可。
URL：https://www.webydo.com/