「ホームページの見た目が、自分のスマホと社内のパソコンで違って見える」。
あるいは制作会社から「対応ブラウザはどこまでにしますか」と聞かれ、何を基準に答えればいいのか分からず手が止まった。
ホームページを発注したり自社で更新したりする立場になると、こうした場面によく出くわします。
先に結論をお伝えします。
クロスブラウザ対応とは「すべてのブラウザで完全に同じ表示にすること」ではありません。主要なブラウザで実用上問題なく見える状態を、費用対効果の合う範囲で保証することです。範囲を欲張るほどコストと工数が膨らむため、どこで線を引くかという判断こそが本題になります。
この記事で扱うのは、2026年時点でどのブラウザまで対応すれば現実的かという範囲の決め方、表示が崩れたときの原因の切り分け方、そして誰がいつ直すのかを発注時に決めておく方法です。すべて公式情報に沿って整理しました。
読み終えたときには、制作会社との打ち合わせでそのまま使える判断軸が手元に残るはずです。
クロスブラウザ対応とは？「全ブラウザ完全対応」という思い込みを外す
まずは言葉の整理から。
クロスブラウザ対応とは、Chrome・Safari・Edge・Firefoxといった複数のWebブラウザで、サイトが意図したとおりに表示・動作するように作ることを指します。「マルチブラウザ対応」とほぼ同義と考えてかまいません。
なぜブラウザによって表示が変わるのか。
理由は、ブラウザごとにHTMLやCSS(見た目を決めるコード)の解釈が少しずつ違うから。同じ設計図でも施工する会社で細部の仕上がりが変わるのと同じ理屈です。この差を吸収してどのブラウザでも崩れないようにする作業こそ、クロスブラウザ対応にほかなりません。
クロスブラウザ対応とレスポンシブ対応の違い
ここで混同されやすいのがレスポンシブ対応。
レスポンシブ対応は「画面の幅(パソコン・スマホ・タブレット)」に合わせる話で、クロスブラウザ対応は「ブラウザの種類」に合わせる話です。軸が別物だと押さえておくと、制作会社の説明もすっと頭に入ります。
実際の「表示崩れ」は、この2つに端末(機種)の違いまで絡んで起きるのが厄介なところ。
後半の原因切り分けでは、どの軸の問題なのかを順番に見ていきます。
今は「全ブラウザで完全に同じ表示」を目指さなくていい理由
かつてクロスブラウザ対応で最大の悩みだったのが、独自仕様の多かったInternet Explorer(IE)でした。
そのIEは2022年6月15日に役目を終え、いまの主要ブラウザはChromeやEdgeをはじめ共通の土台(Chromiumというエンジン)に寄ってきています。
その結果、ブラウザ間の表示差は昔よりかなり小さくなりました。
だからこそ、いまの正解は「全ブラウザ・全バージョンで1ピクセルまで一致させる」ことではないのです。主要ブラウザで実用上問題なく見える状態を、適切なコストで保証する。これが現実的な到達点でしょう。
要点目的は「完全一致」ではなく「実用上問題なし」
対応するブラウザを1つ増やすたびに、検証と保守の手間も増えます。カバーする範囲を絞ることは品質を下げる妥協ではなく、限られた予算を費用対効果で配分する設計判断です。まずはこの前提に立つと、以降の判断がぶれません。
2026年の現実。日本のブラウザシェアから対応すべき範囲を見る
「どこまで対応するか」を決める出発点は、実際にどのブラウザが使われているかという数字です。
まずは日本全体のブラウザシェアを、デスクトップとモバイルに分けて眺めてみましょう。
デスクトップとモバイルでシェアは逆転する
ブラウザのシェアは、パソコンとスマホで顔ぶれも順位も変わります。
下の数字は、世界的に使われている計測サービスStatCounterの集計(2026年5月時点)による日本国内のシェアです。
日本国内のブラウザシェア(2026年5月時点・デスクトップ／モバイル)
| ブラウザ | デスクトップ | モバイル |
|---|---|---|
| Chrome | 約64.8% | 約48.5% |
| Safari | 約4.3% | 約46.3% |
| Edge | 約22.6% | 約1.1% |
| Firefox | 約4.5% | 約1.1% |
パソコンではChromeとEdgeの2つで約87%を占め、Safariは少数派。
ところがスマホになると形勢は一変し、ChromeとSafariがほぼ互角で、この2つで約95%に達します。iPhoneの標準ブラウザがSafari、Androidの標準がChromeという事情が、この逆転の正体です。
ここから導ける目安は、いたってシンプル。
主要4ブラウザ(Chrome・Safari・Edge・Firefox)の最新の数バージョンを押さえれば、デスクトップで約96%、モバイルでも約95%の利用者をカバーできます。これが最初に置くべき対応範囲の基準線です。
出典: StatCounter Global Stats「Browser Market Share Japan」(英語)
全国平均で決めない。自社アクセス解析の実データで絞る
ただし、いま見た数字はあくまで日本全体の平均にすぎません。
本当に正しいのは、自社サイトに来ている人の実際の構成です。法人向けなら社内パソコンのEdge比率が平均より高く、高齢の利用者が多ければiPhoneのSafari比率が高い。業種によって実態は大きくぶれます。
既にサイトがあるなら、無料のアクセス解析ツールGoogleアナリティクス(GA4)で確認できます。
レポートの中の「ユーザーの環境」から「ブラウザ」の項目を開くと、自社サイトの訪問者がどのブラウザを使っているかが一目瞭然です。
メモ上位から足し上げて累計95〜98%になるブラウザまでを対応対象にすると、過不足のない範囲に収まります。新しいサイトでまだデータがない場合は、先ほどの全国シェアを初期値にして、公開後1〜2か月で自社データに置き換えるとよいでしょう。
自社はどこまで対応すべきか。利用者層・ケース別の判断軸
範囲の目安が見えたら、次は自社の事情に当てはめて絞り込む段階です。
「うちの場合はどうか」を一つずつ判断できるよう、軸ごとに整理しました。
BtoB・BtoC・高齢層。タイプ別の優先ブラウザ
誰がサイトを見るかで、優先すべきブラウザは変わります。
自社の客層に近いものを選んでください。
1. 法人向け(BtoB)の場合
業務時間中に会社のパソコンで見られることが多く、デスクトップのEdgeとChromeを最優先します。法人パソコンはWindows標準のEdge比率が個人より高い傾向があるため、発注時に取引先の社内標準ブラウザを確認できると確実でしょう。
2. 一般消費者向け(BtoC)の場合
接点はスマホが中心になるので、モバイルのSafari(iPhone)とChrome(Android)を最優先し、パソコンは二番手と考えます。ネットショップや店舗集客はこの型が当てはまるでしょう。
3. 高齢の利用者が多い場合
医療・士業・地域サービスなどでは、機種変更やOSの更新が遅い層が多く、買ったときのまま標準ブラウザを使い続ける傾向があります。iPhoneのSafariと、パソコンに最初から入っているEdgeを厚めに見ておくと安心です。
IEを完全に切ってよい条件と、残すべき唯一の例外
「Internet Explorer(IE)はもう対応しなくていいのか」。
これは本当によく受ける質問です。結論から言えば、公開しているホームページについて、IE対応は原則として不要と考えてください。
IE11は2022年6月15日に特定のWindowsでサポートが終了し、先ほどのシェア集計でも上位に名前が出てこないほど使われていません。
むしろIE専用に書かれた古いコードを残すほうが、保守費がかさみ、セキュリティ上の弱点にもなりやすいのが実情でしょう。
例外は一つだけ。
社内の古い基幹業務システム(旧式の販売管理や、自治体・金融向けの古いシステムなど)がIEでしか動かない場合です。このときに限り、そのシステムだけをMicrosoft EdgeのIEモードで延命します。
注意「IEモードは2029年で終了」は誤解
Microsoftは、EdgeのIEモードを「少なくとも2029年まで」サポートすると公式に表明済みです。これは終了日ではなく下限で、廃止する場合も少なくとも1年前に告知するとされています。「2029年で必ず終わる」と早合点せず、公開サイト側はIEを切り、社内システムだけをIEモードに隔離する。この切り分けが現実的です。
出典: Microsoft Learn「ライフサイクルに関するFAQ Internet Explorer および Microsoft Edge」
対応範囲を絞る判断は、経営的に見ても理にかなっています。
シェアが0.5%のブラウザに完璧対応するコストは、その0.5%が生む売上を上回ることが少なくありません。主要ブラウザで95〜98%をしっかり押さえ、残りの数%は多少崩れても読める状態でよしとする。これが費用対効果の取れた線引きです。
表示崩れを防ぐ5つの対策
ここからが実践です。
対応範囲を決めたうえで、表示崩れを未然に防ぐために押さえる対策を5つにまとめました。発注する側が「これは入っていますか」と確認するチェック項目としても使えます。
対策1. 対応範囲を「実データ」で決める
すべての出発点がここ。GA4の「ブラウザ」で自社の利用者構成を確認し、累計95〜98%になる範囲を対応対象として確定します。ここが曖昧なまま進むと、後の工数も契約も曖昧になりかねません。
対策2. 土台のCSS(リセットCSS)でブラウザ差を吸収する
ブラウザごとに微妙に違う「初期状態の見た目」を打ち消す土台のCSSを最初に入れておくと、差が出にくくなります。これは制作会社が標準で用意しているものでかまいません。発注側が銘柄を選ぶ必要はなく、「リセットCSSは入れていますか」と一言確認すれば十分です。
対策3. 新しい機能はBaselineを基準に採用する
新しいデザインや動きを取り入れるとき、それが古いブラウザで動くかを確かめる指標がBaselineです。
主要4ブラウザすべてに対応してから30か月(約2年半)が経った機能は「Widely available」と呼ばれ、安心して使えます。堅実に作りたいサイトはこの範囲で、表現を攻めたいときは古いブラウザ向けの代替表示をセットで用意しましょう。
個別の機能ごとの対応状況は、無料のツール「Can I use」でも確認できます。
「新しい・見栄えがいい」というだけで採用しない。この一手間が、公開後の崩れを大きく減らします。
対策4. 公開前にクロスブラウザテストを行う
対応対象に決めたブラウザで、公開前に実際の表示を確認します。最低でもiPhoneの実機Safari、Androidの実機Chrome、パソコンのChromeとEdgeは目で見て確かめたいところ。パソコン上の擬似表示(エミュレータ)だけで済ませると、実機でだけ崩れる事故を見落とします。問い合わせフォームの送信など、見た目だけでなく動作の確認も忘れずに。
対策5. 対応範囲を仕様書・保守契約に明記する
最後は、ここまで決めた範囲を文字にして残すこと。「対応ブラウザは何の最新何バージョンか」を発注の仕様書に書き、公開後にブラウザ側の更新で崩れたときに誰が直すのかを保守契約に明記します。口頭や曖昧な合意のままにしない。これが後のトラブルを最も確実に防ぎます。
5つの対策発注側が確認すべき順番
1. 実データで範囲決定
GA4のブラウザ構成で累計95〜98%まで
2. 土台CSSで差を吸収
リセットCSSが入っているか確認
3. 新機能はBaseline基準
堅実なら30か月経過の機能で
4. 公開前に実機テスト
iPhone・Android・PCで目視
5. 仕様書・契約に明記
範囲と公開後の責任を文字で残す
表示崩れが起きたら。原因の切り分けと「誰の責任か」の見極め方
予防していても、表示崩れが起きることはあります。
大事なのは、慌てて制作会社に連絡する前に原因を安い順・簡単な順に切り分けること。原因が分かれば、誰が直すべきかも自ずと見えてきます。
キャッシュ→特定ブラウザ→コード検証の順で切り分ける
次の順番で確認すると、無駄な費用をかけずに原因にたどり着けます。
1. まず再現条件を特定する
どの端末の、どのブラウザの、どのページで崩れているのか。スクリーンショットと端末名をセットで控えるだけで、原因究明は一気に進みます。「崩れている」という報告だけでは前に進めません。
2. キャッシュを疑う(無料・最初にやる)
ブラウザが古い表示を一時保存している場合があります。強制的な再読み込みや、シークレットウィンドウで開き直して直るなら、原因はキャッシュ。サイトやコードの問題ではありません。
3. 1つのブラウザだけかを確認する
特定のブラウザだけで崩れるならブラウザ互換性の問題、すべてのブラウザで崩れるならHTML/CSSの記述やコンテンツ側の問題、という見当がつきます。
4. 開発者ツールで検証する(ここから制作会社の領域)
キーボードのF12で開く開発者ツール(ブラウザに内蔵された検証画面)で、エラー表示や、画像・フォントなど外部から読み込むデータの失敗を確認します。
ここまで来たら、専門家に状況を渡したほうが早いでしょう。
制作会社の責任・保守の範囲・自社運用の問題の線引き
切り分けができると、責任の所在がはっきりします。
崩れた状況ごとに、原因の可能性と主な担当を整理しました。
表示崩れの状況別。原因と主な担当の目安
| 崩れた状況 | 原因の可能性 | 主な担当 |
|---|---|---|
| 公開時から崩れていた | 制作時の検証漏れ | 制作会社 |
| 公開後にブラウザ更新で崩れた | ブラウザ側の仕様変更 | 保守契約の取り決め次第 |
| 自分で更新した後に崩れた | 編集操作・貼付コード | 自社運用 |
| 再読み込みで直る | キャッシュ | 閲覧者側で解消 |
とくに迷うのが、2番目の「公開後にブラウザ更新で崩れた」ケース。
ここを保守契約でどう扱うかを決めていないと、毎回「誰が直すのか」で揉めます。だからこそ、次の章の発注実務が効いてくるわけです。
なお、自社でCMS(WordPressなど)を更新したあとに崩れたのなら、まずは編集前の状態に戻して原因を確かめます。貼り付けた外部の埋め込みコードが崩れの原因になっていることも少なくありません。
発注・保守でもう揉めない。仕様書と保守契約への落とし込み
クロスブラウザ対応のトラブルの多くは、技術ではなく「決めていなかった」ことから起きます。
ここでは、発注前と契約時に文字で残しておくべきことを具体的に整理しておきましょう。
対応ブラウザを仕様書に文字で明記する
「対応ブラウザはどこまで」を口頭で済ませると、後から認識のズレが表面化します。
仕様書には「対応ブラウザ＝Chrome・Safari・Edge・Firefoxの最新数バージョン」のように、対象と範囲を文字で書いてもらいましょう。自社のGA4データに基づいて範囲を提案してもらえると、なお確実です。
発注前に確認しておきたい項目を、チェックリストにまとめました。
このまま打ち合わせの持ち物にして構いません。
- 対応ブラウザの範囲を、自社の実データをもとに決めた
- その範囲を、発注仕様書に文字で明記した
- クロスブラウザテストの実施有無と対象端末を見積に含めた
- 公開後にブラウザ更新で崩れた場合の対応を保守契約で決めた
- 公開サイトのIE対応は不要と明記した(社内レガシは別途)
こうした「何を聞けば誠実な会社か分かるか」という観点は、良いWeb制作会社を見分ける質問集でも整理しています。クロスブラウザ対応に限らず、発注前の見極めに使える内容です。
公開後にブラウザ更新で崩れたら、誰がいつ直すのか
ブラウザは年に何度も更新され、その拍子に表示が崩れることがあります。
この「公開後の崩れ」を保守契約のどこに位置づけるかが、見落とされがちな最重要ポイントです。
契約前に決めるブラウザ更新起因の崩れの扱い
保守契約を結ぶときに、「ブラウザのアップデートで生じた表示崩れは、保守の範囲内で対応するのか、別途見積なのか」を必ず確認してください。ここを決めずに契約すると、崩れるたびに有償か無償かで毎回交渉することになります。月額に含めるのか、都度対応にするのか。どちらでも構いませんが、「決めてあること」自体が重要です。
保守費用そのものの相場や内訳に不安があるなら、HP保守費用の相場と無駄を減らすチェックポイントの記事もあわせてご覧ください。
また、発注時の伝え方で行き違いを防ぐ考え方は、制作会社とのトラブル事例と対策の記事で具体的に扱っています。
クロスブラウザ対応でよくある誤解
最後に、判断を誤らせやすい思い込みを整理しておきます。
どれも、知っているだけで余計なコストや不安を減らせるものばかりです。
よくある誤解と、正しい理解
| よくある誤解 | 正しい理解 |
|---|---|
| 全ブラウザ・全バージョンで同じ表示にすべき | 主要ブラウザで実用上問題なければよい |
| 公開サイトもIE対応を残すべき | 原則不要。残すのは社内レガシだけ |
| 新しいCSSはすぐ使ってよい | 堅実なら30か月経過の機能を選ぶ |
| リセットCSSを入れれば崩れない | 差を吸収する土台にすぎない |
| 崩れは全部、制作会社の不具合 | 更新・キャッシュ・自社編集も原因 |
とくに最初の誤解は、見積を不必要に膨らませる原因になります。
「全部対応」を求めるほど検証と保守の工数は増えるのに、その大半はほとんど使われていないブラウザのために費やされる。範囲を絞ることは、サービスの質を落とすことではありません。
よくある質問
Qクロスブラウザ対応は、どのブラウザまでやればいいですか?
A2026年時点では、Chrome・Safari・Edge・Firefoxの主要4ブラウザの最新数バージョンを基準にすれば、日本のデスクトップで約96%、モバイルで約95%をカバーできます(StatCounter・2026年5月時点)。最終的には自社サイトのアクセス解析で上位を確認し、累計95〜98%になる範囲に絞るのが現実的です。
QInternet Explorer(IE)にはもう対応しなくていいですか?
A公開しているホームページでは原則不要です。IE11は2022年6月15日にサポートを終了し、シェアもほぼ消滅しています。例外は社内の古い業務システムがIEでしか動かない場合だけで、その用途はMicrosoft EdgeのIEモードで延命します。
QEdgeのIEモードはいつ終了しますか?
AMicrosoftは「少なくとも2029年まで」サポートすると表明しており、終了する場合も少なくとも1年前に通知するとしています。「2029年で終了」と確定しているわけではなく、下限である点に注意してください。
Qホームページの表示が崩れたら、まず何を確認すればいいですか?
A最初にブラウザのキャッシュを疑い、強制的な再読み込みやシークレットウィンドウで再現するか確認します。直ればキャッシュが原因です。次に1つのブラウザだけ崩れるか、全ブラウザで崩れるかを見て、前者ならブラウザ互換性、後者ならHTML/CSSの記述を疑う順で切り分けます。
Q表示崩れは、制作会社が無料で直してくれますか?
A原因によります。公開時から崩れていれば制作の検証漏れ、公開後のブラウザ更新で崩れたなら保守契約の取り決め次第、自社でCMSを編集して崩した場合は自社の運用問題です。だからこそ保守契約に「ブラウザ更新起因の崩れを誰が直すか」を明記しておくことが重要です。
Q新しいデザインや機能は、すぐに使って大丈夫ですか?
ABaselineという指標で判断できます。主要ブラウザの対応から30か月以上経った「Widely available」の機能は安心して使えます。新しい機能を使う場合は、古いブラウザ向けの代替表示をセットで用意するのが安全です。
Q制作会社に発注するとき、ブラウザ対応はどう伝えればいいですか?
A「対応ブラウザ＝○○の最新△バージョン」と仕様書に文字で明記し、クロスブラウザテストの対象端末と、公開後にブラウザ更新で崩れた場合の対応を見積や保守契約に含めてもらいます。口頭や曖昧な合意は後のトラブルの原因になります。
範囲を決め、文字で残せば、崩れは怖くない
クロスブラウザ対応の判断は、結局のところ一本の軸に集約されます。
主要ブラウザで95〜98%を押さえ、残りは割り切る。そして決めた範囲を仕様書と保守契約に文字で残す。この2つができていれば、表示崩れに振り回されることはなくなります。
次の一歩は、まず自社サイトのGA4で「ブラウザ」の構成を見てみること。
そこに、御社にとっての正解の範囲が表れています。古い設計のまま崩れが頻発しているなら、古いホームページのリニューアル時期を解説した記事も判断材料になるはずです。
対応範囲の決め方や保守契約の組み立てで迷うことがあれば、契約を急ぐ前に、遠慮なくご相談ください。
経営の数字とWebの現場の両面から、御社にとって過不足のない線引きを一緒に整理します。