ワイヤーフレームを無料で作れる！「Cacoo」の使い方
「Cacoo（カクー）」の使い方を解説した記事です。無料で使えて、Web上で共有できるワイヤーフレームの作成ツールです。他の人と共有して使う方法のほか、PNGやPDF形式でエクスポートする方法も紹介しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ワイヤーフレームを作成するときは、Illustratorなどを使う人が多いと思いますが、無料で作成できるワイヤーフレームのツールもあります。
Illustratorのようなデスクトップアプリケーションの場合、チームの他のメンバーと共有するためにはいちいちファイルサーバにコピーしなければいけなかったり、外部の企業にチェックしてもらうためにメールに添付して送らなければならなかったりと不便な点があることも事実です。また、共有するメンバーがIllustratorを持っていなければPDFなどの形式に変換する手間も掛かります。
そこで今回は、ワイヤーフレーム作成の定番ツールであるCacoo（カクー）の使い方を紹介します。
Cacooとは
Cacooはウェブアプリケーションのドローイングツールです。特別なアプリケーションをインストールすることなく、ウェブブラウザだけでワイヤーフレームなどの図を作成することができます。ドローツールとしての機能は一通り揃っているほか、ウェブアプリケーションならではの共有機能でリアルタイムコラボレーションも可能です。海外のツールですが、日本語で使うことができます。
Cacooには無料プランと有料プランがあります。無料プランでも図を作成する機能はフルに使用できますが、作成できるシートが25枚までなど、いくつか機能に制限があります。
ウェブアプリケーションですので、他のメンバーやクライアントに提出する際も、データに共有設定を施してURLを連絡するだけです。ウェブブラウザさえあれば閲覧できますので、PDFなどの形式に変換する手間も必要ありません。
そして、リアルタイムでのコラボレーション作業ができるというメリットもあります。
データを共有したメンバーが同時にデータにアクセスし、施した変更が他のメンバーの画面でもリアルタイムに適用されるのです。リアルタイムコラボレーションができれば、作業効率が大幅にアップしますし、従来のワークフローでは生まれなかったアイデアを生み出すこともあるでしょう。
アカウントの登録
まず、以下のリンクにアクセスします。
中央の「無料ではじめる」あるいは右上の「アカウントを作成」をクリックします。
メールアドレスとパスワードを設定してアカウントを新規作成します。
また、Google・Facebook・Twitterいずれかのアカウントがある場合はそれを使用して登録することもできます。
プロジェクトの作成と作業画面の使い方
アカウントを作成してログインすると管理画面が表示されます。
無料プランでは最大25個のプロジェクトを管理することができます。
「新しい図を作成」をクリックします。
使用できるテンプレートの一覧が表示されます。今回は「ワイヤーフレーム」を使用しています。
作業画面が表示されます。
画面上のこの部分を調整すると作業画面の拡大・縮小ができます。
上メニューの各アイコンからスクリーン上に図形や文字を入れたり、直接手描きをすることができます。
各テンプレートには「ステンシル」と呼ばれる素材が配置されています。それぞれのステンシルはドラッグによって拡大・縮小や移動を行うことが可能です。
また、ステンシル上で右クリックするとメニューが表示され、コピーやペースト、削除などの操作ができるようになっています。
ステンシルは画面内の好きな場所に追加することができます。
「ステンシル」メニューのウィンドウから設置したい素材を選びます。今回は「Webサービス」からアイコンを使用しています。
使用したいステンシルを選び、画面内にドラッグ＆ドロップすることでスクリーン上に追加されます。
テキストボックスなどの素材を配置した場合は、その中をダブルクリックすることによって自由に文字を入力することができます。フォントの種類や大きさは「インスペクタ」メニューのウィンドウから変更が可能です。
また、「インスペクタ」「ステンシル」といった各ウィンドウは作業しやすい位置に自由に動かしたり、大きさを変えたりすることができるようになっています。
画面内にはステンシル以外にも自分で用意した画像を挿入することができます。
デスクトップなどから画像ファイルを直接画面内にドラッグ＆ドロップすることで画像が追加されます。
追加した画像もステンシル同様に拡大・縮小・移動が可能です。
ファイルの保存・エクスポート・共有
作成したワイヤーフレームなどを保存する場合は画面の一番右上にある「図の保存」をクリックし、ファイル名を設定して保存します。
「エクスポート」タブをクリックするとPNG・PDFなどのファイル形式で作成したものを書き出すことができます。
(※無料プランの場合はPNG形式でのみエクスポートが可能です)
「共有」タブをクリックすると、他のユーザーを招待して作成したものを共有することができます。
Cacooストアを利用する
各種ステンシルは最初から用意されているものの他に、公式や他のユーザーが作成したものをインストールして利用することができます。
「ステンシル」ウィンドウから「Cacooストアでステンシルを探す」をクリックします。
Cacooストアのページが表示されます。
各種素材は「Cacooポイント」を使用することで購入が可能です。無償の素材もここで入手することができます。
また、自分で作成したステンシルやテンプレートをストアに出品することもできます。申請・出店に料金はかかりません。
Cacooの使い方は以上です。
今回は用意されたテンプレートをベースにワイヤーフレームを作成していきましたが、もちろん白紙の状態からも作成できます。
ぜひ自分でも使ってみてください！
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Cacooを使ってワイヤーフレームも作成します。
