BLOG

自分の LP・サイトを診断して、具体的な改善点を見つける方法

「自分のサイト、なんだかダサい気がする」「しっくりこないけど、何を直せばいいか分からない」——自分で作った LP やホームページほど、客観的に見るのは難しいものです。Web デザインの基本や原則を解説した一般論の記事を読んでも、「で、結局うちのサイトはどこを直せばいいの?」には答えてくれません。かといって制作会社に診断を頼むと、申し込みも費用もかかります。この記事では、自分でチェックする方法や外注に頼む方法と、yorunoma で URL を入れるだけで自分のサイトを具体的に診断する方法を、3 ステップで紹介します。

自分のサイトの診断は Pro プラン以上の機能です(→ 料金プランを見る)。まずは無料で試したい人は、他社サイトの URL を入れて 5 要素を読み解く「分析」が 1 回無料で使えます。

https://example.com自分のサイトの URL改善点が要素ごとに出る配色改善優先フォント良い余白改善装飾良い構造改善
URL を入れると、5 要素ごとに「良い / 改善」と優先度がついた診断結果が並ぶ。

そもそもサイトが「ダサく / しっくりこなく」なる原因

「なんかダサい」は感覚的に聞こえますが、実際にはいくつかの具体的な要素のつまずきが積み重なって起きています。Web デザインの基本としてよく挙がるポイントを、yorunoma が見る 5 要素に紐づけて整理します。

  • 配色 — 色を使いすぎている。主役の色と差し色の関係があいまいで、まとまって見えない。
  • フォント — 見出しと本文でフォントが不統一。サイズや太さのルールがなく、ちぐはぐな印象になる。
  • 余白・装飾 — 余白の取り方が甘い。あるいは装飾を盛りすぎて、どこを見ればいいか分からない。
  • 構造 — セクションの並びや情報の優先順位が整理されておらず、流れが追いにくい。
  • コピー — 文章の役割(キャッチ・本文・行動喚起)が混ざっていて、伝えたいことがぼやける。
しっくりこない配色色数が多い・差し色なしフォント書体がちぐはぐ余白詰まりすぎ・不揃い装飾影・線の使いすぎ構造優先順位が伝わらない
「なんかダサい」の正体は、配色・フォント・余白・装飾・構造のどれかに必ず宿っている。

ここで大事なのは、ダサさやしっくりこなさの原因は 感覚ではなく、具体的な要素の積み重ね だということです。原因が要素に分解できるなら、サイトを客観的に見て「どの要素のどこを直せばいいか」を具体的に診断できます。これが LP 改善・ホームページ改善(いわゆる LPO や Web デザインの改善)の第一歩になります。


サイトを診断する 3 つの方法

自分のサイトの改善点を見つける手段は、大きく分けて 3 つあります。それぞれ向き不向きがあるので、簡単に比較します。

方法 1: 自分でチェックリストを見ながら目視する

「Web デザインの基本」のような記事のチェックリストを片手に、自分のサイトを見ていく方法です。お金もツールも要らず、すぐにできます。

ただし、自分で作ったサイトを自分で客観的に見るのは難しいもの。「余白は十分か」と問われても、基準が分からなければ判断できません。結局「なんとなく大丈夫そう」で終わり、肝心の直すべき箇所が分からないまま、ということになりがちです。

方法 2: 制作会社の診断サービスに申し込む

プロにサイトを見てもらい、改善点を指摘してもらう方法です。正確で、自分では気づけない視点も得られます。

反面、申し込みの手間があり、結果が返るまで 1〜2 週間かかることも珍しくありません。費用も発生します。「ちょっと気になる箇所を今すぐ確認したい」という軽い用途には、少し重い選択です。

方法 3: yorunoma で「URL を入れるだけ」で診断する

yorunoma は、自分のサイトの URL を 1 つ入れると、そのページを 5 要素ごとに自動で診断します。各要素の「良いところ」と「こうするともっと良くなる」点を、優先度つきで確認できます。申し込みや待ち時間がなく、結果はすぐに出て、自分の手で進められるのが違いです(診断は Pro プラン以上の機能です)。


yorunoma で自分のサイトを診断する手順(3 ステップ)

実際の流れは 3 ステップです。

URL を入れて診断する

診断したい自分のサイトの URL を入力欄に入れて、診断をはじめます。コードの知識は要りません。

yorunoma の診断フォーム(URL 入力欄)
5 要素ごとの診断結果を見る

診断が終わると、配色・フォント・アニメーション・構造・コピーの 5 要素ごとに、「良いところ」と「こうするともっと良くなる」点が並びます。改善提案には優先度(高・中・低)が付くので、効果の大きい順に取り組めます。各提案は 何が起きているか → なぜ直す価値があるか → 具体的にどうするか → 現状のコードと改善後のコード まで示されるので、「直し方が分からない」で止まりません。

