1つのコンバージョン骨格、多様なクライアントの顔

要約

ほとんどのランディングページのパフォーマンスが低いのは、デザインが悪いからではなく、毎回ゼロからページを構築しているからです。エージェンシーは、クライアントごとにレイアウト、階層、CTAの配置を再決定することで、時間と一貫性を失っています。この記事では、オーダーメイドページ、テンプレートライブラリ、再利用可能なコンバージョン骨格の比較を通じて、ブランドレイヤーとコンバージョンレイヤーを分離する方法、平易なルールを書く方法、そしてカスタムビルドが本当に価値がある場合を判断する方法を学びます。その結果、納品が速くなり、コンバージョン率が向上し、各クライアントに固有の感覚を保ったページが実現します。

すべてのクライアントページを構築する2つの方法

前のクライアントで成果を出した同じランディングページが、次のクライアントでは2倍の時間がかかるのはなぜでしょうか？それは毎回ゼロから始めるからです。レイアウトを選び、ヒーローセクションを考案し、ボタンの色について議論し、新しいデザインが成功することを願う。それはデザインではなく、ギャンブルです。

ランディングページのブリーフには2つの進め方があります。1つ目はオーダーメイドで、すべてのページは白紙のキャンバスから始まり、カスタム構造が与えられます。2つ目は骨格で、固定されたコンバージョン構造を維持しつつ、ブランドごとにリスタイルします。どちらも間違いではありません。それぞれ異なる問いに答えています。

割引クーポンとB2Bデモ依頼を例に考えましょう。表面的には共通点はありません。一方はクーポンを販売し、もう一方はミーティングを販売します。しかし、どちらも最初の2秒で滞在する理由、単一のアクション、そしてそのアクションを安全に感じさせる何かが必要です。それが骨格です。

トレードオフを1つの表にまとめました：

アプローチ	クライアントごとに変わるもの	固定されるもの	主なリスク
オーダーメイド	レイアウト、セクション順序、階層	ほぼなし	コンバージョン要素の欠落、遅い
テンプレートライブラリ	デザイン全体（セットから選択）	選択したテンプレート	構造の不整合、デザイン主導の決定
骨格	色、フォント、画像、トーン	ヘッドラインブロック、CTA、証明の配置	画一化、ブランドの摩擦
ハイブリッド	1〜2つのブランドゾーン	残り	厳格なルールが必要、さもなければ劣化

テンプレートライブラリは、静かな3つ目の選択肢です。多くのチームがテンプレートで運用しており、それはシステムのように感じられます。しかし実際にはそうではありません。テンプレートを切り替えるたびに構造が変わり、訪問者はページごとに新しい視覚的な経路を得ます。うまくコンバージョンするテンプレートもあれば、次はうまくいかないかもしれません。そして、どれがどれかはわかりません。骨格はその逆で、構造が定数であり、ブランドが変数です。

この記事の残りでは、骨格をデフォルトにし、いつそれを破るべきかを正確に知ることに焦点を当てます。短く言えば、再利用可能な構造を1つ構築し、各クライアントのブランドをその上に載せ、オーダーメイドの作業はそれを支払えるキャンペーンに限定します。

まずコンバージョン骨格を固定する

デザインツールを開く前に、最小限のページ構造を書き出しましょう。ワイヤーフレームではなく、論理のシーケンスです。まず問題を理解していることを証明し、次にオファーを提示し、そのアクションを安全にします。各論理の後に自然に視線が向かう場所にCTAを配置します。

ランディングページのガイドは、同じ構成に同意しています。成果を明示するヘッドライン、サポートライン、視覚的な証明、社会的証明、そして明確な1つのCTAです。ページにこれら5つがすべて揃っていなければ、スタイリングの準備はできていません。編集の準備が必要です。

これはまた、視覚的なノイズを削る場所でもあります。最初に削るのはナビゲーションです。セカンダリリンク、装飾的なカルーセル、「もっと学ぶ」迷路はすべてCTAと競合します。訪問者をアクションに導かない要素はすべて、維持するためにお金を払っている気晴らしです。

