21
Ptengine 1. PAGE SCENE ででででででででででででででででででで でででででででででででででででででで 2. ででででででででででででででででででででででででででででででで 「」 ででででででで v.1.1 株株株株 Ptmind

Ptengine「PAGE SCENE」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処 / 「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法

Embed Size (px)

Citation preview

Ptengine

1. 「 PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場

合の対処方法

2. 「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法

 v.1.1

株式会社 Ptmind

目次1. 「 PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方

法  P3

2. 「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法  P14

2

1. 「 PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法

3

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法

• 「 PAGE SCENE 」の「デバイス・センター」で「 Smartphone 」を指定した際に、スマートフォン向けページのヒートマップが正しく表示されない場合の対処方法の対策をご説明します。

4

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (1)   Chrome の場合

• Chrome の場合1. Chrome の UA (ユーザーエージェント= Web サーバーが、ユーザーがどんな端末でアクセ

スしてきているかを知るための情報)偽装(禁止されている行為ではありません)プラグインを利用します。まず、 Chrome のウェブストアページにアクセスします →  https://

chrome.google.com/webstore/category/extensions?hl=ja

2. 「 User-Agent Switcher for Chrome 」を検索します。「 + CHROME に追加」ボタンをクリックし、 Chrome ブラウザにこのプラグインを追加します。

5

プラグインが追加されると、左のようなアイコンが表示されます。

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (1)   Chrome の場合

• Chrome の場合3. 「 User-Agent Switcher for Chrome 」のアイコンをクリックし、「 iOS 」→「 iPhone6 」の順

にクリックします。これで、スマートフォン向けページのヒートマップが表示されるはずです。

6

このアドオンを使用すると、他のページもスマートフォン対応画面が表示されますので、終わったら、「 Chrome」→「 default 」に戻しておいてください。

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (2)   Firefox の場合

• Firefox の場合1. 右上のメニューアイコンをクリックし、「アドオン」をクリックして、アドオン入手ページ

を開き、「 configuration mania 」を検索します。

7

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (2)   Firefox の場合

• Firefox の場合2. 「インストール」をクリックして、インストールしてください。

3. FireFox のメニューバーを表示している場合は、「ツール」から「 configuration mania 」を選択してください。メニューバーを表示していない場合は、 P11 へ。

8

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (2)   Firefox の場合

• Firefox の場合4. 「ブラウザ」→「 User-Agent 」の「プリセット」をクリックし、 Safari の iPhone を選択して

ください。

9

このアドオンを使用すると、他のページもスマートフォン対応画面が表示されますので、終わったら、「プリセット」の隣の「標準に戻す」で、元に戻しておいてください。

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (2)   Firefox の場合

• Firefox の場合5. 「 PAGE SCENE 」の右上にあるリロードボタンをクリックすると、スマートフォン向けペー

ジのヒートマップが表示されるはずです。

10

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (2)   Firefox の場合

• Firefox の場合6. Firefox のメニューバーを表示していない場合は、右上、一番右のアイコンをクリックし、ア

ドオンをクリックしてください。 「 configuration mania 」の設定をクリック。ウィンドウが開きます。

11

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (2)   Firefox の場合

• Firefox の場合6. 「 User-Agent 」の「プリセット」をクリックし、 Safari の iPhone を選択してください。

12

このアドオンを使用すると、他のページもスマートフォン対応画面が表示されますので、終わったら、「プリセット」の隣の「標準に戻す」で、元に戻しておいてください。

「PAGE SCENE 」でスマートフォン向けページのヒートマップが正しく表示されない場合の対処方法 (2)   Firefox の場合

• Firefox の場合5. 「 PAGE SCENE 」の右上にあるリロードボタンをクリックすると、スマートフォン向けペー

ジのヒートマップが表示されるはずです。

13

2. 「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法

14

「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法 (ブラウザは Chrome をご利用ください)

• ブラウザは Chrome をご利用ください。• 「クリック」または「アテンション」ヒートマップの右上にある「ウェブビュー」のボタンをク

リックしてください。

15

「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法 (ブラウザは Chrome をご利用ください)

• ポップアップウィンドウが出た場合は、「確定」をクリックしてください。(ウィンドウが出ない場合もあります。)

16

「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法 (ブラウザは Chrome をご利用ください)

• 下記のような画面が開くので、矢印の部分をマウスで掴んで広げてから、「 Emulation 」をクリックしてください。

17

Emulation

広げる

「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法 (ブラウザは Chrome をご利用ください)

• 下記のような画面が表示されている場合は、右下の線で囲んだアイコンをクリックすると、前ページと同じレイアウトにすることができます。

18

「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法 (ブラウザは Chrome をご利用ください)

• 「 Emulation 」内の< Select model >をクリックして、スマートフォンのモデルを選んでください。

19

< Select model >

「ウェブビュー」でスマートフォン向けページのヒートマップを正しく表示させる方法 (ブラウザは Chrome をご利用ください)

• ブラウザのリロードボタンをクリックすると、スマートフォン向けページのヒートマップが表示されるはずです。

20