活用方法
デザイン紹介 - 矢印｜存在感は期待度と比例する
Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は修正なしで誰でもすぐに使える「矢印Widget」を紹介します。
Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はCVR改善に役立つボタンWidgetを紹介します。
今回教えてくれたのは
Shihori Nakaide
- BizOps チーム
- Assistant Manager
2021年2月よりSIVAにJoinし、CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。
目次
| 01 | 売り上げ上位10%のLPのCTAとは |
| 02 | 予め用意されたデザインを使えば、時間短縮に |
| 03 | ボタンのデザイン 32選 |
| 04 | まとめ |
01｜売り上げ上位10%のLPのCTAとは
Squad beyondで2022年に配信されたデータのうち、各媒体の売り上げ上位10%のLPのCTAは下記の通りでした。
| LINE | SmartNews | |
| 平均CTA数 | 3.2個 | 2.3個 |
| ボタンカラー | 緑 | 緑 |
| CTAテキスト | 今すぐお試し | ◯%OFF |
CTAボタンには、立体的・動的なデザインを取り入れることをおすすめします。立体的な表現や影を取り入れることで目立ちやすくなり、アニメーションやホバーエフェクトを加えるとボタンのクリック可能性を強調できます。例えば、クリックすると色が変化するデザインは、ユーザーがクリックした結果を確認しやすくなり行動が促進されます。また、スマホ用のページでは、指でタップしやすい大きさのボタンサイズに設定しましょう。
02｜予め用意されたデザインを使えば、時間短縮に
| 1 | Squad beyondの管理画面にログインし、beyondページを作成 |
| 2 | Widget管理をクリックし、カテゴリーや検索でお好きなWidgetを追加 |
| 3 | テキストを変更したり、色やサイズを調整して完成 |
Squad beyondでは、800種類以上の「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。特に比較表のデザインを再現する際には、従来は専門知識が必要で制作が困難でしたが、今では「Widget」を活用することで、誰でも素早く簡単に制作することができます。LPを効率的に量産し、コンバージョン率の向上を目指しましょう。
▼ 参考記事
03｜ボタンのデザイン 32選
.png)
角丸ボタン
/ Widget名
角丸2行ボタン
/ Widget名
楕円ボタン
/ Widget名
楕円2行ボタン
/ Widget名
.webp)
きらりと光る楕円ボタン
/ Widget名
きらりと光るボタン
/ Widget名
少し立体の楕円ボタン
/ Widget名
動くボタン
/ Widget名
緑ボタン
/ Widget名
横長ボタン（赤）
/ Widget名
動く効果付き遷移ボタン１
/ Widget名
動く効果付き遷移ボタン２
/ Widget名
ボタン-グラデーション横長角丸・左に画像
/ Widget名
グラデーションの横長角丸ボタン
/ Widget名
赤いボタン
/ Widget名
少し立体のボタン（アニメーションあり）
/ Widget名
線の離れたボタン
/ Widget名
プルプル立体ボタン
/ Widget名
クリックで凹む立体ボタン
/ Widget名
立体感とシャドウのあるボタン
/ Widget名
線でシンプルなボタン
/ Widget名
線のアクセントボタン
/ Widget名
立体型ボタン
/ Widget名
beyondフォームへのページ内スクロールボタン※要Javascript
/ Widget名
遷移ボタン
/ Widget名
遷移ボタン（画像差込＋動きあり）
/ Widget名
お問い合わせボタン
/ Widget名
指付きボタン
/ Widget名
動く矢印ボタン
/ Widget名
動くボタン（公式サイトはこちら）
/ Widget名
アイコン付き楕円ボタン
/ Widget名
楕円2行ボタン（スクロールに合わせてスライドイン）※要javascript
/ Widget名
04｜まとめ
CTAボタンはデザインや設置場所を工夫すること、ユーザーの行動を迷わせずに導くことができます。Widgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、https://service.squadbeyond.com/voice/ よりお尋ね下さい。
▼関連記事
- デザイン紹介 - グラフ｜データは読ませず、見せるもの
- デザイン紹介 - 比較表｜一瞬で選択肢を視覚的に示す
- Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ
- 【ユーザーインタビュー】WordPressの4倍速で記事制作を
Squad beyondのご利用には、アカウント開設が必要です。
お好きな時間を選んで、どんなことでもお気軽にご相談ください。
（商談の設定、お見積もり依頼、サービスの簡単な説明 など）