Unbounce Apps完全ガイド！LPの成果を最大化するおすすめ機能と活用事例

投稿者: midori 投稿日:

ランディングページ（LP）作成ツールとして世界中で人気の「Unbounce（アンバウンス）」。その大きな魅力の一つが、ノーコードでLPに高度な機能を追加できる「Apps（アプリ）」機能です。

「Unbounce Appsにはどんな機能があるの？」
「CVR（コンバージョン率）を上げるために、どのアプリを使えばいい？」

そんな疑問をお持ちのマーケターやWeb担当者の方へ向けて、Unbounce Appsの中から特に実用性が高く、成果に直結しやすいアプリを厳選してピックアップ。目的別のカテゴリーに分けて、機能と活用事例を紹介します。

Unbounce Appsとは？

Unbounce Appsは、Unbounceのページビルダー（Smart Builderなど）内で利用できるプラグインのような拡張機能です。通常であればJavaScriptや複雑なコーディングが必要な機能（決済システムの導入、動的なスライドショー、予約カレンダーなど）を、ドラッグ＆ドロップだけで簡単にLPへ実装できます。

今回は、提供されているApps一覧の中から、マーケティング成果に直結するものを4つのカテゴリに分けて紹介します。

1. デザイン・装飾系 Apps

〜第一印象（FV）の質を高め、読まれるLPにする〜

LPの見た目を整え、ユーザーの視線誘導や滞在時間の延長を狙うための機能群です。

Animated Heading

  • 機能紹介:
    • 見出しテキストに「タイプライター（一文字ずつ表示）」「ハイライト（強調線）」「回転」などのアニメーション効果を追加します。
  • 活用事例:
    • FVのキャッチコピー: 「あなたのビジネスを [ 加速 / 変革 / 成長 ] させる」のように、メリットの単語を動的に切り替えて表示。省スペースで多くの訴求ができ、ユーザーの目を留めるフックとして活用できます。

Button Styles

  • 機能紹介:
    CTAボタン（申し込みボタン）に対し、グラデーション、影（ドロップシャドウ）、角丸、ホバー時の動きなど、高度なデザイン設定をノーコードで行えます。
  • 活用事例:
    • クリック率（CTR）改善: フラットなボタンを「立体感のあるボタン」に変更したり、カーソルを合わせた時に色が反転する動きをつけたりして、ユーザーが思わずクリックしたくなるUIを構築します。

Styled Images

  • 機能紹介:
    • 配置した画像に対して、CSSを書かずに「円形切り抜き」「枠線」「フィルター」「影」などのスタイルを適用できます。
  • 活用事例:
    • デザインの統一感: チーム紹介の顔写真を全て「円形」に統一したり、商品画像にうっすらと影をつけて浮き上がらせたりして、素人っぽさを消し、LP全体のブランドイメージを向上させます。

Font Awesome

  • 機能紹介:
    Webアイコンの標準規格である「Font Awesome」のアイコンを、ドラッグ＆ドロップで簡単に挿入できます。
  • 活用事例:
    • 可読性の向上: 「チェックマーク」「矢印」「電球」などのアイコンを、箇条書きリストや見出しの頭に配置。テキストだけの説明よりも直感的に内容が伝わりやすくなります。

2. マーケティング・LPO系 Apps

〜コンバージョン（CV）率を最大化する仕掛け〜

ユーザー心理に働きかけたり、広告との整合性を高めたりするための強力なマーケティング機能です。

Dynamic Image Replacement

  • 機能紹介:
    URLパラメータに応じて、LP内の画像を自動的に切り替える機能です。
    例えば、?target=female というURLでアクセスした人には女性の画像を、?target=male なら男性の画像を表示するといった出し分けが、たった1枚のLPで実現できます。
  • 活用事例:
    • 広告クリエイティブとの完全一致（Message Match）:
      流入元のバナー広告で使っている画像と、LPのファーストビュー画像を一致させることで、ユーザーの「ページを間違えたかも？」という不安（直帰要因）を解消します。
    • ターゲット別最適化:
      「20代向け」「40代向け」などターゲットごとにLPを複製管理することなく、パラメータだけでメインビジュアルを最適化し、管理工数を削減しながらCVRを向上させます。

設定方法:

1.編集画面の上部メニューにあるAppsアイコンを選択し、左側サイドバー内の「See All The Apps」を選択

2.上部メニューから「Utility」を選択し、「Dynamic Image Replacement」ボタン内の+を選択。

3.Addに「Dynamic Image Replacement」が追加されるので、LPの画像を追加したい場所にどラック＆ドロップ

