ワイヤーフレームを無料で作れる!「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などの形式に変換する手間も必要ありません。

 

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

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

 

アカウントの登録

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

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

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料体験 に参加してみませんか?

初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービスすべて無料で体験 できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら体験者限定の割引特典付き! 無料体験はこちら

Cacooストアを利用する

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

cacoo_p_19

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

cacoo_p_20

 

Cacooの使い方は以上です。

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

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

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

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する