Nyle
Nyle
Jun 25, 2014 · 10 min read

こんにちは。Webデザイナーのタスカルです。猫好きです。

最近はもっぱらマークアップをすることが多いですが、弊社のアプリ検索サービスApplivや社内タスク管理ツールなど、ちょこちょこワイヤーフレームを書いてきました。

さて、ワイヤーフレームを作成するうえで必要なのが作成ツールです。ノートに手書き派から専用ツールを使う派まで、人によって色々だとは思います。が、せっかくなので自分に合ったツールを使って、より生産性を高めたいですよね。

というわけで、自分が使っているツールとそのメリット、デメリットを比較したいと思います。

それでは、まいりましょう。

PowerPoint

powerpointimage
powerpointimage

みんな大好きPowerPointです。

メリット

みんな持ってるし使える
わりとどこの会社でも業務に使うPCにはインストールされているかと思います。社内の他のメンバーと共同で修正できるところがGood!ですね。お客さんのPCでもインストールされている場合が多いので、パワーポイントファイルを渡して、そこに記事の文言を直接書いてもらったりもできます。

ネット回線が落ちても使える
オンラインのWFツールと違って、回線が落ちて使えない!というような事態が発生しません。「やばい!あと5分でお客様に提出するワイヤーフレームを印刷しないといけないのに…ネット回線が落ちているだとッ・・・!」という事態を回避できるので安心して使用できます。

自分なりのカスタマイズもできる
実はPower Mockupという便利なプラグインをインストールすることができます(無料版には一部機能制限があります)。

こちらのプラグインをインストールすることで、あらかじめ用意された数百種類のワイヤーフレーム用パーツを配置していくことができます。パーツの一覧はこちらを参考にしてください。

ためしに、今回はこのプラグインを使って自分で作ったパーツを保存して呼び出す方法を紹介します。こちらの機能は無料版でも使えますよ。

まずメニュー上のPower Mockupを選択します。さらに保存したいパーツを選択したうえで、左上のAdd Stencilボタンを押してください。

Powermockup使い方
Powermockup使い方

すると、右上のCustom Shapesというところにパーツが追加され、別ファイルでも選択して使えるようになります。

Powermockup使い方2
Powermockup使い方2

Gyazoのような画像キャプチャーソフトと組み合わせれば、既存サイトのデザインパーツを使いまわすこともできます。ナビゲーションなど共通パーツは使いまわす機会も多いと思うので、うまく使えばかなり作業効率があがるのではないでしょうか。

ちなみに、Webディレクターズマニュアルの構築のスピードとクオリティをあげる、本気のワイヤーフレームの書き方という記事にパワーポイントを使ったワイヤーフレームの書き方とパーツサンプルが載っていて、とても参考になりました。

デメリット

スライドが小さくて導線が書きづらい
パワーポイントのデフォルトのスライドの大きさが小さいので、ワイヤーフレームを書いていると、印刷範囲をはみ出てしまうことが多々ありました。。。実際にワイヤーフレームを書き始める前に、上部メニューのデザイン、ページ設定、スライドのサイズ指定で幅と高さを大きめに設定し、スライドの向きを縦にしておきましょう。

ただ、やはりスライド上に導線を書こうとすると、かなり狭くなって難しいです。番号と対応する注記などであれば問題なくできるので、作成するサイトやWebツールの種類によって、この後紹介するCacooと使い分けると幸せになれると思います。

Cacoo

Cacoo
Cacoo

イケてるしやばいオンラインスケッチツール、Cacooです。
このまえベトナム語に対応しましたね。無料版と有料版があり、料金は個人プランだと月々490円です。詳しくはコチラを参考にしてください。

メリット

いつでもどこでもだれでも使用可能
Cacoo はオンラインツールなので特定のPCに依存しません。
しかもリアルタイムに修正が反映されるので同時に複数の人で修正を行えます。
また、URLを知っている人だけが閲覧できるとか、招待した人だけが編集可能とか共有範囲についても設定することもできます。

既存のパーツの修正&量産が超簡単
Cacooは既存のパーツの修正がめちゃくちゃ簡単にできます。
既存のデザインをちょっと修正するときとか、Photoshopを使うほどではないときに便利です。

試しに、Applivのパーツの文言を修正してみましょう。
キャプチャーしたパーツのうえでダブルクリックします。

Cacoo使い方02
Cacoo使い方02

するとトリミングする範囲をドラッグで選択できるようになります。
ちなみに、Altを押しながらだとコピーになります。

Cacoo使い方03
Cacoo使い方03

そしてコピーしたものを、修正したい箇所のうえに載せ、
文言を追加して完了です。

Cacoo使い方04
Cacoo使い方04

