Customer.ioのホームページから学ぶコンバージョン率の改善方法
今回は「Customer.ioのホームページから学ぶコンバージョン率の改善方法」についてご紹介します。
関連ワード （可能性、情報、証明等） についても参考にしながら、ぜひ本記事について議論していってくださいね。
本記事は、TechCrunch様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。
サイト訪問者を顧客へと転換させることができるホームページは、スタートアップが所有できる最も有用な資産の1つである。
コールドトラフィック（そのサイトで紹介されているビジネスについて知らない訪問者）を顧客へと転換させることができるようになれば、新たなオーディエンスを獲得するために、より多くの時間とリソースを注ぐことができる。
この記事では、マーケターが自分でキャンペーンを設計し、そのようにしてカスタマイズしたキャンペーンを実施するためのマーケティング自動化プラットフォームCustomer.ioのホームページを分析してみようと思う。Customer.ioの顧客リストには、大企業からスタートアップまで、数千の企業が名を連ねている。
ランディングページの主なセクションすべてを分析して、スタートアップのホームページのコンバージョン戦略やコピーライティング戦略に使える点に注目する。
初めてのサイト訪問者の目に最初に映るのは、ウェブサイトを開いた際にスクロールしなくても見ることができる部分、つまり「ATF（アバッブ・ザ・フォールド）」と呼ばれる領域である。訪問者がそのまま閲覧を続けるか、そのサイトから離れてしまうかは、このATF領域が訪問者にとってどの程度役立つかどうかによって決まるため、ATFは非常に重要な部分である。
Customer.ioのATF領域は、ヘッダー、サブヘッダー、CTA（行動喚起）、顧客からの推薦コメント、視覚に訴える画像という5つの要素で構成されている。1つずつ見ていこう。
画像クレジット：Demand Curve
ATF領域では、その企業が何をしているのか、なぜそれが重要なのかを、正確かつ簡潔に説明する必要がある。
訪問者がそのヘッダーを読むだけで、どんなスタートアップなのか、なぜそのスタートアップの製品を使うとよいのかを理解できれば、そのヘッダーは全体的に効果的なヘッダーだということができる。
Customer.ioのヘッダーでは、同社の製品が「messaging workflows（メッセージング・ワークフロー）」という2つの言葉で説明されている。Customer.ioを使えば、ユーザーが理想とするワークフローを構築できるというメリットがあること、つまり全面的にカスタマイズが可能であるということをヘッダーから読み取ることができる。
画像クレジット：Demand Curve
サブヘッダーでは、ヘッダーで掲げている顧客へのメリットをどのように実現させるか、という点を説明する。Customer.ioのサブヘッダーでは、同社のメッセージング自動化プラットフォームを使って、ユーザーが独自のワークフローを構築できることが説明されている。
画像クレジット：Demand Curve
サブヘッダーで製品の対象者について簡単に言及することも効果的な場合がある。Customer.ioのサブヘッダーでは、同社の製品の対象者が明確に指定されているため、ユーザーは「自分はハイテクに精通したマーケターだろうか」と考える。自分がそのようなマーケターだと思えば、サイトの閲覧を続けるだろう。あるいは、自分はその対象者には当てはまらないと思えばサイトを離れるだろうが、それはそれでまったく問題ない。
画像クレジット：Demand Curve
Customer.ioのサブヘッダーは「データドリブンなメッセージングによって顧客をより深く理解できるため、収益が増加する」という、ユーザーに提供できる最大のメリットについて言及して締めくくられている。
画像クレジット：Demand Curve
CTA（行動喚起）とは、サイト訪問者と企業との関係をさらに深めるために訪問者側の行動を促すためのサイト構成要素である。このように、訪問者側からの行動を促す何らかの仕組みがないと、訪問者を顧客に転換させることは非常に難しい。
大抵の場合は、ATF領域の中に配置するCTAは1つだけにして、ユーザーが通る道を1つに限定することが好ましい。ただし、例えば、デモをリクエストするCTAを配置したのに、デモを申し込む人が少ないことに気づいた場合は「無料トライアル」など2つ目のCTAを配置して試してみるのもよいかもしれない。Customer.ioのサイトでは後者が採用されている。「無料トライアル」のCTAがなければ、数多くの見込み顧客を逃す可能性があることを知っているのだろう。
Customer.ioは、上記のように複数のCTAをユーザーに提示しているとはいえ、本当はデモを申し込んで欲しい、というのが本心である。そのため、デモをリクエストするためのCTAは他のCTAよりも強調された表示になっている。全体デモを申し込むユーザーの方が、コンバージョンへと至る確率も、サイトに留まる確率も他のユーザーより高くなることを、同社は理解しているのだろう。
画像クレジット：Demand Curve
その製品ならではの価値をサイト訪問者によりよく理解してもらうために画像が役立つ場合に限り、ATF領域に画像を配置することはよいアイデアだと言える。実際のところ、企業のランディングページで目にするイラスト画像やストック画像は無作為に選ばれたような意味のないものが多い。
イラスト画像を使うな、と言っているわけではない。使うなら、自社の製品の価値を示すような方法で使う必要がある。Customer.ioのサイトでは、プッシュ通知のタイミングを遅らせるワークフローを視覚的に説明する画像が効果的に使われている。
画像クレジット：Demand Curve
顧客からの推薦コメントは、信頼を獲得するうえで必要不可欠なものである。さらに、他の顧客からの評価を掲載することには「皆がその製品について知っている中で、自分だけがチャンスを逃している」とサイト訪問者に感じさせるという目的もある。Customer.ioは、すでに3400社の企業が同社の製品を使用している、とサイトに掲載することにより、信用を確立し、ユーザーの不安を払拭している。また、顧客の中でも著名な企業のロゴを掲載することにより、伝えたいポイントをさらに強調している。
画像クレジット：Demand Curve
機能に関する説明は、ランディングページの大部分を占める。機能は、ユーザーにとってその製品が価値のあるものかどうかを判断する材料になる。同時に、ユーザーが抱くであろう懸念や反論についても、機能説明の部分で先を見越して対応する必要がある。
機能を説明する文章を作成する際の定石は、その文章を読む人が直面している問題について強調することだ。顧客が自身の抱える悩みについて説明する際によく使うフレーズを繰り返し使うことができるだろう。
Customer.ioのサイトを閲覧するのは、ハイテクに精通しているマーケターだが、彼らが抱える喫緊の課題を、サイトのコピー文によってさらに誇大する必要はない。Customer.ioは、それよりも、同社の製品を使うことによってユーザーの仕事がどれほど楽になるのかという点をアピールすることに焦点を当てている。
画像クレジット：Demand Curve
1つのセクションに多くの情報が存在する場合は、目立つ画像を使って訪問者の視線を誘導することができる。Customer.ioのサイトでは、黄色い電球の画像を使って、タイトルから段落、画像、顧客からの推薦コメントへと順に読み進めやすいように構成されている。
画像クレジット：Demand Curve
顧客からの推薦コメントを機能説明のセクションに組み込むことにより、機能説明の信用度を高めることができる。下記の画像で示されている通り、Customer.ioのサイトでは、実際のマーケターからのコメントを掲載して、タブウィジェットとして埋め込まれているそのセクションをさらに読み進めたいと訪問者に感じさせる仕組みになっている。掲載されているマーケターと同じ役職に就いている人であれば特に、他社の事例について読み、その決定に賛同する傾向が強い。
画像クレジット：Demand Curve
訪問者がウィジェットに興味を示さない場合は、タブや矢印などのナビゲーション方法をいくつか組み合わせて試してみることができる。
画像クレジット：Demand Curve
サイト訪問者は、ランディングページをスクロールしながら半分ほどまで読み進めたところで疲れを感じる可能性がある。より楽に読み進めてもらうためには、各機能の重要な点を目立たせることができる。Customer.ioのサイトでは、高度なメッセージング・ワークフローを構成するそれぞれのパーツを目立たせて「本当にこれ全部できるの？」と、訪問者にうれしい驚きを提供する仕組みになっている。
画像クレジット：Demand Curve
機能について説明する文章には常に顧客にとってのメリットを盛り込む必要がある。顧客が即座に思いつくであろう反論に注意を向けることによっても、同じ目的を達成することができる。信頼に足る企業であることを顧客に感じさせ、顧客に論理的に訴求できるためだ。
Customer.ioのサイトでは自在にカスタマイズできることが強調されているが、そのうちユーザーは、論理的な思考のスイッチが入って「ちょっと待て。同じようなものを以前にもセットアップしようとしたけど、うまくいかなかったじゃないか」と考えるようになる。Customer.ioのサイトでは、技術的な仕様を掲載することにより、そのような考えに前もって対応している。
さらに「わずか数回のクリックで」という表現を強調し、使い方が簡単で、セットアップにわずかな時間しかかからないことをアピールしている。
画像クレジット：Demand Curve
セグメンテーション機能の画像は、Customer.ioの製品を使うことにより、顧客のエンゲージメントが高まることを示唆している。
画像クレジット：Demand Curve
マーケターは、キャンペーンのために何千通ものメールを送信することが、どれだけ神経をすり減らす作業となるかを知っている。Customer.ioはこの悩みに注意を向け、テクニカルサポート用のチームとサービスがあることを強調して、その悩みへの答えを即座に提供している。
「自分が送信したメールが届かずに返ってきたり、迷惑メールフォルダに振り分けられたりすることは避けたい。リスクを取ってこのようなサービスを使うべきかどうか、わからない」と考えるユーザーもいるかもしれない。Customer.ioが配信率を最大化するためにユーザーのメールを分析することを確約しているのはそのためだ。
一部のユーザーは、当然のことながら、自社のデータを得体の知れないテック企業に渡して分析してもらうのは怖い、と感じるかもしれない。その点の信用度を高めるために、Customer.ioはデータの保護を保証している。
画像クレジット：Demand Curve
統計を使うことにより、信用があることをすぐに証明できる。例えば、ある企業が2021年だけで5億3500万件のウェブフックを送信したという事実を伝えれば、それはつまり、その企業が数多くの企業を顧客として抱えており、それらの顧客が同社の製品を使用していることを示すことになる。
扱うことができるデータの量について説明する際にも、文章より画像を活用した方が簡単だろう。
画像クレジット：Demand Curve
Customer.ioのランディングページでは、最後の数セクションで、プライバシー、セキュリティ、信頼について言及されており、それには理由がある。ユーザーの悩みを解決する機能をどれだけ用意したとしても、信頼を築くことなしにユーザーを勝ち取ることはできないことを、Customer.ioは知っている。だからこそ、同社は、どれだけの数の企業が同社に信頼を寄せているか、という点に言及してコピー文を締めくくっており、CTAのすぐ右側に、顧客企業のロゴを配置している。こうすることにより、サイト訪問者が同社に対して持つ信頼感をさらに高めることができる。
画像クレジット：Demand Curve
今回の分析を自社のホームページ作成に役立てるための主なポイントを以下にまとめてみた。
画像クレジット：Klaus Vedfelt / Getty Images
【原文】
A homepage that converts visitors into customers is one of the highest leverage assets a startup can have.
Once your website can convert cold traffic, you can spend more time and resources on acquiring new audiences.
This post is going to tear down the homepage of Customer.io, a marketing automation platform that lets marketers design and execute customized campaigns. Customer.io has thousands of customers ranging from large enterprise customers to startups.
This teardown covers all the key sections of a landing page so that you can apply the conversion and copywriting strategies to your startup’s homepage.
Capture the reader’s attention right away
When writing copy for the features section, you typically want to emphasize the problem your audience is facing.
The first thing a new visitor to your site sees is the section called above the fold (ATF). This section is critical because your visitor will decide whether to continue and scroll or bounce based on how useful your ATF is.
Customer.io’s ATF section has five pieces that we’ll dive into individually: header, subheader, call to action, social proof and a visual.
Image Credits: Demand Curve
A strong header that answers “why”
The header of your ATF section should explain exactly what your startup does and why it’s important in a concise way.
A general framework for writing a good header: If a visitor reads only your header, they should still know who you are and why they should use your product.
Help TechCrunch find the best growth marketers for startups.
Provide a recommendation in this quick survey and we’ll share the results with everybody.
Customer.io explains what their product is in two words: messaging workflows. The benefit of using Customer.io is that it enables users to build their dream workflows, which implies complete customizability.
Image Credits: Demand Curve
A subhead that goes deeper
The subhead explains how you’ll accomplish the promise of the header. Customer.io tells users that their automated messaging platform is how they let them build their own workflows.
Image Credits: Demand Curve
Subheads can also work by bluntly calling out who the product is for. Customer.io specifies who their product is for clearly. Users will now think, “Do I consider myself a tech savvy marketer?” If yes, they will continue reading. If no, they will bounce, which is completely fine.
Image Credits: Demand Curve
Customer.io finishes their subhead with the main benefit it offers: Users make more money from their customers because they are able to understand them better through data-driven messaging.
Image Credits: Demand Curve
How to write a high-converting call to action
Calls to action (CTAs) are used to encourage visitors to engage with your site to further the relationship. It’s very difficult to convert a visitor into a customer without some type of action mechanism.
Often, you only want one CTA in your ATF section so that users only have one path to take. But if, for example, you have a demo request CTA and you notice not many people are signing up for it, adding a secondary CTA, such as a free trial, may be worth testing. Customer.io does exactly this because they likely know they’d miss a ton of potential customers without a free trial.
Although they give users multiple options, it’s clear they want users to request a demo because that’s the emphasized CTA. They probably know that users who get a full demonstration are more likely to be converted and retained.
Image Credits: Demand Curve
Adding visuals to explain another way
Including a visual in your ATF section is only a good idea if it helps visitors understand the unique value of your product. Most cartoon explainers or stock images you see on company landing pages are arbitrary and meaningless.
That’s not to say you should stop using drawn visuals. Instead, use visuals to show your product’s value. Customer.io’s visual works because they visualize how the workflow uses time to delay a push notification.
Image Credits: Demand Curve
Add social proof to build credibility
Social proof is crucial for establishing credibility. It’s also used to make visitors feel like everyone already knows about the product and they’re the ones missing out. Customer.io establishes credibility and bypasses any suspicion by saying 3,400 companies already work with them. They further prove their point by showing the logos of their most recognizable customers.
Image Credits: Demand Curve
Describe the features that make your product unique
The features section will make up the bulk of your landing page. Features help users understand why your product is valuable to them. At the same time, it should address any concerns and handle objections proactively.
When writing copy for the features section, you typically want to emphasize the problem your audience is facing. This can be done by repeating the language you hear your customers using to describe their pain points.
Customer.io’s audience of tech-savvy marketers has a burning problem that doesn’t need to be further hyped by the copy. Instead, they focus on showing users how much better their life will be with their product.
Image Credits: Demand Curve
If you have a lot going on in one section, try using a contrasting visuals to guide the eye. Customer.io uses a yellow light bulb so that users naturally read from title to paragraph to image to social proof.
Image Credits: Demand Curve
Adding social proof to feature sections can make the claims feel more credible. Look at how Customer.io uses legitimate marketers to motivate users to look through the tabbed widgets. People, especially in the same profession, tend to look at and accept the decisions of others as correct.
Image Credits: Demand Curve
If users aren’t interacting with your widgets, experiment with multiple navigation options like tabs and arrows.
Image Credits: Demand Curve
Secondary features to give prospects peace of mind
As visitors are scrolling through your landing page, it’s possible they can get fatigued by the time they’re halfway through reading. To make things easier, highlight the important parts of each feature. Customer.io highlights all the moving parts of an advanced messaging workflow to give users a dopamine hit: “Can they can really do all of this?”
Image Credits: Demand Curve
Highlight a feature by describing how it applies to the reader
Your feature copy should be continuously laced with benefits. Another way to accomplish the same outcome is by addressing objections your customer might have right away. This will have the same effect by giving your reader a sense of your trustworthiness and appealing to their logic.
For Customer.io, the level of customizability is great until the user’s logic brain kicks in and they think: “Wait, I’ve tried setting something like this up in the past, and it never worked.” Customer.io hedges this by showing the technical specifics.
They also emphasize “Just a few clicks,” suggesting it’s easy to use and takes little time to set up.
Image Credits: Demand Curve
The visual for the segmentation feature implies users will see more engaged customers when using their product.
Image Credits: Demand Curve
How to handle objections in your homepage copy
Marketers know how nerve-wracking it can be to send an email campaign to thousands of people. Customer.io brings attention to this pain point and immediately handles it by highlighting their tech support teams and services.
A user might also think, “I don’t want my emails to bounce or end up in spam. I’m not sure I want to risk using a service like this.” That is why Customer.io ensures user emails get analyzed for maximum deliverability.
Some users understandably feel anxious about giving their data to a random “.io tech company.” To prove trust, Customer.io guarantees data protection.
Image Credits: Demand Curve
How to establish credibility in your industry
Using statistics can quickly establish credibility. If you come out and say you’ve sent 535 million webhooks last year, that implies you’re working with a lot of companies and those companies are using your product.
It’s also easier to explain the volume of data you’re able to handle visually than it is through a paragraph of text.
Image Credits: Demand Curve
Finish your page off with a final CTA and more social proof
The last few sections of the landing page are about privacy, security and trust for a reason. Customer.io knows that no amount of painkilling features will win a user over without establishing trust. This is why they make sure to end the copy with a statement about how many companies trust them and include another company wall to the right of the CTA. It reminds visitors how credible they are.
Image Credits: Demand Curve
How to apply this teardown to your homepage
To summarize, here are the key points you should take away from this teardown:
（文：Joey Noble、翻訳：Dragonfly）