カルーセルは良いテストになります。ページが回転するヒーローで始まる場合、訪問者はページの内容を知る前に決定を迫られます。骨格はカルーセルで始まるべきではありません。1つのヘッドライン、1つのサポートライン、1つの画像、1つのCTAで始めましょう。ページのメッセージを1文で言えないなら、そのページにはメッセージがありません。

余白は骨格の一部であり、贅沢品ではありません。各ブロックには呼吸する余地が必要であり、CTAの周囲には競合するものがないスペースが必要です。クライアントがもっとコンテンツを求めてきたとき、骨格は「訪問者を次のブロックに進める場合のみ」と言います。それ以外はサポートページに属します。

ブランドは下ではなく上に載せる

次に、ブランドを取り出して最上位レイヤーに置きましょう。骨格が順序とスペースを決定します。ブランドレイヤーは、色、タイポグラフィ、写真、トーンを決定します。ブランドレイヤーはクライアントごとに根本的に異なっていてかまいません。骨格はそうであってはなりません。

信用組合とストリートウェアブランドは、同じ骨格を共有しながらまったく異なる印象を与えることができます。一方は落ち着いた青と安心感のある言葉遣いを使い、もう一方は派手なタイポと商品写真を使います。同じヘッドラインブロック、同じCTA配置、同じ証明の順序です。訪問者が見るのはブランドです。コンバージョンは構造からもたらされます。

クライアントが「もっと私たちらしく感じさせてほしい」と頼んできたら、それが何を変えるのかを尋ねましょう。それが画像、トーン、ケーススタディを変えるのであれば、もう完了しています。もしヘッドラインとフォームの順序を変えるのであれば、訪問者と交渉していることになります。

ブランドには存在感を与えつつ、役割は限定すべきです。ロゴはすぐに見えるようにし、パレットはページを満たし、トーンは間違いなく認識できるようにします。ブランドがすべきでないのは、骨格を再配置することです。クライアントがレイアウト変更を主張するなら、その変更がコンバージョンを改善するという証拠を求めましょう。通常、そんなものはありません。それは批判ではなく、その要求が行動ではなく好みに関するものであるというシグナルです。

注意点：製品自体が要求する場合、ブランドレイヤーは骨格に影響を与えることができます。物理的な製品には大きなヒーローショットが必要です。エンタープライズソフトウェア企業なら、より長いフォームが必要かもしれません。システムに1つのルールを組み込みましょう。ブランドは画像とトーンを調整できますが、CTAを孤立させることはできません。瞬時に信頼を構築したいなら、レイアウトではなくブランドレイヤーから始めましょう。

このキャンペーンにはどの程度のカスタマイズが必要か？

「オーダーメイドか骨格か」という問いに一律のルールで答えることはできません。キャンペーンごとに判断します。ブリーフを3つの質問に通しましょう。

ページはどのくらいの期間公開されますか？2週間しか動かないページには、カスタムビルドを償却する時間がありません。2年間動くページなら、カスタムビルドを正当化できます。

どれくらいのトラフィックが見ますか？トラフィックが少ないページは、キャンペーンが終わる前にカスタムデザインが機能することを証明できません。トラフィックが多いページは、オーダーメイドのレイアウトをテストするのに十分なデータを提供します。

1コンバージョンの価値はいくらですか？無料のeBookダウンロードと数千万円のコンサルティングは、異なる賭けです。価値が大きいほど、オーダーメイドセクションの余地が広がります。ただし、高価値のオファーでも骨格で十分にコンバージョンできることに注意してください。オーダーメイドビルドは必須ではなく、贅沢品です。

次のレベルを使用します：

• レベル1：リスタイルのみ。同じ骨格、新しい色、フォント、画像、コピー。
• レベル2：コンテンツ階層の調整。セクションは同じまま、ヘッドラインブロック、証明の順序、フォームの長さを入れ替えます。
• レベル3：オーダーメイドビルド。カスタムレイアウトと独自のセクション。

レベル1をデフォルトにします。オファーが異なる論理を必要とする場合のみレベル2に移行します。レベル3は、差分を測定できる十分なトラフィックと価値があるキャンペーンのために取っておきます。クライアントの「目立つ必要がある」という言葉に、通常機能するという証拠を覆させてはいけません。

