Cacooで「お問い合わせ」ボタンを作ってみよう

以前、このブログの記事「Cacooで図を描こう！」でとっても便利な作図ツール「Cacoo」をご紹介しましたが、今回は実際の活用例を想定して使い方を解説します。

Cacooの特長である、作成した図をそのままWEBサイトなどで使えるという機能を利用して、企業サイトでよく使う「お問い合わせ」ボタンを作ってみたいと思います。

下のボタンを作ってみましょう。
作り方から、サイトへの設置方法を説明していきます。

1.お問い合わせボタンを作る

アカウントを作成してログインしたら、「新しい図を作成」をクリックしてさっそく作図してみましょう。

図を編集する画面は、上部にアイコンやメニューが並んで、画面の右の方に「インスペクタ」と「ステンシル」が見えています。
まず、「ステンシル」を選びましょう。

「基本」の中にある四角や丸の中から、好きな形を選びます。
ここでは、少し角が丸くなった四角のパーツを使うことにします。
選んだパーツをドラッグ＆ドロップで画面の中に連れてきます。



連れてきたパーツをボタンらしく横長に変形します。
四隅や辺の中心にある小さな四角にマウスポインタを合わせると左右の矢印マークになり、変形することができます。



ボタンのスタイル（デザイン）を選びます。
上部のアイコンから、緑色の四角をクリックすると、10色×10種類のスタイルが表示されるので、そこから好きなスタイルを選びます。
ここでは、ボタンらしくふくらんで見えるように、上から下に向かって色が濃くなるものを選びました。



これでボタンの土台ができました。



次に文字を入れます。
パーツをダブルクリックすると文字が入力できるようになりますので、ボタンに書きたい文字を入力します。
ここでは、「お問い合せはこちらから」と入力しました。



文字を太字にし、文字サイズを大きくします。
「インスペクタ」の「A」のタブで「B」のボタンをクリックすると太字になります。
「サイズ」のところで、文字サイズを選びます。
余談ですが、目立たせようとしてぎりぎりまで文字サイズを大きくしてしまうと素人っぽくなってしまいます。周囲に適度な余白を持たせるときれいに仕上がります。



これで、ボタンは完成です。
作ったボタンを保存しましょう。
「タイトル」にわかりやすい名前を入力し、公開設定にチェックを入れて保存します。
ここで公開設定にチェックを入れると、あとでWEBサイトに表示させることができるようになります。



編集画面を終了します。
いきなりブラウザやブラウザのタブを閉じないで、Cacooの画面内、右上にある×印をクリックして終了してください。

2.ホームページに埋め込む

作ったボタンをホームページに設置します。
まず、図のアドレス（URL）を調べます。

「図の一覧」画面に保存されている図が表示されますので、作ったボタンをクリックします。


次の画面で、「リンク」をクリックすると下記のような画像URLが表示されます。
https://cacoo.com/diagrams/××××××××××.png

これをコピーします。
URLをなぞってコピーしてもいいですが、画像URLの右のクリップボードのアイコンをクリックすると簡単です。



あとは、この画像URLをWEBサイトで呼び出してあげればOKです。

こんな感じで表示されますので、この画像にお問い合わせフォームへのリンクを付けてあげれば完成です。



HTMLのソースの書き方は、下記のような感じです。

<a href="お問い合わせフォームのURL"><img src="画像URL" alt="お問い合せはこちらから" /></a>

WEBサイトにお問い合わせフォームへのボタンがなかったら、ぜひお試しください。
サイトからのお問い合せが増えるかも！？

文字を変えれば、「資料請求」「詳しくはこちら」など、いろいろなボタンを作ることもできますね。


★こちらからCacoo登録していただくと、5シート追加されます。
→新規アカウント登録