昨年リリースされたWEBサービスですが、Cacoo(カクー)というWEB上で画像や図面（企画書で必要な画像やサイトマップなど）が作成できるサービスがリリースされました。
サイトにアクセスすると英語版が表示される方は、サイト下部にある”Go to Japanese”をクリックしてください。(日本のサービスです)
この手のサービスは海外でいくつか公開(gliffyやcreatelyなど)されておりますが、うまく日本語が通らなかったり(使える所もあります)、そもそもインターフェイスが日本語で無い事から「明日から社内で！」とは行きづらいのが日本人の本音です。
さてCacoo(カクー)のサービスの大まかな解説は他のサイトにお譲りして、このサービスの良い部分や使えるポイント、またはウィークポイントを挙げていこうと思います。
Cacoo(カクー)について解説しているサイト
Cacoo(カクー)の基本操作
利用にはユーザー登録の必要がありますが、メアド、パスワード等を入力すればすぐに利用可能です。まず基本操作として戸惑う点を書いておくと、(FLASHで開発されていますが、)ほとんどの操作がデスクトップアプリケーションのように操作できます。しかし、微妙にWEBアプリっぽい挙動もまざるため、私自身はAdobe系ツールを10数年使っていますが、そういうツール慣れユーザーでも少し混乱します。
オブジェクトはドラッグ＆ドロップで作成する
illustratorやPowerPointではオブジェクトを作成する際、パネル選択後ドラッグで作成しますが、Cacoo(カクー)の場合は"ステンシル"というツールパネルからドラッグ＆ドロップすることでオブジェクトを作成します。（私自身は情け無い事にここで3、40秒躓きました・・）
ドラッグ＆ドロップでオブジェクトを作成後は、他のツール同様、オブジェクトを選択後、ドラッグで自由にサイズを変更できます。
デスクトップアプリの基本的なショートカットが使える
パワーユーザーからすると、いくらWEBアプリケーションが便利だからといって、図形制作にショートカットが使えないと結局採用には踏み切れません。Cacoo(カクー)の素晴らしい点は、基本的なショートカット(Ctrl+Cでコピー、Ctrl+Vでペースト、Ctrl+Zでアンドゥ、Ctrl+Sで保存)が実装されている点です。上記の例のように、サイズ変更時も、Shiftキーを押しながらドラッグすれば、比率を守った状態でサイズ変更する事も可能です。illustratorやFireworksで普段図形を作成しているパワーユーザーにとっては非常に魅力的な要素です。
余談として、ツールパネル（ステンシルとインスペクタ）自体もドラッグして自由に配置する事が出来ますので、私の場合はオブジェクト作成パネルであるステンシルは左側に置いて作業しています。
整列機能はAppleのKeynoteのように使いやすく、分かりやすい
この画像を見ていただいてハっとわかる人も居ると思いますが、Cacoo(カクー)は整列機能が優れています。オブジェクトの位置をドラッグしていくと、近隣のオブジェクトの位置に合わせてガイドラインが表示され、キレイに吸い付いてくれます。これがあるとサイトマップなど、多数のオブジェクトが並ぶ図もかなり作成しやすいと思います。
コネクタ(オブジェクト同士を線で結ぶ)の張り方
実はこの機能はウィークポイントというか、やはりデスクトップアプリよりは使いづらい機能だったのですが、あえて紹介します。(コネクタはこんなやり方でもＯＫな人は使えますので)PowerPointやVisioの感覚とは異なりますので注意してください。(ステンシルの矢印オブジェクトからはコネクタを作成できません。)まず、アプリケーション上部にあるメニューの、"コネクタ"を選択します。
コネクタを選択後、線で結びたいオブジェクト同士をドラッグで結びます。これでコネクタは張られているのですが、標準では直線になってしまいます。直角に折れ曲がったコネクタを張りたい場合は、上記の画像のようにコネクタの真ん中をダブルクリックし、中心点を作成し、中心点を任意の場所にドラッグして直角に折れ曲がったコネクタを作成します。
残念な事に、オブジェクトを移動すると角度ごと変わってしまいます。この機能は既存のデスクトップアプリから比較するとかなり使いづらい点です。あまり試せていませんが、私には他の効率的な方法を見つけることが出来ませんでした。ひょっとすると他に方法があるかもしれませんので、コネクタ機能に満足できない方は調べるなり開発側に問い合わせてみてください。
図形はpngで保存可能
Cacoo(カクー)の図形はCacoo(カクー)上でしか編集できません。WEBアプリケーションらしく、他者と編集しあう事もできます。最終的に図形を利用するには画像ファイルに保存する必要がありますが、現時点ではpng形式(背景は透過)で保存する事ができます。アプリケーション上部にあるメニューの"エクスポート"から、"PNG形式でエクスポート"を選択する事で、png画像を保存する事ができます。
余談としては、残念ながらFireworksで編集可能なpngではありません。もし、Fireworksで編集可能なpngが生成できるなら、そもそもFireworks自体を脅かしかねない存在になっていたでしょう。Fireworksで編集できるpngのファイルフォーマット自体は通常のpngとは異なるため、本機能の実装は難しいかもしれません。(FireworksのPNG自体がオープンでないかもです、というか多分そうです、この辺り勉強不足なので勉強しておきます。。)
Cacoo(カクー)でWEBサイトのワイヤーフレームを作る利点
やっと本題です。ワイヤーフレーム、モックアップ、画面設計図を何で作るか、という話はよくWEBサイト上でも議論になります。会社によってエクセル、PowerPoint、またはFireworks、あとはMac専用のオムニグラフというソフトも人気があります。最近だとGoogle Docsでやる、という所もあるでしょう。さて、Cacoo(カクー)やGoogle DocsなどのWEBアプリケーションでワイヤーフレームを作る価値は何処にあるでしょう？
とてもシンプルな利点としては、ライセンスを気にせず、多人数で(場合によってはクライアントを含めて)コラボレーションしながら作成できる所があるでしょう。
それ以外にCacoo(カクー)のようなツールを使うメリットとしては、ワイヤーフレーム制作用のオブジェクトがすでにあるので、ワイヤーの作成はもちろん、修正がとても行いやすい、という点が挙げられます。
他のドローツールのようにウィンドウ幅を変えたり、ボタンの幅を変えるたびに線幅の調整などを行う必要はありません。またPowerPointでは細かな修正・調整が困難な場合があります。個人的には”１画面単位”の、たとえばトップページだけとかの設計を行う上では仕事でも利用できると感じました。
実際にCacoo(カクー)でワイヤーフレームを作ってみた
こんな感じで作ってみました。3分ぐらいで適当にです。
やはり、ショートカット(Ctrl+C、Ctrl+V)と整列機能は強力です。あっさり慣れることが出来ました。今後私もトップページ等の設計には使っていこうかなあと思っています。
WEBサービス型ドローツールでワイヤーを作成するウィークポイント
最後に少しだけウィークポイントを付け加えておくと、結局現場でワイヤーフレーム等の資料を作成する際、図形データというのは仕様書のパーツでしかないわけですね。パーツ制作にわざわざ別アプリケーションを使いたくないから、PowerPointなどで作成する訳ですね。
そのような事を考えると、WEBアプリケーションでワイヤーフレーム制作を完結しようと思うと、Google Docsのようなppt互換のファイルが作成できるWEBアプリケーションがベースにあり、図をダブルクリックするとCacoo(カクー)のようなWEBドローツールが利用できる、という設計が便利ではないかと思います。で、そのままPDFやpptに保存できる感じですね。
将来的にはそのようなサービスを何処かが展開してくれるかと思いますが、まずはCacoo(カクー)でWEB系ドローツールの実力を体感してみてください。
Cacoo(カクー)自体はワイヤー以外に、オフィス図やUML、サイトマップ、企画書用の画像等も作成できます。（むしろそっちがメインですね）
今後もCacoo(カクー)や、他のワイヤー等が作成できるツールについても試してみたいと思います。
コメント(0)
コメントする