クロージングの役割とデザイン例 | SkillhubAI(スキルハブエーアイ)

クロージングの役割とデザイン例

ランディングページは、商品販売などの目的があって作成されます。
商品やサービスの説明をしたあと、ユーザーに行動を起こしてもらうためにクロージングを用意しましょう。

クロージングとは

クロージングは、ビジネス・マーケティングでは「商談を終わらせる」ことを指します。
ランディングページにおいては、設定したコンバージョン行動を、ユーザーに実行してもらう箇所です。

  • 商品購入や申し込みボタン
  • 資料請求のボタン
  • 予約ボタンもしくはフォーム
  • お問合せフォーム

など、コンバージョンへ直接つながる要素を配置します。

トップコピーやボディでどれだけユーザーを惹きつけても、コンバージョンに繋がらないと意味がありません。このため、クロージングではコンバージョン要素に加えて、ユーザーのアクションを後押しすることも重要になってきます。

〇〇プレゼント、今だけ●%OFFなどと書かれているのを見かけたことがありませんか。下図のようなクロージングです。

https://www.zkai.co.jp/pre/nencho/
Z会幼児コース年長

単に資料請求や無料相談のボタンがあるよりも、お得感があったり、「今のうちに申し込もう」という気分になったりするのではないでしょうか?

こうしたユーザーが得られる特典を、マーケティング用語では「オファー」と言います。
オファーを提示して購入を促すコピーのことを「クロージングコピー」と呼ぶこともあります。

代表的なオファーとキャンペーン

オファーとして、割引や保証などユーザーが魅力を感じる特典があるとコンバージョンの向上が期待できます。
そのために使われる、代表的な要素として下記3つがあります。

● 無料で使える

サービス系のランディングページで多いのが「無料」で試せるという販売方法。
無料で一定期間サービスを利用できる、決められた制限内であれば無料で利用できる、というパターンが多いです。

https://rs.sakura.ad.jp/
さくらのレンタルサーバ

https://supergoodmeetings.com/
SuperGoodMeetings

そのほかに「あなたの適職を無料診断」「無料相談会」など無料で行えるサービスを用意している企業もあります。ユーザーはいきなり購入するよりハードルが下がりますし、運営者側は会員(顧客情報)を獲得できるメリットがあります。

※こうした場合、実はコンバージョンは“無料相談”や“資料タウンロード”などハードルの低い方ということもあります。

【例】

  • 無料で30日間試してみる
  • 月3動画まで無料視聴可能
  • 診断無料
  • 無料相談
  • 資料ダウンロード

●割引き・プレゼント

初回価格いくら、定価●万円が今だけ●千円、などお得に購入できるということも魅力的なオファーの一つです。
単に2,980円と書かれるより、7,980円→2,980円と値下げ感を入れるとよりお得感が出ますね。

割引以外に、ボーナスアイテムのプレゼントもよく使われます。
例えば、化粧水を買ったらお試し用の美容液がついてくる、資料ダウンロードで●●プレゼント、ご来店でクオカードプレゼント、などなど。

【例】

  • お試し価格でご提供!
  • 20%OFFキャンペーン
  • 初回半額
  • 替えブラシプレゼント

プロアクティブは初回価格(割引)とプレゼント、返金保証がセットになったクロージングです。盛りだくさんですね。

https://proactiv.jp/
プロアクティブ

情報商材系になると、どれが商品本体かわからないくらいに特典を山盛り用意しているものもあります。

情報商材というと良くないイメージを持たれがちですが、ランディングページはマーケティング技法が山積み。デザインがダサくても売れるというお手本のようなページも多いので、LP制作の参考としては良い例になります。

https://7golf-program.com/info-before/
7日間シングルプログラムver3.0

●保証がつく

ユーザーは行動によるリスクに見合う結果が得られるか、そこに不安を抱いています。
不安を取り除くために、返金保証や保証期間など“保証”をオファーとして盛り込むこともあります。上の例でも、両方返金保証がついていますね。色々な業種のランディングページ、TVや紙媒体の広告でも「●日以内に効果を感じなければ全額返金」というフレーズは見かける機会が多いです。

業種によって成果保証(満足できるまでサポートする)という保証もあります。
自動車教習所や携帯会社の“安心パック”のようなものが標準装備されているイメージです。

【例】

  • 効果がなければ返品可!全額返金します
  • ~出来なかったら無料で期間延長
  • 〇〇資格に受かるまでコーチング

https://www.rizap.jp/plan
【公式】RIZAP(ライザップ)

「今」行動する理由を作る

ランディングページに興味を持ってもらえても、競合と比較したかったり、フォーム入力などアクションを起こすが面倒だったり……。ユーザーは「時間がある時にもう一度見てみよう」「今じゃなくてもよいか」と見送ると、そのまま忘れてしまうことが結構あります。

このため、ユーザーに「今、行動したほうが良い」と思わせることも重要。
忘れてしまう前にアクションを起こすよう促しましょう。

【行動を促すオファー例】

  • 入会金無料キャンペーン中!
  • 期間限定!30%OFF
  • ●日までのご成約で3万円分のアマギフ進呈
  • 今だけ、キャンペーンでお試し価格
  • 先着100名様に診断キットプレゼント

