BLOG
ホームページが見づらい原因と、その見つけ方 — 見た目の 5 要素で切り分ける
「このサイト、なんか見づらいね」と言われた。あるいは自分でも、うっすら見にくさを感じている。でも、どこが・なぜ見づらいのか となると、うまく言葉にできない——。「見づらい」は、感じるのは簡単でも、原因を突き止めるのが難しい悩みです。この記事は「こう直せ」というノウハウ集ではなく、見づらさの原因を、見た目の 5 要素（配色・フォント・コピー・レイアウト・動き）で切り分ける ための地図です。原因が分かれば、「なんとなく見づらい」が「ここが原因か」に変わり、直しどころが見えてきます。
「見づらい」の正体は、見た目の要素にある
「見づらい」は、センスや才能の問題ではありません。たいていは、文字が小さい・色のコントラストが弱い・情報が詰まっている といった、具体的な要素の問題です。要素の問題なら、原因を特定して 1 つずつ直せます。逆に言えば、原因を特定せずに「なんとなく」直しても、見やすくなったか判断できません。まずは「どの要素が見づらさを生んでいるか」を切り分けるのが先決です。
ここで、ひとつはっきりさせておきます。この記事で言う「見づらい」は、見た目のデザインの見づらさ のことです。ページが 表示されない・エラーが出る（サーバーやSSLなどの技術トラブル）や、表示が重い・遅い（表示速度）とは別の話で、この記事はそこには踏み込みません。また、アクセス数を見る アクセス解析 とも別物です。扱うのは、配色・フォント・コピー・レイアウト・動きという、見た目の中身です。
見づらさを生む原因を、5 要素で切り分ける
「見づらい」の原因は、たいてい次の 5 要素のどれか（複数のこともあります）に潜んでいます。とくに見づらさは、文字の読みやすさ（フォント） と 情報の探しやすさ（レイアウト） に強く出ます。原因ごとに「なぜ見づらくなるか」と「詳しくはどの記事か」を整理しました。
フォント: 文字が読みにくい
見づらさの原因として、いちばん多いのがこれです。文字が小さすぎる、行間が詰まっている、1 行が長すぎる、クセの強い書体を本文に使っている——どれも、文字を読む負担を増やします。本文は「少し大きめ・行間ゆったり」が読みやすさの基本です。書体そのものの印象や読みやすさは 日本語フォントで、サイトの印象はどう変わるか で読み解いています。
レイアウト: 情報が探しにくい
余白がなく情報が詰め込まれている、要素が整列していない、優先順位がなくどこを見ればいいか分からない——これらは「探しにくさ」を生み、見づらさに直結します。余白を取り、整列させ、大事なものを大きく・先に置くだけで、ぐっと見やすくなります。情報が詰まって雑然と見える場合の切り分けは サイトが「なんかごちゃごちゃする・まとまりがない」原因の当たりのつけ方 が詳しいです。
配色: コントラストが弱い・色が多い
背景と文字のコントラストが弱いと、文字が読みにくくなります（薄いグレーの文字などが典型）。また、色数が多すぎると視線が散り、どこを見ればいいか分からなくなります。読みにくい色使いになっていないかを確かめたいときは 読みにくい色になっていないか調べる方法 が使えます。
コピー: 何のサイトか一目で分からない
見た目が整っていても、最初の一言で「何のサイトか・誰向けか」が分からない と、読み手は迷い、それ自体が「分かりにくい＝見づらい」体験になります。この「伝わらない」が起きる原因は サイトの言葉が「何屋か・良さが伝わらない」原因の当たりのつけ方 で扱っています。
動き: 過剰な動きが読む邪魔をする
動きが多すぎると、読もうとしている最中に視線を奪われ、集中できません。スクロールのたびに何かが動く、点滅する——こうした過剰な動きは見づらさの原因になります。動きの量が目的に合っているかの見分け方は サイトの動きは「足りない？多すぎ？」— 動きの過不足を分析で読み解く で紹介しています。
なお、見づらさは複数の要素が重なって起きることも多く、その全体像は Web サイトのデザインを改善する方法 でも「まず原因を特定する」流れとして扱っています。
自分では見づらさに気づきにくい → 分析で当たりをつける
見づらさの原因を切り分ける地図があっても、いざ自分のサイトになると、特定は難しくなります。作った本人は 見慣れてしまっていて、見づらさに気づけない からです。自分では普通に読めてしまうので、「他人に見づらいと言われても、どこが悪いのか分からない」——これはよくあることです。
そんなときに便利なのが、分析で当たりをつける ことです。yorunoma に URL を入れると、配色・フォント・コピー・レイアウト・動きの 5 要素が どうなっているか を読み解き、言語化してくれます。「本文の文字サイズや行間はどのくらいか」「色数やコントラストはどうか」「情報の優先順位は配置に出ているか」——見づらさの原因が、どの要素にありそうかの 当たり がつきます。「なんとなく見づらい」から一歩進んで、「ここが原因かも」という出発点に立てます。
ここで大事なのは、yorunoma は自動でデザインを直す道具ではない ということです。してくれるのは、見づらさの 原因を見つける手伝い（要素の解読）まで。実際に直すのはあなたですが、「どこが見づらいのか分からない」という最初の壁を越えられます。原因の特定にとどまらず「どこから・どう直すか」を優先度つきの具体的な提案まで欲しい場合は、診断（Pro プラン以上） が向いています。
yorunoma で実際に分析すると
実際に yorunoma に URL を入れると、5 要素がまとめて読み解かれ、見づらさの原因の当たりがつきます。
たとえば 配色 では、使われている色が 1 色ずつ、役割（ベース・アクセントなど）と占有率つきで解読されます。「色数が多すぎないか」「背景と文字のコントラストは十分か」——見づらさが配色から来ていないかの当たりがつきます。コスメ LP を分析すれば、主役のミディアムピンク（#cf5074）が「どこに・どれくらい・どんな印象で」使われているかまで言語化されます。
コピー では、キャッチ・本文・CTA の役割が分類され、「最初の一言で何のサイトか伝わるか」を確かめられます。フォント・レイアウト・動きも同じように読み解かれるので、5 要素のどこに見づらさの原因がありそうかが、URL 1 つで一度に見えてきます。読みやすさに関わるフォントやレイアウトの状態も、要素として言語化されます。
こんな使い方
見づらさの原因特定は、次のような場面で役立ちます。
- 自分のサイトを分析して、見づらさの原因を特定する — 5 要素を読み解いて、見づらさがフォントなのか・レイアウトなのか・配色なのか、当たりをつけます。原因が分かったら、この記事から原因別の記事へ進んで対処します（分析は全プランで使え、登録なしの無料体験でも試せます）。
- 見やすいお手本サイトを分析して、理由を学ぶ — 「読みやすい」と感じるサイトを分析すると、文字サイズ・行間・余白・色の使い方のどこが効いているかが言語化でき、自分のサイトに取り入れられます。
- 優先度つきの改善提案まで欲しいとき — 自分のサイトについて「どこから・どう直すと見やすくなるか」を優先度つきの具体的な提案で出す「診断」は Pro プラン以上、2 サイトを並べて見比べる「比較」は Premium プランの機能です。
見づらさは、才能ではなく「原因を見つける順番」の問題です。まず原因の当たりをつける。それだけで、止まっていた手が動き出します。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。まずは見づらさが気になっているサイトの URL を 1 つ入れて、原因の当たりをつけるところから始められます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
ページが表示されない・重いのも分かりますか。
いいえ。yorunoma は 見た目のデザインの見づらさ を読み解くツールです。ページが表示されない・エラーが出る（サーバーやSSLなどの技術トラブル）や、表示が重い・遅い（表示速度）は対象外です。それらはサーバー側の確認や、表示速度の計測ツールの領域です。yorunoma が扱うのは、配色・フォント・コピー・レイアウト・動きという、見た目の中身です。
見づらいところを直してくれますか。
いいえ。yorunoma は自動でデザインを直す道具ではなく、見づらさの 原因がどこにありそうかの当たりをつける 道具です。実際に直すのはご自身ですが、「どこが見づらいか分からない」という最初の壁を越えられます。「どこから・どう直すか」を優先度つきの具体的な改善提案まで出す「診断」は Pro プラン以上の機能です。
自分のサイトも分析できますか。
はい。自分のサイトの URL を入れれば、同じように 5 要素を読み解けます（分析は全プランで使え、無料体験でも試せます）。自分のサイトについて優先度つきの改善点まで出す「診断」は Pro プラン以上、2 サイトを並べて見比べる「比較」は Premium プランの機能です。
まとめ
「見づらい」は、感じるのは簡単でも、原因を突き止めるのが難しい悩みです。でもその正体は、フォント（文字の読みやすさ）・レイアウト（情報の探しやすさ）・配色（コントラスト）・コピー（何屋か伝わるか）・動き（過剰でないか） という 5 要素のどこかにあります。原因を要素で切り分ければ、「なんとなく見づらい」が「ここが原因か」に変わり、直しどころが見えてきます。自分では見づらさに気づきにくいときは、URL を 1 つ入れるだけ。1 分もかからず、見づらさの原因の当たりがつきます。完璧を目指す必要はありません。まずは 1 か所、原因を見つけるところから始めてみてください。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。