BLOG
良い Web サイトと悪い Web サイトの違い・見分け方 — デザインの良し悪しを 5 視点で読み解く
サイトを見て「これは良いな」「これはちょっと微妙だな」と、なんとなく良し悪しを感じることは誰にでもあります。ところが、その良し悪しが“何で”決まっているのか、どこを見れば見分けられるのか を説明しようとすると、途端に言葉に詰まります。「なんとなく」で終わってしまい、いざ自分で作るときの指針になりません。この記事では、Web サイトのデザインの良し悪しを見分ける 視点 を、見た目の 5 要素（配色・フォント・コピー・レイアウト・動き）で「良い方向⇔悪い方向」に整理して解説します。良し悪しを言葉で見分けられるようになると、参考サイトを見る目も、自分のサイトを直す判断も変わります。
デザインの良し悪しは、“見た目の要素”で見分けられる
デザインの良し悪しは、センスや才能の問題に見えて、実は 具体的な要素に分解できる ものです。「なんか良い」の裏には「色数が絞られていて、余白が広く、書体が揃っている」があり、「なんか微妙」の裏には「色が多くて散らかり、文字が小さく、詰め込みすぎ」がある——というように、要素の側から見ると、良し悪しの分かれ目が見えてきます。この記事は、その分かれ目を 5 つの視点で整理します。デザイン全体を体系的に見る手順は Web サイトのデザイン分析のやり方 にまとめているので、あわせてどうぞ。
先に 2 つ、ことわっておきます。ひとつは、ここで言う「良し悪し」は 絶対的な正解ではない ということ。読みやすさや、サイトの目的に照らして「良い方向か・悪い方向か」を見分ける、という話です。あえて崩したデザインが目的に合っていることもあるので、最終的な良し悪しは 目的次第な面もある と考えてください。
もうひとつ。この記事の「良い/悪い」は、あくまで 見た目のデザイン の話です。フィッシングや詐欺といった 危険なサイトの見分け方（セキュリティ）とは無関係 ですし、アクセス数や成果を測る アクセス解析（SimilarWeb などのツール）とも別物 です。扱うのは、配色・フォント・コピー・レイアウト・動きという、見た目の中身です。
良し悪しを見分ける 5 つの視点
では、具体的にどこを見れば良し悪しが見分けられるのか。5 つの視点で、「良い方向」と「悪い方向」を対比しながら見ていきます。
1. 配色 — 絞られて役割があるか / 散らかっているか
良い方向は、色数が絞られ（主役の色＋差し色＋背景など）、それぞれに役割があること。締まって統一感が出ます。悪い方向は、色数が多く、役割の曖昧な色があちこちに散らばっていること。まとまりがなく、素人っぽく見えがちです。見分けるコツは「使われている色を数えて、役割を書き出せるか」。色が散らかっていないかを実際に確かめたいときは 配色が散らかっていないか調べる方法 が使えます。
2. フォント — 読みやすく揃っているか / バラバラか
良い方向は、本文が読みやすいサイズ・行間で、書体が 2 種類程度に絞られ、見出しと本文で役割分担ができていること。悪い方向は、文字が小さすぎる・行間が詰まって読みにくい、書体がバラバラ、あるいはクセの強い書体を本文に使っている、といった状態です。読みやすさは良し悪しの分かりやすい分かれ目です。書体が印象をどう左右するかは 日本語フォントで、サイトの印象はどう変わるか で読み解いています。
3. コピー — 何のサイトか一目で伝わるか / 曖昧か
良い方向は、最初の一言（メインキャッチ）で「何のサイトか」「誰向けか」が一目で伝わること。悪い方向は、雰囲気だけの言葉で「結局何屋なのか」が伝わらないこと。どんなに見た目が整っていても、何のサイトか伝わらなければ良いサイトとは言えません。この「伝わらない」がなぜ起きるかは サイトの言葉が「何屋か・良さが伝わらない」原因の当たりのつけ方 で扱っています。
4. レイアウト — 余白・整列があるか / 詰まって雑然か
良い方向は、余白が十分に取られ、要素の端が揃い、情報の優先順位が配置に表れていること（大事なものが大きく・先に）。悪い方向は、余白がなく詰め込まれ、整列がバラバラで、どこを見ればいいか分からない状態です。とくにファーストビューの作りは良し悪しを大きく左右します。良いファーストビューの条件は 良いファーストビューは、なぜ人を惹きつけるのか で掘り下げています。
5. 動き — 目的に合っているか / 過剰か・皆無か
良い方向は、動き（fade・slide・hover など）が目的に対して適量で、心地よく感じられること。悪い方向は、動きが過剰でうるさい・重い、あるいは動きが皆無で素っ気なく古い、といった「量が目的に合っていない」状態です。適量は目的によるので一概には言えませんが、過不足は見分けられます。動きの過不足の見分け方は サイトの動きは「足りない？多すぎ？」— 動きの過不足を分析で読み解く で紹介しています。
なお、これらの「悪い方向」が重なって「なんか素人っぽい」印象になる仕組みは サイトが素人っぽく・ダサく見える原因の調べ方 でも扱っています。5 視点はそれぞれ独立ではなく、重なって全体の印象を作ります。
自分のサイトの良し悪しは、自分では気づきにくい
他人のサイトなら、5 視点で「良い方向か・悪い方向か」を素直に見分けられます。ところが 自分のサイト になると、途端に難しくなります。作っている本人は、そのデザインを何度も見ていて 見慣れてしまい、粗が見えなくなる からです。「自分では気に入っているのに、どこか垢抜けない」——その背景には、自分では気づけない「悪い方向」への傾きがあることがよくあります。
そこで役立つのが、要素を客観的に読み解く というアプローチです。yorunoma は、URL を入れると、配色・フォント・コピー・レイアウト・動きの 5 要素が どうなっているか を分析し、言語化します。「色数が絞られているか」「本文が読みやすいサイズ・行間か」「最初の一言で何のサイトか伝わるか」——見分けの視点にあたる要素が、一つずつ読み解かれます。
ここで大事なのは、yorunoma は「このサイトは良い/悪い」と優劣を採点・断定する道具ではない ということです。yorunoma が出すのは、良し悪しを 判断するための材料（要素がどうなっているかの解読）であって、最終的に「良いか・悪いか」を決めるのは、目的を知っているあなた自身です。断定を代わりにするのではなく、判断の手前にある「要素の事実」を揃えてくれる——そう捉えると、使いどころがはっきりします。
yorunoma で実際に分析すると
実際に yorunoma に URL を入れると、良し悪しを見分ける視点にあたる 5 要素が、まとめて解読されます。
たとえば 配色 では、使われている色が 1 色ずつ、役割（ベース・アクセントなど）と占有率つきで解読されます。「色数が絞られて役割があるか（良い方向）／散らかっているか（悪い方向）」を、なんとなくではなく具体的に確かめられます。コスメ LP を分析すれば、主役のミディアムピンク（#cf5074）が「どこに・どれくらい・どんな印象で」使われているかまで言語化されます。
コピー では、キャッチ・本文・CTA の役割が分類され、「最初の一言で何のサイトか伝わるか」を要素の側から確かめられます。フォント・レイアウト・動きも同じように解読されるので、5 視点それぞれが「良い方向／悪い方向」のどちらに寄っているかを、判断材料として一覧できます。良し悪しの最終判断はあなたが、その材料は分析が——という役割分担です。
こんな使い方
良し悪しを見分ける視点は、次のような場面で役立ちます。
- 自分のサイトを分析して、良し悪しの視点で確かめる — 見慣れて気づけなくなった粗を、5 要素の解読から確かめます。「色が散らかっていないか」「文字が読みやすいか」を、判断材料として点検できます（分析は全プランで使え、登録なしの無料体験でも試せます）。
- お手本サイトを分析して、なぜ良く見えるかを掴む — 「良い」と感じるサイトを分析し、配色・フォント・レイアウトのどこが効いているかを言語化して、自分の制作に取り入れます。
- さらに、優先度つきの改善点まで欲しいとき — 自分のサイトについて「どこを直すと良くなるか」を優先度つきで出す「診断」は Pro プラン以上、2 サイトを並べて良し悪しを見比べる「比較」は Premium プランの機能です。
良し悪しは「センス」で片づけられがちですが、その多くは 5 要素の積み重ねです。視点を持てば、良し悪しは「なんとなく」から「見分けられるもの」に変わります。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
良いか悪いかを判定してくれますか。
いいえ。yorunoma は「このサイトは良い/悪い」と優劣を採点・断定する道具ではありません。出すのは、配色・フォント・コピー・レイアウト・動きが どうなっているか の解読——つまり良し悪しを判断するための 材料 です。最終的に良いか悪いかを決めるのは、サイトの目的を知っている読者ご自身です。そもそもデザインの良し悪しは目的によって変わる面もあるので、断定ではなく「判断材料を揃える」という立て付けにしています。
アクセス数や成果（CVR）も分かりますか。
いいえ。yorunoma は 見た目のデザインを読み解くツール です。アクセス数・流入・コンバージョン率（CVR）といった成果は測りません（それらは SimilarWeb やアクセス解析ツールの領域です）。yorunoma が扱うのは、良し悪しを見分ける視点にあたる、見た目の要素です。
自分のサイトも分析できますか。
はい。自分のサイトの URL を入れれば、同じように 5 要素を読み解けます（分析は全プランで使え、無料体験でも試せます）。自分のサイトについて優先度つきの改善点まで出す「診断」は Pro プラン以上、2 サイトを並べて見比べる「比較」は Premium プランの機能です。
まとめ
Web サイトの良し悪しは、「センス」という一言でなく、配色（絞られ役割があるか）・フォント（読みやすく揃っているか）・コピー（一目で伝わるか）・レイアウト（余白・整列があるか）・動き（量が目的に合うか） という 5 つの視点で見分けられます。それぞれの「良い方向⇔悪い方向」を知っていれば、「なんとなく良い/微妙」を「どこがどう良い/悪いか」に翻訳できます。ただし良し悪しは目的次第な面もあるので、絶対的な正解ではなく「見分ける視点」として使ってください。自分のサイトの良し悪しは見慣れていて気づきにくいので、URL を入れて 5 要素を読み解き、判断材料にしてみてください。判定はあなたが、材料は分析が——この役割分担で、デザインを見る目が育ちます。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。