自社のコーポレートサイトが「見づらい」と言われたら、まず確かめるべきなのは、取引を検討している担当者が30秒以内に「何の会社か」「どこにあるか」「どう問い合わせるか」を見つけられるかどうかです。BtoBの取引では、問い合わせの前に相手企業のサイトを確認するのが一般的で、そこで必要な情報が見つからなければ、連絡が来ないまま比較候補から外れます。
見づらさは感覚の問題に見えますが、多くは数値や手順で確かめられます。社外の人の目線と無料のツールがあれば、制作会社に依頼する前に社内で問題の所在をつかめます。
この記事は、自社サイトの改修を検討している中小企業の経営者やWeb担当者に向けた内容です。自社サイトをスマホとPCの両方で開きながら読み進めると、当てはまる問題をその場で洗い出せます。
1．コーポレートサイトの「見づらい」は訪問者の目的で判断する
コーポレートサイトの見づらさは、訪問者が探している情報にたどり着けたかどうかで判断します。同じサイトでも、訪問者によって探す情報が違うためです。
（1）コーポレートサイトとホームページの違い
コーポレートサイトは、会社そのものの公式情報を社外に伝えるためのWebサイトです。事業内容や会社概要、沿革、採用情報などを掲載し、取引先や求職者、金融機関に向けて「実在し、信頼できる会社であること」を示す役割を持ちます。
ホームページは、本来はWebサイトの入口にあたるトップページを指す言葉です。日本では企業や個人のWebサイト全般を指す呼び方として定着しており、コーポレートサイトはその中の一種にあたります。商品を売るECサイト、特定の商品を売り込むサービスサイト、人材を集める採用サイトとは目的が異なります。
会社の信頼性を示すためのサイトなので、コーポレートサイトの見づらさは「この会社は情報を整理できていない」という印象として、そのまま会社の評価に跳ね返ります。
（2）訪問者ごとに探している情報は違う
コーポレートサイトには、目的の違う複数の訪問者が訪れます。訪問者ごとに探している情報と、見つからなかったときに起きることを整理すると次のとおりです。
| 訪問者 | 探している情報 | 見つからないと起きること |
| 取引を検討する企業の担当者 | 事業内容、対応できる範囲、実績、所在地、問い合わせ先 | 問い合わせをせずに他社と比較される |
| 求職者 | 募集職種、仕事内容、働き方、社内の雰囲気 | 応募をやめて求人サイトの情報だけで判断する |
| 金融機関や既存の取引先 | 会社概要、代表者、沿革、許認可 | 電話やメールでの確認が増え、手間がかかる |
すべての訪問者に同じ重さで情報を並べると、誰にとっても目的の情報が探しにくくなります。「誰が、何を探しに来て、見つけられなかったか」で捉えると、見づらさの原因を特定しやすくなります。
2．コーポレートサイトが見づらくなる7つの原因
コーポレートサイトが見づらくなる原因は、情報を「探せない」、文字や画面を「読めない」、内容を「信用できない」の3種類に分けられます。7つの原因はいずれかに当てはまるため、自社サイトで起きているものから順に確認してください。
（1）メニュー名が社内用語で目的のページにたどり着けない
メニューの名前が社内の言葉のままだと、訪問者はどこをクリックすれば目的のページに着くのかを判断できません。よくあるのは「ソリューション」「ビジネス」のように、社内では通じても社外の人には中身が想像できない名前です。訪問者が普段使う言葉に置き換えるだけで、迷う人は大きく減ります。
| よくあるメニュー名 | 訪問者に伝わる言い換え |
| ソリューション | 事業内容／対応できる業務 |
| ビジネス | サービス一覧 |
| アバウトアス／Company | 会社概要 |
| リクルート | 採用情報 |
| コンタクト | お問い合わせ |
メニューの置き場所も見づらさを左右します。会社概要と問い合わせへのリンクは、どのページを開いても画面上部のメニューから1回のクリックでたどれる位置に置きます。PC表示でもメニューを三本線のアイコン（ハンバーガーメニュー）の中に隠しているサイトは、何があるかを一目で把握できず、探す手間が増えます。
（2）スマホで文字が小さく表が画面からはみ出す
PCでの表示を前提に作ったサイトは、スマホで開くと文字が小さすぎたり、表や画像が画面からはみ出したりします。総務省の令和6年通信利用動向調査では、インターネットを利用する端末としてスマホを使う人の割合は74.4%で、パソコンの46.8%を大きく上回っています。取引先の担当者が移動中や商談の直前にスマホで会社情報を確認するのは、ごく普通の場面です。
スマホ表示でつまずきやすいのは、会社概要の表と小さなボタンです。項目名と内容を横に並べた表は、スマホでは項目名と内容を縦に積む形にすると、横にスクロールせずに読めます。ボタンやリンクは指で押しやすい大きさが必要で、Webアクセシビリティの国際基準であるWCAG 2.2では、最も高い等級の基準として縦横44CSSピクセル以上を挙げています。本文の文字は、ブラウザの標準サイズである16ピクセルを下回らないようにするのが目安です。
出典：Web Content Accessibility Guidelines (WCAG) 2.2（W3C）
Googleは、スマホ向けのページの内容をもとにサイトをインデックス登録し、検索順位を決めています（モバイルファーストインデックス）。スマホで見づらいサイトは、訪問者の負担になるだけでなく、検索での評価にも影響します。
出典：モバイルサイトとモバイルファースト インデックスに関するおすすめの方法（Google検索セントラル）
（3）文字が薄く背景との色の差が足りない
薄いグレーの文字や、写真の上に重ねた白い文字は、洗練されて見えても読みにくさの原因になります。屋外でスマホを見る場合や、40代以降で手元の文字が見えにくくなってきた訪問者にとっては、文字そのものを読み取れないこともあります。
文字と背景の色の差には、数値の基準があります。Webアクセシビリティの日本産業規格であるJIS X 8341-3は国際基準のWCAG 2.0と同じ内容で、通常の文字は背景とのコントラスト比を4.5:1以上（大きな文字は3:1以上）にすることを等級AAの基準としています。白い背景に置いた場合の数値は次のとおりです。
- #999999（明るめのグレー）：2.85:1で基準未達
- #767676（中間のグレー）：4.54:1で基準を満たす下限
- #333333（黒に近いグレー）：12.63:1で十分に読みやすい
デザイン上は#999999程度のグレーが好まれやすいものの、本文に使うと基準を満たしません。コントラスト比は、無料のコントラストチェックツールに文字色と背景色のカラーコードを入力すると確認できます。
出典：Web Content Accessibility Guidelines (WCAG) 2.0 日本語訳（ウェブアクセシビリティ基盤委員会）
（4）演出が長く事業内容が表示されるまで待たされる
トップページを開くとオープニングのアニメーションが流れる、スクロールするたびに文字が遅れて現れる、背景で動画が自動再生されるといった演出は、情報を読み始めるまでの時間を長くします。訪問者の多くは演出を見るためではなく、情報を確認するためにサイトを開いています。
サイトを開いた直後の画面（ファーストビュー）に、何の会社かを説明する1文と問い合わせボタンが表示されているかを確認してください。演出が終わるまでどちらも出てこない構成は、訪問者を待たせています。JIS X 8341-3（WCAG 2.0）でも、自動で動き5秒より長く続くコンテンツには、一時停止や停止の手段を用意することが求められています。
出典：Web Content Accessibility Guidelines (WCAG) 2.0 日本語訳（ウェブアクセシビリティ基盤委員会）
（5）何の会社かがトップページで伝わらない
トップページで何の会社かが伝わらないと、訪問者は判断材料を集められず、他社のサイトに移ります。原因は、説明が足りない場合と、情報を詰め込みすぎた場合の2通りです。
説明が足りない例の代表が、抽象的なキャッチコピーです。「未来をつくる確かな技術」という見出しでは、業種も地域も伝わりません。「東大阪の精密板金加工｜試作1個から量産まで対応」のように、業種、地域、対応範囲を入れると、取引を検討する担当者は数秒で自社の要件に合う会社かどうかを判断できます。
反対に、すべての事業やお知らせを同じ大きさで並べたページや、長い文章が区切りなく続くページは、要点が埋もれて見づらくなります。1つのページで最も伝えたいことを1つ決め、それを一番目立つ位置に置くと、情報量が多くても読み進めやすくなります。
（6）画像が重くページの表示に時間がかかる
ページの表示が遅いと、訪問者は内容を見る前に離れてしまいます。原因として多いのは、スマホやデジカメで撮った数MBの写真をそのまま掲載している、背景に動画を使っている、使っていない機能やプラグインが残っているといったケースです。
表示速度は、Googleが無料で提供している「PageSpeed Insights」にURLを入力すると測れます。Googleは、ページの主要な内容が表示されるまでの時間（LCP）を2.5秒以内にすることを「良好」の目安としており、結果画面ではこの値がスマホとPCそれぞれで表示されます。改善の提案も一覧で出るため、専門知識がなくても、どこに問題があるのかを制作会社に具体的に伝えられます。
出典：Core Web Vitals と Google 検索の検索結果について（Google検索セントラル）
写真が原因の場合は、横幅を表示サイズに合わせて縮小し、WebPなどの軽い画像形式に変換するだけで改善することが多くあります。
（7）お知らせや会社情報が古いまま止まっている
情報が古いまま止まっているサイトは、見た目が整っていても「今も営業している会社なのか」という疑問を訪問者に与えます。お知らせの最新記事が数年前の日付になっている、すでに終了したサービスが載っている、代表者のあいさつが前任者のままになっている、ページ下部の著作権表示（コピーライト）の年が古いといった状態がこれにあたります。
どの情報が正しいのかを判断できないと、訪問者は掲載内容全体を信用しなくなります。見た目の問題ではありませんが、信用できない情報は、文字の読みにくさと同じようにサイトを読み進める意欲を奪います。
3．自社のコーポレートサイトを点検するチェックリスト
見づらさの原因は、次のチェックリストで自社サイトを1項目ずつ確かめると特定できます。7つの原因と同じ順に、確認方法と合格の目安をまとめました。
| 点検項目 | 確認方法 | 合格の目安 |
| メニュー | 社外の人に「事業内容」「所在地」「問い合わせ先」を探してもらう | 3つとも30秒以内に見つかる |
| スマホ表示 | スマホの実機で会社概要・事業内容・問い合わせページを開く | 横スクロールや拡大をせずに読める |
| 文字と配色 | コントラストチェックツールで本文の文字色と背景色を測る | コントラスト比4.5:1以上 |
| 演出 | トップページを開いた直後の画面を確認する | 事業内容の1文と問い合わせボタンがすぐ見える |
| 伝わり方 | トップページを見た社外の人に何の会社かを説明してもらう | 業種と対応範囲を一言で言える |
| 表示速度 | PageSpeed Insightsでスマホの結果を確認する | LCPが2.5秒以内 |
| 情報の鮮度 | お知らせ・代表者あいさつ・会社概要・コピーライトの年を確認する | すべて現在の状況と一致している |
自社の社員は、サイトの構成や用語を見慣れているため、見づらさに気づきにくい立場にあります。メニューと伝わり方の点検は、取引先や知人など社外の人に協力してもらうと、実際の訪問者に近い目線で判定できます。
4．見づらいコーポレートサイトの改善方法
コーポレートサイトの改善は、誰に何を見せるかを決めるところから始めます。色や写真の変更を先に進めると、見た目を整えた後に構成を作り直すことになり、費用と時間が二重にかかります。
（1）最優先の訪問者を決めてトップページの並び順を組み直す
最初に、サイトを訪れる人の中で最も成果につながる訪問者を1つ決めます。BtoBの企業であれば、多くの場合は取引を検討する企業の担当者です。そのうえで、その担当者が知りたい順にトップページの内容を並べ直します。BtoB企業のトップページは、次の並びにすると問い合わせまでの流れが途切れにくくなります。
- ファーストビュー：何の会社かを伝える1文と問い合わせボタン
- 事業内容と対応できる範囲
- 実績や取引事例
- 選ばれている理由（設備・資格・対応スピードなど）
- 会社概要とアクセス
- 問い合わせへの案内
求職者や金融機関など他の訪問者向けの情報は、トップページの後半か、メニューから1回でたどれるページにまとめます。
（2）文字と配色は数値で基準を決めて制作会社と共有する
文字の大きさや色は、数値で基準を決めておくと、担当者ごとの感覚の違いで迷わずに済みます。制作会社への依頼や、今後社内でページを追加するときにも、同じ基準で判断できます。最低限、次の4点を決めておくと読みやすさを保てます。
- 本文の文字色と背景色のコントラスト比：4.5:1以上
- 本文の文字サイズ：スマホで16ピクセル以上
- 行間：文字サイズの1.5倍以上
- 写真の上の文字：背面に半透明の色の帯を敷く
デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、専門知識のない担当者が制作会社と話すための基礎知識をまとめた資料です。改修を依頼する前に目を通しておくと、要望を具体的に伝えやすくなります。
（3）演出は情報の理解を助けるものだけ残す
演出は、情報の理解を助けるものだけを残します。製造工程の流れを動きで見せる、実績の数字が増えていく様子をグラフで示すといった演出は、文章だけよりも内容が伝わりやすくなります。
一方、オープニングのアニメーションや、すべての要素に付けたスクロール連動の動きは、情報の表示を遅らせるだけになりがちです。背景動画や自動で切り替わるスライドを使う場合は、停止ボタンを付け、動画が再生されなくても事業内容が伝わる構成にしておきます。
（4）更新の担当と時期を決めて社内で更新できる状態にする
情報の鮮度を保つには、デザインの改善とは別に、更新の担当者と時期をあらかじめ決めておく必要があります。決めておく項目の例は次のとおりです。
- お知らせ：月1回以上（担当：総務または広報）
- 実績・事例：案件の完了ごと（担当：営業）
- 会社概要・代表者あいさつ：年度の切り替わりに確認（担当：総務）
- 採用情報：募集の開始時と終了時（担当：採用担当）
制作会社に依頼しないと文章1つ変えられない状態では、更新は後回しになります。WordPressなどのCMS（専門知識がなくてもページを更新できる仕組み）を導入し、社内の担当者が自分で更新できるようにしておくと、情報が古いまま止まるのを防げます。
5．「かっこいい」より「見やすい」を優先したほうがよい理由
コーポレートサイトの評価は、訪問者が必要な情報を得られたかどうかで決まります。見た目の良さは、情報が伝わったうえで会社の印象を高めるものなので、優先順位は「見やすさ」が先です。
（1）デザイントレンドは読みやすさを損なわない範囲で取り入れる
デザイントレンドは、本文の読みやすさと問い合わせまでの導線を損なわない範囲で取り入れます。近年よく見られる大きな写真と広い余白、細く小さな文字、隠れたメニュー、凝った動きは、新しさを伝えやすい一方で、そのまま取り入れると見づらさの原因と重なります。
特に注意したいのは、細い書体と薄いグレーの組み合わせです。洗練された印象を出しやすい反面、コントラスト比の基準を下回りやすく、スマホでは文字がかすれて見えます。トレンドの要素は、見出しやメインビジュアルなど一部にとどめ、本文と問い合わせボタンは読みやすさを優先した設計にしておくと、印象と機能を両立できます。
（2）参考サイトは同じ訪問者に向けて作られたサイトから選ぶ
参考にするサイトは、自社と同じ訪問者に向けて作られているかで選びます。Webデザインのギャラリーサイトには見栄えの良いコーポレートサイトが多く集まっていますが、消費者向けのブランドサイトをBtoB企業が手本にすると、必要な情報が足りない構成になりがちです。
候補のサイトを見つけたら、スマホで開き、トップページから事業内容と問い合わせ先にたどり着くまでを実際に操作して確かめます。同業他社や、自社と取引先の層が近い企業のサイトで、この操作に迷わないものが良い手本です。
6．部分改修で済むかリニューアルが必要かの判断基準
部分改修で済むか、サイト全体のリニューアルが必要かは、点検で見つかった問題がサイトの仕組みにかかわるかどうかで決まります。文字や画像など表面の問題は部分改修で、スマホ対応や更新の仕組みなど土台の問題はリニューアルで対応するのが基本です。
| サイトの状態 | おすすめの対応 | 理由 |
| スマホで表示が崩れる | リニューアル | スマホに対応した作りに全ページを作り直す必要があるため |
| 社内で更新できない | リニューアル | CMSなど更新できる仕組みから作り直す必要があるため |
| 事業内容とサイト構成が合っていない | リニューアル | 訪問者の導線を設計し直す必要があるため |
| 文字や配色が読みにくい | 部分改修 | 文字サイズと色の調整で対応できるため |
| メニューがわかりにくい | 部分改修 | 名前と並び順の変更で改善できるため |
| 表示が遅い | 部分改修 | 画像の圧縮や不要な機能の削除で改善できる場合が多いため |
| 情報が古い | 部分改修 | 該当ページの更新で対応できるため（更新体制の見直しも同時に行う） |
複数の問題が重なっている場合や、どこから手を付けるべきか判断がつかない場合は、専門家に現状を見てもらうのが近道です。当サイトでは、取引を検討する担当者が必要な情報にたどり着けるよう、BtoB企業向けのコーポレートサイト制作・改修を行っています。対応内容はサービス紹介ページをご覧ください。
7．まとめ
コーポレートサイトの見づらさは、取引を検討する担当者が「何の会社か」「どこにあるか」「どう問い合わせるか」をすぐに見つけられるかで判断できます。メニュー名、スマホ表示、文字と配色、演出、トップページの伝わり方、表示速度、情報の鮮度の7点は、社外の人の協力と無料のツールがあれば、制作会社に依頼する前に社内で点検できます。
改善は、最優先の訪問者を決めてトップページの並び順を組み直すところから始めます。文字や配色はJIS X 8341-3のコントラスト比などの数値で基準を決め、演出は情報の理解を助けるものだけに絞ると、見た目と読みやすさを両立できます。
自社サイトを部分改修で直すべきか、リニューアルすべきか迷う場合は、お気軽にご相談ください。現在のサイトを確認したうえで、取引につながるサイトにするための改善点をご提案します。ご相談はお問い合わせページから受け付けています。