例で調整します。サブスクリプションサービスが新しいプランを追加する場合は通常レベル2です。同じ骨格、新しい価格ブロックです。非営利団体の年末キャンペーンはレベル1です。同じ構造、新しいストーリーと写真です。広範なメディア予算と高価格帯の製品ローンチはレベル3に値します。ほとんどのブリーフはそのローンチではありません。

オーダーメイドがもたらすものは、新しい構造をテストする自由です。それは現実的ですが、代償があります。キャンペーンが実行されるまで新しい構造が機能するかどうかわからないのです。骨格がもたらすものは、変わらない部分についての確実性です。コピー、証明、オファーといった実際に行動を変える変数に創造的エネルギーを注ぐことができます。オファーについて学びたいときは骨格を選び、レイアウトについて学びたいときはオーダーメイドを選びましょう。

アセットはページごとではなく一度に集める

開始前に各クライアントが記入するインテークリストを作成しましょう。ロゴファイル、ブランドカラー、フォント、承認済み画像2〜3点、1つの確固たる証明要素、ボタンに表示したい正確な文言を依頼します。これは管理的に聞こえますが、コンバージョンに関する決定です。アセットを手にしていれば、骨格をすぐに組み立てられます。なければ、検索し、待ち、即興で対応します。即興はオーダーメイドの始まりです。

証明要素はクライアントが忘れがちなものです。引用、数字、顧客ロゴなどです。それがないと、ページの証明ブロックに穴ができ、その穴が新しいセクションを発明するように誘います。発明してはいけません。アセットを求めましょう。クライアントにそれがなければ、ページはまだコンバージョンできますが、証明ブロックは顧客の写真やプレス掲載の場所になります。何を使うにしても、本物である必要があります。骨格は信頼を製造できません。

インテークリストをテンプレートにします。新しいクライアントには、同じ5つのリクエストを含む同じファイルが渡ります。透過背景のロゴファイルやフォントライセンスを含まない「ブランドガイドライン」がどれほど多いかに驚くでしょう。ページビルド中ではなく、その前にそれらの問題を発見しましょう。ブランドレイヤーが摩擦なくスナップできる場合にのみ、骨格は機能します。

骨格を平易なルールとして書く

骨格はデザインファイルにだけ存在する場合、生き残りません。レシピのように書き出しましょう。ページに触れるすべての人（フリーランサー、ジュニアデザイナー、コピーライター）が同じルールを必要とします。

ほとんどのクライアントワークで機能するセットは次のとおりです：

• ページごとに1つのプライマリCTA。ファーストビューと証明ブロックの後に再度表示されます。
• ヘッドラインは短く、製品ではなく成果を明示します。
• CTAボタンには動詞と成果物を入れます。「送信」ではなく「レポートを入手」。
• フォームの前に少なくとも1つの証明要素（引用、数字、顧客ロゴ）を表示します。
• メインナビゲーションなし。外部リンクなし。
• すべての画像には、そこにある目に見える理由があります。理由を言えないなら、削除します。

これらのルールは意図的に退屈です。退屈さがポイントです。ルールが明確であれば、優れたランディングページを数週間ではなく数時間で作成でき、ミーティングなしで他の人に引き渡せます。

ルールが触れていないことに注目してください。特定の色、フォント、レイアウトグリッドには触れていません。成果（「1つのプライマリCTA」）は挙げていますが、正確な配置は挙げていません。それがブランドレイヤーを自由にしているのです。デザイナーは1つのルールも破らずに、あらゆるビジュアルスタイルを適用できます。

次に「空白」ルールを追加します。ブリーフがルールでカバーされていない何かを求めてきたら、その変更を書き留め、他の2つのページでも生き残るかどうか見てみましょう。生き残るなら骨格に追加します。そうでなければ省きます。

これが骨格の成長方法です。すべてのページに必要な5つの要素から始まります。6か月後には、繰り返しのビルドで効果が見られたため、「オファーに保証がある場合はフォームの隣に置く」が含まれるかもしれません。ルールは静的ではありません。学んだことの生きた記録です。

テンプレートは骨格ではない

テンプレートライブラリは多くの出発点を与えます。骨格は1つの構造と一連の不変条件を与えます。クライアントリストが増えるにつれて、その違いは重要になります。

