PC（Mac / Windows）からインスタグラムに投稿する方法をブラウザ別に解説します。Google Chrome、Safari、Firefox、Edge、Operaの5つのブラウザでの投稿方法を解説します。
Click or Tap で見たい項目にワープ！
ブラウザ別PCからの投稿方法
これからPCでの投稿方法を解説していくのですが、PCでの投稿方法を大きく分けると2つの手順に分けられます。
- 手順1. PCでインスタグラムを開き、ブラウザごとの機能を使用してスマホ表示にする
- 手順2. ブラウザ機能を使用したスマホ表示にて、インスタグラムに投稿
では、MacかWindowsか、またブラウザごとにもやり方が違ってきます。しかしでは、どのPCを使用していようと、どのブラウザを使用していようとほとんど同じ手順です。
そのため、の部分をMacかWindowsか、どのブラウザを使用するかによって、それぞれ解説し、の部分はまとめて解説していきます。
手順1. インスタグラムを開き、ブラウザ機能を活用してスマホ表示にする
まずは、PCでインスタグラムを開き、ブラウザの機能を活用してページをスマホ表示にしましょう。
お使いのPCがMacの場合は、Google Chrome、Safari、Firefox、Operaでの表示方法を、Windowsの場合は、Google Chrome、Firefox、Edge、Operaでの表示方法を解説します。
Mac PCでのブラウザ別のスマホ表示方法を解説します。
Google Chromeの場合
Google Chromeでインスタグラムをスマホ表示していきましょう。
まずは、「インスタグラム」にログインし、自分のアカウントページを開きます。
「command（⌘） + option（⌥） + I（アイ）」を押し、デベロッパーツール（検証モード）を開きます。
デベロッパーツールは、画面内で右クリックし、「検証」をクリックすることでも開けます。
しかし、せっかくなので上記のショートカットキーを覚えておくと良いですね。
デベロッパーツール上部の「Toggle device toolbar」をクリックします。
すると、スマホ（この場合iPhone6）での表示を見ることができます。
この機能を活用することで、いろいろなデバイスでの見た目を確認できます。開発者のためのツールですね。
たまに、デベロッパーツールで表示デバイスを変更した際に、表示の一部しか反映されないときがあります。わかりづらいですが、こちらでもスマホ表示で画面下に本来表示されるはずのメニューバーが表示されていません。
もし表示の一部しか反映されなかったときは、ページを更新すると直ります。
ちなみに、ここでは「iPhone6」の表示になっていますが、画面上部のデバイス名の部分をクリックすることで、好きなデバイスの表示に変更することができます。
ただし、ここではスマホデバイスを選択しておきましょう。
PCのGoogle Chromeでインスタグラムをスマホ表示できたので、手順2に移動しましょう。
Safariの場合
Safariでインスタグラムをスマホ表示していきましょう。
まずは、「インスタグラム」にログインし、自分のアカウントページを開きます。
Safariのメニューバーから「Safari > 環境設定」を開きます。（「command（⌘） + コンマ（,）」でも開けます。）
環境設定画面の「詳細」タブを開き、「メニューバーに”開発”メニューを表示」にチェックを入れます。
すると、メニューバーに「開発」メニューが出現します。
「開発 > ユーザエージェント > Safari-iOS10-iPhone」を選択します。
すると、スマホ（この場合iPhone）での表示に変更されます。画面の幅を変更しなければ横幅が広いiPhone表示ですね。
画面下に5つのボタンが表示されていれば大丈夫です。
PCのSafariでインスタグラムをスマホ表示できたので、手順2に移動しましょう。
Firefoxの場合
Firefoxでインスタグラムをスマホ表示にしていきましょう。
まずは、「インスタグラム」にログインし、自分のアカウントページを開きます。
Firefoxの場合、デバイスごとの表示切り替えはアドオンを使用しなければできませんので、「User Agent Overrider」というアドオンをインストールします。
すると、画面右上に「User Agent Overrider」のボタンが新たに出現しますので、それをクリックして、「iOS / Safari 10」をクリックします。
そしてページを更新すると、横幅はそのままですが、スマホ表示になりました。画面下にスマホで見たときに出てくるボタンが表示されていますね。
PCのFirefoxでインスタグラムをスマホ表示できたので、手順2に移動しましょう。
Operaの場合
Operaでインスタグラムをスマホ表示していきましょう。
まずは、「インスタグラム」にログインし、自分のアカウントページを開きます。
「command（⌘） + option（⌥） + I（アイ）」を押し、デベロッパーツール（検証モード）を開きます。
デベロッパーツールは、画面内で右クリックし、「要素を検証する」をクリックすることでも開けます。
しかし、せっかくなので上記のショートカットキーを覚えておくと良いですね。
デベロッパーツール上部の「Toggle device toolbar」をクリックします。
すると、スマホでの表示を見ることができます。
この機能を活用することで、いろいろなデバイスでの見た目を確認できます。開発者のためのツールですね。
たまに、デベロッパーツールで表示デバイスを変更した際に、表示の一部しか反映されないときがあります。わかりづらいですが、こちらでもスマホ表示で画面下に本来表示されるはずのメニューバーが表示されていません。
もし表示の一部しか反映されなかったときは、ページを更新すると直ります。
ちなみに、ここでは「Responsive」表示になっていますが、画面上部のデバイス名の部分をクリックすることで、好きなデバイスの表示に変更することができます。
ただし、ここではスマホデバイスを選択しておきましょう。
PCのOperaでインスタグラムをスマホ表示できたので、手順2に移動しましょう。
Windows PCでのブラウザ別のスマホ表示方法を解説します。
Google Chromeの場合
Google Chromeでインスタグラムをスマホ表示していきましょう。
まずは、「インスタグラム」にログインし、自分のアカウントページを開きます。
「Ctrl（コントロールキー） + Shift（シフトキー） + I（アイ）」を押し、デベロッパーツール（検証モード）を開きます。
デベロッパーツールは、画面内で右クリックし、「検証」をクリックすることでも開けます。
しかし、せっかくなので上記のショートカットキーを覚えておくと良いですね。
デベロッパーツール上部の「Toggle device toolbar」をクリックします。
すると、スマホでの表示を見ることができます。
この機能を活用することで、いろいろなデバイスでの見た目を確認できます。開発者のためのツールですね。
たまに、デベロッパーツールで表示デバイスを変更した際に、表示の一部しか反映されないときがあります。わかりづらいですが、こちらでもスマホ表示で画面下に本来表示されるはずのメニューバーが表示されていません。
もし表示の一部しか反映されなかったときは、ページを更新すると直ります。
ちなみに、ここでは「レスポンシブ」の表示になっていますが、画面上部のデバイス名の部分をクリックすることで、好きなデバイスの表示に変更することができます。
ただし、ここではスマホデバイスを選択しておきましょう。
PCのGoogle Chromeでインスタグラムをスマホ表示できたので、手順2に移動しましょう。
Firefoxの場合
Firefoxでインスタグラムをスマホ表示にしていきましょう。
まずは、「インスタグラム」にログインし、自分のアカウントページを開きます。
Firefoxの場合、デバイスごとの表示切り替えはアドオンを使用しなければできませんので、「User Agent Overrider」というアドオンをインストールします。
すると、画面右上に「User Agent Overrider」のボタンが新たに出現しますので、それをクリックして、「iOS / Safari 10」をクリックします。
そしてページを更新すると、横幅はそのままですが、スマホ表示になりました。画面下にスマホで見たときに出てくるボタンが表示されていますね。
PCのFirefoxでインスタグラムをスマホ表示できたので、手順2に移動しましょう。
Edgeの場合
Edgeでインスタグラムをスマホ表示していきましょう。
まずは、「インスタグラム」にログインし、自分のアカウントページを開きます。
Edgeの画面右上の設定ボタン（「・・・」ボタン）をクリックし、「F12 開発者ツール」をクリックします。
すると、開発者ツールが画面下に出現します。開発者ツールの中の「エミュレーション」をクリックします。
「デバイス」が「既定」になっているのを確認し、「ユーザーエージェント文字列」を見ていきます。
「ユーザーエージェント文字列」は「Apple Safari (iPad)」を選択します。
すると、スマホ（この場合iPad）の表示に変更されます。画面の幅を変更しなければ横幅が広いiPad表示ですね。
PCのEdgeでインスタグラムをスマホ表示できたので、手順2に移動しましょう。
Operaの場合
Operaでインスタグラムをスマホ表示していきましょう。
まずは、「インスタグラム」にログインし、自分のアカウントページを開きます。
「Ctrl（コントロールキー） + Shift（シフトキー） + C」を押し、デベロッパーツール（検証モード）を開きます。
デベロッパーツールは、画面内で右クリックし、「要素を検証」をクリックすることでも開けます。
しかし、せっかくなので上記のショートカットキーを覚えておくと良いですね。
デベロッパーツール上部の「Toggle device toolbar」をクリックします。
すると、スマホでの表示を見ることができます。
この機能を活用することで、いろいろなデバイスでの見た目を確認できます。開発者のためのツールですね。
たまに、デベロッパーツールで表示デバイスを変更した際に、表示の一部しか反映されないときがあります。わかりづらいですが、こちらでもスマホ表示で画面下に本来表示されるはずのメニューバーが表示されていません。
もし表示の一部しか反映されなかったときは、ページを更新すると直ります。
ちなみに、ここでは「Responsive」表示になっていますが、画面上部のデバイス名の部分をクリックすることで、好きなデバイスの表示に変更することができます。
ただし、ここではスマホデバイスを選択しておきましょう。
PCのOperaでインスタグラムをスマホ表示できたので、手順2に移動しましょう。
手順2. 手順1で表示させたスマホ表示にて、インスタグラムに投稿
にて、ブラウザの機能を活用してスマホ表示にしましたので、次はインスタグラムに投稿していきます。
* は、どのブラウザでもやり方はほとんど変わらないので、ここではGoogle Chromeを使用して解説します。
スマホ表示にすると出現する、画面下のバーの中央のカメラアイコンをクリックします。
すると、写真選択画面が出てくるので、インスタグラムに投稿したい写真（画像）を選択し、開きます。
「次へ」をクリックします。
投稿内容を編集します。もちろん、ここでもハッシュタグを使用できます。位置情報も追加できます。
投稿内容を編集したら、「シェアする」をクリックしましょう。
投稿が完了しました。
このようにして、PCからインスタグラムに投稿していきます。
最後に
今回は、PCからインスタグラムに投稿する方法を解説しました。
ブラウザごとにやり方は多少違えど、根本的には
- 1. PCのブラウザ機能を利用してスマホ表示にする
- 2. スマホアプリ版と同じように投稿する
という手順で投稿できることがお分かりかと思います。ぜひ、参考にしてみてください。
また、僕もインスタグラムをしていますので、フォローしてもらえると嬉しいです！
もし「ここをもう少し詳しく教えて！」「ここ間違ってますよ！」などありましたら、ページ下のコメント欄からお気軽にお送りください。
もちろん、感想などちょっとしたことでも、お送りいただけるととても嬉しいのでお待ちしてます！
初めまして、突然ですが有難う御座います。
自分はoperaですが、記事がとても分かりやすく
大変助かりました。
ラヴレスさん、はじめまして。
かなり嬉しいコメントありがとうございます＾＾
こんにちわ！
突然失礼いたしますm(__)m
Google ChromeでPCより投稿していたのですが、
ハッシュタグの検索が反映されずに困っていました…。
先程スマホから投稿してみたら、タグが反映しました。
どちらも同じようにハッシュタグを一部コピペしていたのですが、
スマホは検索に上がってきたので、
PCからだとこのようなことがあるのでしょうか？
できればPCからが便利で使いやすかったのですが(;_:)
※文章が分かりずらく申し訳ないです(;_:)