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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

追加のよくある質問

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

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

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

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

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

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

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

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

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

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

Tags: #HOME PC & MOBILE APPS FIREFOX