バナー作成への道③〜コンバージョンボタン〜
前回の記事では、バナーの配置まで終わりました！
今回はコンバージョンボタンなるものをバナーに設置していきます。
コンバージョンボタンとは？
広告を見たユーザーが行動を起こすきっかけのボタンのことです。
例えばこのビールの広告バナーを見てください。
（画像引用元：KIRIN_キリン渾身のクラフトビール）
「今すぐお試し」という部分がコンバージョンボタンです！
コンバージョンボタンを押してもらわなければ、バナーの成果がでないってことですね。
コンバージョンボタンの作り方
私が作っているバナーがこちらです。
今は情報を配置し終わった状態。
コンバージョンボタンは、黒い帯の上に「参加はこちら」と文字を載せただけです。
これをもっと押したくなるボタンにしていこうと思います。
文字を加工する
まずはコンバージョンボタンの文字を加工します。
文字の加工の仕方ですが、文字を選択して「アピアランス」のウィンドウを出し「新規塗りを追加」して文字の外枠の線に色をつけます。
するとこうなりました！
かなり文字が目立ちますね。
ポイントは、アピアランスウィンドウで
- 「塗り」が上
- 「線」が下
にくるようにすることです。
クリックをうながす
ボタンであることを強調し、ユーザーにクリックさせるためにデザインを追加します。
多角形ツールで三角、楕円形ツールで円を作って組み合わせると…
文字だけよりもクリックしたくなるようなデザインになりました。
ボタンの形を変える
ボタン自体も加工しましょう。
今はボタンっていうより帯っぽいですね。
これの角を丸くして、全体的にボタンっぽくします。
帯を選択した状態で「効果」→「スタイライズ」→「角を丸くする」を選択すると角が丸くなります。
おおー！これは完全にコンバージョンボタンなのでは！！
配色の講義がこの後あるので、色はまだモノトーンにしておきます。
デザインの追加
講義では、コンバージョンボタンに透かしの柄を入れていました。
図形をマスクして、重ねるという方法でできるようです。
なくてもいい気もするけど…試しにやってみます。
まずネット上からとってきたフリー画像をコンバージョンボタンに重ねます。
上からボタンのオブジェクトを重ねます。
この状態で「オブジェクト」→「クリッピングマスク」→「作成」をクリック。
これでマスクが切れるはず！！
できました！！
図形がボタンの形に切り取られてます！
ただ、ちょっとデザイン的に微妙かもしれません…
もう少し図形を薄くしますね。
うっすらにしました。
今日はここまで。
初めてのバナー作成で、まだ作業の先にどんなデザインが出来上がるのか頭に思い描けてない…😂
それでもコンバージョンボタンの出来にはかなり満足です。
バナー作りは次回に続きます！！