4.「Settings」のアイコンを選択し、下記を設定

  • Parameter Name（パラメーター名）：URLに追加するパラメータを入力（例）[url]?image=product_aの場合、「image」を入力
  • Number of Images（画像数）：パラメーター値によって出し分ける画像の数を入力

5.「Add Images」のアイコンを選択し、パラメータ値と画像を設定する。

  • Default Image（デフォルト画像）：画像置換の条件に合致しなかった場合に表示される、標準となる画像をアップロード
  • Alt Text（代替テキスト）：画像の内容を説明するテキストを入力
  • Option #2（オプション画像）：特定のURLパラメーターが渡された場合に、デフォルト画像に代わって表示される画像をアップロード
  • Parameter Value（パラメーター値）：URLのクエリパラメータ（例: ?image= の = の後に続く値）と完全に一致させる値を入力します。この値がURLから渡されると、対応するオプション画像が表示されます。

動作例:

ここでは、Image Parameterを使って、その値に応じて画像を出し分ける設定方法をまとめています。

  • Settingsの設定内容
    • Parameter Name（パラメーター名）：image
    • Number of Images（画像数）：3
  • Imageの設定内容
    実際に表示されるイメージ

Countdown

  • 機能紹介:
    特定の日時までの「残り時間」をカウントダウンタイマーとして表示します。
  • 活用事例:
    • 緊急性の演出（FOMO）: 「キャンペーン終了まであと 03時間 25分」とリアルタイムで動くタイマーをCTA付近やFVに設置。迷っているユーザーに対し「今すぐ申し込まないと損をする」という心理を刺激し、即時のCVを促します。

Popups and Sticky Bars

  • 機能紹介:
    ページ閲覧中に「ポップアップ」や、画面上下に常駐する「スティッキーバー」を表示させます。トリガー（表示タイミング）も細かく設定可能です。
  • 活用事例:
    • 離脱防止（Exit Intent）: ユーザーがブラウザを閉じようとした（マウスが画面外に出た）瞬間に「待ってください！今ならクーポンがあります」とポップアップを表示し、離脱を食い止めます。
    • 追従CTA: スクロールしても常に画面下部に「無料体験はこちら」というバーを表示し続け、機会損失を防ぎます。

設定方法:

1.編集画面の上部メニューにあるAppsアイコンを選択し、左側サイドバー内の「See All The Apps」を選択

2.上部メニューから「Utility」を選択し、「Popups and Sticky Bars」ボタン内の+を選択。選択後にコードコピー用のポップアップが表示されますが、後ほど設定するので一旦閉じて大丈夫です。

3.Unbounceのダッシュボードに戻り、左側のナビゲーションから「Popups & Sticky Bars」を選択し、右上の「Create New」を選択します。

4.テンプレートの一覧ページに移るので、下記を選択＆入力し右下の「Start with this template」を選択します。

  • 　Pick a content type:「Popups（ポップアップ）」「Sticky Bars（スティッキーバー）」のどちらか設置したいものを選択（今回はSticky Barsを例に説明します。）
  • 　Choose a template:使用したいイメージに近いテンプレートを選択します。
  • 　Choose a name:スティッキーバー名を入力します。

5.編集画面に移るので、テキストや色味、レイアウト等のデザインの調整とCTAの遷移先URLを設定し、右上の「Save」を選択し、左上の「Over view」から設定画面に、戻ります。

  • Click Action（必須）： 遷移先のURLを設定
  • Sticky to:ポップアップの表示位置をTop(画面上部)かBottom(画面下部)を選択

6.設定画面のTargeting項目から下記を入力します。

  • URL Targeting（URLターゲティング）:
    • Domain（ドメイン）:設置予定のページのドメインを入力
    • URL Paths（URLパス）:ドメイン以下のパスと一致条件を入力
    • Add Rule（追加ルール）:URLパス・条件の追加がある場合は＋を選択
  • Trigger（トリガー）:表示タイミングを指定
  • Frequency（頻度）：表示頻度を指定

7.設定画面のInstallation項目の「Copy」を選択し、コードをコピーします。

8.左側のナビゲーションから「Script Manager」を選択し、右上の「Add a Script」を選択します。
下記を入力し、右下の「Save Changes」を選択し、公開ページにスティッキーバーが設定されていたら完了です。（GTMでも設定可能です）

  • Script Details
    • Placement(配置):コードを設置する箇所を選択します。「head」を選択。
    • Included on(含まれるもの):設置するページを選択
    • Paste or type scripts below including:7.でコピーしたコードをペーストしてください。
  • Script Usage:スティッキーバーを設置するページのドメインを選択

