ウェブサイトの例をコピーするのはやめよう。その骨格を盗もう。

要約

ウェブサイトの例に関するアドバイスのほとんどは罠です。うまくいったものをコピーしろと言うので、法律事務所のサイトにSaaSのヒーローを貼り付けて、なぜ失敗するのか不思議に思うのです。例とは、複製するためのテンプレートではなく、意思決定の証拠です。有効なプロセスはリバースエンジニアリングです。ヒーロー、証拠、行動喚起の背後にある理由を引き出し、その決定をクライアントごとの購入者向けに再構築します。この記事では、SaaS、エージェンシー、ポートフォリオの例から何を盗むべきか、そして、すべてのクライアントで再現可能なシステムにするための決定のスワイプファイルの作り方を示します。

ウェブサイトの例に関するアドバイスのほとんどは罠です。「気に入ったサイトを見つけて盗みなさい」と言います。そこでブックマークフォルダをまとめ、屋根工事業者、法律事務所、B2B SaaSクライアントのために同じヒーロー、同じレイアウト、同じホバーエフェクトを再構築します。結果は、見た目もコンバージョンも同じで、しかも悪いという、高価なクローンです。例はテンプレートではありません。それは、賢いチームが特定のオーディエンス、特定の瞬間、特定の商業的約束のために下した決定の証拠です。実際に機能するプロセスはリバースエンジニアリングです。例の背後にある決定を読み取り、それらの決定を平易な文章で書き留め、クライアントごとの購入者向けにゼロから再構築します。

ヒーローを契約書のように読む

すべての例のレビューは、ヒーローセクションを契約書として読むことから始めます。見出しの約束、サブ見出しの証拠、単一の行動喚起に注目します。それ以外はすべて装飾です。作成者がその見出しを書く前に、訪問者についてどのような決定を下したかを問います。その答えこそ再利用できる部分です。

Calendlyのタグライン「スケジュール設定のメールのやり取りをなくす」は、作成者が訪問者をメールの往復に溺れる忙しいプロフェッショナルだと判断したから機能しています。約束は時間の節約です。CTAは「ミーティングを予約」です。その決定はサービス業にも転用できます。簿記クライアントの訪問者は書類作業を嫌う事業主です。見出しは「スプレッドシートの混乱なしに帳簿を締める」と約束し、CTAは「無料クリーンアップを取得」にすべきです。同じ決定、異なる言葉です。Notionは「Notionを無料で入手」という単一のCTAを目指しています。同じ規律から来ています。1ページ、1アクション、邪魔なものはありません。何が見えないかに注目してください。カルーセルも、二次的な「もっと学ぶ」ボタンも、電話番号を求めるフォームもありません。それぞれの省略が決定であり、省略の決定はコストがかからないので最もコピーしやすいのです。

Linearのヒーローは同じ規律をさらに推し進めています。見出し1つ、サブ見出し1つ、ボタン1つ。スクロールするまでスクリーンショットはありません。決定は「このオーディエンスはすでに問題を知っているので、私たちの仕事は教育ではなく適合性を伝えることだ」というものです。その決定を保存しましょう。クライアントの購入者が洗練されているなら、その抑制をコピーします。そうでないなら、クリックを求める前に説明を追加すべきだとわかります。ヒーローの単語数も決定です。3つのことを言おうとするヒーローは何も伝えません。例に折りたたみの上にあまりにも多くのアイデアがある場合、それはモデルではなく警告として扱います。

実際の例でやってみましょう。あなたが感心するSaaSのホームページをレビューしているとします。ヒーローには短い見出し、1つのサブ見出し、1つのボタンがあります。決定を順に書き出します。訪問者は誰か、彼らの痛みは何か、前に進むための1つのアクションは何か。次に屋根工事のクライアントに適用します。訪問者は真冬に屋根が漏れているプロパティマネージャーです。痛みはリスクとダウンタイムです。アクションは「評価を受ける」です。SaaSの例が「訪問者は製品が動いているのを見る必要がある」と決定したなら、製品アニメーションを完成した作品の写真に置き換えます。同じ決定、異なる媒体です。それが、似たような失敗をせずに盗む方法です。1ページ1アクションの規律だけでも、実証済みのSaaSランディングページのベストプラクティスを詳しく調べてください。

重要なのは業界ではなく意図です

例を業界ラベルで分類するのはやめましょう。「これはSaaSサイトだ」というのはほとんど役に立つ情報を与えません。「これは、購入者がコミットする前に3つのオプションを比較する複雑な決定のためのサイトだ」というのは、何を盗むべきかを教えてくれます。クライアントの購入者の意図で分類し、例のタイプをその意図に合わせます。

