PC で Web サイトのモバイル版を表示する方法

Web 開発者またはオンライン ビジネスを経営している場合は、モバイル サイトがデスクトップ上でどのように見えるか知りたいと思われるかもしれません。インターネット トラフィックの半分以上が携帯電話からのものであるため、モバイル サイトの外観と機能は非常に重要です。視覚的に魅力的であれば、顧客はサイトに長く滞在したり、何かを購入したりする可能性が高くなります。デスクトップ ビューは、編集を行ったり、考えられる問題をより早く修正したりするのにも役立ちます。

幸いなことに、これは比較的簡単なプロセスです。この記事では、さまざまなデバイスやブラウザで Web サイトのモバイル バージョンを表示する方法を説明します。

Mac 上の Chrome でウェブサイトのモバイル バージョンを表示する方法

Chrome では、DevTools と呼ばれる組み込みの開発者ツールを使用して、フロントエンドをテストし、Web サイトのすべてのコンポーネントが適切に動作しているかどうかを確認できます。DevTools は、事前定義されたデバイスの選択肢を提供するため、開発者が開発者向け拡張機能を使用せずにデスクトップからモバイルへ、またはその逆にビューを迅速に移行するための最良の方法です。

ニーズに合わせて画面サイズを変更したり、画面の幅と高さを調整して、Web サイトがさまざまな画面サイズでどのように表示されるかを確認することもできます。Mac でこれを行うには、次の手順に従います。

1. Google Chromeブラウザを起動し、見たいサイトにアクセスします。
   
2. キーボードの F12 を押して DevTools にアクセスします。
   
3. モードがオンになったら、「デバイス エミュレーションの切り替え」アイコンをクリックします。
   
4. iOS および Android デバイスのリストからエミュレートするデバイスを選択できます。
   
5. 選択したモバイル形式で Web サイトが表示されます。
   

完了したら、開発者ツール ウィンドウを閉じて、Web サイトのモバイル バージョンを閉じます。

Windows PC 上の Chrome でウェブサイトのモバイル バージョンを表示する方法

Windows PC 上の Chrome でウェブサイトのモバイル バージョンを表示する場合も、ほぼ同様のプロセスです。

1. Chrome ブラウザを開きます。
   
2. Chrome で、モバイル版で表示したい Web サイトにアクセスします。
3. Webページを右クリックし、メニューから「検査」を選択します。
   
4. 開発者ツールに移動するには、「その他のツール」タブをクリックして「開発者ツール」を選択するか、F12 キーを押して DevTools を開きます。
   
5. 開発者ツールウィンドウが開きます。
6. デバイス切り替えアイコンをクリックして、モバイル サイト表示モードに切り替えます。
   
7. エミュレートするモバイル デバイスを選択します (オプション)。
   
8. ニーズに合わせて画面の寸法を変更できるようになりました。

Chromebook の Chrome でウェブサイトのモバイル バージョンを表示する方法

Chromebook を使用して Chrome でウェブサイトのモバイル バージョンにアクセスする方法は、最初の 2 つの方法と非常に似ています。

1. Google Chrome Webブラウザを開きます。
   
2. モバイル デバイスでアクセスしたい Web ページを開きます。
   
3. メニューにアクセスするには、縦に並んだ 3 つの点のアイコンをクリックします。
   
4. リスト内の「その他のツール」項目の上にマウスをドラッグします。
   
5. 「開発者ツール」を選択します。
   
6. ブラウザで「開発者ツール」ウィンドウが開きます。
   
7. [デバイス] 切り替えアイコンをクリックして、モバイル サイトの表示モードを切り替えます。
   

これにより、モバイル サイトのユーザー インターフェイスが表示されます。ドロップダウン ボックスからメーカーとモデルを選択して、好みのデバイス エクスペリエンスを選択することもできます。開発者ツール コンソールを閉じるたびに、Web ページがデスクトップ サイトとして更新されます。

Mac 上の Firefox で Web サイトのモバイル バージョンを表示する方法

Firefox などの他の Web ブラウザを使用して、Mac デスクトップでモバイル サイトを表示できます。ブラウザ ウィンドウのサイズ変更は、ほとんどの Web 開発者がレスポンシブ デザイン Web サイトを評価するために使用する方法の 1 つです。ただし、ほとんどの場合、この代替案は受け入れられないようです。

そこで Firefox ブラウザの Web 開発機能が役に立ちます。Firefox でモバイル バージョンの Web サイトにアクセスする方法を知っていれば、複数の解像度で Web ページを閲覧できます。次の手順を実行します：

1. 表示したい Web サイトのモバイル版を開きます。
2. Webページを右クリックし、メニューから「検査」オプションを選択します。
   
3. 「レスポンシブデザインモード」を選択します。
   
4. Webサイトの画面サイズを選択します。
   

Windows PC 上の Firefox で Web サイトのモバイル バージョンを表示する方法

Windows PC には、Firefox を使用して Web サイトのモバイル バージョンを表示するオプションもあります。その方法は次のとおりです。

1. PC で Firefox を起動します。
   
2. モバイル版で見たいWebサイトにアクセスします。
   
3. 横三本バーのアイコンをクリックして「設定」に移動します。
   
4. ドロップダウン メニューが表示され、「Web Developer」オプションを選択する必要があります。
   
5. 「レスポンシブデザインモード」を選択します。
   
6. 最後に、スマートフォンのモデルを選択して、そのデバイスでサイトがどのように表示されるかを確認できます。
   

Mac の Safari で Web サイトのモバイル バージョンを表示する方法

Chrome と Firefox を使用してデスクトップでモバイル Web サイトを表示する方法について説明しました。では、Mac デバイスに付属するデフォルトのブラウザである Safari はどうでしょうか? 幸いなことに、Safari で Web サイトのモバイル バージョンを表示することもできます。

1. Safari ブラウザを起動します。
   
2. モバイル版として表示したいWebサイトにアクセスします。
   
3. 「オプション」をクリックし、「開発」メニューをクリックします。
   
4. ドロップダウン メニューから [レスポンシブ デザイン モードに入る] を選択します。
   
5. ウェブサイトのモバイル版を表示できるようになりました。
   

追加のよくある質問

携帯電話でウェブサイトのデスクトップ版を表示できますか?

答えは「はい」です！モバイル版からデスクトップ版に切り替えると、パソコンを使わずに確認することができます。Chrome でモバイル版をデスクトップ版に移行する手順は次のとおりです。

1. デスクトップ ビューで表示したい Web サイトに移動します。

2. 三点アイコンをタップしてメニューにアクセスします。

3. ここで「デスクトップビュー」オプションを選択します。

これらの手順は、使用している携帯電話によって異なる場合があることに注意してください。

モバイル Web デザインをより簡単に

開発者ツールは、デバイスを切り替えることなく、デスクトップ上で Web サイトのモバイル バージョンを分析および変更するのに最適です。画面サイズを変更して、さまざまなデバイス上でコンポーネントがどのように機能するかを観察できます。レスポンシブ モードを使用すると、さまざまなコンポーネントを調整し、複数の画面サイズに対応する Web サイトを作成できます。

Web サイトをデザインするとき、デザイナーは、サイトのフロントエンドが携帯電話、タブレット、デスクトップでどのように表示されるかを常に念頭に置く必要があります。この記事で説明されている方法を使用すると、開発者が問題を引き起こしていることを特定し、問題を修正するのにも役立ちます。

デスクトップ上でサイトのモバイル版を表示してみたことがありますか? そのためにどのブラウザを使用したいですか? 以下のコメントセクションでお知らせください。