ワイヤーフレームを無料で作れる!「Cacoo」の使い方

「Cacoo(カクー)」の使い方を解説した記事です。無料で使えて、Web上で共有できるワイヤーフレームの作成ツールです。他の人と共有して使う方法のほか、PNGやPDF形式でエクスポートする方法も紹介しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

ワイヤーフレームを作成するときは、Illustratorなどを使う人が多いと思いますが、無料で作成できるワイヤーフレームのツールもあります。

 

Illustratorのようなデスクトップアプリケーションの場合、チームの他のメンバーと共有するためにはいちいちファイルサーバにコピーしなければいけなかったり、外部の企業にチェックしてもらうためにメールに添付して送らなければならなかったりと不便な点があることも事実です。また、共有するメンバーがIllustratorを持っていなければPDFなどの形式に変換する手間も掛かります。

 

そこで今回は、ワイヤーフレーム作成の定番ツールであるCacoo(カクー)の使い方を紹介します。

 

Cacooとは

Cacooはウェブアプリケーションのドローイングツールです。特別なアプリケーションをインストールすることなく、ウェブブラウザだけでワイヤーフレームなどの図を作成することができます。ドローツールとしての機能は一通り揃っているほか、ウェブアプリケーションならではの共有機能でリアルタイムコラボレーションも可能です。海外のツールですが、日本語で使うことができます。

 

Cacooには無料プランと有料プランがあります。無料プランでも図を作成する機能はフルに使用できますが、作成できるシートが25枚までなど、いくつか機能に制限があります。

 

ウェブアプリケーションですので、他のメンバーやクライアントに提出する際も、データに共有設定を施してURLを連絡するだけです。ウェブブラウザさえあれば閲覧できますので、PDFなどの形式に変換する手間も必要ありません。

 

そして、リアルタイムでのコラボレーション作業ができるというメリットもあります。

データを共有したメンバーが同時にデータにアクセスし、施した変更が他のメンバーの画面でもリアルタイムに適用されるのです。リアルタイムコラボレーションができれば、作業効率が大幅にアップしますし、従来のワークフローでは生まれなかったアイデアを生み出すこともあるでしょう。

 

アカウントの登録

まず、以下のリンクにアクセスします。

https://cacoo.com/lang/ja/

中央の「無料ではじめる」あるいは右上の「アカウントを作成」をクリックします。

cacoo_p_1

メールアドレスとパスワードを設定してアカウントを新規作成します。
また、GoogleFacebookTwitterいずれかのアカウントがある場合はそれを使用して登録することもできます。

cacoo_p_2

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

プロジェクトの作成と作業画面の使い方

アカウントを作成してログインすると管理画面が表示されます。

無料プランでは最大25個のプロジェクトを管理することができます。
「新しい図を作成」をクリックします。

cacoo_p_3

使用できるテンプレートの一覧が表示されます。今回は「ワイヤーフレーム」を使用しています。

cacoo_p_4

作業画面が表示されます。

cacoo_p_5

画面上のこの部分を調整すると作業画面の拡大・縮小ができます。

cacoo_p_6

上メニューの各アイコンからスクリーン上に図形や文字を入れたり、直接手描きをすることができます。

cacoo_p_7

各テンプレートには「ステンシル」と呼ばれる素材が配置されています。それぞれのステンシルはドラッグによって拡大・縮小や移動を行うことが可能です。

cacoo_p_8

また、ステンシル上で右クリックするとメニューが表示され、コピーやペースト、削除などの操作ができるようになっています。

cacoo_p_9

ステンシルは画面内の好きな場所に追加することができます。
「ステンシル」メニューのウィンドウから設置したい素材を選びます。今回は「Webサービス」からアイコンを使用しています。

cacoo_p_10

使用したいステンシルを選び、画面内にドラッグ&ドロップすることでスクリーン上に追加されます。

cacoo_p_11

テキストボックスなどの素材を配置した場合は、その中をダブルクリックすることによって自由に文字を入力することができます。フォントの種類や大きさは「インスペクタ」メニューのウィンドウから変更が可能です。

cacoo_p_13

また、「インスペクタ」「ステンシル」といった各ウィンドウは作業しやすい位置に自由に動かしたり、大きさを変えたりすることができるようになっています。

cacoo_p_12

画面内にはステンシル以外にも自分で用意した画像を挿入することができます。
デスクトップなどから画像ファイルを直接画面内にドラッグ&ドロップすることで画像が追加されます。

cacoo_p_14

追加した画像もステンシル同様に拡大・縮小・移動が可能です。

cacoo_p_15

 

ファイルの保存・エクスポート・共有

作成したワイヤーフレームなどを保存する場合は画面の一番右上にある「図の保存」をクリックし、ファイル名を設定して保存します。

cacoo_p_16

「エクスポート」タブをクリックするとPNG・PDFなどのファイル形式で作成したものを書き出すことができます。
(※無料プランの場合はPNG形式でのみエクスポートが可能です)

cacoo_p_17

「共有」タブをクリックすると、他のユーザーを招待して作成したものを共有することができます。

cacoo_p_18

 

Cacooストアを利用する

各種ステンシルは最初から用意されているものの他に、公式や他のユーザーが作成したものをインストールして利用することができます。
「ステンシル」ウィンドウから「Cacooストアでステンシルを探す」をクリックします。

cacoo_p_19

Cacooストアのページが表示されます。
各種素材は「Cacooポイント」を使用することで購入が可能です。無償の素材もここで入手することができます。
また、自分で作成したステンシルやテンプレートをストアに出品することもできます。申請・出店に料金はかかりません。

cacoo_p_20

 

Cacooの使い方は以上です。

今回は用意されたテンプレートをベースにワイヤーフレームを作成していきましたが、もちろん白紙の状態からも作成できます。

ぜひ自分でも使ってみてください!

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Cacooを使ってワイヤーフレームも作成します。