BLOG
参考サイトの共通点の見つけ方 — 複数の良い LP に共通する「勝ちパターン」を見つける
いい LP をいくつもブックマークした。でも、集めただけで「で、ここから何を学べばいいの?」と止まってしまう——参考サイトは集まったのに、共通して効いている法則が見えない。これは「良い LP」をたくさん見てきた人ほどぶつかる悩みです。1 つのサイトを丸ごと真似ると、そのサイト固有の事情（ブランド・商材・予算）まで一緒に持ち込んでしまいます。本当に効いているのは、複数の良いサイトに共通して現れる要素 のほう。この記事では、参考サイトの共通点の見つけ方を、手動で探す方法と、yorunoma で複数サイトの共通点・成功パターンを抽出する方法の両面から紹介します。
比較は Premium プランの機能です（→ 料金プランを見る）。まずは無料で試したい人は、1 サイトの URL を入れて配色・フォントなどの 5 要素を読み解く「分析」が、登録なしで 1 回試せます。
そもそも「参考サイトの共通点」とは
参考にしたい LP を 1 つだけ選んで真似ると、その 1 サイトに固有の事情まで写してしまいがちです。たとえば、ある LP の大胆な配色は「その会社のブランドだから成立している」のかもしれません。1 サイトだけでは、効いている法則 と そのサイト固有のクセ を区別できないのです。
そこで効くのが「共通点」です。同じジャンルや同じ印象の良い LP を複数並べて、どのサイトにも共通して現れる要素 を探す。複数に共通するということは、たまたまではなく「効いているから多くのサイトが採用している」可能性が高い——つまり再現性のある法則に近い、ということです。これは競合サイトの分析（competitive analysis）でプロがやっていることと同じ発想で、「良い LP」をただ眺めるのではなく、デザインの共通点を抜き出して自分の制作に転用するための見方です。
共通点は、感覚ではなく要素に分解して探せます。yorunoma が見る 5 要素——配色・フォント・アニメーション・構造・コピー——のそれぞれで「どのサイトも同じことをしているか」を見ていくと、勝ちパターンが浮かび上がります。
参考サイトの共通点を見つける 3 つの方法
複数の参考サイトから共通点を見つける手段は、大きく分けて 3 つあります。それぞれ向き不向きがあるので、簡単に比較します。
方法 1: 項目化して表に並べる（手動）
各サイトの配色・フォント・構造・コピーを項目ごとに書き出し、表に並べて見比べる方法です。「どのサイトも主役の色は 1 色」「どのサイトもファーストビューに数字がある」のように、同じ列に同じ傾向が並べば、それが共通点です。
きちんとやれば学びは大きい反面、手作業の負担が重い。1 サイトずつ要素を拾って表に書き込む作業は時間がかかり、サイト数が増えるほど続けにくくなります。
方法 2: ファーストビューだけを並べる（手動・簡易）
各サイトのファーストビュー（最初に見える 1 画面）だけを並べて、共通パターンを探す簡易法です。第一印象はファーストビューでほぼ決まるので、少ない労力で傾向をつかめます。
ただし、見えるのは「最初の 1 画面の印象」まで。配色の比率やコピーの役割といった、画面の奥にある共通点までは拾いきれません。あくまで当たりをつけるための入口です。
方法 3: yorunoma で複数サイトの共通点を抽出する
yorunoma は、2 つのサイトを選ぶと、配色・フォント・アニメーション・構造・コピーの 5 要素ごとに 共通している工夫 と 違うところ を出し、さらに 2 サイト横断で 効いている成功パターン を抽出します。手動の「主観に流れる・時間がかかる・見落とす」を、AI がまとめて解消するのが違いです。
なお、この 比較（比較診断）は Premium プランの機能 です。まず無料で試したい場合は、1 サイトの URL を入れる「分析」が登録なしで 1 回使えます。
yorunoma で参考サイトの共通点を見つける手順（3 ステップ）
比較は、すでに解析した 2 つのサイトを選んで行います。実際の流れは 3 ステップです。
まず、共通点を見たいサイトの URL を、それぞれ解析します。コードの知識は要りません。解析した結果は履歴に残るので、比較ではこの履歴から 2 つを選びます。
比較画面で「他のサイト同士を比較する」を選び、履歴から比べたいサイトを 2 件選びます（順番は問いません）。この比較診断は Premium プランの機能です。
比較が終わると、2 サイトの全体サマリー、それぞれの特徴、そして 5 要素ごとの「共通している工夫」と「違うところ」が並びます。どのサイトも同じことをしている要素＝共通点が、一目で分かります。
これで分かること
共通点を抽出すると、「なんとなく良い」で終わっていたものが、転用できる形になります。比較結果からは次のようなものが得られます。
- 共通している工夫 — 5 要素それぞれで、どのサイトも採用している効いている工夫
- 違うところ — 同じジャンルでもサイトごとに分かれる、判断の余地がある部分
- それぞれの特徴 — 各サイトが何で個性を出しているか
- 成功パターン — 2 サイト横断で見える「効いている工夫」と、なぜ効くか
- 自分の制作への応用 — 抽出したパターンを、自分の LP にどう取り入れるか
なかでも最後の 「成功パターン（効いている工夫 → なぜ効くか）」 が、yorunoma の比較の核です。事例まとめ記事は「良い LP をたくさん見せる」までですが、yorunoma は「複数サイトに共通して効いているのはこれで、理由はこうだから、こう転用できる」という勝ちパターンの言語化まで踏み込みます。集めて終わりにせず、自分の制作に活かすところまで運べるのが違いです。
共通点を見つけるときのコツ
並べ方しだいで、見える共通点の質は変わります。次の進め方がおすすめです。
- 同じジャンル・同じ印象のサイトを選ぶ — バラバラなサイトを並べても、共通点は「白背景」程度の当たり前しか出ません。狙う方向性が近いサイト同士を選ぶと、効いている法則が際立ちます。
- ファーストビューと CTA に注目する — 第一印象と行動喚起は成果に直結しやすい要素。ここでの共通点は、特に再現する価値が高い勝ちパターンです。
- 共通点だけでなく、あえての違いも見る — どのサイトも同じにしている部分（=守るべき型）と、サイトごとに変えている部分（=個性の出しどころ）の両方が分かると、真似と差別化のバランスを取れます。
共通点で型を押さえ、違いで差をつける。この両取りが、参考を眺めて終わらせず、自分の LP に勝ちパターンを移植する確かなやり方です。
よくある質問（FAQ）
一度に何サイトまで比較できますか。
1 回の比較では 2 サイトを比べます。3 サイト以上の共通点を見たいときは、ペアを変えて何回か比較してみてください。複数の比較で繰り返し現れる要素ほど、より確かな共通点（効いている法則）だと判断できます。
共通点と違い、どちらを見るべきですか。
両方に意味があります。共通点は「どのサイトも採用している＝効いている型」で、再現する価値が高い部分。違いは「サイトごとに判断が分かれる＝個性の出しどころ」です。まず共通点で型を押さえ、次に違いを見て自分らしさをどこで出すか決めると、真似と差別化のバランスが取れます。
「自分のサイトと比較する」とどう違いますか。
目的が違います。こちら（他のサイト同士を比較する）は、複数の良いサイトから 共通の勝ちパターンを見つける ための機能です。一方、自分のサイトを参考サイトに近づけたい場合は「自分のサイトと比較する」が向いています。使い方は 参考サイトと自分のサイトを比較して、理想に近づける方法 で紹介しています。
無料でできますか。
いいえ。サイト同士を比べる比較（比較診断）は Premium プランの機能で、1 か月に 30 回まで使えます。Starter・Pro プランでは使えません。まず無料で試したい場合は、1 サイトの URL を入れて 5 要素を読み解く「分析」が登録なしで 1 回使えます。各プランで使える機能は 料金プランを見る からご確認ください。
まとめ
いい LP を集めても、そこから何を学ぶかが見えなければ、ブックマークが増えるだけです。1 サイトを丸ごと真似るとそのサイト固有の事情まで写してしまいますが、複数の良いサイトに共通する要素は「効いている法則」の可能性が高い。yorunoma なら、2 つのサイトを並べて、配色・フォント・アニメーション・構造・コピーの 5 要素ごとに共通点と違いを出し、横断で効いている成功パターンを言語化できます。共通点で型を押さえ、違いで差をつける——これが、参考サイトを自分の勝ちパターンに変える第一歩になります。
あわせて読みたい
参考サイトと自分のサイトを比較して、理想に近づける方法
自分のサイトと参考サイトを並べ、5 要素の差分と「近づけ方」を具体的に出す。
自分の LP・サイトを診断して、改善点を見つける方法
自分の LP を 5 要素で診断し、優先度つきの改善点を具体的なコードまで確認する。
Web サイト / LP の配色を調べる・抽出する方法
ページの主要な色を HEX・RGB・HSL と占有率・コントラストまでまとめて読み解く。
Web サイトのフォントを調べる方法
見出し・本文の書体やサイズ・字間を調べて、フォント設計を自分の制作に活かす。
Web サイト / LP のコピー（文章）を調べる・真似する方法
キャッチ・本文・CTA の型と技法を抽出して、自分の言葉のコピーに応用する。
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。