ワイヤーフレームを無料で作れる！「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形式でのみエクスポートが可能です)
「共有」タブをクリックすると、他のユーザーを招待して作成したものを共有することができます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
Cacooストアを利用する
各種ステンシルは最初から用意されているものの他に、公式や他のユーザーが作成したものをインストールして利用することができます。
「ステンシル」ウィンドウから「Cacooストアでステンシルを探す」をクリックします。
Cacooストアのページが表示されます。
各種素材は「Cacooポイント」を使用することで購入が可能です。無償の素材もここで入手することができます。
また、自分で作成したステンシルやテンプレートをストアに出品することもできます。申請・出店に料金はかかりません。
Cacooの使い方は以上です。
今回は用意されたテンプレートをベースにワイヤーフレームを作成していきましたが、もちろん白紙の状態からも作成できます。
ぜひ自分でも使ってみてください！
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Cacooを使ってワイヤーフレームも作成します。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
