Web制作実務役立ち

Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】

Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】
本ページにはプロモーションが含まれています。

こんにちは、Web制作フリーランスのしょーご(@samuraibrass)です。

突然ですが、Chromeの検証ツールのスマホ表示は、実機と結構違うので、信用しないほうがいいです。

ありさちゃん
ありさちゃん
え?検証ツールで表示問題ないものはオッケーにしてたんですけど…
ゆうすけくん
ゆうすけくん
まあなんとなく実機と違うのは分かるんですけど、確認めんどくさくないですか?サーバーに上げないと分からないし…
しょーご

いや、ローカル環境でもiPhoneで確認できるんだよ!意外に知らない人が多いよね。

SafariはネクストIE」と言われる程度には表示崩れしやすいですが、iOS Safariも中々癖があります。

つまり「iPhone実機でもしっかり表示確認」を本来したいわけです。

でも、面倒くさがってやってない人が多いのではないでしょうか?

そこで今回は「ローカル開発環境の状態で、自分のiPhoneで表示を確認する方法」を解説します。

是非今回学んだ方法を即セルフチェックに活かしてもらえればと思います。

iPhoneでローカルのサイトを確認する方法
  1. iPhoneの設定を行う
  2. PCのIPアドレスを調べる
  3. ローカル開発サーバーのポート番号を調べる
  4. iPhoneで両者を入力して接続する

*前提条件(重要!!!)
❶スマホとPCが同一WiFiに繋がっていること
開発サーバー(VSCodeのLive Serverなど)を起動していること

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

❶iPhone側の設定

まずはiPhoneで以下の設定を行ってください。

  1. 設定」をクリック
  2. Safari」をクリック
  3. 一番下の「詳細」をクリック
  4. Webインスペクタ」をオンにする
Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】

❷PCのIPアドレスを確認する

ここからは「Windows」「Mac」両者でIPアドレスの確認方法が異なるので、順に解説していきます。

Windowsをお使いの場合のIPアドレス確認方法

  1. 設定」をクリック
  2. ネットワークとインターネット」をクリック
  3. 状態」をクリック
  4. プロパティ」をクリック
  5. IPv4アドレスをメモ
Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】
Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】
Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】
しょーご

使うのはIPv4アドレスになります。

Macをお使いの場合のIPアドレス確認方法

  1. システム設定」をクリック
  2. 接続している「Wi-Fi」の「詳細」をクリック
  3. IPアドレスをメモ
Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】
Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】
Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】
しょーご

Macの場合はそのままIPアドレスを用います。

❸ローカル開発サーバーのポート番号を調べる

ローカルサーバーですが、今回はVSCodeのLive Serverを建ててみます。

Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】

VSCode右下あたりにPort:xxxxと出ているのがポート番号になります。

Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】

WebサイトのURLの部分でも確認できます。

Web制作でiPhone実機でローカル環境の表示を確認する方法【検証ツールは当てにならない】

❹iPhoneでIPアドレスとポート番号を打ち込み検索

それでは、IPアドレスとポート番号を組み合わせます。

IPアドレス:ポート番号となるように入力検索してください。

するとサイトが表示できるかと思います。

しょーご

開発中に都度確認するようにするといいですね!

おわりに

検証ツールだけでスマホ表示を確認するのは結構危ないので、是非今日から「実機iPhone」で表示を確認するようにしましょう。

iPhoneでローカルのサイトを確認する方法
  1. iPhoneの設定を行う
  2. PCのIPアドレスを調べる
  3. ローカル開発サーバーのポート番号を調べる
  4. iPhoneで両者を入力して接続する

*前提条件(重要!!!)
❶スマホとPCが同一WiFiに繋がっていること
開発サーバー(VSCodeのLive Serverなど)を起動していること

しょーご

私の「コーディング演習課題」でも是非実践してみてください!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!