BLOG
参考サイトと自分のサイトを比較して、理想に近づける方法 — LP のどこが違うかを見つける
「この LP、いいな。こんな風にしたい」——参考になる LP は見つかった。でも、いざ自分のサイトと見比べると、どこがどう違うのか、何を変えれば近づくのか が分からない。良い LP は真似したいのに、なぜか自分のサイトには落とし込めない——これは多くの人がつまずくところです。SANKOU! や LP ARCHIVE のようなギャラリー・まとめサイトは「参考を"探す"」のはとても得意ですが、見つけた参考と自分のサイトを"並べて差分を出す"ところまではしてくれません。この記事では、参考サイトと自分のサイトを比較して理想のサイトに近づける方法を、目視・ギャラリー・yorunoma の 3 つの観点から紹介します。
比較は Premium プランの機能です（→ 料金プランを見る）。まずは無料で試したい人は、参考サイトの URL を入れて配色・フォントなどの 5 要素を読み解く「分析」が、登録なしで 1 回試せます。
そもそも「参考を真似る」のが難しい理由
良い LP を見たとき、「なんか良い」「自分のよりちゃんとして見える」とは感じます。でも、その差を 具体的な言葉にできない のが難しさの正体です。良し悪しはなんとなく分かるのに、「配色がどう違うのか」「フォントの何が決め手なのか」「構造のどこで差がついているのか」を一つずつ挙げられない。差が言語化できないと、変えるべき箇所が決まらず、結局なんとなく雰囲気だけ似せて終わってしまいます。
LP デザインの参考を探す記事や、ランディングページの参考ギャラリーはたくさんあります。でもそれらは「良い例を見せる」ところまで。自分のサイトと並べて、どの要素がどれだけ違うか を出してくれるわけではありません。近づけるために本当に必要なのは、参考集めではなく、参考と自分の 差分 です。
差は、感覚ではなく要素に分解できます。yorunoma が見る 5 要素——配色・フォント・アニメーション・構造・コピー——のどこに差があるのかを具体的に出せれば、「何を変えれば近づくか」がはっきりします。
参考サイトに近づける 3 つの方法
見つけた参考に自分のサイトを近づける手段は、大きく分けて 3 つあります。それぞれ向き不向きがあるので、簡単に比較します。
方法 1: 目視で見比べる
参考サイトと自分のサイトを 2 つのタブで開いて、交互に見比べる方法です。お金もツールも要らず、すぐにできます。
ただし、目視は主観に流れがちです。「なんとなく参考のほうが洗練されている」とは感じても、配色の色数がいくつ違うのか、フォントの組み合わせがどう違うのかを、数値や具体で押さえるのは難しいもの。差を具体化できないまま、印象だけで終わりやすいのが弱点です。
方法 2: ギャラリー・まとめサイトで似た LP を探す
LP の参考ギャラリーやまとめサイトで、自分の作りたい雰囲気に近い LP を探す方法です。良質な事例がジャンル別に並んでいて、参考を見つけるには便利です。
ただし、ギャラリーがしてくれるのは「参考を見つける」ところまで。見つけた LP と 自分のサイトの差 は出してくれません。結局「いい例は分かったけれど、自分のサイトとどこが違うのか」は、自分で見比べて言語化する必要が残ります。
方法 3: yorunoma で「自分 × 参考」を比較する
yorunoma は、自分のサイトと参考サイトを並べて、配色・フォント・アニメーション・構造・コピーの 5 要素ごとに 差分 を出します。各要素について「参考に近づけるとよいところ」を優先度つきで、そして「ここはあなたの良さ。残しましょう」という残すべき強みまで示します。参考集めで終わらず、近づけるための具体策まで一度に進められるのが違いです。
なお、この 比較（比較診断）は Premium プランの機能 です。まず無料で試したい場合は、参考サイトの URL を入れる「分析」が登録なしで 1 回使えます。
yorunoma で自分のサイトと参考サイトを比較する手順（3 ステップ）
比較は、すでに解析した 2 つのサイトを選んで行います。実際の流れは 3 ステップです。
まず、自分のサイトの URL と、参考にしたいサイトの URL を、それぞれ解析します。コードの知識は要りません。解析した結果は履歴に残るので、比較ではこの履歴から 2 つを選びます。
比較画面で「自分のサイトと比較する」を選び、履歴から 自分のサイト と 参考にしたいサイト を 1 件ずつ選びます。この比較診断は Premium プランの機能です。
比較が終わると、配色・フォント・アニメーション・構造・コピーの 5 要素ごとに、「参考に近づけるとよいところ」が優先度（高・中・低）つきで並びます。あわせて「ここはあなたの良さ。残しましょう」という、変えなくてよい強みも示されるので、丸ごと寄せるのではなく、必要なところだけ近づけられます。
比較で分かること
比較結果では、自分のサイトと参考サイトの差について、次のような情報がまとまっています。実際に出力される範囲は以下のとおりです。
- 配色 — 色数・主役の色・差し色の使い方が、参考とどう違うか
- フォント — 書体・サイズ・統一感が、参考とどう違うか
- アニメーション — 動きの量や使いどころが、参考とどう違うか
- 構造 — セクションの並びや情報の優先順位が、参考とどう違うか
- コピー — 文章の役割やトーンが、参考とどう違うか
- ここはあなたの良さ — 参考に劣っていない、残すべき自分の強み
各要素の「近づけるとよいところ」は、参考サイトはこうしている → あなたのサイトは現状こう → どう近づけるか → 実装例（コード） まで示されます。だから「参考のほうが良いのは分かるけど、何をどう変えれば近づくのか」で止まりません。
なかでも 「参考と自分を並べて、差分を具体的に出す」 のが、yorunoma の比較の核です。ギャラリーやまとめサイトは「良い参考を見せる」までですが、yorunoma は「あなたのサイトは参考とここがこう違うので、こう変えると近づく」という具体まで踏み込みます。参考を眺めて終わりにせず、実際に近づけるところまで運べるのが違いです。
参考に「近づける」ときのコツ
差分が見えても、参考をそのまま丸ごと真似ようとすると、自分のサイトらしさまで消えてしまいます。近づけるときは次の進め方がおすすめです。
- 全部は真似ない — 差分のうち、自分のブランドやサービスに合う部分だけを選んで取り入れます。比較結果の「ここはあなたの良さ」は、無理に変えなくて大丈夫です。
- 優先度の高いものから 1 つずつ — 「近づけるとよいところ」の優先度（高・中・低）を目安に、効果の大きいものから手をつけます。
- 丸パクリではなく、良い部分を取り入れる — 配色やフォントの設計は参考にしても、文章やブランドの表現はそのまま写さないようにします。デザインの「要素」を取り入れるのと、ページを複製するのは別物です。元サイトへの敬意と節度を持って使ってください。
参考の良いところを選んで取り入れ、自分の良さは残す。この使い分けが、丸パクリにならずに理想のサイトへ近づける確かなやり方です。
よくある質問（FAQ）
比較機能は無料で使えますか。
いいえ。サイト同士を比べる比較（比較診断）は Premium プランの機能で、1 か月に 30 回まで使えます。Starter・Pro プランでは使えません。まず無料で試したい場合は、参考サイトの URL を入れて 5 要素を読み解く「分析」が登録なしで 1 回使えます。各プランで使える機能は 料金プランを見る からご確認ください。
参考サイトは何でも比較できますか。
公開されているサイトの URL なら比較できます。比較は、あらかじめ解析した 2 つのサイトを選んで行うので、自分のサイトと参考サイトをそれぞれ解析しておけば、両者を並べて差分を出せます。
丸パクリにならないか心配です。
yorunoma の比較は、参考のページを複製するためのものではなく、差分を知って 良い部分だけを取り入れる ためのものです。結果には「ここはあなたの良さ。残しましょう」という残すべき強みも出るので、参考に寄せすぎず、自分らしさを保てます。デザインの要素を参考にするにとどめ、文章やブランド表現の丸写しは避け、節度を持って使ってください。
比較ではなく、自分のサイトの問題点だけ知りたいのですが。
参考と並べずに、自分のサイト 1 つの改善点を知りたい場合は、診断が向いています。使い方は 自分の LP・サイトを診断して、具体的な改善点を見つける方法 で紹介しています。
まとめ
良い LP を見つけても、自分のサイトとどこが違うのか、何を変えれば近づくのかは、目視やギャラリーだけでは見えにくいものです。LP デザインの参考は探せても、参考と自分を並べて差分を出すところまではしてくれません。yorunoma なら、自分のサイトと参考サイトを並べて、配色・フォント・アニメーション・構造・コピーの 5 要素ごとに差分を出し、近づけるための具体策をコードまで取り出せます。良い部分は取り入れ、自分の良さは残す——これが、理想のサイトに近づける確かな第一歩になります。
あわせて読みたい
参考サイトの共通点の見つけ方
複数の良いサイトを比べて、共通する勝ちパターン・成功パターンを言語化する。
自分の LP・サイトを診断して、改善点を見つける方法
自分の LP を 5 要素で診断し、優先度つきの改善点を具体的なコードまで確認する。
Web サイト / LP の配色を調べる・抽出する方法
ページの主要な色を HEX・RGB・HSL と占有率・コントラストまでまとめて読み解く。
Web サイトのフォントを調べる方法
見出し・本文の書体やサイズ・字間を調べて、フォント設計を自分の制作に活かす。
Web サイト / LP のコピー（文章）を調べる・真似する方法
キャッチ・本文・CTA の型と技法を抽出して、自分の言葉のコピーに応用する。
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。