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

  • 0
  • 0
  • 0
  • 1
  • 12
ワイヤーフレーム

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

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

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

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

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

ワイヤーフレーム以外のツールをお探しの場合は別記事を御覧ください。デザインは、下記のフェーズに分けられます。
スケッチ(手書きのラフ画)

ワイヤーフレーム(スケッチをデジタル化したもの)※本記事でご紹介

モックアップ(ワイヤーフレームよりさらに色やサイズなどデザインを意識したもの)

プロトタイプ(モックアップに遷移やアニメーションなど動きをつけたもの)

目次

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

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

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

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

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

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

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

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

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

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

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

オフラインツール

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

オンラインツール(Webツール)

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

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

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

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

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

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

■導入前の悩み:

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

■導入後の効果:

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

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

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

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

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

<チェックポイント例>

No. チェックすべきポイント 優先度

低—————高

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

 

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

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

<ツール選定スケジュール案>

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

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

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

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

6-1-1. Cacoo

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

6-1-2. Prott

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

6-1-3.POP

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

6-1-4.ProtoShare

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

6-1-5.Invision

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

6-1-6.Balsamiq Mockups

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

6-1-7.HotGloo

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

6-1-8.Adobe XD

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

6-1-9.Fluid UI

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

6-1-10.Prototyper

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

6-1-11.UXPIN

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

6-1-12.Moqups

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

6-1-13.Webflow

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

6-1-14.Webydo

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

6-1-15.Wireframe.cc

wireframecc
ユーザー数:
プラン:7日間無料トライアルあり
料金:月額約¥1,600〜
特徴:作成したワイヤーフレームをURLで簡単に共有出来る。
URL:https://wireframe.cc/

6-1-16.Gliffy

gliffy
ユーザー数:
プラン:無料トライアルあり
料金:月額約¥500〜
特徴:Google Driveと連携でき、Drive上でワイヤーフレームを確認・修正が可能。
URL:https://www.gliffy.com/

6-1-17.iPlotz

iplotz
ユーザー数:
プラン:無料トライアルあり(一部機能制限あり)
料金:月額約¥1,600〜
特徴:豊富に部品が用意されており、タスク管理などのマネジメント機能も備えているのが特徴。
URL:http://iplotz.com/index.html

6-2. オフラインツール

6-2-1.Power Mockup

powerpointmockup
ユーザー数:
プラン:無料プランあり(一部機能制限あり)
料金:¥6,700
特徴:パワーポイントの拡張機能なので、パワーポイントの画面上にワイヤーフレーム作成に必要なパーツが表示される。
URL:https://www.powermockup.com/

6-2-2.Smart Canvas

smartcanvas
ユーザー数:
プラン:無料
特徴:スマートフォンサイトやアプリのワイヤーフレームを作るのに優れている。
URL:http://smartcanvas.net/

6-2-3.axure

axure
ユーザー数:
プラン:無料トライアルあり
料金:月額約¥3,400〜
特徴:Office系ソフトとの連携が優れており、画像をドラッグ&ドロップで取り込むことができる。
URL:https://www.axure.com/

6-2-4.PENCIL PROJECT

pencilproject
ユーザー数:
プラン:無料
特徴:無料で使えてパーツが豊富にあり。
URL:http://pencil.evolus.vn/Default.html

6-2-5.SIMPLEDIAGRAMS

simplediagrams
ユーザー数:
プラン:7日間の無料トライアルあり
料金:約¥5,500〜
特徴:Adobe Airで機能するインストール型ソフト
URL:http://www.simplediagrams.com/

6-2-6.WireframeSketcher

wireframesketcher
ユーザー数:
プラン:14日間の無料トライアルあり
料金:月額約¥11,000〜
特徴:テンプレートが豊富。スタンドアロン版とEclipseプラグイン版から選べる。
URL:http://wireframesketcher.com/

まとめ

ツールを選択するということは、とても大きな意思決定だと思います。

まずは実際に無料トライアルを使ってみて、ワークフレーム作成ツールの効果を感じてみてください。しっかりと選定までのスケジュールを計画した上で、費用対効果が大きいものはどれなのかを選び、業務のさらなる効率化を図りましょう。

 

Dropbox 社員たちの Dropbox の使い方
ebook 無料ダウンロード

Dropbox 社員たちが Dropbox を仕事でどのように使って、仕事効率を上げているのか気になりませんか?
5人の Dropbox たちの使い方をまとめた ebook を無料でご提供させていただきます。
是非ともダウンロードください。
ebook_icon_small

ebookをダウンロード

PAGETOP