見出し画像

「CTAボタン」のUIを集めてみた｜パーツ別デザインまとめ

nanami

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。

今回は、LPにおいてCV（コンバージョン）に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。

はじめに

前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。
今回はその「パーツ別デザインまとめ」シリーズ２本目です。

↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！


パターン別 CTAボタン一覧

サイト閲覧者に特定の行動を促すよう誘導する（Call to Action）ためには、CTAボタンに視線を集める必要があります。

そこで今回は「目に留まりやすいCTAボタンにはどんな特徴があるのか？」という観点で、見つけた特徴別にCTAボタン周りのデザインを一覧化しました。

💡差別化された背景色

  • CTAボタンを設置するセクションにのみ、サイト全体で使用している背景色とは異なる色を使用

  • セクション全体として目立たせている

  • ページの途中や最後にセクションとして挿入されることが多い

Penmark

ページ全体はグリーン背景のデザインですが、
CTAボタンを配置しているセクションのみ白背景で差別化しています

Chatwork

ページ中盤に設置されているCTAボタンのセクション
白背景メインのサイトに紺背景が挿入されることで、デザインが引き締まります
ページ終盤のセクション
中盤に設置されているものより遷移先の選択肢が増え、面積も大きく、目立ちます
ページの最後、フッター上に「最後のダメ押し」的に設置されているセクション
背景色もガラッと変わり、さらに目立つようになっていますね

今年は「捨てない」大掃除（メルカリ）

イラストと組み合わせて、カラー背景の形を変えているパターン
背景色とボタン色のコントラストが強いので、ボタンがかなり目立っています

💡巨大なボタンサイズ

  • ボタンのエリアがページ幅いっぱいに広げられている

  • いわゆるボタンの形をしていない、ブロック型のデザインも多い

  • ページの最後に挿入されることが多い

オリックス銀行

ボタンの形を維持したままサイズを大きくしたパターン
かなりインパクトがあります

TaTap

２つのCTAボタン的要素をブロックとして並べています
複数ボタンを並べたい時に有効

AlphaDrive

カード型にすると、目立つ上に整頓された感が出ます

宮本金型製作所

背景を写真にするのも良いアクセントになりますね

💡ファーストビュー中央への配置

  • 明確に遷移させたいページがある場合の誘導に有効

  • シンプルさゆえのインパクトがある

NETFLIX

テキストとCTAボタンのみ中央に配置するシンプルさ
装飾があるよりもむしろインパクト大です

U-NEXT

配信系は似たようなデザインが多いのでしょうか
要素が少ないとキャッチコピーもボタンも目立ちます

💡遊び心のあるアニメーション

  • hoverしたり押したくなるようなアニメーション

  • ヘッダー内など限られたサイズの中でも目立たせることができる手法

ReDesigner

hoverで手を振るアニメーション👋
キュートな動きを何度も試したくなってしまう


大阪農業園芸・食テクノロジー専門学校

hoverで食べ物が飛び出てくるのが楽しいです

💡固定された表示位置

  • スクロールしても追従するので目に留まりやすい

  • ヘッダーや画面の右端に固定されるケースが多い

ちゃんとGood！サービス（京セラ × 関西電力）

ヘッダーに固定されているタイプ
リボンのようにぶら下げることで、背景に奥行きを感じる＋ボタンが前面に出るので目立ちますね

cado

右下に、商品一覧画面へ遷移するボタンを固定表示しています

モグカツ

モバイルファーストのデザインの場合、
常時表示しておきたい情報を左右の余白に設置できます

宅トラ

キャンペーンのバッジを押すと、申し込みページに遷移するボタンが出現
ページ右端に固定されています

💡その場で直接入力

  • お問い合わせや資料請求など、必要情報を入力してもらうフォームをCTAボタンと一緒に設置

  • サイト閲覧者にとって負担になり得るページ遷移を省略できる

レンタロウ

ファーストビューで直接お問い合わせ内容を入力できるパターン、話が早くて良いな

MOCHICOM

ページ下部に設置されたCTAボタン３種の下に、そのまま情報を入力できる欄があります
「LINEで送る！」を選択すると、こんなに丁寧な説明が出現
ユーザーを迷わせない徹底ぶりが見られます

わかったこと

直感的に目に留まるCTAボタンのデザインには、ある程度共通点があることが分かりました。
ただし同時に、CVに直接影響するCTAボタンは、各サイトの工夫や個性が最も現れるUIなのかもしれないと気づきました。

また、ページのどこに設置されるCTAボタンなのかによっても適切な目立たせ方が変わることを学びました。

出典｜よくあるCTAの設置場所（LINEヤフー for Business）

今回調査したデザインパターンを、設置箇所や訴求内容に応じて適切に反映できれば良いなと思っています。

最後まで読んでいただきありがとうございました！

参考記事


この記事が気に入ったらサポートをしてみませんか？