5 要素ごとの「良いところ」と優先度つき改善提案が並ぶ主役部分
改善点を上から直す

優先度の高い改善点から、1 つずつ直していきます。各提案は、何が起きているか・なぜ直す価値があるか・現状のコードと改善後のコードまで具体的に示されるので、提案を開いて、現状のコードと改善後のコードを見比べながらそのまま直せます。「直し方が分からない」で止まりません。

ひとつの改善提案の詳細。現状のコードと改善後のコードまで確認できる

yorunoma の診断で分かること

診断結果では、サイトについて次のような情報がまとまっています。実際に出力される範囲は以下のとおりです。

  • 全体印象 — ページ全体から受ける印象の評価
  • 配色 — 色の使い方の良いところと、優先度つきの改善提案
  • フォント — 書体・サイズ・統一感の良いところと改善提案
  • アニメーション — 動きの使い方の良いところと改善提案
  • 構造 — セクションの並びや情報整理の良いところと改善提案
  • コピー — 文章の役割やトーンの良いところと改善提案
  • 総合のまとめ — 5 要素を踏まえた、全体としての総括

なかでも 「"あなたのサイト" の具体的な問題点と、直すためのコードまで出る」 のが、yorunoma の診断の核です。一般論の記事は「余白は大切です」までしか言えませんが、yorunoma は「このセクションのこの余白を、現状の値から改善後の値へ」という具体まで踏み込みます。読んで終わりにせず、実際に直すところまで運べるのが違いです。

さらに、診断結果は 2 枚のカード(サービス紹介カードと診断カード)にまとめられます。改善の記録を残したり、SNS でシェアしたりでき、カードには自分のサイトの URL が載るので、診断のついでに自分のサイトの宣伝にもなります。

診断結果を 2 枚のカード(紹介+診断)にまとめてシェアできる

サイトを「直す」ときのコツ

診断で改善点が見えても、一度に全部変えようとすると、どの変更が効いたのか分からなくなります。直すときは次の進め方がおすすめです。

  • 優先度の高いものから 1 つずつ — yorunoma の優先度表示(高・中・低)を目安に、効果の大きいものから手をつけます。
  • 一度に全部変えない — 同時にたくさん変えると、良くなったのか悪くなったのか判断できなくなります。
  • 変えたら見比べる — 1 つ直すごとに前後を見比べて、効果を確かめてから次に進みます。

一度に直そうとせず、効果の大きいものから 1 つずつ。この「小さく試して見比べる」の繰り返しが、外注に頼らず自分でサイトを育てていく確かなやり方です。


よくある質問(FAQ)

無料で診断できますか。

診断(自分のサイトの診断)は Pro プラン以上の機能です。まず無料で試したい場合は、他社サイトの URL を入れて配色・フォントなどの 5 要素を読み解く「分析」が 1 回無料で使えます。各プランで使える機能と 1 か月あたりの回数は 料金プランを見る からご確認ください。

自分のサイト以外も診断できますか。

はい。診断は自分のサイトに限らず、気になる他社サイトの URL でも同じように使えます(診断は Pro プラン以上)。さらに、自分のサイトと競合サイトを 1 画面で並べて見比べたい場合は、2 サイトを比較する「比較」機能(Premium プラン)もあります。

制作会社の診断と何が違いますか。

制作会社の診断は正確で深い反面、申し込みの手間があり、結果が出るまで時間と費用がかかります。yorunoma は URL を入れるだけで、すぐに、自分の手で診断できます(Pro プラン以上)。気になったときにその場で確認したい、という用途に向いています。

診断結果はどう使えばいいですか。

優先度の高い改善点から、1 つずつ直していくのがおすすめです。各提案には具体的なコードも付くので、そのまま手元の作業に活かせます。結果を診断カードにしてシェアすれば、改善の記録にもなります。


まとめ

自分のサイトがしっくりこないとき、自分の目だけで原因を見つけるのは難しく、外注の診断は手間と費用がかかります。yorunoma なら URL を入れるだけで、配色・フォント・アニメーション・構造・コピーの 5 要素ごとに、優先度つきの改善提案を具体的なコードまで取り出せます。一般論で終わらせず、「自分のサイトのどこをどう直すか」まで分かるのが、LP 改善・デザイン改善の確かな第一歩になります。


あわせて読みたいWeb サイト / LP の配色を調べる・抽出する方法Web サイトのフォントを調べる方法Web サイト / LP のコピー(文章)を調べる・真似する方法

この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。