SaaSサイトは、購入者の意図が「これが私の問題を解決するかどうかを決める」であるため、コンバージョンを獲得します。見出しが約束を伝え、トライアルやデモが証拠となり、CTAは単一です。エージェンシーサイトは、購入者の意図が「この人にお金やブランド、危機を任せられるか」であるため、コンバージョンを獲得します。証拠はケーススタディ、クライアントのロゴ、チームの信頼性です。CTAはしばしば相談です。ポートフォリオサイトは、購入者の意図が「彼らのセンスは評判と同じくらい良いか」であるため、コンバージョンを獲得します。証拠は作品そのものであり、CTAは意図的に隠されていることもあります。

例のタイプ	訪問者の意図	これを盗む	これはスキップ
SaaS	「自分に合うか決める」	価値提案の規律、単一CTA、機能から利益へのコピー	製品のみのアニメーション、価格設定ページの構造、デモ優先のCTA
エージェンシー	「この会社を信頼できるか」	ケーススタディ、クライアントの証拠、名前のあるチーム、明確なエンゲージメントパス	長ったらしいプロセスページ、専門用語が多いアプローチのコピー
ポートフォリオ	「センスは作品と同じくらい良いか」	強力なプロジェクトストーリー、ビフォー/アフター、控えめなプレゼンテーション	連絡先情報が少ない、個性優先のコピー、隠れたCTA

ここでエージェンシーが間違うのは、例をクライアントの購入者ではなく自分の野心に合わせてしまうことです。法律事務所のクライアントが競合他社が持っているから「ポートフォリオサイト」を求めるとします。意図テストを実行します。弁護士を雇う人は怖がっています。彼らは、弁護士が似たような事件で勝ったことがあり、公正に請求し、自分たちを愚かだと感じさせないという証拠を求めています。これはポートフォリオパターンではなく、エージェンシーパターンです。エージェンシーの例から盗みましょう。ケースの結果、クライアントのストーリー、弁護士会の会員資格、明確な「エンゲージメントの始め方」セクションなどです。特定のクライアントにとってどの形式が実際に勝つかを決定する必要がある場合は、例を開く前に形式選択フレームワークを確認してください。

テーブルはトリアージツールであり、刑務所ではありません。商業プロジェクトに入札する建設下請け業者の場合、購入者の意図は「このチームはスケジュールと予算を守って実行できるか」です。それはポートフォリオの証拠を伴うエージェンシーの信頼です。ハイブリッドは常に起こります。1つの形式を選ばなければならないと考えるのが間違いです。あなたが選ぶのは、どのパターンが支配的かであり、どの単一形式を使うかではありません。建設サイトはビフォー/アフターの写真（ポートフォリオパターン）を見せつつも、安全認証や組合員資格（エージェンシーパターン）を前面に出すことができます。意図によって比率を決め、クライアントのブランドボイスに最終的なレイアウトを任せます。

2つ目のシナリオを考えましょう。フラクショナルCFOのコンサルタントです。購入者は以前のコンサルタントに痛められた創業者です。これはエージェンシーの問題です。クライアントと正確な成果を挙げているエージェンシーサイトを研究します。あなたのクライアントは必ずしもクライアント名を挙げられないかもしれません（NDA）。そのため、決定は転用されますが、証拠は変わります。ロゴの代わりに匿名化された「フィンテックのポートフォリオ企業」と成果の言葉を使います。「信頼は証拠の具体性に依存する」と計画に書き込みます。これでクライアントは各要素が存在する理由を理解します。

デザインではなく決定を借りる

ほとんどの「ベストプラクティス」記事は、デザインの選択が伝わると言います。それは真実ではありません。フルブリードのビデオヒーローは、ドローンの写真ポートフォリオで機能します。オーディエンスの仕事は映像を判断することだからです。同じフルブリードのビデオをリーガルドキュメントサービスのホームページに置くと、製品を隠してしまいます。「アーティストのように盗め」というのは、実行できる最悪のアドバイスです。アウトプットを盗むと似たようなものが生まれます。決定を盗むと、たまたまコンバージョンするカスタム作品が生まれます。

