こんにちは、ティウェブ藤園です。

先日インターンの方がブラウザのシェア率について調査した記事をアップしましたが、Internet Explorer 11（以下IE11）の対応について、ティウェブでは見積もりから除外することがチラホラ出てきました。 他の制作会社でも対応をやめる（対応する場合は別途費用が必要）というところも散見されるようになっています。

そして先日、IE11のサポートを終了する日が正式に発表されました。

では実際、IE11の対応をしない場合どういったメリットがあるのかという話と、IE非互換リスト（後継のブラウザであるEdgeへの転送処理）についてご紹介します。

IE11に対応しない場合にできること

ブラウザチェックのコストカット

まず第一に、ブラウザチェックのコストカットが可能です。

制作会社では、Webサイトを作る際、表示崩れがないか、おかしな挙動がないか、構築後に各種ブラウザでチェックをしています。

ティウェブでは現在、Google Chrome（最新版）、Edge（最新版）、iPad（iOS最新版）、iPhone（iOS最新版）、Android（社内のチェック用端末での最新OS）の５ブラウザでチェックします。

これにIE11が加わると、ページ数の多いWebサイトでは塵も積もれば、、、ということでそれなりに作業工数が増えることとなり、費用がかかってきます。

IEは開発したMicrosoftでも技術的負債と言われていて、独自の技術で開発したために他のブラウザと挙動が違う部分が多く、端的に言うなら「バグやエラーの多いブラウザ」です。 １回のチェックだけでなく、修正対応、その後再チェック、、、と複数回対応することが少なくありません。

『IEならこのぐらいの量のバグやエラーが発生するだろうから、ブラウザチェックも全体通して２回ぐらいする可能性があるなあ』ということを想定して、他のブラウザよりブラウザチェックに対してのコストもそれなりになるため、特に大きなWebサイトではそこそこのコストカットとなる可能性があります。

技術的な対応の簡略化

さまざまな機能がIEにのみ対応していないという状況が多く、IEに対応したいものの新しい技術を使うことがむずかしい盤面は多々ありました。

工数を簡略化できてコストを削減できる技術があったとしても、使えないことでスケジュールが押したり、素敵なデザインやアニメーションを反映するのに必要な技術が使えないためにリッチな表現が行えないなど、費用面はもちろん、プロジェクトのスケジュールや、デザインにまで影響してしまいます。

CSSでの例

技術的な具体例で、例えばCSSでは関数というものがありますが、IEでのみ使えないものがいくつかあります。

:rootでのvar()関数

これはBootstrapなどの有名なCSSフレームワークでも多用されていますが、一番はじめにCSS内で変数を定義するとそれを引用して使いまわせるというものです。

:root {
    --accent-color: #ff0;
    --main-color: #f00;
}

h1 {
    color: var(--accent-color);
    border: solid 1px var(--main-color);
}

Sass、Scssの機能が本来はCSS単独で使えるはずなのですが、IEが対応していないために使用できませんでした。これらが気軽に利用できるようになるのはとっても便利で、特に大きなサイトを構築する際の手間が減らせます。

その他にもmin(), max(), clamp()などさまざまな関数が、IE非対応にすると使えるようになります。

IE非対応サイトでIEユーザーをEdgeに誘導

このブログを書くにあたって事前にティウェブのサイトでも行ったのですが、Microsoftへ申請すると、IEからEdgeへ転送する処理をかける〈IE非互換リスト〉を利用することができます。

申請はこちらのページを参考にメールで送る必要がありますが、簡単な英語のみでしたのでそれほど難しくはありません。

申請に必要な項目は下記の６項目です。

• Owner name（所有者名）
• Corporate title（役職名）
• Email address（メールアドレス）
• Company name（会社名）
• Street address（住所）
• Website address（ウェブサイトアドレス）

日本語で送っても申請完了できたという人もいるようですが、私は念のため英語でお送りしまして、最初にメールを送ってからGWをはさんで10日ほどで登録が完了したとお返事がありました。

様々な事情からIEには非対応にしたいけれど、IEユーザーに崩れたサイトを見られたくないという場合は上記のような対応も良いかと思います。

※転送には閲覧者の環境に「Edge 87」以降がインストールされている必要があります 。

まとめ

ただ日本では、主要銀行や公共のWebサービスがシステムの都合でIE推奨だった経緯などもあって、世界の中でもIEユーザーが多い傾向にあります。

そのため、なかなか大きなWebサイトではIE非対応の要件で進めることが難しいかもしれません。そんな時に、非互換リストに申請してEdgeに誘導することを検討されてはいかがでしょうか。

ティウェブでも非対応での見積もりが基本になってはいますが、対応が必要であれば対応することも可能ですので、その際はぜひご相談くださいませ。