今回はLPに導くためのCTA設計された画像の作り方について、お話しします。ビジネスを拡大するために欠かせないのが、コンバージョン率です。
コンバージョンとは、サイトの訪問者で商品購入や資料請求などの最終的な成果まで至ることです。コンバージョン率を上げるにあたり、重要な要素になりうるのがCTAです。Call to Actionの略称です。
しかしCTAが重要なことはなんとなくわかっていても、具体的にどう作成すればよいのか詳しくは知らない方も少なくないようです。そこで今回は、LPへの導線を作るために画像にCTAをどう反映させればよいのか、詳しく見ていきたいと思います。
LPへ導くためのCTA設計された画像とは？
まずはLPへの導線を意識したCTA設計された画像とはどのようなものか、具体的なイメージがわかない方もいるでしょう。以下のスクショをご覧ください。
こちらは私が実際に過去に作成し、使用している画像です。このような画像を作成するイメージで、これから作業を進めていきましょう。
ちなみに中央部分に文書のようなイメージがいくつか表示されていると思います。このようなものをモックアップといいます。モックアップの作り方は、後程別にレッスンを用意しているのでこちらで一緒に見ていきましょう。今回はモックアップ部分の画像を差し込むような感じで、制作していきたいと思います。それでは、さっそく始めていきましょう。
CTA設計された画像を作る手順
それではさっそく、LPに導くことのできるようなCTA設計された画像を作る流れについて、見ていきましょう。簡潔にまとめると、以下の手順に従って作成していくイメージです。
- デザインを作成する
- 文字を入力する
- Meta Design Checkを利用する
- ダウンロードする
それでは段階ごとにどのように作成すればよいか、解説していきます。今回も実演付きで見ていくので、皆さんも実際に手を動かしてみましょう。
デザインを作成する
まずは上のスクショのように、Canvaの画像作成画面にアクセスしましょう。今回はすでに制作している画像をはめ込む形で作成していきます。よって上の画像の右側、「画像」タブにある先ほど紹介した画像を選択します。
マウスなどでドラッグして、画像はちょうど中央にくるように調整しましょう。中央付近にドラッグすると、赤い線が表示されます。これが中央線なので、これを参考にして位置調整しましょう。
続いて、左端のメニューのなかから「素材」を選択してください。するとさまざまな素材の候補が表示されるので、以下のスクショに表示されている黒い四角の素材を選びましょう。
すると以下のスクショのように、四角い素材が画面上に反映されます。
しかしこのままだと、モックアップ画像に完全にかぶってしまっています。そこでドラッグして、四角素材の大きさや位置を変更しましょう。
また色も自分のイメージと異なるようであれば、上部メニューの丸いアイコンをクリックします。すると左側にさまざまなカラーのメニューが表示されるので、好みの色を選択しましょう。今回私は元の黄色から黒に変更してみました。
そして冒頭の画像を今一度確認してください。今回作成する画像は、モックアップ画像を上下で挟み込むような形で四角の素材が使われていますよね。そこで素材にカーソルを合わせてクリックすると、以下のスクショのようにアイコンがいくつか表示されたメニューが出てきます。
上のスクショをご覧ください。左から3番目、ちょうどカーソルの合っている位置にあるアイコンが複製メニューです。こちらをクリックすると、先ほど作成したのと同じ四角い素材が簡単に作れます。
あとはまた同じようにドラッグして、正しい位置に素材を持ってきましょう。そしてできあがったのが、上のスクショです。黒い四角の素材でモックアップ画像を挟み込むようなレイアウトに仕上がりました。
文字を入力する
最初に紹介した私の画像を見直してください。上下の四角の素材部分に文字が入っていますよね。この文字を入れていきましょう。
左端のメニューのなかから「テキスト」を選択します。すると「ファネルデザイン」の下部に「見出し」や「小見出し」などいろいろなメニューが表示されていますよね。このなかから好みのものを選択しましょう。今回私は「見出し」を選択しました。しかし別に「小見出し」でも「本文」でも構いません。
そしてあとは自分の入れたいメッセージを入力してください。今回私は「それって損してない？ ↓今すぐダウンロード↓」という文言をそのまま使いたいと思います。今回はもともとの素材からそのままコピーしましたが、新しく作成する際には文書を作成するのと同じ要領でキーボードで入力しましょう。
文字の大きさや色などを変更したければ、文字部分をクリックしましょう。すると上のスクショのように、上部にさまざまなメニューが表示されます。左から順番にフォントの種類、文字サイズ、カラー、太字のアイコンです。
こちらで文字の大きさやフォント、色などを変更しましょう。今回私は文字を黄色に、そして太字に変更しました。そしてできあがったのが、以下のスクショです。
今度は下部の素材に持ってくるテキストを作成しましょう。私の最初の画像を見てみると「集客できない理由をチェック」と書かれていますね。こちらも四角い素材と同じように、もともとの私の画像からコピーしてそのまま持ってきました。こちらも最初から作成するのであれば、キーボードで入力しましょう。できあがったのが、以下のスクショです。
最初の私のオリジナル画像と比較してください。「チェック」の後の記号が「▶」になっていますね。しかし今回は「▼」を3つ作成してみました。下向きの三角を3つ連ねることでより「クリックしてみたい」とみている人に思わせることができると思ったためです。
もし文字のイメージが違うというのであれば、上のメニューでフォントを変えてみましょう。Canvaには実に多種多様なフォントが用意されているので、どのようなイメージにも文字を合わせて変えることは可能です。
しかし今回はビジネス用の画像です。あまり凝ったものにしない方がよいかもしれません。ユニークなフォントにしてインパクトのある感じに仕上げる方法もありますが、私の場合結構普通の基本的なフォントを使うことが多いですね。具体的には明朝もしくはゴシックといったところですか？ちなみにゴシックに変えたのが、以下のスクショです。
こちらは「ヒラギノ角ゴシックW9」というフォントにしたものです。太めでしっかりテキストの内容をアピールできると思います。このほかにもいろいろなフォントがあるので、皆さんの客層に合わせたものを選んでみましょう。
Meta Design Checkを利用する
画像ができあがったと思ったら、Meta Design Checkを使用しましょう。前回紹介した、作成した画像がどのように表示されるかチェックするためのツールです。今回は「Feeds」でチェックしてみました。その結果が、以下のスクショです。
「リール」タブでチェックしてみると、下部のメッセージ部分がやや可視部分から外れていることがわかります。しかしかろうじて見える状態なので、伝えたいメッセージは見ている人にしっかり伝わると思います。
上の画面の左下の部分をご覧ください。「Good」になっていますよね。このままで問題はないと思います。
ダウンロードする
画像が仕上がり、Meta Design Checkで確認して問題なければ、ダウンロードしましょう。画面の右上に「共有」ボタンがあるはずなので、こちらをクリックしましょう。すると以下のようなスクショに画面が切り替わるはずです。
今回は画像なので、「ファイルの種類」が「PNG」になっているか確認しましょう。また今回は背景透過ではなく、下部にある「ダウンロード」ボタンをクリックして、ローカルディスクで作成した画像を保存しましょう。これで画像づくりは完了です。
まとめ
いかがでしたか？今回はLPに導くCTA設計された画像の作り方について、お話ししました。
コンバージョン率を上げるためには、LPにいかに画像を使って誘導するかがポイントになります。CTA設計のできた画像もCanvaを活用すれば、今回紹介したように比較的簡単に作成できます。
誘導用の画像を作成する際には、見ている人が「クリックしてみたい！」「もっと詳しいことを知りたい！」と思わせることが重要です。テキストだけでなく、画像や記号なども駆使してCTAを促すように心がけましょう。今回の作成方法を参考に、皆さんも画像づくりにチャレンジしてみてください。