みなさんは、普段デザイナーさんや制作会社の方にデザインを依頼する際、どのようにしてデザインのイメージを伝えていますか?

パワーポイントを使って、「こんな感じ!」という風に伝える方もいればエクセルで簡単に作ってしまう方もいらっしゃると思います。

しかし、パワーポイントの図形だけでは、イメージを伝えるのは難しいのではないでしょうか。
シンプルな図形の形を変えたり、色を変えたりと大変な思いをして、

「元から、スタンプのようにデザインが出来ていれば楽なのに」

「一緒に画面を見ながらイメージを共有できればもっとスムーズにできるのに」

と感じることもあるでしょう。

このような課題を無料で解決する図形描画ツールCacooについての紹介と簡単な使い方についてご紹介いたします。

ちなみに、Ferret編集部も活用しています!

Cacooで出来る事

Cacooは、ホームページを作成するために必要なワイヤーフレームや図をWeb上で作ることができるツールです。
そのため、プレゼンテーション用のツールであるパワーポイントと比べるとデザイン面に特化したツールと言えます。

主に、パワーポイントに近い操作で装飾ができ、イメージを伝えるうえで必要なステンシル(いわゆるスタンプ)が豊富にあります。
さらに、編集しているシートを共有することができ、同時に編集機能やチャット機能があるので、遠隔でデザイナーさんとのやりとりにも非常に便利なツールです。
※個人的にはステンシルの豊富さが気に入ってます

簡単な編集方法

それでは、以下で実際に編集する方法についてご紹介していきます。

まず、ログインが完了したら、新規作成ボタンを押して新たに編集するシートを作成します。

新規作成

 
テンプレート選択が出てくるので、目的に合わせてテンプレートを選択します。

テンプレート

 
基本的に空白で良いです。ただ、ワイヤーフレームを作りたいという目的の場合は、ワイヤーフレームのテンプレートを選択して、そこから作り直してく方が早くなります。
ちなみに、ワイヤーフレーム1を選択すると、既にここまで完成されたテンプレ―トが編集できます。

ワイヤーフレーム1

 

ステンシルからドラッグ&ドロップ

改めて空白でシートを作成して進めます。
主にステンシルを使って、イメージを作っていくことが中心となりますが、ステンシル自体も自由に編集できるため、自由度は高いです。
また、ステンシルの種類がとても豊富です。ホームページの制作からオフィスレイアウトの図面作製まで、本当に様々な目的に使えそうなステンシルが無料で使えます。
※これでも一部のステンシルのご紹介です。

ステンシルall

 
画面右側に表示されているステンシルの中から、目的のステンシルを選びドラッグ&ドロップで使用してみましょう。

 
ドラッグ&ドロップ

 
シートに移動したステンシルは、図形の中にテキストを入力したり色や形を変える事が出来ます。
それを行うのがインスペクタの項目です。

文字の装飾

赤枠部分で文字装飾が可能です。色、フォントの種類、大きさ、配置などを調整する際に使います。

 
インスペクタ文字

 

ステンシルの装飾

赤枠部分でステンシルの装飾が可能です(グループ化されていないステンシル)。塗りやグラデーション、影などのエフェクトを付ける際に使います。

 
装飾図

 

線の装飾

赤枠部分でステンシルの線の装飾が可能です。線の太さ、色、線種を調整する際に使います。

 
ステンシル線

 

サイズや配置場所

赤枠部分でステンシルなどのサイズや配置場所を細かく調整することが可能です。px単位で細かい調整する際やステンシルを等間隔で整列させる際に使います。

 
ステンシル配置

 

リンク

赤枠部分にて、Cacoo上でステンシルにリンクを設置することが可能です。活用方法としては、ボタンをクリックした際にどこにリンクするかの確認など、ホームページの制作関連で活用する項目です。

 
リンク

 

カスタム属性

赤枠部分ですが、あまり使わないため具体的な活用方法は分かりません。
恐らく、APIなどを使用する際に活用する項目かと思います。

 
カスタム属性

 

その他の便利機能

共有機能

赤枠部分では、共有機能を使って、他の人を招待することで同じシートを同時に編集することやチャットでのやりとりができます。

 
共有機能

 
同時に編集する際に、相手がなにをしているかが分かるので、間違って同時に編集してしまうこともありません。遠隔でのやりとりで活用できる機能です。

 
同時編集

 

エクスポート機能

赤枠部分で、作ったシートを画像として保存が可能です。無料版はPNGで保存ができ、それ以外の拡張子の場合は回数制限で保存ができます。

■エクスポートできる種類

・PNG
・SVG
・PDF
・PS
・PPT
・印刷(ベクター形式)

 
エクスポート機能