サイト制作

便利なツール「cacoo(カク―)」を紹介

cacoo(カクー)って何?
便利なツールなの?

Webデザインなどで使用している方はご存じかもしれません。

Webデザインのサイト設計や、ワイヤーフレーム制作によく使われます。

わたしは、Webデザインの場面だけでなく、ブログの記事の中で図で説明したりするときの図を作成するのにも使っています。

サイト設計やワイヤーフレーム制作について知りたい方はこちらの記事もあわせてどうぞ。

Webデザインの流れ【初心者向け】今回はWebデザインの流れをお伝えします。 基本的にはWebデザインの流れは以下のようになります。 ①企画 ②サイ...
スポンサーリンク

cacooとは?

冒頭でも軽くお話ししましたが、Webデザインのサイト設計や、ワイヤーフレーム制作をはじめ、図などの作成にも向いているツールです。

cacooはフローチャート、ワイヤフレーム、UML図、ネットワーク構成図などを作成して安全に共有するためのオンライン作図ツールです。

作成したツールはオンラインで保存されるので、ネット環境があればすぐ開け、さらに他のユーザーと共有できます。

ワイヤーフレーム制作にはillustratorなどを使われる方もいるかもしれませんが、cacooは無料で使えるツールです。特別何かダウンロードする必要はありません。

Web上で使用でき、無料です。

有料プランと無料プランがありますが無料プランでも全然使えます。

無料プランでは、作成できるシートに制限が出ますが、図の作成のための機能は有料プランと同じに使えます。

cacooの始め方

「cacoo」にアクセスし、アカウントを登録するだけです。

メールアドレスとパスワードを設定するだけです。もしGoogle、Facebook、Twitterなどのアカウントを持っている場合はそちらを利用することもできます。

新しい図を作る方法

①登録したメールアドレスとパスワードでログインする
②新しい図を作る

①登録したメールアドレスとパスワードでログイン

「Keep me logged in」に☑を入れておくと、次回からわざわざメールアドレスとパスワードを入力しなくてもよいので、チェックを入れるのをオススメします。

②新しい図を作る

「新しい図を作成」をクリックする

開くとこんな画面になります。

ここが作業画面になります

ツールバーの使い方

左側に並んでいるツールバーの解説をしていきます。

ツールバーは上から順に

  • カーソルボタン
  • 図形
  • テキスト
  • ライン
  • フリーハンド
  • テーブル
  • テンプレート
  • グラフ
  • 挿入
  • コメント

となっています。

カーソルマーク

ここを押すと、カーソルモードになります。
既に張り付けた図形や文字などをタッチしたり、図形挿入モードを解除する場合にはこちらを押します。

図形

図形を表示します。

使い方は使用したい図形をクリックし、ドラッグしてキャンバスに乗せるだけです。

 

 

 

 

 

 

 

 

 

図形にはいくつか種類があります。

基本系やフローチャートなどバリエーションが豊富です。
Webサイトのワイヤーフレーム制作にも使いやすいラインナップになっています。

テキスト

テキストを押すと文字が挿入できます。

ボタンを押してテキスト専用カーソルに切り替わったら、キャンバス上にクリックしながら枠を作るだけ。そして文字を入力するだけです

ちなみに、図形の中に文字を入力する場合は、図形をダブルクリックしても入力できます。

[jin_icon_arrowtop color=”#e9546b” size=”20px”]これは四角の図形の中に文字入力しようとしています。

ライン

ラインは、直線や曲線を引くことが出来ます。

図形から図形をつなぐ場合など、アシストも出るので便利です。

フリーハンド

フリーハンドは、直線でも曲線でもなく、自由に線を書きたいときに便利なツールです。

テーブル

テーブルは、表が作れるツールです。

テンプレート

これはcacooのすばらしい機能の1つです。

色んなテンプレートが使用することがあるので大変便利です。

グラフ

グラフも何種類か用意されています。

試しに棒グラフを開いてみるとこんな感じです。
数値や、項目も自由に変えられるので便利な機能です。

挿入

挿入は、画像などを入れたい場合に使用できます。
挿入画像サイズは上限がある場合があるので画像サイズには注意です。

コメント

コメントは作成した図に対してコメントが出来ます。

コメントをしたいところをクリックして配置させ入力します。

この機能は、データを共有した際に、他者からアドバイスをもらう際などに便利です。
コメントに返信も出来ます。

共有、保存の方法

共有や保存方法を説明します。

共有

他の人と共有できる便利な機能です。右上の「共有」ボタンを押します。

そうすると下のような画面に移ります。

「リンクを知っている全員が」閲覧可をONにするとリンクを知っている他者と共有できます。

保存方法

Web上には自動的に保存されていますが、もしこれを画像などのデータとしてPC上に保存したい場合はこちらで行っていきます。

保存(エクスポート)を押すと、PNG・SVG・PDF・PS・PPTまたは印刷が選べます。

図のようなものを画像として保存するなら「PNG」で良いと思います。

まとめ

このようにcacooはとても使いやすい素晴らしいツールです。
サイト設計やワイヤーフレーム制作だけでなく、多岐の分野で使えるツールだと思います。ぜひみなさんも使ってみてください。

Webデザインが学べるオンラインスクールの特徴ネット社会の今、Webデザインに興味がある人も多いのではないでしょうか。 現在、Webデザイン関連のことが学べるオ...
Webデザインはなぜ必要か【Webデザインの概要とサイト設計で大事なこと】 Webデザイナーを目指して思っているみなさん。 そもそも「Webデザイナとは何か」と思っている方も多いかもしれません。...
配色について知ろう!配色って、様々な場面において重要になります。 広告を作る サイトを作る ブログの色を変える イラストを描く ...



スポンサーリンク

ABOUT ME
みき
現在看護師をしながら、フリーランスWebデザイナーとして活動しています。将来、海外移住を目指しています。カナダに滞在歴あります。「看護師」「海外渡航」「Webデザイン」など幅広く発信中。