質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2174閲覧

WEBサイトの見られている部分をヒートマップで色分けする

keisuu

総合スコア40

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2019/09/02 10:37

コーポレートWEBサイトの保守を行っていますが、
WEBサイトにユーザーの見ている部分をヒートマップで色付けして表示したいという案件がでました。
外部サービスを探してみると無料有料問わずのヒートマップサービスがありますが、
今回は自分で実装しないといけません・・・(泣)

色付けに関してはheatmap.jsを使う予定ですが
悩んでいるのは**「どこを色付けするか」**です。

ユーザーのタッチした部分に関してはJSで取得できそうですが、
ユーザーの見ている部分を取得する・・・?
はて・・・?

レスポンシブなのでSP対応も必要なのですが、
滞在時間が長い画面の上半分をユーザーはよく見ている
という判断をしてもいいのでしょうか・・・?

UI、UXに詳しい方がいらっしゃいましたら、
どうか助言をよろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

heatmap.jsを使ったことはないので、 実際に使う上での助言はできませんが、 ユーザーがよく見ている部分は大雑把には特定できます。

ページを開いた時に時間の計測を開始し、 あらかじめスクロール位置を複数決めておいて、 各スクロール位置に到達したらページを開いてから何秒経ったのかを記録します。

最近は、 時間の記録まではしていないと思いますが、 今読んでいる位置がページの何%かや画面上部に色の付いたバーを表示するなどしているサイトもありますね。

そういった感じでどこをどれくらい読んでいるかという大雑把なことは分かりそうですが、 細かくデータを収集したいなら、 かなり面倒だと思います。

相当、 サービス/サイトに力を入れていて、 多くの人が利用しており、 データを集める事自体は早くできるというなら、 そういった収集も大切だと思います。しかし、 基本的なABテストで済むことも多いとは思います。

こういうことを書くことは良くないですが、 現時点でそこまで大規模でない場合は、 サービスの内容や全体のデザインなど根本的な刷新が効果的なケースも多いです。++iといった細かいところをひたすら気をつけて高速化するより、 アルゴリズム変えた方が良いよ、 という話ですね。

ふと最近読んだねとらぼを思い出しました。

「しわ寄せはいつも技術者に来る」「笑えるどころか胃が痛くなってきた」 エンジニアの苦悩を描いた動画に世界中が共感

投稿2019/09/02 12:54

Newbi

総合スコア163

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

keisuu

2019/09/02 22:31

ご回答ありがとうございます。 ABテストはすでにやっているので それにプラスαという具合です。 >最近は、 時間の記録まではしていないと思いますが、 今読んでいる位置がページの何%かや画面上部に色の付いたバーを表示するなどしているサイトもありますね。 ↑ こちらはどちらかとユーザーがどこで離脱したかが計測できそうですね。 今回はユーザーが見ている時間が長いところを調べるという要件ですので、 少しニュアンスが違うと感じました。 SPからのアクセスの時には、ユーザーがスクロールするためにタップした位置等も 保存してみようかと思うのですが、 それは実際に見ている場所ではないような気もして悩んでおります。
Newbi

2019/09/03 02:31

やっぱりスクロール位置と時間の計測くらいしかパッと浮かばないですね.... ↓こんな感じのを想定してます。 https://mieru-ca.com/heatmap/what-is-heatmap/ タップした位置も参考にはなると思いますが、仰るように長時間見ている場所とは違うと思います... んー的確に位置を、というのは浮かばないですが、カーソルの動きなんかも使えるようですね https://keywordfinder.jp/blog/seo/heatmap/
keisuu

2019/09/03 05:26

追記の参考URLありがとうございます。 ヒートマップの定義が2種類あるようですね! 今回考えてるのは「熟読エリア」の方になります。 でもスマホでやろうとすると、ブラウザがバックグラウンドになった時にはずっとそこに滞在してることになりますし、なかなか難しそうな気配です。 とりあえず無料サービスのものを登録して参考にできるかトレースしてみようと思います・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問