最近Macを使うフロントエンドディベロッパーやデザイナーが増えていますよね。
私もMacのヘビーユーザーなのですが、Macでサイト制作をしていると 「IEの確認ができない!困った!」みたいな事態が発生しますよね。

なんとかMacでIEを確認できないかGoogle検索すると「Safariのユーザーエージェントを使うんだ!」ってゆう記事が多く出てきます。しかし実際ユーザーエージェント環境のIEとWindowsで見たIEのサイトのデザインって違うことが結構あるんですよね😢。

で、他に無料でIEを見れる方法は無いか探してたら遂に見つけてしまいました。
今回はその神的方法(※期待値あげすぎてたらごめんなさい。)をご紹介します。



Macから無料でIEを使用する方法

IE Tabを使う

結論から言うとChromeの拡張機能 IE Tab を使用しました。

IE Tabの使用方法

手順としては

  1. MacでChromeを開く
  2. IE Tabにアクセス
  3. 拡張機能を追加
だけで簡単にMacからIEを使用できるようになります。

インストールすればのアイコンがChromeブラウザの右上に表示されるので、そのアイコンをクリックして、URLを入力すればIEから見れるようになります。

IE Tabを使った例

IE Tabを使ってこのサイトのトップを見てみます。このサイトはgridを使っていてIE対応はしていないため、IEで見ると崩れます。IE Tabを使用すると同じように崩れたデザインが表示されました。

▼このサイトを見た時の例(Windows上でのIEと同じ崩れ)


ちなみに、ユーザーエージェントで見た時のこのサイトは崩れていませんでした。
▼ユーザーエージェントのIE環境で見た時の例

IE Tabを使ってみた感想

IE Tabを使うメリットの一つはタイトルにもある通り、無料でIEが使えることです。 また拡張機能を追加するだけで使用できる手軽さも良いなぁと思いました。
無料で手軽なのがIE Tabの魅力なのですが、動作がどうしても遅くなってしまうのが少し気になりました。
そのためIE対応の比重が大きいサイトをMacで開発しWindowsの環境が中々確認できないという方はMacにWIndowsをインストールするサービス、Bootcampをおすすめします。

Bootcampとは?

BootcampとはMacに元々備わっているwindowsをインストールするサービスで無料で使うことができます。今回はIE Tabをメインに話したかったので、Bootcampの詳細は別記事でご紹介しようと思います。

詳細はこちら→Apple公式サイト

まとめ

Macでのサイト制作で、IEでの確認を早く、無料でしたいと言う方はIE Tabがおすすめです。
上記でも述べたように Bootcampを使う方法や有料で簡単に導入できる方法もあるため、また別の方法もご紹介しようと思います。
ここまで読んでくれてありがとうございました☺️

またね✋