そこで、例の注目すべき選択ごとに、「なぜなら」を一文で書きます。余白：「なぜなら、このオーディエンスは空間をプレミアムと同一視するから」。暗い背景：「なぜなら、このオーディエンスはエンジニアリングで考え、ダークモードを技術的に感じるから」。笑顔の人：「なぜなら、このオーディエンスは取引を恐れ、温かみを求めるから」。これで決定は移植可能になります。プレミアム法律事務所は余白の決定が必要かもしれませんが、ディスカウントのリーガルサービスはそれを拒否しなければなりません。コピーするスクリーンショットではなく、適用するルールが手に入ります。

スクリーンショットを撮る前に「なぜなら」を書きます。あなたの記憶はスクリーンショットを「素敵なデザイン」として保存し、1週間で理由を失います。書かれた「なぜなら」はメカニズムを明確にすることを強制します。書けなければ、例を理解していない——ただ好きだっただけです。その区別がすべてです。

具体的な例を積み重ねます。フリーランスデザイナーのポートフォリオサイトを見るとします。各プロジェクトは大きなイメージで始まり、次に成果、そしてクライアント名が続きます。決定は「このオーディエンスは物を見て結果を買う」です。今、あなたは住宅リフォームのサイトを再設計しています。購入者の仕事もまた物を見ることです——変身を見ることです。だから決定は転用されます。ビフォー/アフターのプロジェクトギャラリーをリードします。しかし、購入者はチームが時間通りに来ることも信頼する必要があります。そこでエージェンシーカラムから決定を追加します。折りたたみの上に相談CTAとお客様の声です。それが骨格を盗む方法です。2つの借りた決定、ゼロの借りたデザインです。

あなたが示した受賞歴のある例のようなサイトを望むクライアントから反発を受けるでしょう。丁寧に抵抗してください。その例はピクセルではなく決定で賞を獲得したこと、そして彼らの購入者はその例の購入者とは異なることを伝えます。一文の「なぜなら」を指さして「この決定は機能しますが、このビジュアルはあなたのオーディエンスには機能しません」と言えば、会話は簡単になります。

注意点：クライアントの購入者が視覚的に洗練されている場合——建築家、クリエイティブディレクター、社内ブランドチーム——センスが製品です。もっと文字通りに借りてください。問題は決して「この例が好きか」ではなく「クライアントの購入者はこの決定を必要としているか」です。そうでなければ、罪悪感なく捨ててください。

コンテキスト付きのスワイプファイルを構築する

毎年多くのサイトを構築する場合、一回限りのインスピレーションは役に立ちません。スクリーンショットではなく決定を保存するスワイプファイルを構築します。シンプルなテーブルを使用します。例、URL、オーディエンス、意図、約束、証拠、CTA、「使用しない対象」。一文の「なぜなら」の列をもう1つ追加します。その列に価値があります。

各行には、例のURL、スクリーンショット、一文の「なぜなら」、支配的な購入者意図、約束、証拠、CTA、「使用しない対象」の警告が必要です。各行に意図ラベルをタグ付けします：「緊急のローカルサービス」「熟慮の購入」「信頼に敏感なプロフェッショナル」「センス主導のクリエイティブ」。新しいクライアントブリーフが到着したら、最初に意図ラベルでフィルタリングします。業界はタイブレーカーのみです。歯科クライアントと配管クライアントは「今すぐ見積もりを取得」の意図を共有できます——配管の例は、先週保存した派手な歯科専門サイトよりも歯科ページに役立つかもしれません。

ファイルを四半期ごとにレビューします。コンバージョンを獲得しなくなった、または陳腐化した例を削除します。毎週1つの発見を追加します。単一のCTAでもかまいません。2四半期後には、単一の例では提供できない内部決定ライブラリを所有しています。

クライアントのキックオフでファイルを使用します。フィルタリングされたビューを提示します：「このページシステムは、あなたの購入者に適合する3つの決定から構築しました」。あなたのエージェンシーがセンスだけでなくシステムを持っていることを示します。それだけで、トレンドのレイアウトをコピーするよりも多くの仕事を獲得できます。

何かを出荷する前に、気にしない顧客のように結果を監査してください。その監査は、正当な場所を獲得していない盗まれたデザイン決定をすべてキャッチします。

結論

ウェブサイトを収集するのをやめましょう。理由を収集しましょう。次にクライアントブリーフを受け取ったとき、スワイプファイルを開き、彼らの購入者に合う意図を見つけ、適合する決定を盗みます。デザインは必然的に彼らのものになります——なぜなら彼らの市場、ブランド、予算が異なるからです。それがポイントです。リバースエンジニアリングされたサイトは、他の誰かのオーディエンスにとって真実だった決定から構築され、あなたのものに対して再テストされたからこそコンバージョンします。