制作のご相談はこちら
Cacooを利用してワイヤーフレームを作成しよう

2014年09月05日

Cacooを利用してワイヤーフレームを作成しよう

WEBデザイナーとして欠かせない作業の1つが「ワイヤーフレームの作成」です。
ワイヤーフレームとは「サイトデザインの骨組み」のことです。

今までワイヤーフレームを作成する際はExcelまたはIllustratorで作成していたのですが、
何かと細かい所で不便だなと思う所がありました。

そう思っていた所にCacooというオンラインサービスの存在を知り、
実際に使ってみたらとても使いやすく、それからワイヤーフレーム作成にCacooを使用しています。

Cacooとは

cacoo トップページ
株式会社ヌーラボが提供しているWeb上で図の作成、公開、リアルタイムコラボレーションができるドローツールです。
サイトマップやワイヤーフレーム、フローチャート、マインドマップ、UML、ネットワーク図などの図を簡単に作成できます。
しかも無料プランもあります。
(Backlogと同じ会社とは!こちらのサービスもオススメです。)

無料プランはある程度制限がありますが、最初のトライアル程度でしたら無料プランで十分です。

Cacooでのワイヤーフレーム作成方法

STEP1

アカウントを新規作成しログイン後、「新しい図を作成」をクリックします。
2

 

STEP2

1からワイヤーフレームの作成も可能ですが、今回はテンプレートを使用します。
お好きなテンプレートを選び、「選択」をクリックします。
 
3

 

STEP3

テンプレートが画面上に表示されました。ここからお好きなように修正していきます。
まずテキストを修正してみましょう。
テキストを修正したい場合は対象のテキストをダブルクリックします。するとテキストが打ち込めるようになります。
 
4
 

「Logo」から「Title」に修正できました。
 
5

 

STEP4

次はSNSアイコンを設置してみます。
ステンシルツールの「ウェブ」→「Webサービス」の中にSNSボタンがあります。
ボタンを選択し、ドラッグ&ドロップで設置したい位置までカーソルで持っていきます。
 
6_1

 

ハートアイコンの下に設置できました。
 
6_2

 

また、色を変えることもできます。
 
7_1

STEP5

作成したワイヤーフレームを保存したい場合は、画面右上の「図の保存」をクリックします。
 
7_2

 

名前を入力し、フォルダはなしで問題ないです。
種別は「通常の図」を選択し、保存をクリックします。
※ステンシル…各シートに含まれる図形をステンシルツールから選択できるようになります。
※テンプレート…保存した図をテンプレートから選択できるようになります。
 
8

 

一覧ページにワイヤーフレームが保存されました。
 
9

図の共有方法

編集画面右上の「共有」ボタンをクリックします。
 
10

招待するメールアドレスとメッセージを入力し、「招待」ボタンをクリックします。
これで簡単に共有が可能です。

図の出力方法

ログイン後のトップページから対象の図を選択し、画面右上の「エクスポート」ボタンからエクスポートしたい形式をクリックします。
※フリープランの場合はPNG形式のみの出力が可能です。
12
 
 
PNGで出力できました。
 
13
 
 
簡潔ではございますが、
ぜひご参考にしてみてください。