Internet Explorer11終了によるWebの影響とユーザーへのメリット ― コラムーベイクロスマーケティング株式会社

2022年6月15日にサポート終了

2022年6月15日にInternet Explorer11(以下、IE11)のサポートが終了します。
ブラウザの国内シェア率（2021年6月の時点）は、Google Chromeが40%を超えて最も高く、IE11を使用する際に推奨される、Microsoft Edgeは15%であり、IE11のシェア率は4.58%と低いです。
大半の人が、IE11からほかのブラウザにシフトしているのが分かります。ブラウザのサポートが終了すると、セキュリティ面でのリスクが非常に高くなります。
ウイルス感染や情報漏えいなどの危険性が高まるので、これを機にGoogle ChromeやMicrosoft Edgeなどのほかブラウザを利用するようにしましょう。

IE11終了によるWebへの影響

IE11が終了して、具体的にWeb上で何が変わるのかというと、IE11非対応のCSSやJavaScriptなどが遠慮なく使えるようになります。
IE非対応のものは、便利なものが多くこれらが使えるようになると、サイト制作に置いて利便性の向上やデザイン表現の広がりが期待できます。

たとえば、被写体に影を付けるfilter:drop-shadow;というCSSが使えれば、被写体に影をつける画像加工の作業を省くことができます。
scroll-behavior: smooth;というCSSは、ボタンを押したときなどに指定の位置に滑らかにスクロールさせるもので、IE11対策にJavaScriptで対応してたところを、CSSのみでの簡単な実装が可能となります。

例に挙げた通り、CSSはIE11による影響が非常に大きく、画像が縦に伸びていたり、横に並べたい要素が縦並びになるといった、表示が崩れてしまう現象がIE11で起こっていました。
IE11の対策は場合によってはかなり時間がかかるため、Web制作者にとっては厄介な存在でした。

表示速度向上に期待

IE11の終了は、サイト制作する側にしかメリットはなさそうに見えますが、一般ユーザーにもメリットがあります。
それはサイトの表示速度の向上に期待できるという点です。
IE11対策で使用を制限していたものが解禁され、画像を加工せずに済めばファイルサイズの軽量化や画像表示速度の向上により、今までよりページ自体が軽くなります。
さきほど例にあげた、被写体に陰影を施すfilter:drop-shadow;はまさにこれに当てはまります。

CSS	画像加工

96KB	100KB

上記の2つの画像は、左が画像加工せずにCSSで影を付けたもので、右は画像に直接影を付けたものです。
若干、画像を加工した右の画像より、CSSで影を付けた左の画像の方がファイルサイズが軽くなっています。
画像1つでは効果はイマイチですが、加工画像の多いページであれば、表示速度改善により期待できます。

CSSで影を付けているため、ほかの画像に差し替えても、被写体にあわせてそのまま画像に影が付くので、画像加工の手間が省け、作業効率の向上のメリットもあります。

こちらのCSS以外にも、IE非対応だったCSSにどんなものがあるのかを次項でさらに紹介させていただきます。

IE11対策が必要だったCSS/HTMLタグ

filter:drop-shadow;（被写体だけに影）
mix-blend-mode（被写体だけに影）
filter: blur;（ぼかし）
clip-path（画像を指定の形にクリッピング）
position: sticky;（スクロール追従）
display:grid;（カスタマイズ性に優れたレイアウト）
object-fit（画像のトリミング）
HTMLとCSSのみでカルーセルの実装
ベースラインのずれ調整
Webフォント
mainタグ

filter:drop-shadow;に加え、白い背景画像であれば透過ができるmix-blend-modeプロパティや、画像にぼかしを加えるfilter: blur;などの便利なCSSもIE11非対応であり、画像加工による対策が必要でした。
前述した、drop-shadowと同様に、これらCSSを使えるとファイルサイズの軽量化に期待できます。

例として、下記に2つの画像を用意しました。
同じ画像に見えますが、左側はjpgの画像で、元々は白背景の画像でした。こちらの画像には、mix-blend-mode:darken;というCSSを設定しています。右側はpngの背景透過画像です。両方共に、分かりやすくグレーの背景を設定しています。
ファイルサイズは、jpg:32KBで、png:96KBです。jpgの特徴である、人間の目には分かりにくいレベルで画質を落として、ファイルサイズを軽くするという性質を活かしたまま、CSSで背景を透過しているというわけです。

jpg（CSS）	png（背景透過）

32KB	96KB

WebP

jpg	WebP

460KB	129KB

IE11は、WebP（ウェッピー）も非対応です。WebPとはjpgとpngのいいとこ取りのような画像フォーマットで、ファイルサイズが軽い上、背景透過にも対応しています。ファイルサイズの軽量については、jpgと同じ非可逆圧縮という、人に違和感を与えないレベルで画質を落として軽量化を図っております。
詳しくは、『WebPについて』で書いておりますのでこちらも併せてお読みください。
WebP（ウェッピー）について

表示速度改善以外のメリット

IE11サポート終了によるメリットは、画像の表示速度改善やファイルサイズの軽量化ばかりでなく、scroll-behavior: smooth;やposition: sticky;というCSSによる、ユーザビリティの向上にも期待できます。

scroll-behavior: smooth;は、ボタンを押した際のページスクロール滑らかにしてくれるCSSです。
目次のあるページやページ下部に見かけるTOPへ戻るボタンなどで使われます。これを適応していないと、表示箇所に一瞬で移動してしまうためスクロール感が全くなく、別ページへ移動したと錯覚されてしまう場合もあります。
ページ内リンクがある場合は必須ともいえるCSS(JavaScript)です。

position: sticky;は、スクロールした際にこちらのCSSを設定した要素が固定されるというものです。ページをスクロールした際に、固定されるヘッダーやサイドナビにはこちらのCSSが使われています。
メインコンテンツを見ながらも、ほかページへの導線や関連リンクが追従してくれるため、離脱率の軽減や回遊にも期待ができます。

楽天市場でposition: sticky;

position: sticky;は、IE11対策にJavaScriptを使っていた表現でした。
例えば楽天市場の場合、楽天GOLD環境以外でのJavaScript使用不可のため、商品ページでの利用ができませんでした。
IE11サポート終了することで、こちらのCSSが遠慮なく使え、IE11を対策しなくても楽天市場で使うことができるようになりました。

position: sticky;を例として、追従するレフトナビを作れば、スクロールした際にメインコンテンツの終わりまでレフトナビが追従してくれるようになります。
コンテンツの長さに応じて、レフトナビの前半部分が表示されるので、注目させたい商品やキャンペーン情報などレフトナビ上部に置けば、お得情報が目に止まりやすくなります。

コンテンツを見ながら、レフトナビにあるキャンペーン情報や注力したい商品の情報などが、自然とユーザーにすりこまれていくわけです。カテゴリやほかの商品情報も目に入りやすくなるため、回遊率向上にも期待ができます。

まとめ

IE11の終了による影響はWeb制作者だけでなく、一般ユーザーにもメリットをもたらします。
表示速度の向上や、ユーザビリティの向上といった施策に取り組んでいくとよいでしょう。
今回紹介した内容以外にも、まだまだIE11終了によるWebの影響はありますが、一般ユーザー目線でわかりやすいものをピックアップさせていただきました。
IE11サポート終了のこの機会に、IE11非対応だった技術を使ってサイトを改善したいという相談などございましたら、お気軽にお問合わせください。
Webサイト制作のサービス内容はこちらから

Written by Baycross Marketing