と、このようにコピーとトリミングがサクッと直感的にできます。

まあ、これぐらいの修正であれば注記をそえるだけでも問題ないですが、ちょっとパーツの幅を伸ばしたいなとか、このサイトのこのパーツを流用したい!とか、そんなときにかなり助けられています。他にも、既存のサイトのデザインをまるごとキャプチャーしたうえで、パーツのデザインや文言に修正を加え、ユーザーテストに耐えうるワイヤーフレームを作るといったこともできますよ。

ちなみに弊社ではこのCacooを使っている人が多いですね。
実際にデザインを作る過程はこちらの記事をご覧ください。

シートが大きくて導線を好きなだけ書ける
Cacooのシートはデフォルトで縦横4000pxとかなり広く設定されています。
さらに、それ以上のサイズに自由に設定することも可能です。

ApplivのようなWebサイトの場合、挙動が複雑になります。こういったサイトのワイヤーフレームを書くときは実装者がわかりやすいように、リンクの飛び先といった導線やパーツの挙動などを細かく仕様を決め、書き加えていきます。そうすると、ワイヤーフレームがどんどん拡大していくので、Cacooのようにカンバスサイズが広いものはとてもありがたいです。

便利なテンプレート、ステンシルあります
フローチャートからグリーディングカードまで、さまざまなテンプレートが豊富にそろっています。もちろんワイヤーフレーム用のテンプレートもあります。

Cacoo WF集
Cacoo WF集

また、ステンシルといったパーツ集を利用することもできます。
ステンシルに自分で作ったパーツを保存しておけば、別ファイルで呼び出すことができるようになります。さらに、Cacoo Storeに行けば、他のユーザーが作成したテンプレートを利用することもできます。高いクオリティなのに無料!といったものも多いのでオススメです。

デメリット

たまに接続状況が不安定になります
Cacooは本当に素晴らしいツールなので、あまりデメリットが思いつかないのですが、強いて言うならこちらでしょうか。大勢のユーザーが使用しているせいなのか、弊社で使っていて接続状況が不安定になることが何度かありました。(なんと100万人以上のユーザー数を誇るらしいです!)
ワイヤーフレームをがっつり修正していて、さあ保存しよう!とするときに落ちると、泣きそうな状態になります。こまめに保存すると安心して利用できますね。

WireframeSketcher

Wireframeschetcher
Wireframeschetcher

恋するワイヤーフレーム作成専用ツール、WireframeSketcherです。
試用期間が14日間の制限なしお試し版があります。有料版はシングルユーザーで99ドルです。こちらのツールは、ロフトワークさんの記事で知りました。

メリット

シングルライセンスで複数のPCにインストールできる
WireframeSketcherはデスクトップにインストールして使います。
ただ、ライセンスがユーザーに付与されているのでインストール数に制限がありません。
会社、プライベート関係なく、すべてのPCにインストールさえすれば使えてしまうのはいいですね。

テンプレート、アイコン、ステンシルが超充実
さすがにワイヤーフレーム作成専用ツールだけあります。今回紹介したツールの中でも一番充実しています。デフォルトのステンシルだけでもかなり豊富です。

Wireframeschecher使い方その1
Wireframeschecher使い方その1

公式サイトに追加のステンシルダウンロード専用ページがあります。
すべて無料でダウンロードしていただけます。各ページでダウンロードしたファイルをassetsディレクトリの中に格納すれば使える用になりますよ。

鉛筆書きっぽさがテンションあがる
なんかこの鉛筆で書いた感がたまらないです。
ワイヤーフレーム書いててテンションあがります。
このツールの存在意義といっても過言ではないポイントです。

デメリット

ちょっとお値段が高い
99ドルを出すかどうか、なかなか悩みどころですね。
無料版でもフル機能が使えるので、まずは14日間試してみてはいかがでしょうか。

まとめ

いかがでしたでしょうか?

僕がワイヤーフレーム作成に使っているツールは主にこの3つですね。

Webサービスなど導線が複雑になりそうな場合はCacoo、
お客様に文言などを直接修正してもらいたいときにはPowerPoint、
ラフなスケッチで書きたい気分のときはWireframeSkecherという感じです。

今回の記事を作成する際にいろいろ調べていたら、ワイヤーフレーム作成ツールが予想以上にたくさんあることを知りました。他のツールも使ってみたい方は、こちらの記事が参考になりますよ。

全部無料で試せる!厳選ワイヤーフレーム作成ツール10
ワイヤーフレームを無料で、スピーディーに作成できる便利なツール4選!
ウェブ制作に重要なワイヤフレームを書けるツール&ウェブサービス6選

是非、自分にあったツールを探してみてくださいね。

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

Nyle

Written by

Nyle

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade