Cacooは凄い

筆者は、Webディレクターという職種を10年近くやっています。Webディレクターの仕事とは簡潔にいって

  • 企画を立てて(orクライアントの企画をまとめて)
  • その企画を実装に落としこむための設計をして
  • 各メンバーが実装を理解できるように資料にする

ことだと個人的には思っています。

そして、資料の一つが、ワイヤーフレームというものの作成です。ワイヤーフレームとは、「サイトのデザインの骨組み」のことです。

筆者は今まで、エクセルや画像ソフトを使って、このワイヤーフレームを作っていました。

しかし、エクセルはワイヤーフレームを作るためのソフトではないため、不便なところがあります。また人と共有するのにも向いていません。

そんな中で「Cacoo」というWeb上でワイヤーフレームを作れるサービスがでて、リリース初日から虜になってしまいました。今ではワイヤーフレームはほとんどがCacooで作っています。

そこで、Webディレクターのために、Cacooを使ったワイヤーフレームのコツを紹介します。

作り方

今回は、仮想のサービス企画として「自分の考えたアイデアをTwitter風に投稿するWebサービス」を作るとします。

こんな感じです。かなり適当に作っていますが、ここまで作るのにだいたい5分くらいで出来ます。

では見てみましょう。

STEP1

まずは、基本的な動きですが、ほとんど場合、「基本」にある四角い図形を使います。

まずは全体的な骨組みを作ります。

この時はまだゆるくて構いません。つけるとしたら、四角の色を変えるくらいです。

色を変えるには「インスペクタ」というのを使います。

STEP2

大枠ができてきたら、今度は、ステンシルの「Web」をクリックし、「ワイヤーフレーム」を選びます。

ここには、ワイヤーフレームを作るのに適した素材がたくさんあります。たとえば

ボタンだったり

タブだったり

ページングだったりです。

これらを組み合わせて、自分のイメージするWebサービスの骨組みを作っていきます。

STEP3

要素をいろいろ足していきます。

Webサービスには必ず使うであろう、リンク部分を作る時のコツとしては、テキストでリンク文章を作り、テキスト色を青にして、下線を引くとわかりやすいです。

インスペクタの設定はこんな感じになります。

共有方法

ある程度できたら、共有をしましょう。

まずは右上の保存ボタンで保存をします。

保存が終われば、共有をします。

メールでも共有できます。

これで、ワイヤーフレームを人と共有することができます。

凄いのは、一緒に画面を開いていれば、リアルタイムにワイヤー編集ができるところです。

離れた場所でもお互いに作業できるので、とても便利なのです。クライアントさんへの確認などにも使えます。

というわけで

いかがだったでしょうか。

Cacooはワイヤーフレーム作成に強烈な威力を発揮します。

Webサービスだけじゃなくて、iPhoneアプリ制作などにも使えるので、ぜひとも試してください!