オンラインで豊富なパーツから色々な画像を作れるCacoo.comは高機能、無料!

説明のための画像を作るため、無料で使えるWebサービス「オンライン・ドローイングツール Cacoo (カクー)」をずいぶん前から使っています。ローカルPCではFireworksを使ったりもしますが、Cacooのいいところはパーツやテンプレートが豊富で可愛いデザインのものが多いことです。
今回、プラグインを作るために画面をCacooで作ってみたのでCacooの新規登録から作った画像の公開まで書いてみたいと思います。

オンライン・ドローイングツール Cacoo (カクー)とは?新規登録する

Cacoo.com

ブラウザでログインして、ブラウザで画像を作成できるツールです。

アカウントを作成 をクリックして、

この画面からSNSのアカウントを使ったり、メールアドレスでアカウントを新規作成することができます。

Cacooの使い方 ステンシルを使って図形を作る

最初にログインすると、この はじめに という説明ページが表示されます。

通常は、

図の一覧 をクリックして画像を作成します。

作成した図の一覧画面です。最初は何も作っていないのであと25枚無料で作成できることがわかります。この枚数は はじめに のページで書いてある目標を達成したり、有料プランに入ったりして増やすことができます。

まずは

+新しい図を作成 をクリックします

テンプレートを選択する画面です。ワイヤーフレームだけでもたくさんの種類があるのですが、

とりあえず今回は空白のテンプレートで始めます。クリックして、

選択 をクリックします

WordPressのプラグインのダッシュボードのイメージを作りたいと思います。まずは左のメニュー部分を作ります。

ステンシル>基本 をクリックして



四角をドラッグ
して、

ドロップします。

ドロップした四角の大きさを変えて大体メニュー部分ぐらいの大きさにします。

WordPressのダッシュボードのハードコピーをとってファイルとして保存しておきます。これを

Cacooの画面にある PC上の画像を挿入 ボタンをクリックして、

アップロードします。

こんな感じで、画像がアップロードされました。

メニュー用に作ってあった四角に合わせます

メニュー用に作ってあった四角を選択して、

塗りの色をクリックし、

スポイトをクリックして、先ほどアップロードした

メニュー部分の背景色のところでクリックします

ダッシュボードっぽくなりました。あとは右フレームを同様の手順で作ります。

こんな感じでダッシュボードの下地ができました

Cacooの使い方 文字やフォーム部品を入れる

文字

上部のこのボタンをクリックしてから

文字を入れたい部分でクリック&ドラッグして文字の枠を作ります。

文字を入力して

フォントや大きさ、色を変更します。

次にチェックボックスを入れます。

ステンシル>ウェブ>ワイヤーフレーム をクリック



チェックボックス
を任意の場所にドラッグ&ドロップします。

文字を消したり

コピーしたりして、画面を作っていきます。パーツを動かすときに中心線などが表示されるので揃えやすいです。

こんな感じで大体できあがりました。

図の保存と利用

右上にある 図の保存 をクリックし

出て来た画面で名前を付けて 保存 をクリックします

図の一覧画面に戻り、今作った画像が表示されています。

Cacooで作成した図は色々な方法で利用することができます。

使いたい図をクリックして

この画面から、

エクスポート をクリックし、 PNGでエクスポートをクリックすることでローカルPCに図をPNG形式で保存することができます。

無料で保存できる形式はPNGのみですが、

他の形式をクリックすると、

3回までお試しで利用することができるようです。

他にも

共有ユーザー の 編集 をクリックして

ールアドレスやコメントを入力し、この図を共有するユーザーを招待することができます。

作った図をWebで利用する

作った図はWordPressのblogなどに貼り付けて使いたいと思います。先ほどの画面で

リンク をクリックします

3つのリンクが表示されますが2つめの 図ビューアの埋め込みコード というものを使ってみます。コードをコピーしてWordPressの投稿画面に貼り付けてみてみます。

表示してみるとこんな感じで(^_^;、Cacooのログイン画面になってしまいました。ログインしていなくても表示出来るようにしたいと思います。

右上にある 図の操作>図の設定 をクリック

公開設定 のところにある URLで図を公開 のチェックボックスにチェックを入れて、

OK をクリックします。これで先ほどのblogを再表示すると

表示されました!しかし、大きさが小さい、、ので貼り付けコードのwidthとheightを変更してみたのですが、

全体は表示されたのですが、小さい、ということで別の方法で貼り付けてみることにします。リンクをクリックし

各シートの画像URLということろの右にある、コピーボタンをクリック(先ほどもこれで良かったみたいでした)、WordPressの投稿画面で、他の画像のコード(<img …)をコピーしてURLだけ今コピーしたものに置き換えて保存して表示しました。

するとちゃんと大きく、表示されました!先ほどまで貼り付けていた図と変わったのですが、これは後で修正したものが反映されたからです。CacooのURLで貼り付けておくと、修正は自動的に反映されるので修正も楽にできます。

オンライン画像編集ソフトはとても便利

このようにローカルPCの画像ソフトのように機能が豊富なCacooです。オンラインであるために、WordPressなどで使うときにいちいちファイルをPCに保存してアップロードするような手間もかかりませんし、共同して作業することも可能です。

今回は紹介しきれませんでしたが私がCacooを使いたい理由に人物パーツが豊富ということもあります。

ポップで使いやすい人物パーツが多いので、説明するときの図などによく使っています。

また

Cacooストア

にもたくさんパーツやステンシルがあり、ほとんどのものが無料で利用できます。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。