イラレが使えない人にもおすすめ！Cacooの意外な使い方とは？【動画あり】
こんにちは！企画開発部マーケティンググループの牧野です。ファブリカテックブログも早くも10本目になりました。今回は編集部員として私が主に担っている、当ブログの見出し画像作成についてお話しします。
まずは今まで公開した記事のトップ画像の一部を並べてみました。
これらの画像は、何を使って作成したように見えますか？
イラストレーターやフォトショップで作った画像のように思っていただけると嬉しいのですが、実は全てCacooというツールで作っています。
Cacooと言われてもピンとこない人もいるかもしれません。実際、私も学生時代には使ったことがなく、社会人になって初めて知りました。しかし、知らないのがもったいないほど使えるツールなので、Cacooの紹介をしつつ、すでにご存知の方には便利で意外な使い方についても言及できればと思います。
Cacooって何？
Cacooは株式会社ヌーラボが提供しているオンラインの作図ツールです。主にフローチャートやワイヤーフレーム、ネットワーク構成図、マインドマップなどの作成に使われています。クラウドで作図できるので共同で編集したり、コメントを書き込んだりとチームで使うのに適しています。
株式会社ヌーラボはチームで仕事を行うことが楽しくなるようなサービスを開発をしている会社で、Cacooの他にもビジネスチャットツールやプロジェクト管理ツールなどのサービスもあります。「ヌーラボ」という社名は、 Null（ヌル＝無）と Lab (研究所) を合わせた造語で、無の状態から有を創り出す「研究所」のような会社でありたいという意味が込められているそうです！素敵ですね。
当社でも企画開発に関わるメンバーでCacooを利用しており、チラシを作成する際のワイヤーフレームを描いたり、サイトの仕組みを図解したりする際に用いています。私が今までに作ってきたワイヤーフレームの一つをご紹介します。
このように、業務の中ではサイトの一部を変更してほしいことを視覚的に伝えたり、サービスの流れを可視化したりして使うことが主でした。しかし何度も使用していく中で、デザイン性が高いワイヤーフレームも簡単に作成できることに気づき、そのうち自然とデザイン寄りのものも描くようになりました。結果として、今回のブログ画像もCacooで作成してみることにつながったのです。
どのように作っているか
それではいくつか例に挙げて、３ステップでどのように画像を作成しているかを紹介してみたいと思います。最後にムービーで作業風景も取っているので、そちらをみていただいても結構です。
まずはこちらの画像を作ってみます。
①400*600の画像を置きます。そこへ上から白い四角を重ね、透明度を50％にします。
②次に必要な文字を大きさごとに準備し、配置します。
③最後にGoogleをイメージして、カラフルな四角を準備して繋げて線にしました。
完成したものがこちらです。
工夫したポイントは
- 記事がGoogleの内容だったので、それを連想させるような色を加えたこと。
- 虫眼鏡の中に文字を入れてみたこと
です。案外簡単に作られています。
次に、背景が写真ではない画像もCacooで作成していますのでご紹介します。
①先ほどと同様に、ベースとなる400*600の四角と必要な文字を準備します。
②そこにフリーのパソコンのイラストを置き、上に写真を重ねます。
③あとは、鉛筆のイラストや線などを組合わせて完成です！
ポイントは
- パソコンで写真を表示しているようにしたかったので、水色の画面のサイズに合わせて画像を切り抜いたこと。
- 色使いを２色までに抑えていること（色数を抑えるとセンスがなくても統一感が出て失敗しにくいです！）
です。
○の記号の中に白地の文字を入れてアクセントにもなりますね。フリー素材をうまく組み合わせれば簡単に作れます。完成したものがこちら。
実際にどんな手順なのか
最後にこちらの画像を例に、実際どのように作業を行なっているかを録画してみました。（手際が悪い部分があるため…３倍速にしています。）
ポイントは吹き出しの部分です。フリーの画像でぴったりのものがなかったため○と□と△を組み合わせて作っています。このように、用意されている記号を組み合わせて使えば様々な画像を作ることができます。
またOSにもよりますが、フォントもある程度揃っているので、雰囲気に合わせて変えることもできます。
そして何より、イラストレーターやフォトショップより動きがサクサクで保存も一瞬なので、手軽に作業ができる点が私は気に入っています。ちょっとした画像を作りたい方はぜひCacooを利用してみるといいかもしれません。
今後もぜひブログのトップ画像に注目してチェックしていただけると嬉しいです！
