Webサイト運営者に朗報!iPhone Xを買わずに無料で表示チェック(確認)をする方法

Webサイト運営者に朗報。iPhone Xを買わなくても無料でサイトの表示チェックができる!

ホームボタンをなくし、前面すべてがディスプレイになったため、不自然な出っ張り(ノッチ:Notch)が付いてしまったiPhone X。

カメラやマイクを前面のどこかに搭載しなくちゃいけないから仕方なかったんでしょうが、どうも見た目が気になる。特に、Webサイトを運営している者としては、iPhone Xで見た場合の表示がどうなるかが気になるんです

ただ、64GBモデルで121,824円(税込)、256GBモデルで140,184円(税込)と、これまでのiPhoneで最高値になったため、Webサイトの表示チェックのためだけに購入するのを躊躇してる方も多いはず。そんな方に朗報です。

MacならXcodeのシミュレーションアプリを使って、簡単&無料でiPhone Xのブラウザ表示チェックが可能なんです。

スポンサーリンク

iPhone XのSafariでホームページの表示確認する方法

この素晴らしい情報を提供してくれてたのがこちらのサイト。

iPhone Xを購入せず、無料でウェブページの表示確認を行う方法 (macOS) - Qiita

これ見て、うちのiMacでもやってみました。

流れはこんな感じです。

  1. Xcodeのバージョンを最新(2017年9月27日現在)の9にアップデートする
  2. アップデートしたXcodeを一度起動してコンポーネントのインストールを行う
  3. 正常起動したXcodeは終了してOK
  4. Xcodeアプリアイコンを右クリックして「パッケージの内容を表示」する
  5. Simulatorを起動する
  6. 表示されたiPhone Xのウィンドウで、Safariを起動
  7. 確認したいURLを入力して表示確認

まずは、1〜3をパパッとやっておいてください。以下は、4からの説明です。

4.5. Simulatorを起動する

Xcodeアプリを右クリックすると「パッケージの内容を表示」という項目があるので、それをクリックします。

Xcodeアプリアイコンを右クリックして「パッケージの内容を表示」する
すると、「Contents」→「Developer」→「Applications」の中に、「Simulator.app」があるので、それをダブルクリックして起動します。

6.7. iPhone Xの画面をシミュレートする

画面にiPhone Xのシミュレーションウィンドウが表示される
黄色矢印の部分。MacのデスクトップにiPhone Xのシミュレーションウィンドウが表示されます。

ホーム画面のドックにあるSafariをクリックして起動。

iPhone X SafariでWebサイトをシミュレーション
Safariで表示確認したいURLを入力。当ブログは縦表示では問題ありませんでしたが、これを横表示にすると…。


iPhone X 表示確認 横表示
あ〜!左右が切れてる!

予想はしてましたが見事に左右が切れてました。メニュー部分も一番左の「HOME」が見切れてます。iPhone Xが発売される11月3日までに修正ですね。

Webサイト担当者やブログ運営者はご確認を!

iPhone Xがどれだけ売れるかわかりませんが、日本ではiPhoneの人気が他国より群を抜いて高いので、iPhone Xへの表示対策は絶対にやっておいたほうがいいです。表示がおかしいと、メンテナンスがちゃんとやれてないって思われますからね。

Webサイト担当者やブログ運営者はご確認を!

僕は一応iPhone Xの実機を購入予定ですが、Xcodeで確認できるのが分かったので、まだどうするか悩んでます。ただ、Xcodeの表示チェックは完全ではないので、本当なら実機でチェックするのが万全なんですよね。

あと、今使ってるiPhone 7 Plusには何の不満もないのにそれを買い換えるべきなのか、という思いも…。14万円をiPhone Xじゃなく、iPad ProとApple Pencilにまわして新しい作業環境を構築したほうがいいのか…。

iPhone X の予約開始は10月27日から。もうちょっと考えてみます。

スポンサーリンク

この記事をシェアする

  • このエントリーをはてなブックマークに追加

よく読まれている関連記事はこちら

このブログ「SKEG*log(スケッグログ)」を購読する

この記事が気に入ったら
「いいね!」しよう。
最新記事をお届けします。
● 最新記事をRSSで配信中です。feedlyへの登録はこちらからお願いします。