9. 「Popups & Sticky Bars」の管理画面に戻り、右上の「Publish」を選択し公開をしてください。

3. メディア・SNS連携系 Apps

〜商品の魅力をリッチに見せ、拡散を狙う〜

静止画だけでは伝わらない情報を補完し、ソーシャルメディアの力を活用するための機能です。

Image Carousel / Image Showcase

  • 機能紹介:
    • Carousel: 画像を自動または手動でスライドさせるスライダー機能。
  • 活用事例:
    • 省スペースでの情報提供: 不動産の内覧写真、アプリの機能紹介キャプチャ、アパレルの着用イメージなど、枚数の多い画像をコンパクトにまとめ、ユーザーが能動的に見たい画像を選べるようにします。

Image Showcase

  • 機能紹介:
    • Showcase: サムネイル付きのギャラリー形式で画像を表示する機能。
  • 活用事例:
    • 省スペースでの情報提供: 不動産の内覧写真、アプリの機能紹介キャプチャ、アパレルの着用イメージなど、枚数の多い画像をコンパクトにまとめ、ユーザーが能動的に見たい画像を選べるようにします。

Giphy

  • 機能紹介:
    世界最大級のGIF動画検索エンジン「GIPHY」から、GIFアニメーションを検索して埋め込むことができます。
  • 活用事例:
    • 感情への訴求: 動画ファイルを用意する手間をかけずに「動き」を追加できます。記事風LPの文脈に合わせて、喜びや驚きを表すGIFを配置し、コンテンツのエンタメ性を高めて読了率を上げます。

Instagram Post / Tik Tok

  • 機能紹介:
    指定したInstagramの投稿や、TikTokの動画をLP内に直接埋め込んで表示します。
  • 操作上の注意点：
  • 活用事例:
    • UGC（口コミ）活用: 実際に商品を使用しているインフルエンサーや一般ユーザーの投稿を表示。「SNSで流行っている」「リアルに使われている」ことを可視化し、信頼感とトレンド感を演出します。

Facebook Share

  • 機能紹介:
    閲覧者がそのページをFacebookでシェアするためのボタンを設置します。
  • 活用事例:
    • バイラル拡散: 診断コンテンツの結果ページや、イベントの事前登録サンクスページに設置。「登録しました！」「私は〇〇タイプでした」というシェアを促し、SNSからの無料流入を増やします。

4. 信頼性・ユーティリティ系 Apps

〜ユーザーの不安を解消し、利便性を高める〜

「信用できるか」「場所はどこか」といったユーザーの基本的な疑問に答える機能です。

Testimonial Carousel / Google Reviews

  • 機能紹介:
    • Testimonial Carousel: 顧客の声（写真、名前、コメント）を手動で登録し、スライド形式で表示。
    • Google Reviews: Googleマップ上の自社ビジネスプロフィールの口コミ（星評価とコメント）を自動取得して表示。
  • 活用事例:
    • ソーシャルプルーフ（社会的証明）:
      店舗やクリニックなら「Google Reviews」で客観的な高評価をアピール。
      BtoBなら「Testimonial Carousel」で導入企業の担当者の声を顔写真付きで掲載し、「他社も使っている」という安心感を与えてCVへのハードルを下げます。

Google Maps / Map

  • 機能紹介:
    指定した住所の地図（Googleマップ等）をページ内に埋め込みます。
  • 活用事例:
    • 実店舗への誘導:
      店舗、イベント会場、モデルルームなどの正確な位置情報を表示。スマホユーザーであれば、そこからワンタップで地図アプリを起動して経路案内を開始できるため、来店予約や訪問のコンバージョンに直結します。

まとめ

まずは、CVRへのインパクトが大きい「Dynamic Image Replacement」で広告とLPの整合性を高める施策や、「Countdown」による締め切り効果の演出から試してみるのがおすすめです。

自社の課題（信頼性が足りない、離脱が多い、デザインが地味など）に合わせて、最適なAppsを組み合わせて検証してみてください。

もし導入を検討される場合は、下記ボタンからお申込み手続きしてください。14日間の無料トライアルが可能です。なお、本ページ内のボタンからお申込みされる場合は、最初の 3 か月は 20% オフ (または最初の 1 年間は 35% オフ)で利用いただけます。

＼ 最大35%OFF!! ／
14日間無料トライアルを始める
カテゴリー: unbounce
タグ:

関連投稿

unbounce

【徹底解説】Unbounce(アンバウンス)の使い方完全ガイド：LP作成からコンバージョン最適化まで

「Unbounce」は、マーケティング担当者や事業責任者にとって、コン 続きを読む