テンプレートでは、ページを開始する人が早すぎる段階でデザイン決定を下します。「このクライアントに合うテンプレートはどれか？」という問いは、ヘッドラインが書かれたり証明が集められたりする前に、レイアウトについての回答を強制します。テンプレート自身の構造が、何を含めるかを決定します。訪問者は、コンバージョンの論理ではなく、テンプレートのカテゴリによって設計されたページを読むことになります。

骨格では、決定は逆転します。構造は、機能することがわかっているものによってすでに決定されています。唯一の疑問は、どのクライアントアセットがブランドレイヤーを満たすかです。デザインではなくメッセージから始めます。

これはテンプレートが役に立たないという意味ではありません。まだ証拠がない場合（新しいオファータイプ、新しいオーディエンス、新しいチーム）にはテンプレートが役立ちます。ただし、骨格の代替としてではなく、骨格の出発点として使用します。必要とする構造に最も近いテンプレートを取り、それを素のセクションに分解し、ルールを適用します。テンプレートの構造がルールと対立するなら、テンプレートが負けます。

同じ論理は、プロンプトからレイアウトを生成するページビルダーにも当てはまります。生成されたレイアウトは出発点であり、システムではありません。どのセクションを残すか、CTAをどこに置くか、どの証明がページを支えるかを決定する必要があります。骨格とは、維持する決定のセットであり、生成された出力は編集されるべきもう1つのテンプレートにすぎません。

レイアウトではなく成果を売る

クライアントはレイアウトについて意見を持つでしょう。修正方法は、会話を再構成することです。「フォームは左にあるべきだと思う」と言われたら、「訪問者に最初に何を感じてほしい、または何をしてほしいですか？」と尋ねます。リクエストをゴールに結び付けます。クライアントが成果を挙げられないなら、骨格を維持します。

同じページの異なるブランドレイヤーを持つ2つのバージョンを見せて、選ばせます。これにより、構造に触れることなくクライアントに所有感を与えます。決定は「どの配置」ではなく「どのトーン、どの画像」になります。ミーティングに費やす時間は減り、成果を変える部分であるコピー、証明、オファーに多くの時間を費やせます。

骨格へのクライアントの同意が必要なら、サイドバイサイドテストを実行します。クライアントの現在のページと骨格バージョンを比較し、データに決定させます。ただし、何かを学ぶのに十分なトラフィックが得られるまでテストを開始してはいけません。小規模なオーディエンスでの短いテストは何も教えてくれません。数字が語れるまで待ち、勝者を新しい骨格にしましょう。

オーダーメイドへの反論（そしてオーバーライドへの賛成）

最もよく聞かれる前提は、すべてのランディングページはすべてのブランドがユニークだからユニークでなければならないというものです。その前提はコンバージョンを犠牲にします。訪問者はあなたのレイアウトを競合他社と比較して訪れるわけではありません。彼らは問題と短い注意力を持って訪れます。使い慣れた構造は摩擦を減らします。訪問者はどこを見て、次に何をすべきかをすでに知っているからです。

「使い慣れた」は「同一」を意味しません。それは、ブランドレイヤーが変わる間も構造が一貫していることを意味します。あなたの仕事は、すでに機能している構造を維持しながら、クライアントにページが自分たちのものであると感じさせることです。

オーダーメイドのアプローチは、クライアントが見えないコストも隠しています。すべてのカスタムレイアウトは実験です。コンバージョンするかもしれませんし、しないかもしれません。トラフィックが費やされるまでわかりません。骨格は既知の量です。変数はコピー、証明、オファーに減ります。それらが実際に行動を変える変数です。レイアウトはその中の1つであることはまれです。

オーダーメイドが元を取るシナリオは正確に1つです。高価値のオファー、シグナルを得るのに十分なトラフィック、そして反復するのに十分な時間がある場合です。そのシナリオでは、カスタムレイアウトは失っても構わない賭けです。その3つの条件が満たされなければ、クライアントのお金を推測に費やしていることになります。

しかし、骨格は宗教ではありません。オーバーライドのケースは現実にあります。営業サイクルが長いエンタープライズバイヤーは、反対意見の処理のためにより多くのスペースを必要とすることがよくあります。独自のリスクプロファイルを持つ製品は、追加の信頼セクションを必要とします。ターゲット行動が本当に異なる場合は、別の骨格を使用します。2〜3つの骨格を維持し、オファーごとに選択します。

