ディレクターが愛してやまないワイヤーフレームツール『Cacoo』、『moqups』の使い方まとめ

みなさん、普段どうやってワイヤーフレームを制作していますか？
色々なソフトで作れますが、今回はオンラインで簡単にurlが共有できるワイヤーフレームツールを紹介します！それでは早速参りましょう。

ワイヤーフレームとは

Webサイトの設計図であり、ページ内に何を配置するか、どのような文言を表示させるかということをまとめたものです。このワイヤーフレームを作ることで、デザイナーと意思疎通がとりやすくなり効率よく作業が進みます。

Cacooとmoqups

今回はこの２つを紹介します。どちらもメリット・デメリットがありますので、それぞれのシーンに合わせて使っていっています。

Cacoo

無料で２５個まで作れる日本生まれのワイヤーフレームツールです。Facebookページ「CacooJapanのFacebookページ」も積極的に更新していて、これからも益々便利で使いやすいツールになっていくはずです！

メリット・デメリット

メリット	デメリット
日本語で読める	無料版は保存形式などに制限がある
オンライン同時編集ができる	オンラインじゃないと使えない
画像の自由変形ができる。

ステンシル

ステンシルの中からワイヤーフレームを選び、下のボックスからドラッグ&ドロップで挿入します。
メニューバーのボタンをクリックすると設定画面が出てきます、この画面で、好きな値に変形できます。
そして背景はロックすることをおすすめします！ロックすることで、ほかの要素を動かすときに背景が影響を受けなくなりますのでおすすめです。

グループ

ある程度要素がまとまったらグループ化すると作業が楽になりますよ！

画像挿入

画像も簡単に挿入できます、Cacooは画像を自由に変形させることができるんですが、この機能は便利です。画像を無理矢理、枠におさめることが可能です。
（本当はちゃんとサイズを計算して画像も作りますが急ぎのときなどは便利です。）

書き出し

完成したら、書き出します。
無料版はPNGのみ回数無制限で、PDFなどは３回まで無料となってます。
簡単にワイヤーフレームが完成しました。次はこのワイヤーフレームを共有してみます。

共有

共有ボタンを押して、アドレスを入力して送信します、受信したアドレスからアクセスすると同時編集が可能になります。
このツール一つで、ワイヤーフレームを作るところから、書き出し、共有と全てが可能になります。
ありがとう、Cacoo。いいワイヤーフレームツールです。

moqups

続きましてはmoqups、最近ぐんぐん人気上昇中のmoqups。完全無料で、制限なしです、素晴らしい！
書き出しはPNGとPDFだけですが、PDFで出力してもテキストは画像として認識されます。。。

ページ遷移の動きが確認できる

メリット	デメリット
ファイル制限なし	画像の自由変形ができない

チュートリアル

最初にアクセスすると、説明が書いてあります、なんて親切。さらに、Macをお持ちの方ならfn+F1でショートカット一覧も出せます。ウインドウズの方は説明によるとF1ですね。（ﾀﾒｼﾃﾅｲﾃﾞｽ(:3｣∠)）

設定変更

画面幅やグリッドの幅をかえれるので自分の好みの配置におきやすいです。
Snap to gridにチェックを入れておくとsnapに合います。デフォルトではチェックが外れているので注意ですね。

画像のアップロード

moqupsは画像のアップロードフォルダをユーザー毎に持てます。その中から任意の画像を選んでドラッグ＆ドロップで挿入します。
ただ画像の自由変形はできず、同じ比率での拡大、縮小になります。

もともとのステンシルと、１個のアップロード画像でさくっとGoogle風の画面が作れます。

これだけでも十分すごいのですが、このmoqupsのすごいのは、次の機能です。

Link機能

Link機能です！画面遷移が確認できちゃいます。

プレビューで画面遷移を確認

この機能のおかげで、どのようなサイトにしたいのか伝えやすくなっています。
ここを押したらこうなります、ここを押したらこう戻りますなどの作業は口でいうより実際見てもらった方が、分かりやすいですもんね！

まとめ

様々なワイヤーフレームツールが身の回りに溢れていますが、それぞれに、メリット・デメリットがあります。
状況によって最良のツールを選択していきたいです。
今回のmoqupsのLink機能などは、skypeの画面共有や、Google+のハンズオンでの画面共有を使えば、遠隔の方との作業でも意思疎通が取りやすくなります。
様々な技術を常に取り入れつつ、良いコンテンツを作っていけるよう頑張ります。