BLOG
Web サイトのデザイン分析のやり方 — 5 つの視点で「なぜ良いか」を読み解く
「このサイト、なんかいいな」と思っても、どこを・どう見れば その良さを分析できるのか、分からないまま「なんとなく良い」で終わってしまう——デザインを学ぶ人なら、一度はぶつかる壁です。デザイン分析ができるようになると、良いサイトを「真似る」のではなく「なぜ良いかを理解して取り入れる」ことができ、自分の制作の質が一段上がります。この記事では、Web デザインの分析のやり方を、配色・フォント・コピー・レイアウト・動きの 5 つの視点 で「何をどう見るか」から実践的に解説し、そのうえで、手作業でやる方法と、yorunoma で URL を入れて自動で分析する方法の両方を紹介します。
先に試したい人は、URL を入れて 5 要素をまとめて読み解く「分析」が、登録なしで 1 回無料で使えます（→ yorunoma を無料で試す）。
デザイン分析とは・なぜやるのか
デザイン分析とは、すでにあるサイトのデザインを見て、「なぜそう見えるのか」を言葉にする ことです。「なんとなくおしゃれ」を「色数が絞られていて、余白が広く、書体が揃っているからおしゃれに見える」と分解できると、その良さを自分の制作に持ち込めます。真似（丸写し）と参考（理解して取り入れる）を分けるのは、この「なぜ良いかを言語化できているか」です。
デザイン分析の力がつくと、参考サイトを見る目が変わります。「良い」で止まらず、「どの要素が・どう効いているか」を毎回言語化する癖がつくと、引き出しが増え、制作の判断がぶれなくなります。
なお、ここで言う「デザイン分析」は、あくまで 見た目のデザインを読み解く ことです。アクセス数・流入・競合のトラフィックを見る アクセス解析（SimilarWeb などのツール）とは別物 です。この記事も yorunoma も、ページの見た目（配色・フォント・コピー・レイアウト・動き）を対象にします。
デザイン分析の 5 つの視点
デザインは、大きく 5 つの視点で見ると、漏れなく分析できます。それぞれ「何を・どう見るか」を、実際に手を動かせるように紹介します。
視点 1: 配色 — 色数・役割・占有率を見る
まず 使われている色を数えます。色数が多いほど視線が散り、絞られているほど締まって見えます。次に、それぞれの色の 役割 を見ます。画面の大半を占める ベースの色（土台の印象を作る）、少量だけ効いている 差し色（強調・アクセント）、その中間。そして 占有率（どの色がどれくらいの面積か）で、主役の色と差し色の関係が見えます。「主役 1 色＋差し色 1 色＋背景」に絞られていれば、まとまって見えます。手作業なら、開発者ツールで色を 1 つずつ拾って役割を書き出します（配色を 1 色ずつコード値まで取り出す 配色の分析のやり方 も参考にしてください）。
視点 2: フォント — 見出し・本文の書体と印象を見る
見出しと本文で、どんな書体を使っているか を見ます。明朝は上品・信頼、ゴシックはモダン・視認性、と印象が変わります。見出しは太めで印象づけ、本文は読みやすく——という 使い分け ができているか、書体を 2 種類程度に絞れているか、本文が読みやすいサイズ・行間かを見ます。詳しくは Web サイトのフォントを調べる方法 で紹介しています。
視点 3: コピー — キャッチの役割とトーンを見る
最初の一言（メインキャッチ）が何を言っているか を見ます。誰向けで、何が得られるかが伝わるか。そして本文がどう補足し、CTA がどう行動を促しているか、という 役割の構成 と、全体の トーン（端的・熱量・親しみ・機能的）を見ます。詳しくは Web サイト / LP のコピー（文章）を調べる・真似する方法 で紹介しています。
視点 4: レイアウト — 余白・整列・優先順位を見る
余白 が十分に取られているか（詰まっていると窮屈で雑然と見えます）、要素の端の 整列 が揃っているか、情報の 優先順位 が配置に表れているか（大事なものが大きく・先に置かれているか）を見ます。とくにファーストビューは、何を最初に見せているかで第一印象が決まります。詳しくは 良いファーストビューは、なぜ人を惹きつけるのか で紹介しています。
視点 5: 動き — 基本の動きと量を見る
hover（カーソルを乗せた反応）・fade（ふわっと現れる）・slide（滑り込む）・transition（なめらかな変化）といった 基本的な動き が、どこに・どれくらい使われているかを見ます。動きの量（控えめ〜よく動く）は、サイトの目的に合っているか。詳しくは サイトのアニメーション（動き）の調べ方 で紹介しています。
手作業の分析は時間がかかる → 自動という選択肢
ここまでの 5 視点を、実際に手作業で分析しようとすると、それなりに大変です。色を 1 つずつ拾い、書体を見分け、コピーの役割を整理し、余白や整列を確認し、動きを観察して——1 サイトを丁寧に分析するだけで、慣れていても時間がかかります。慣れないうちは「どこを見ればいいか」で迷い、結局「なんとなく良い」で止まりがちです。
そこで、もう一つの選択肢が 自動での分析 です。yorunoma は、URL を 1 つ入れると、この 5 視点——配色・フォント・コピー・レイアウト・動き——を 自動で分析し、言語化 します。「主役の色が 1 つに絞られているから締まって見える」「見出しが太めのゴシックで力強い」のように、なぜ効いているかまで言葉にしてくれるので、手作業の「時間がかかる・言葉にできない」を解消できます。
ただし、手作業の分析にしかできないこともあります。そのブランドの意図や、業界の文脈、なぜその判断をしたのかという背景の深掘り は、人の目と思考が要る領域です。yorunoma は見た目のデザインを読み解く道具で、そこまでは代われません。「5 視点を素早く網羅する」ところは自動に任せ、「意図・文脈を深く考える」ところは自分でやる——という使い分けが現実的です。
yorunoma で実際に分析すると
実際に yorunoma で URL を入れると、5 要素がまとめて解読されます。
たとえば 配色 では、使われている色が 1 色ずつ、役割（ベース・アクセントなど）と占有率つきで解読されます。コスメ LP を分析すれば主役のミディアムピンク（#cf5074）が、ダークな SaaS の LP なら黒に近いベース色と少量の差し色が、それぞれ「なぜ効くか」つきで言語化されます。手作業なら 1 色ずつ拾う作業が、一度に一覧になります。
コピー では、キャッチ・本文・CTA の役割が分類され、トーンや使われている技法まで読み解かれます。フォント・レイアウト・動きも同じように、それぞれ「どうなっているか」と「なぜ効くか」つきで並びます。手作業なら視点ごとに時間のかかる分析が、URL 1 つでまとめて言語化される——これが自動分析の違いです。
こんな使い方
デザイン分析は、次のような場面で役立ちます。
- 気になるサイト・参考サイトを分析して学ぶ — 「なぜこのサイトは良く見えるのか」を 5 視点で言語化し、真似ではなく理解として自分の制作に取り入れます。
- 自分のサイトを分析して確認する — 自分のサイトの URL を入れて、配色・フォント・コピー・レイアウト・動きが狙いどおりになっているかを、見た目の解読の範囲で確かめます。さらに優先度つきの改善点まで欲しい場合は、診断（Pro プラン以上）が向いています。
デザイン分析は、才能ではなく「見る視点」を持てば誰でもできます。視点を手作業で身につけつつ、時間のかかる部分は自動に任せる——この両輪で、参考サイトを見る目が育ちます。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
手作業の分析と何が違いますか。
yorunoma は、配色・フォント・コピー・レイアウト・動きの 5 視点を 自動で分析して言語化 します。手作業で 1 つずつ見る時間を省け、「なぜ効くか」まで言葉にしてくれます。一方、そのブランドの意図や業界の文脈、なぜその判断をしたのかという背景の深掘りは、人の分析が向く面もあります。「5 視点を素早く網羅する」ところを自動に任せ、深い考察は自分で、という使い分けがおすすめです。
アクセス数や競合分析もできますか。
いいえ。yorunoma は 見た目のデザインを分析するツール で、アクセス数・流入・競合のトラフィックは分析しません。それらは SimilarWeb のようなアクセス解析ツールの領域です。yorunoma が扱うのは、配色・フォント・コピー・レイアウト・動きといった、デザインの中身です。
自分のサイトも分析できますか。
はい。自分のサイトの URL を入れれば、同じように 5 要素を読み解けます（分析は全プランで使え、無料体験でも試せます）。自分のサイトについて優先度つきの改善点まで出す「診断」は Pro プラン以上、2 サイトを並べて見比べる「比較」は Premium プランの機能です。
まとめ
Web デザインの分析は、才能ではなく「見る視点」の問題です。配色（色数・役割・占有率）・フォント（書体・印象）・コピー（役割・トーン）・レイアウト（余白・整列・優先順位）・動き（基本の動き・量）——この 5 視点で「何をどう見るか」が分かれば、「なんとなく良い」を「なぜ良いか」に変えられます。手作業でこの視点を身につけつつ、時間のかかる部分は yorunoma に任せる。URL を入れるだけで 5 視点を自動で分析・言語化できるので、参考サイトを眺めて終わりにせず、理解して自分の制作に活かしましょう。意図や文脈の深掘りは自分で、視点の網羅は自動で——この両輪で、デザインを見る目が育ちます。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。