説明のための画像を作るため、無料で使えるWebサービス「オンライン・ドローイングツール Cacoo (カクー)」をずいぶん前から使っています。ローカルPCではFireworksを使ったりもしますが、Cacooのいいところはパーツやテンプレートが豊富で可愛いデザインのものが多いことです。
今回、プラグインを作るために画面をCacooで作ってみたのでCacooの新規登録から作った画像の公開まで書いてみたいと思います。
オンライン・ドローイングツール Cacoo (カクー)とは？新規登録する
ブラウザでログインして、ブラウザで画像を作成できるツールです。
アカウントを作成 をクリックして、
この画面からSNSのアカウントを使ったり、メールアドレスでアカウントを新規作成することができます。
Cacooの使い方 ステンシルを使って図形を作る
最初にログインすると、この はじめに という説明ページが表示されます。
通常は、
図の一覧 をクリックして画像を作成します。
作成した図の一覧画面です。最初は何も作っていないのであと25枚無料で作成できることがわかります。この枚数は はじめに のページで書いてある目標を達成したり、有料プランに入ったりして増やすことができます。
まずは
+新しい図を作成 をクリックします
テンプレートを選択する画面です。ワイヤーフレームだけでもたくさんの種類があるのですが、
とりあえず今回は空白のテンプレートで始めます。クリックして、
選択 をクリックします
WordPressのプラグインのダッシュボードのイメージを作りたいと思います。まずは左のメニュー部分を作ります。
ステンシル＞基本 をクリックして
四角をドラッグして、
ドロップします。
ドロップした四角の大きさを変えて大体メニュー部分ぐらいの大きさにします。
WordPressのダッシュボードのハードコピーをとってファイルとして保存しておきます。これを
Cacooの画面にある PC上の画像を挿入 ボタンをクリックして、
アップロードします。
こんな感じで、画像がアップロードされました。
メニュー用に作ってあった四角に合わせます
メニュー用に作ってあった四角を選択して、
塗りの色をクリックし、
スポイトをクリックして、先ほどアップロードした
メニュー部分の背景色のところでクリックします
ダッシュボードっぽくなりました。あとは右フレームを同様の手順で作ります。
こんな感じでダッシュボードの下地ができました
Cacooの使い方 文字やフォーム部品を入れる
文字は
上部のこのボタンをクリックしてから
文字を入れたい部分でクリック&ドラッグして文字の枠を作ります。
文字を入力して
フォントや大きさ、色を変更します。
次にチェックボックスを入れます。
ステンシル＞ウェブ＞ワイヤーフレーム をクリック
チェックボックスを任意の場所にドラッグ&ドロップします。
文字を消したり
コピーしたりして、画面を作っていきます。パーツを動かすときに中心線などが表示されるので揃えやすいです。
こんな感じで大体できあがりました。
図の保存と利用
右上にある 図の保存 をクリックし
出て来た画面で名前を付けて 保存 をクリックします
図の一覧画面に戻り、今作った画像が表示されています。
Cacooで作成した図は色々な方法で利用することができます。
使いたい図をクリックして
この画面から、
エクスポート をクリックし、 PNGでエクスポートをクリックすることでローカルPCに図をPNG形式で保存することができます。
無料で保存できる形式はPNGのみですが、
他の形式をクリックすると、
3回までお試しで利用することができるようです。
他にも
共有ユーザー の 編集 をクリックして
メールアドレスやコメントを入力し、この図を共有するユーザーを招待することができます。
作った図をWebで利用する
作った図はWordPressのblogなどに貼り付けて使いたいと思います。先ほどの画面で
リンク をクリックします
３つのリンクが表示されますが２つめの 図ビューアの埋め込みコード というものを使ってみます。コードをコピーしてWordPressの投稿画面に貼り付けてみてみます。
表示してみるとこんな感じで(^_^;、Cacooのログイン画面になってしまいました。ログインしていなくても表示出来るようにしたいと思います。
右上にある 図の操作＞図の設定 をクリック
公開設定 のところにある URLで図を公開 のチェックボックスにチェックを入れて、
OK をクリックします。これで先ほどのblogを再表示すると
表示されました！しかし、大きさが小さい、、ので貼り付けコードのwidthとheightを変更してみたのですが、
全体は表示されたのですが、小さい、ということで別の方法で貼り付けてみることにします。リンクをクリックし
各シートの画像URLということろの右にある、コピーボタンをクリック(先ほどもこれで良かったみたいでした)、WordPressの投稿画面で、他の画像のコード(<img …)をコピーしてURLだけ今コピーしたものに置き換えて保存して表示しました。
するとちゃんと大きく、表示されました！先ほどまで貼り付けていた図と変わったのですが、これは後で修正したものが反映されたからです。CacooのURLで貼り付けておくと、修正は自動的に反映されるので修正も楽にできます。
オンライン画像編集ソフトはとても便利
このようにローカルPCの画像ソフトのように機能が豊富なCacooです。オンラインであるために、WordPressなどで使うときにいちいちファイルをPCに保存してアップロードするような手間もかかりませんし、共同して作業することも可能です。
今回は紹介しきれませんでしたが私がCacooを使いたい理由に人物パーツが豊富ということもあります。
ポップで使いやすい人物パーツが多いので、説明するときの図などによく使っています。
また
にもたくさんパーツやステンシルがあり、ほとんどのものが無料で利用できます。
[amazon_searchlink search=”プレゼンテーション”]
コメント