読者です 読者をやめる 読者になる 読者になる

【絵が下手でもできる!】ocacooを使ってサイトマップやマインドマップを作ってみた

WEB制作

【スポンサーリンク】

cacooで作ってみたアイキャッチ

今週になって会社に新人が5人も入ってきてビックリしている苦労詐欺だ。
別の課の新人だから、そこまで気にならないけど、一気に人増えた感がすごいw

今月末に歓送迎会をやるらしいのだが、会社の飲み会は時間の無駄だと思ってるから、速攻で欠席を申請しといた。
気心知れた仲間と美味しい酒を飲むならまだしも、会社でしか付き合いのない人達と美味しい酒が飲めるとは全然思えないんだよな。

近況報告が済んだところで、今回は↓の「SEOに強いサイト作り」に関して書いた記事内で紹介したcacooをちゃんと紹介してみようかと。
実際に使ってサイトマップやマインドマップ・ワイヤフレームなんかを作ってみるよ。

 

WEBサイト制作に使えるcacoo

WEBサイト制作に使える

以前紹介した記事でも書いたんだけど、このcacooってサイト、WEBサイト制作に利用するにはピッタリのサイトだよ。
アカウント登録性だから、アカウントを作らないといけないけど、Google・Facebook・Twitterどれかのアカウントを持っていれば、アカウントを作らずに連携させることでサイトを利用することができるよ。

親切なことに初めての利用者のために簡単なチュートリアル機能までついてるよ。
初めて使ってみるのならチュートリアルは一通りやっておこう。

このcacooの魅力は何と言っても様々なテンプレートが用意されていることだよ。
チュートリアルが終わって編集画面になったら、上部にあるボタンの中から↓画像の「テンプレートから選択して挿入」をクリック

テンプレートから選択

すると以下のようなカテゴリーの中からテンプレートを選択することができるよ。

これだけの多種多様なテンプレートが揃っていて、殆どが無料で利用することができるcacooだけど、一部は有料になってるよ。
カテゴリーの中に「購入済みテンプレート」ってのがある通り、有料のテンプレートが存在してるのと、無料だと図が6個までしか作れないってところ。

一度にワイヤフレームやサイトマップを多数同時に作らないといけないとかじゃない限りは無料で問題ないかと思う。
図が6個埋まっててもいらないやつを消して新たに作るとかすれば無料で使い続けることができちゃうよ。

cacooってこんなにカテゴリーあるのか。

有料のテンプレートが存在しているけど、無料でも全然使えるレベルね。

各カテゴリー内のテンプレートも多数あるんだろうな。

意外と、2個ぐらいしかテンプレートがないカテゴリーとかもあるわよ。

…だから有料のものが存在しているのか(;・∀・)

cacooはGoogle・Facebook・Twitterアカウントを持っていれば連動させて利用することができて、簡単なチュートリアル機能もついてるよ。
魅力は何と言っても始めから用意されている14種類の様々なテンプレートだよ。
一部有料で、テンプレートと作れる図の枠が有料になってるよ。

このブログのサイトマップを作ってみた

それじゃあ、さっそくサイトマップのテンプレートを使って、このブログのサイトマップを作っていくよ。

1.先程のカテゴリー内から「サイトマップ」を選択し、表示されたテンプレートの中から「サイトマップ2」を選んで、右下の「選択」ボタンをクリック
サイトマップ2を選択
2.すると編集画面にテンプレートが反映されて、ここから自由に編集することができるよ。
テンプレートを自由に編集

オブジェクトの移動や追加・削除・コピーだとか、中に書かれている文字の変更も他の画像編集ソフトとかと同じような操作感覚でできちゃうよ。
矢印や線も編集したいところをクリックして、表示された□をドラッグして移動させれば、自動で指定したオブジェクトと接続してくれるよ。

3.上側の画像の□部分をドラッグして、画像内下側のオブジェクトに持っていけば下側画像のように接続してくれるよ
□をドラッグ
下側オブジェクトと接続

ちなみに失敗しても「Ctrl+z」で前の状態に戻すこともできるよ。
では、これを使って早速このブログのサイトマップを作成~♪

SEOブログサイトマップ

大分質素な感じになったけど、まぁ、数分でお手軽にこんな感じで作れちゃうよ。
緑色の背景つけてある部分が今後カテゴリーとして作って、ヘッダーナビゲーションとしてサイトのヘッダー部分に追加する予定だよ。

