Adobe Edge Inspectを使うとPC閲覧中のサイトをスマホでも同時に見れる!

Home  Jimdo Blog > デザインツール > Adobe Edge Inspectを使うとPC閲覧中のサイトをスマホでも同時に見れる!

 

 

Adobe Edge Inspect

この度、Adobe Edge Inspect を使い始めました

 

またしてもAdobe Creative Cloudのお話なのですが、

本日、我が家のAdobeファミリーに新しい家族が増えました!

 

その名もエッジ・インスペクターさん・・・・ってデーブ・スペクターさんみたいになってますが(笑)

 

すみません。正しくはAdobe Edge Inspect(アドビ・エッジ・インスペクト)です。

 

これは何をするものか?ということを申しますと、

要するにパソコンで見ている画面を、同時にスマホでも見ることが出来るというものです。

 

 

そんなことをして何が楽しいの? それは単なるプレイなの?

 

いえいえ、これはスマホデザインをしている人には非常に強力なツールです!

 

例えばこんな感じです。

 

PC画面

 

当社のホームページをパソコンで開くと上のような画面のこんな感じで見えますが、

これをGoogle Chromeで見た場合、スマホでもAdobe Edge Inspectを起動させておくと、

同時にこのPCで見ているサイトがスマホにも表示されます。

 

そして、当社の場合は、スマホはモバイル表示なので、スマホでは下の画面ように見えます。

 

これがAdobe Edge Inspectの仕事。「同期ブラウジング」と呼ばれる機能です。

 

 

PCで今見ているWEBサイトを同時にサクサクとスマホでも見せてくれるのが、

このAdobe Edge Inspectというものなのです。

 

最初にPCとスマホの双方でAdobe Edge Inspectを立ち上げて同期設定さえしてしまえば、

それ以降はスマホのAdobe Edge Inspectを立ち上げるだけ。

あとはGoogle ChromeでWEBサイトを見るだけで勝手にスマホの画面も同じWEBサイトに切り替わります。

 

スマホに触りすらしません!PCと並べて置いておくだけでOKです。

(※12/17追記:スクロールはスマホに触りますよ。PC画面でスクロールしてもスマホはついてきません)

 

いや、これは便利だわ~!

 

もちろん、レスポンシブWEBデザインで作られたサイトは、そのように見えますよ。

 

スマホサイトの制作者はこれで大助かりになることは間違いない!

今までPCでデザインをコーディングして、その確認にスマホでアドレスを叩いてブラウザで見て・・・

そんな手間がこれで一気に吹き飛びます。

 

これで、PCで確認するとほぼ同時に(←ここ大事)スマホ表示のデザインチェックもできるわけです。

 

 

Adobe Edge Inspectの使用条件

 

・接続したいスマホとPCの両方にAdobe Edge Inspectがインストールされている必要があります。

・ブラウザGoogle Chromeを使用します。

・同期には同じネットワークを利用します。なので3Gでは接続できません。

 

などなど、ございます。

 

PCブラウザ(Google Chrome)側の操作で、スマホのスクリーンショットも撮れる!

スマホのスクリーンショットを撮る

 

Google Chromeのアドレスバー横のAdobe Edge Inspectアイコンをクリックすると

上のようなパネルが飛び出しますので、あとは①のカメラ・アイコンをクリックで撮影して、

②の画像フォルダ・アイコンをクリックで撮影した画像を格納したフォルダを開くだけ。

もうそこにスクリーンショット画像が画像形式データで用意されているというシンプルさです。

 

しかも、スマホを横持ちで画面を自動回転にして画面が横長になった状態でスクリーンショットを撮影すると、

ちゃんとスクリーンショット画像も横になって撮れている!

 

なかなか賢い。

 

(スマホを横にして画面を自動回転させ横長にし撮影してみた)
(スマホを横にして画面を自動回転させ横長にし撮影してみた)

 

便利なものいっぱいありますね、今の時代。

 

私の制作にも今後、大活躍しそうです。

 

 

Adobe Edge Inspect についての詳しい情報

 

Adobe Creative Station / 使い方・活用法

Adobe Edge Inspect CC モバイルデバイスでのWebデザインのプレビューと検証

 

 

※Edge Inspectとその他のEdgeツール&サービスは、Creative Cloud無償メンバーシップでも利用可能なツールです。

  Creative Cloudについて

 

ちょこっとメモ

最初、Adobe Edge InspectをPC・スマホともインストールし環境を整えましたが、初めは互いの自動検出ができず、なかなか同期をしてくれませんでした。そんなこともあるようです。一度、Google Chromeブラウザを立ち上げ直してからアドレスバー横のAdobe Edge Inspectアイコンをクリックし、IPアドレスを確認。さらにスマホ側からそのIPアドレスを入力し検索することで一発でつなげることができました。その後はPC再起動でも同期は切れず、快適に動作しています。

  

(※12/17追記:やはり自動検出がされず、いつまでもクルクルが止まりません。Bonjourというもので自動検出をしているらしいのですが、このあたり何かしらエラーがあるようです。現在はIPアドレス入力で対応中です)

 

 


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