前回は、谷宜樹がCTAボタンに添える言葉について解説しました。
他にも、CTAボタンの見た目を決めるサイズ・カラー・イラスト・形が重要だとお話しましたね。
今回は、この4つの要素について詳しく解説していきたいと思います。
■色んなCTAボタンを作ってみよう！
CTAボタンが与えるイメージを知るためには、まず自分で様々なサイズ、カラー、形のボタンを作ってみるのが一番です。
編集ツールの練習にもなるので、まずは何も考えずに色々作ってみましょう。
3～5個作れたら、そのボタンに同じ「ここをクリック」という文字を入力してください。
これでそのボタンの見た目だけでどう感じるか調べることができます。
じっくりボタンを観察し、自分ならどんな感想を持ったかメモしてみましょう。
■CTAボタンのデザインで考えることは？
CTAボタンの見た目からどんな感想を持つかは人それぞれですが、一般的に次のようなことを意識すると効果的だといわれています。
ここからあなたのWEBサイトに必要なものが見つかるかもしれませんよ。
・サイズ
スマートフォンでも表示されるWEBサイトであれば、CTAボタンのサイズは10㎜×10㎜が理想です。
平均的な指の大きさから、このサイズのボタンが押しやすいといわれています。
長方形のボタンであれば縦の長さが10㎜、円形のボタンであれば直径が10㎜のものを意識しましょう。
・カラー
CTAボタンの大きさや形が同じでも、色が違うだけで印象がガラッと変わります。
WEBページの背景の色と合っているか、目に飛び込んでくるかを意識してデザインしましょう。
また、前に解説したように色が持つイメージもあります。
例えば、青は誠実さをイメージさせるので、企業説明のページに合いますね。
そのほか、LINE登録を促すならLINEのオフィシャルカラーである緑を使うと分かりやすいでしょう。
ただし、赤い文字はエラー、薄いグレーの文字はクリック不可であるというイメージもあるため、使用する色には注意が必要です。
・イラスト
CTAボタンは、図形で文字を囲むだけのほか、人や物などのイラストを添える方法もあります。
例えば、人の姿をしたアイコンの右上に＋マークが書かれているイラストと「フォロー」という文字が書かれていれば、このボタンの意味がイメージしやすいですね。
ショッピングカートのイラストや吹き出しのイラストも、商品購入や口コミ表示だと分かりやすいので谷宜樹のおすすめです。
・形
長方形、角が丸まった長方形、円形のCTAボタンをよく見ます。
長方形のボタンはスタイリッシュに、角が丸まったボタンは親しみやすさを感じますね。
円形は可愛くて目立ちますが、WEBサイトによっては子どもっぽくなりすぎて合わないものもあります。
自分のサイトがなんとなくまとまりのないデザインになっている場合は、WEBページの内容とCTAボタンのデザインが合っていないのかもしれません。
もう一度CTAボタンを作り直してみましょう。