できた図は右上の「図の保存」で保存ができるようになっているよ。
他にも右上にある「共有」でオンライン上の相手と共有させることもできるし、同じく右上にある「エクスポート」でpngやpdfとしてローカルに保存することもできるよ。

へ~、それにしてもやたらと内容の薄いサイトマップだなぁ

それ以上本人の精神にダメージを与えるのは止めてあげて。

サイト分けさした時にカテゴリーをあまり考えずにやったから、今更どうしよう状態になってるのよ。

俺らの紹介ページはあるのに本人のプロフィールページすらないもんな~

流れとしては「テンプレート指定→オブジェクトの移動・削除・追加→保存・エクスポート」この3~4ステップぐらいで作れるよ。
「Ctrl+z」で前の状態に戻せたり、コピー&ペーストができたり、画像編集ソフトと似たような操作性だから、初心者でもお手軽に使えるよ。
プロフィールは…今月中には…どうにか…したい…orz

苦労詐欺のマインドマップを作ってみた

続いてはマインドマップの作成を…マインドマップってなんだ?
どんな感じになるのかとかはわかるんだが、実際に作ってみたことがなかったからちょっと調べた。

自分が考えたいテーマを紙の中央に絵で描き、そこから放射状に枝を伸ばして、キーワードやイメージを繋げながら、発想を広げていきます。 マインドマップは、脳に本来備わる情報処理プロセスを活用した思考法です。
引用元:マインドマップとは?│速読術やスキルアップ講座のALMACREATIONS

φ(゚Д゚ )フムフム…キーワードやイメージを繋げて発想を広げていくわけだな。
こうゆうのはネタ切れとかした時にやると、新たなネタを発見できて良いかもしれない。

僕の雑記ブログのネタ出し用マインドマップを作ってみることにしたよ。
サイトマップと同じようにテンプレートから今度は「マインドマップ」→「マインドマップ2」のテンプレートを使ってやってみるよ。

雑記ブログ用マインドマップ作成

やってみると、意外と出てくるもんだね。
ゲーム・漫画の偏り感すごいけど、アニメや音楽もまだ記事にしてないようなネタがいくつか出てきたよ。

これ意外と面白くて、時間があればSEOブログのネタ出し用のも作りたいなと思ったよ。
↑のやつも書こうと思えばいくらでも書けそうだったんだけど、際限なくなっちゃうのである程度絞って作ったよ。

趣味とか好きなことだったらいくらでも出てきて終わりが見え無さそう(;・∀・)

ある程度は絞ってやったほうが良いかもしれないわね。

マインドマップは本来は絵でイメージしてやるものだけど、キーワードでも問題ないし、寧ろキーワードのほうがやりやすいかもしれないわね。

絵は人によっては下手すぎて自分でも何の絵なのかわからなくなるっていう弱点あるしな。

マインドマップは自分の頭の中を整理するために書き出していくもので、本来は絵でやっていくものだけど、キーワードでやっていっても問題ないよ。
趣味や好きなことでやってみたけど、際限なくネタが出てきちゃうからある程度は絞ってやっていくといいかも。
僕は絵が絶望的に下手なので、こういったネット上のツールとか使ってやれるのは僕みたいな人にはありがたいよ。

ワイヤフレームを作ってみた

最後は仮想定したサイトのトップページのワイヤフレームを作っていくよ。
今回はゲームアプリを紹介するサイトを仮定して適当に作っていってみるよ。

もしかしたら、WordPressでそんなサイト作るかもしれないけど、予定は未定だよ。
これもテンプレートから「ワイヤフレーム」→「ワイヤフレーム2」のテンプレートを使って作っていくよ。

仮サイトワイヤフレーム制作

だ、大分質素なワイヤーフレームになったけど、仮で作ったものだしいいよね?(;・∀・)
ここから何か思いついたら追加していけばいいし、いらないと思ったら指定してDeleteで消せるから操作がらっくらくだよ。

図の保存を行う時に、種別を「テンプレート」にすれば、テンプレートとして保存されるよ。

種別をテンプレート

テンプレートとして保存したものはテンプレート内の「ユーザー定義テンプレート」に保存されているから、そこからテンプレートとして使うことができるよ。

ユーザー定義テンプレートに登録

WordPressやはてなブログみたいなテーマが用意されているやつだとあまり意味ないか?

そうね~、そうゆうテーマがなくて、一からサイトを作る時なんかに使えるわね~

だと、あんまり一般ユーザー向けのものじゃねぇな

どちらかと言うとWEBサイト制作側が使うようなものになるわね。

