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

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

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

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

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

SEOに強いサイトを作る時に意識したい8つのTIPS - 現役seo担当が教えるよブログ

WEBサイト制作に使えるcacoo

WEBサイト制作に使える

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

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

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

テンプレートから選択

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

ワイヤフレーム
プレゼンテーション
フローチャート
テンプレート
サイトマップ
マインドマップ
UML
データベース
ビジネス
オフィスレイアウト
グリーティングカード
エレクトロニクス
ユーザ定義テンプレート
購入済みテンプレート

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

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

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

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

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

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

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

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

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

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

1.先程のカテゴリー内から「サイトマップ」を選択し、表示されたテンプレートの中から「サイトマップ2」を選んで、右下の「選択」ボタンをクリック

2.すると編集画面にテンプレートが反映されて、ここから自由に編集することができるよ。

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

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

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

SEOブログサイトマップ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

種別をテンプレート

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

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

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

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

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

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

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