当サイトには広告が含まれております

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

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

説明のための画像を作るため、無料で使える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ストア

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

[amazon_searchlink search=”プレゼンテーション”]

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る