BLOG
BtoB サイトのデザインを分析・解読する — 「きちんとした会社そう」の"なぜ"を、実際に読み解く
よくできた BtoB サイトを見て、「なんかきちんとした会社そう」「信頼できそう」——そう感じることはできても、"なぜ"そう見えるのか を言葉にするのは、意外と難しいものです。「BtoB サイト デザイン」で検索して出てくるのは、サービスや企業のメインビジュアルを並べた事例まとめか、「成果を出す◯つのポイント」という制作ノウハウ記事がほとんど。どちらも作り手目線・成果目線で、論点は「信頼感を」「シンプルに」「迷わせない導線を」「CTA を」と、各社横並びの一般論で止まりがちです。この記事は逆に、すでにある BtoB サイトを 1 つ、実際に分析して、「なぜそう見えるのか」を配色・コピー・構造・フォント・動きの 5 要素まで解読してみます。作り方ではなく、読み解き方の記事です。
先に試したい人は、URL を入れて 5 要素をまとめて読み解く「分析」が、登録なしで 1 回無料で使えます（→ yorunoma を無料で試す）。
「信頼できそう」で止まっていないか
コーポレートサイトのデザインや BtoB サイトについて調べると、たいてい行き着くのは「信頼感を大切に」「シンプルにまとめる」「迷わせない導線を」といった、作り方の一般論です。もちろん間違ってはいませんが、事例集をいくら眺めても、「では、目の前のこのサイトは、なぜ信頼できて見えるのか」 までは分かりません。「きちんとしてるから信頼できそう」で止まってしまい、その先の"なぜ"に届かないのです。
たとえば同じ「落ち着いた配色」でも、どんな色をベースに、どこに、どれくらいの面積で差し色を効かせるかで、受ける印象はまったく変わります。一般論の「信頼感のある配色を」という一言では、そこまでは説明できません。必要なのは、実際のページを 具体的に読み解く ことです。
なお、ここで言う「分析・解読」は、あくまで 見た目のデザインを読み解く ことです。アクセス数や流入・CVR（成約率）を見るアクセス解析・効果測定とは別物で、この記事も yorunoma も、ページの見た目（配色・コピー・構造など）を対象にします。
BtoB サイトによく見られる型（ざっと）
実物を見る前に、BtoB サイトに"よく見られる傾向"を、一般論として手短に押さえておきます。
- 落ち着いた配色 — 寒色系や無彩色をベースにした、知的で信頼感を狙った色使いが多い。
- 秩序ある構造 — 情報が整理され、階層立って並ぶ。どこに何があるか迷わない構成。
- 読みやすさ重視の書体 — 凝った書体より、誠実で読みやすいフォント。
- 控えめな動き — 派手な演出は避け、fade など控えめなアニメーションにとどめる。
- 問い合わせ・資料請求への導線 — 「お問い合わせ」「資料請求」ボタンが要所に置かれる。
ただし、これはあくまで"よくある傾向"です。傾向を知っていても、目の前のサイトが実際にどうなっているかは、分析してみないと分かりません。 そこで次は、実物を 1 つ解読してみます。
実際に 1 つ、分析してみた
ここからが本題です。よく見られる BtoB サイトを 1 つ念頭に、yorunoma の分析がどう解読するかを見ていきます。1 つの例なので「BtoB サイトはすべてこう」と断定はできませんが、先ほどの"よく見られる型"が、この解読でも実際に確認できるかを見ていきます。URL を入れて分析すると、配色・フォント・コピー・構造・アニメの 5 要素が、それぞれ具体的に解読されます。
まず、いちばん印象を左右する 配色。一般論なら「信頼感のある落ち着いた配色」で終わるところですが、分析すると、ベースになっている 落ち着いた色（寒色系・無彩色） が、役割（ベース）と占有率つきで解読され、そこに 少量だけ効いている差し色 が、役割（アクセント）とともに並びます。「落ち着いた色だから信頼できる」ではなく、「ベースの色が広い面積で土台の安心感を作り、少量の差し色が要点を締めている」という、役割で説明できる具体に変わります。
続いて フォント。BtoB サイトでよく効いているのは、凝った書体ではなく、誠実で読みやすい書体です。分析では、見出しと本文の書体・サイズ・行間が読み解かれるので、「読みやすく整えられているか」が具体で分かります。構造 では、ページが上から順にどんなまとまりで並んでいるかが解読され、情報が整理されて秩序立っているかが見えます。コピー はキャッチの役割やトーンが、動き は fade・slide といった基本的なアニメーションが、それぞれ「どうなっているか」と「なぜ効くか」つきで並びます。先ほどの"よく見られる型"が、この解読でも実データとして確認できる、というわけです。
なお、なぜ「読みやすさ」や「情報の整理」が信頼感につながるのか——その 印象の原理そのもの は、信頼感のあるサイトは、なぜ信頼できて見えるのか で詳しく扱っています。この記事は、BtoB サイトを 1 つ実際に解読する ことに軸足を置いています。
これで分かること
一般論の「BtoB は信頼感」を、要素まで掘り下げられると、「なんとなくきちんと見える」が「この配色・この構造が、こう効いている」に変わります。
- URL 1 つで 5 要素がまとめて分かる — 配色・フォント・コピー・構造・アニメを、ツールを行き来せず 1 か所で解読できます。
- 「なぜ効くか」まで言語化される — 「信頼感のある配色」ではなく「ベースの落ち着いた色が土台を作り、差し色が要点を締める」という具体で、真似ではなく理解として取り入れられます。
- 一般論を、目の前の 1 例で検証できる — 「BtoB は信頼感・シンプル」という傾向が、その 1 サイトでは実際にどう表れているかを確かめられます。
正直にお伝えすると、1 つの色をピクセル単位で厳密に抜き出すだけなら、専用のカラーピッカーの方が向く場面もあります。 yorunoma の強みは、あくまで 5 要素を まとめて、理由まで含めて解読する ことです。また、動きについては hover・fade・slide・transition といった 基本的なアニメーション が対象で、マウス追従や高度なスクロール連動は現時点では対象外です（今後の対応予定）。加えて、yorunoma が読み解くのは見た目のデザインで、問い合わせ数・CVR・リード獲得数の予測、A/B テスト、導線や UI の使いやすさの採点を行うものではありません。 あくまで「デザインの読み解き」の道具です。
こんな使い方
BtoB サイトのデザイン分析は、次のような場面で役立ちます。
- 気になる競合 BtoB サイトを解読する — 「なぜこの会社のサイトは信頼できて・洗練されて見えるのか」を、配色や構造の意図まで掴めます。事例集を眺めて終わりにせず、良さの理由を自分の言葉にできます。
- 自分の会社のサイトを確認する — 自分のサイトの URL を入れて、狙いどおりの配色・トーン・信頼感に見えているかを、見た目の解読の範囲で確かめられます。さらに優先度つきの改善点まで欲しい場合は、診断（Pro プラン以上）が向いています。
どちらも「作り方の正解」や「成果が上がる保証」を与えるものではなく、目の前のサイトが 実際にどう見えているか を、デザインの面から読み解くための使い方です。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
一般的な BtoB サイトの傾向が分かりますか。
この記事で紹介しているのは、1 つのサイトを深く解読する ツールです。「BtoB サイト全体はこういう傾向」という統計をまとめるものではなく、「目の前のこのサイトは、実際にどんな配色・コピー・構造になっているか」を具体的に読み解きます。よく見られる傾向は一般論として押さえつつ、実物がどうかは分析で確かめる、という使い方が向いています。
問い合わせ数や CVR も分析できますか。
いいえ。yorunoma は 見た目のデザインを解読するツール で、問い合わせ数・CVR（成約率）・アクセス数は分析も予測もしません。それらはアクセス解析ツールや効果測定・A/B テストの領域です。yorunoma が扱うのは、配色・フォント・コピー・構造・アニメといった、デザインの中身です。
自分の会社のサイトも調べられますか。
はい。自分の会社のサイトの URL を入れれば、同じように 5 要素を読み解けます（分析は全プランで使え、無料体験でも試せます）。自分のサイトについて優先度つきの改善点まで出す「診断」は Pro プラン以上、2 サイトを並べて見比べる「比較」は Premium プランの機能です。
まとめ
BtoB サイトのデザインは、「信頼感を」「シンプルに」「迷わせない導線を」という作り手目線・一般論で語られがちですが、それでは目の前のサイトが"なぜ"信頼できて見えるのかまでは分かりません。実際に 1 つ分析してみると、一般論の「信頼感のある配色」は ベースの落ち着いた色＋少量の差し色 という役割で読み解け、読みやすい書体・整理された構造・控えめな動きもあわせて、「なぜ効くか」つきで具体になりました。1 例なので BtoB サイト全体を断定はできませんが、よく見られる型を実際の解読で確かめられるのが、事例集や一般論との違いです。気になる BtoB サイトを、「信頼できそう」で終わらせず、その"なぜ"まで読み解いてみてください。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。