ieやedgeで表示されない病を克服したグラフィック

Webコーダーやデザイナー、エンジニアが 皆悩まされている ie&edgeの問題があります。

ついにこの時がやっとやって来ました!今後は日本でもie&edgeのブラウザシェアが徐々に減っていくと思われる告知がマイクロソフト自身からありました。

マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。「IEは技術的負債もたらす」

日本が一番遅れていて、ie&edge両方で3割近くあったブラウザシェアが、

この告知でやっと減っていき、ie&edgeはもうなくなっていきます。

ie&edgeで表示すると同じウェブサイトが真っ白のままというトラブルが数多くおこっていたからです。

マイクロソフトはもっと早く対応しなければならなかったのに、できなかったのです。

そのため日本では3割のie&edge使用者のために、特別なie&edge対応をしなければなりませんでした。

Webコーダーやデザイナー、エンジニアが対応してきたこと。

ではどうやって、対応してきたかの概要をかいつまんでお知らせします。
この事例の場合、Webデザイナー領域のスキルだけで、解決策を実行した制作例です。

メンズアパレルのランディングページ用カバー作成です。

(以下全て掲載のカバーはぼかして表示しています。)

ECサイトにおけるランディングページのカバー製作で、このようなカバーをコーディングで作成しました。

ieやedgeで表示されない病を克服したグラフィック

ieやedgeで表示されない病を克服したグラフィック

クライアントから求められる「かっこいいホームページに!」「デザイン性の高いサイトに!」してほしい、

という希望を受けた時に、その行く末にどんなリスクがあるのか、事前にきちんと説明した方がいいと、

最近とみに感じています。

かっこよさ = 最先端リッチコンテンツ = ブラウザやレスポンシブにエラー = サイトが重くなる。

この件は上記にあてはまった例です。この事例状況は以下の通りでした。

⚫️ 当初このカバー部分は、画像ではなく、リッチコンテンツによるマークアップ製作だった。

よって、グラフィック中の文字は全て、ソース表示される設計でした。

⚫️ その方法で製作後に、ブラウザテスト時に、このカバーがieやedgeで表示されず、

このページ画面が真っ白で、何も表示されなかった。

⚫️ Chrome, Firefox, Safari, Opera, スマホやタブレットでは表示された。

このコーディング設計のカバーコンテンツがどうしてieやedgeで表示されなかったのか?

表示されなかったページは、全てがある最先端のプラグインで制作したページでした。

つまりこの場合のボトルネットは、最先端の技術にあるのでは?と予測できました。

Chrome, Firefox, Safari, Opera, スマホやタブレットは対応しているのに、

ieやedgeだけが遅れていて非対応という事実が判明したのです。これはかなり難解な状況で、フロントエンドのしかも

コンテンツ制作側の責任領域と判断し、デザイナー側で検証テストを何度も行い、

ie&edgeで真っ白になった原因は、このカバー以外にその他にも数箇所の機能にある事をつきとめました。

米国ではieやedgeのブラウザシェアが低く、サポートしないサービスが多い。

これも海外サポートに問い合わせてわかったのですが、「我々はもうieやedgeはサポートしていない」と

米国テーマ配布会社から、正々堂々と返答が来た時には驚きました。「まさか!」

米国ではie&edgeあわせて10%前後。しかし日本ではこの両方のシェアが合計して30%弱くらいありますので、

これに対応しないと広告費の3割をどぶに捨てる事になり、無視するわけにはいかないのです。

ボトルネックを発見した検証テストのやり方とは?

当初は原因が全くつかめず「これはデザイナータスクなのか?」と当惑していたくらいです。

しかし対応できるのはコンテンツを制作した本人自身だろうというのは間違いないですから、

意を決して、ボトルネック発見のための検証テストを行いました。これは実際手間がかかる作業で、

コンテンツを切り分けてテストしていったのです。

結果、ボトルネックは何種類何箇所もある事が検証テストでわかりました。手順はこんな流れです。

非表示ページを特定する → そのページのコンテンツを切り分けて検証テストを行う。

→ ボトルネックを発見 → 特定したコンテンツの機能を変更しマークアップし直す。

ieやedgeで表示されない病を克服したグラフィック

ieやedgeで表示されない病を克服したグラフィック

ieやedgeで表示されない病を克服したグラフィック

まとめると、

テキスト部がソース表示できるデザインがSEO的にはもちろん望まれますが、

最新機能にはブラウザ非対応があるという一長一短があるというわけです。また、

新しすぎるとエラーが出やすいというのは、Webでも同じというわけです。このカバー以外にも、

他のコンテツもieやedge非対応という症状が生まれるコンテンツが数多く見つかりました。

レスポンシブも含め、拡大する各種ブラウザ、特にieやedgeをクリアしていくボトルネック回避の知識が

グラフィックを作成する段階から必要になるとはっきりわかった出来事でした。

 

ピックアップ記事

  1. 混在コンテンツmixed contentsを改良する方法
    混在コンテンツとは、どういう意味ですか?混在コンテンツ(Mixed contents)とは、一つ…
  2. 目次 前準備のバックアップと注意点 英語の説明を翻訳してよく読み理解する ステップごと…
  3. 目次 Webデザイナーが初めて知る「MariaDB」という名前 MariaDBって何ですか…
  4. 目次 Web Design 3.0への流れ Web Design 2.0とWeb Desi…
  5. 目次 Macスリープ再起動エラーがおこった環境 スリープ再起動エラーメッセージの内容 …
PAGE TOP