WPやはてなブログのように最初からテーマが用意されているものなら、ワイヤーフレームはあまり使うことがないよ。
一からサイトを作っていくような場合で、コンテンツの配置なんかを考える時に使えるのがワイヤーフレームだよ。
どの図でも保存時に種別を「テンプレート」にすれば「ユーザー定義テンプレート」として使うことができるよ。

他にもグリーティングカードなんかも作れるよ

Thank youカード

サイトマップ・マインドマップ・ワイヤーフレームとWEB制作に関連するようなものを紹介してきけど、少し変わったテンプレートも用意されているよ。
特に珍しいなと思ったのが「グリーティングカード」のテンプレートがあることかな。

グリーティングカードって言うのはクリスマスとか誕生日みたいな年間の行事に合わせて、感謝のメッセージを込めて大切な人に送るカードのことだよ。
クリスマスが代表的だから、海外では取り扱われてることが多いけど、キリスト教徒が少ない日本ではあんまり見られないかな。

そんなグリーティングカードもcacooで作ることができるよ。
cacooでは誕生日・クリスマス・お正月の3つの行事用のやつが数種類用意されているよ。

カテゴリーグリーティングカード

テンプレートから選択して、後はメッセージを書くだけだから、サイトマップとかより更に楽かもw
試しに1枚リア充向けのクリスマス用グリーティングカードを作ってみたよ。

リア充向けグリーティングカード

遠回しに言ってるはずだから、アドセンス停止されたりはしない…はず…きっと…(;・∀・)

エクスポート機能を使って保存してから印刷して送るもよし、メールに添付するもよし、共有設定で見てもらうなんて方法もあるわね。

でも、毎回使ってたら流石にパターンがなくなって、飽きられちゃいそうだな。

もう、そうなったらいよいよ有料テンプレート購入ね!

いや、他の無料のグリーティングカードサービス探したほうが早いだろ(;・∀・)

日本じゃあまり流行っていないグリーティングカードなんかもcacooで作ることができるよ。
誕生日・クリスマス・正月の3行事分が用意されていて、それぞれパターンが数種類存在しているよ。
専用の厚紙とかに印刷して、プレゼントと共に相手に送ってあげれば、その日は熱い夜になること間違い無し!

まとめ

今回はcacooについてまとめていくよ~。

  • cacooはWEBサイト制作にピッタリのサイトだよ
  • Google・Twitter・Facebookどれかのアカウントがあれば連動させて簡単にアカウントが作れるよ
  • 簡単なチュートリアル機能がついているよ
  • 14種類のカテゴリーから好きなテンプレートを選んで使うことができるよ
  • 一部のテンプレートや作成できる図の枠数は有料になっているよ
  • このブログのサイトマップを作ってみたよ
  • 操作感は一般の画像編集ソフトとかと変わらないよ
  • テンプレートで追加したオブジェクトはもちろん、矢印や棒線なんかも移動・追加・削除ができるよ
  • このブログのサイトマップを作ってみたら質素なサイトマップができたよ
  • エクスポートを使えばローカルにpngやpdf形式で保存することができるよ
  • マインドマップを作ることもできるよ
  • マインドマップは脳内の整理に使えて、ブログやサイト更新のネタ出しにも使えるよ
  • 元々は絵でやっていくものだけど、キーワードでやっていっても問題ないよ
  • 試しに僕の雑記ブログ用のマインドマップを作ったら、ネタが際限なくでてきたよ
  • ワイヤーフレームを作ることもできるよ
  • WPやはてなブログならテーマがあるけど、サイトを1から作るようなサイト制作なら重宝するよ
  • いつか作るかもしれないゲームアプリ紹介さいとのワイヤーフレームを作ってみたよ
  • 大まかでもコンテンツの配置を決めることができるから、サイト制作がやりやすくなるよ
  • 画像の保存を行う際に種別を「テンプレート」で保存すると「ユーザー定義テンプレート」に登録されるよ
  • 日本じゃ珍しいグリーティングカードのテンプレートもあるよ
  • クリスマス・誕生日・正月の3行事が用意されていて、その中に多数のテンプレートがあるよ
  • 今回はクリスマスのやつを使ってリア充向けのグリーティングカードを作ったよ

サイトマップはサイト内の整理に使えるし、マインドマップはネタ出しに使えたりと、サイト制作・運営で使えるような図を作ることができるサービスだよ。
今は使わないかもしれないけど、後々使う可能性があるなら、登録だけしておくのもいいかと思うよ。