あなたのサイトの訪問者の行動が全てわかる、無料で簡単に使えるアクセス解析

正しいメールアドレスをご入力ください

利用規約に同意した上で登録してください

close

会員登録が完了しました

入力いただいたメールアドレスにPtengine本登録に関する確認メールが届きます。

【メールが届かない場合】

お問い合わせ(support@ptmind.co.jp)

マーケ担当だけでイケてるバナーを無料で簡単に作れるCanvaを使ってみた

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Untitled design -4-

こんにちは。マーケ担当の繋です。

前回はマーケ担当だけでLPを作って分析までのPDCAを回すという事で簡単にLPを作れるツールとしてInstapageペライチを紹介しました。

関連:無料で簡単にオシャレなLPを作れるInstapageがスゴい!
関連:マーケ担当でもお手軽にLPがつくれるペライチを試してみた!

ただし、集客できず、ユーザーに訪問してもらえなければどんなに良いLPが作れても意味がないですよね。集客方法には様々な方法があると思います。

その中でも広告を使うとすると、リスティング以外はほぼバナー広告になりクリエイティブの高さを求められます。ただデザイナーがいない、リソースがない、外注するほどでもないなどの理由から自分でササッと作りたいときがあると思います。

そんなときに無料で簡単にセンスのあるバナーを作れるツールを紹介します。

イケてるバナーを誰でも簡単につくれるCanva

2013年の9月にサービスのローンチをしているサービスです。

評価のポイントは「ローコストで簡単に高クリエイティブの画像をつくれる」という所です。

画像を作るためのイケてる素材もたくさん用意されています。ローカルに保存されている画像をアップして作ることもできます。作った画像は商用でも個人でも制限なくつかえます。

Untitled design -4-

Canva: Amazingly Simple Graphic Design Software

サインアップ

Canvaへの登録はFacebookアカウント、Google+、メールアドレスのいずれかで行います。

D07CF7C2-2D81-415E-8D3A-C6351BF699E0

いずれも登録には時間はほとんどかかりません、すぐに終わります。メールアドレスの場合も情報入力などはないので気軽に登録できます。

テンプレートの選択

ログインが完了すると、すぐに使えます。

6A200CAB-9AC0-4B5E-B4E1-A68686BCEA80

あらかじめテンプレートが用意されています。

Facebookのカバーや投稿用の画像、Twitterのカバー写真など多数のテンプレートが用意されていてサイズなども表示されています。これまではバナーサイズを作る際に確認していましたが、これなら確認する必要もなくテンプレートを選択するだけで作れます。

4AAC5C31-57B8-485E-90CD-DE815720E7A4

今回はブログのサイドバーに設置するバナーを作りたいので右端にある「+More…」をクリック。

968AC5CC-CC9E-4362-83C7-C08587A3D649

用途別にたくさんのサイズが用意されています。

今回はブログのサイドバーに設置するバナーという事で「300×300」のバナーを作成します。テンプレートの中には、そのサイズがないため大きさを指定します。

04E1B115-C400-4EB0-BA90-B67BCD242325

「Use custom dimensions」をクリック。

クリックすると大きさを入力するフォームが表示されるので作りたいバナーのサイズを入力し、「Design!」をクリックします。

D75902E1-E5E6-40E5-AD4B-AC2D2F72B9C1

バナーの作成

サイズを指定すると作成ページへ切り替わります。ここからバナーを作っていきます。

BA1915AA-597E-48B8-B197-06EA4362708E

左端にあるサイドバーにバナー作成の為のツールが用意されています。

  • SEARCH:全体の素材から検索する
  • LAYOUTS:バナーをセクションに分けられるレイアウトの選択
  • TEXT:バナー内にテキストを挿入する
  • BKGROUND:背景の素材を選択(カスタムサイズの場合は表示されない)
  • UPLOADS:ローカル保存している自前の素材のアップロード

787E25C8-7C80-4BDF-B9C6-CA75BBC7E335

用意されている素材の一覧です。

FREEと表示されているものは無料で使えますが$の表示があるものは有料です。こういう風に無料と有料の区別がすぐにできるのもCanvaの良いところです。

無料の素材でも本当にクオリティが高いものが用意されています。

E6294492-CB59-434A-AB98-1E1C191CA571

今回は自前の素材を使うため、ローカルにあるイメージをアップロードします。Upload your own imagesをクリック。

EB74FF7A-F1FB-4E18-8C9B-2E721608A3E2

アップロードした素材をバナーに挿入していきます。

左端のツールバーの素材をクリックすると作業フィールドに素材が挿入されます。

77E91D1F-0F78-4B10-9E37-A87E6E111310

素材の大きさの調整やInstagramのようなエフェクトも作業フィールドから行えます。

0B1C086D-A601-49A5-83DB-D0320A014500

自前の素材を全てバナーに挿入しバランスや配置などを調整しました。

いつもNumbersでバナーのイメージを作ったりしますが同じような操作感ででき、自由度も高いです。

06516E4E-FF49-4FFD-8381-2F95E89FECDC

次はテキストやパーツなどを挿入していきます。

完成まであと少しです。

A93C1443-67AF-4A56-9485-D44DF7E45D29

テキストの配置や透過具合の調整を行い完成しました。

これはABテストツールのOptimizelyPtengineの連携紹介ページへ遷移してもらうために作成しました。なるべく初めて見る人でもわかるように、気を付けて作ったつもりです。

7BC5A487-621F-4EBC-8F64-4C55D4F05427

作成したバナーの保存方法

バナーができたので保存します。右上の「Download」をクリック。

1C0B59EE-DA65-4EB1-9378-B9049BC3CDC5

保存方法をImageかPDFかを選択しクリックするとダウンロードのために画像の生成が開始します。

0C18D376-302A-457F-87D4-8263B6CBE40E

画像の生成が終わると自動的にダウンロードがはじまります。

ダウンロードが完了するとFacebook、Twitter、メールでのシェアが可能です。

F57066D3-9A41-4C4E-BFE6-FE5B4ECE5554

作成したバナーをブログに設置

わずか10分程度でバナーが作れました。

本当に簡単に高クリエイティブなバナーが作れます!

FB33DBEC-0B5C-41C0-83C1-87CC0F489624

Ptengine Blogに作ったバナーを設置してみました!

みなさんクリックしてください!!
(内容も見てもらえると嬉しいです!)

まとめ

いかがでしたか?クリエイティブに関する知識がなくても、それなりのバナーが作れました。ある程度デザインセンスなどは必要になりますが。

1点だけ、自分なりに不満があるとすると日本語フォントに対応していないので日本語表示は可能だけど変なフォントになる所です。エディター上ではOpen Sansでプレビューできていたのに、ダウンロードすると明朝体っぽいものになってしまっていました。

この辺りは日本語のフォントだけを別のツールで補うということができるので、特に気にする必要はないかとおもいます。

と、いうことで無料なのでぜひ使ってみてください!
Canva: Amazingly Simple Graphic Design Software

このページのヒートマップ

 PCの見られ方はコチラ
クリックヒートマップ:http://bit.ly/1QzMAUD
アテンションヒートマップ:http://bit.ly/1ErfYEY

 スマホの見られ方はコチラ
クリックヒートマップ:http://bit.ly/1zUUK63
アテンションヒートマップ:http://bit.ly/1HbDpbE

※上記のURLをクリックする事で実際に見ているページにヒートマップを表示させる事ができます。
※レスポンシブデザインで構築している為、対象のデバイスでアクセスしてください。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSで最新情報をうけとる