https://www.radishbo-ya.co.jp/admission2/lp/trial/
【公式】らでぃっしゅぼーや ふぞろい食材おためしセット

ユーザーを動かす3つの限定性

ユーザーを動かすためのオファーでは、主に3種類の限定性が使われています。

①数量(希少性)
先着●名様に限り、限定●●個のみ、残り●個

②期間
●日までにお申し込みで50%OFF、タイムセール中

③条件
学生さんのみ、U-25割、メンバーのみ特別価格、5000円以上お買い上げで

デザインのポイントと例

ここまでキャンペーン、オファーを紹介してきました。
Webデザイン制作では、こうしたコンバーション率を高めるためのオファーが用意されているのであれば、そのオファーや限定性をしっかりと見せたクロージングを作成することが必要です。

Webデザイナーがオファー内容を考えることはありませんが、クライアントが何のためにオファーを用意しているのかは考慮しましょう。特典や保証がたくさんあるとスタイリッシュには作り悪くなりますが、多少ダサくても成果が出せることが第一。
目的を履き違えずにクロージングのデザインを行っていきましょう。

ポイント①ボタンは目立たせる

ユーザーにアクションを起こしてもらうパーツは、ユーザーが見落とさないようにコントラストをつけて目立たせます。

色によるコントラストが多く使われています。

https://cybozu-office.com/lp/whiteboard/
サイボウズ Office

背景色を変えて強調、更にボタン色でもコントラストを使って目立たせるデザインも定番です。

https://business.r25.jp/ja
新R25 Business

Webデザイン特有の目立たせ方として「固定表示」もあります。

https://www.ec-cube.net/
EC-CUBE

ポイント②コントラストを意識

商品販売系LPのクロージングでは、商品の概要・価格・オファー・注意事項など多くの情報が詰め込まれます。
見にくくならないよう、情報の優先順位を決めてコントラストをつけることも重要です。

Airペイさんの場合は「サポート再生が万全」という部分を強調されているようです。

https://airregi.jp/payment/
Airペイ

下記ページも、スッキリと見やすくデザインされています。

https://questant.jp/
無料アンケートツール『Questant』

クロージングの掲載内容はクライアントと要相談な部分でもあります。
掲載したいと仰る内容が多く削れない場合は、クロージングがコンパクトなLPくらいの内容になることもあります。掲載内容が多ければ多いほど、フォントサイズや配色によるコントラストが重要だということがわかります。

掲載内容を無理に削ぎ落としたり、全てを読みやすくしなくても構いません。
コンバージョンに繋がる部分、ユーザーの気持ちを高める情報を強調しましょう。
コンバーションにつながれば良いのです。

https://e-life.shopping/lp-chokatsu/
腸活プレミアムエイト

ポイント③複数CVがある場合

資料DL、見積もり、お問い合わせなど、クロージングから誘導したいコンバージョンが複数ある場合もあります。

https://biztel.jp/
BIZTEL

上のページも情報が綺麗に並べられていて、見にくいという程ではありません。が、選択肢が多すぎてどれを選んだら良いかわからない人も居そうですよね。

人には、選択肢が多いと選ぶことを諦める心理(決定回避の法則)もあります。選択肢を絞るか、メインのCV部分を強して「とりあえず、これにしてみよう」と行動するように誘導するデザインにした方が良いでしょう。

下記ページはボタンのサイズ、配色で優先順位が出来ています。

https://www.ninjaconnect.com/telework/
NinjaConnect

選択肢が少ない場合も、ボタンの色を変えるなど変化をつけると分かりやすいです。

https://dream.jp/mb/wm/
DTI WiMAX 2+

ポイント④フォームは簡潔が好ましい

フォーム入力も、面倒になってユーザーが帰ってしまう原因の一つ。
資料をダウンロードをしてみようと思っても、住所や年齢・性別などを個人情報を逐一入力しなくてはいけなかったら嫌になってしまいますよね。

ランディングページ内にフォームを設置する場合も、フォームページに移動する場合も、フォームは入力項目を絞れると良いです。下記サイトくらいまでなら、ユーザーも入力してくれるのではないでしょうか。

https://customercore.jp/cc-service/
CustomerCore

https://www.fileforce.jp/docrequest/
Fileforce 資料ダウンロード

フォームの項目はWebデザイナーが決められるものではありません。
クライアントがフォームを使って収集したい項目をたくさん挙げてきた場合は、ちょっと相談してみましょう。コンバージョンが落ちる可能性がある、あなたがユーザーなら入力しますか?と項目を絞る提案をしても良いと思います。

実習

クロージングのデザイン参考をピックアップしてみましょう。
ランディングページ、ランディングページ型トップページ、どちらでも構いません。

  • CVボタンが1つだけのクロージングを2つ集める
  • CVボタンが複数あるクロージングを2つ集める
  • フォーム部分を2つ集める(お問い合わせページからでも可)
  • それぞれURL、業種、良いと思った点のメモを付属する

実習の提出は不要です。