最悪の失敗は、自分の都合による標準化です。ただ速いからという理由だけで、すべてのクライアントに同じ骨格を使うと、クライアントではなくエージェンシーらしいページが生まれます。だからこそ、ブランドレイヤーは派手であり続け、骨格は控えめであり続ける必要があります。

再利用をデフォルトではなく規律として

新しいブリーフが来たら、最も良いパフォーマンスを出した前回のページをコピーします。白紙のキャンバスを開かないでください。最初にブランドレイヤーを変更します。色、フォント、画像、ロゴ、トーン。次に、ヘッドライン、CTA、証明のオファーを変更します。

これは再設計ではなく既存ページを編集すると同じ論理です。車輪を再発明しているのではなく、タイヤを交換して塗装し直しているのです。前のページにこのオファーがサポートできないお客様の声セクションがあったら削除します。新しいオファーに保証があるなら追加します。コピーし、監査し、出荷します。

コピーしてはいけないもの：前のクライアントの主張。クライアントAのお客様の声はクライアントBのページでは無価値です。骨格はコンテンツではなくポジションを運びます。各クライアントが独自の証明、数字、例を提供します。

バージョン履歴を保持します。新しいページごとに、「[クライアントA]のページから開始、ヘッドラインと証明ブロックを変更、骨格は維持」と1行書きます。3〜4ページ後にはパターンが見えてきます。そのパターンが骨格の次のイテレーションになります。

この規律が重要なのは、構造とコンテンツを分離することを強制するからです。ページをコピーしてコンテンツだけを変更するとき、あなたはコンテンツをテストしています。毎回構造を変えると、ページのどの部分が結果に責任があるのかを決して学べません。

このシステムが壊れるところ

骨格アプローチには失敗モードがあります。噛みつく前に知っておきましょう。

骨格が締め付け具になる。ブランドレイヤーを適用してもすべてのページが同一に見える場合、訪問者は自分がどの会社を見ているのかわかりません。修正：ロゴ、パレット、トーンを最初のビューポートで見えるようにします。クライアントが自分のページを競合他社の隣で見て違いに気づかないなら、ブランドレイヤーはその役割を果たしていません。

訪問者ではなく自分のスピードのために最適化する。シングルクリック購入用に作られた骨格は、多段階の意思決定を伴うホワイトペーパーダウンロードには機能しません。代替の骨格の1つを使用します。目標が変われば、構造も変わります。

テンプレートにないからという理由で証明要素を省略する。絶対にやめてください。引用、数字、認知度の高いロゴは、新しいカラーパレットよりも多くの効果をもたらします。骨格は証明を強制するために存在するのであり、省略を許すために存在するのではありません。

テストしない。骨格は仮説であり、法律ではありません。ヘッドライン、CTAコピー、証明の配置について小規模なテストを実行します。証拠が変わったら、骨格を更新します。それが骨格を生きたものに保つ方法です。

もう1つの失敗モード：訪問者が戻る手段を必要とするかどうか尋ねずに、すべてのページでナビゲーションを削除する。研究に裏付けられたデフォルトはランディングページからナビゲーションを取り除くことですが、そのルールの目的は人々をページに留めることです。戻るボタンなしで訪問者の次の質問にページが答えられない場合は、それを果たす最小限のリンクを追加します。骨格は「ナビゲーションなし」を法律ではなく出発点として言います。

次のページは骨格から始まる

今すぐ、どのアプローチをデフォルトにするかを決めましょう。複数のクライアントを管理しているなら、答えはほぼ常に「骨格をデフォルトに、オーダーメイドは例外」です。そのルールを書き留め、オンボーディング資料に入れましょう。次のクライアントがページが見覚えがあると尋ねたら、意図的だと伝えましょう。

骨格の中心はページが答えるべき1つの問いです。それ以外のすべて（ブランドレイヤー、画像、トーン）は、その答えの周りの装飾です。

各ページを白紙のキャンバスとして扱うのをやめましょう。骨格を一度構築し、頻繁にリスタイルし、めったにオーバーライドしない。それが、ブランドを失うことなく、すべてのクライアントでランディングページを繰り返し機能させる方法です。