Anatomy

ANATOMY BLOG

マクロ視点のアクセス解析と品質管理ツール「ANATOMY(アナトミー)」のブログです

2016年12月28日水曜日

【全景ビューをフル活用!】ユーザーの動線を分析してみよう

アクセス解析において、ユーザーがサイト内でどんな経路をたどっているのか、という分析は重要ですよね。
動線を分析することにより、ユーザーが求めている情報の配置がしやすくなります。

前回に引き続き、全景ビューを用いた分析方法をご紹介します。


2016年12月27日火曜日

【PV数から考える】全景ビューを活用してアクセス情報を見てみよう

自社サイトのアクセス解析を行う際、PV数以外の数値も確認していますか?
複数のデータを利用してアクセス解析を行えば、色々な視点から改善策を生み出しやすくなります。

今回は、アナトミーの特長である全景ビューを用いた分析方法についてご紹介します。


2016年12月21日水曜日

アナトミーの機能追加と改善を行いました

本日、アナトミーの機能追加と改善を行いました。
ユーザー様のご意見を得て、便利な機能もいくつか追加されました!


主な追加機能・変更点をご紹介します。


  • グループ全体のキャプチャが一覧で見られるようになりました
  • 広告からのランディングを計測できるようになりました
  • よく使うビューをデフォルト設定できます
  • その他


【Googleアナリティクス】タグ導入後にアクセス数が集計されない!チェックすべき厳選4項目まとめ

Googleアナリティクスを導入したのに、なぜかページビューがずっと0のままで計測されないことがあります。
Googleタグマネージャを利用していると複雑になりがちで、原因究明に時間がかかることも。
このような場合、まずはクライアント側・タグマネージャ側・Googleアナリティクス側をチェックし、問題の切り分けから始めることをお勧めします。



2016年10月25日火曜日

2016年10月7日金曜日

【D3.js講座】D3.jsで折れ線グラフを描画する(前編)

今回は、D3.jsを使った折れ線グラフの描画をご紹介します。
前回は簡単なsvg描画を紹介しましたが、今回はデータビジュアライゼーションを目的としているD3.js本来の利便性を感じられるかと思います。

さっそく実装を紹介します。

2016年9月30日金曜日

ダッシュボード機能などが新しく追加されました。

本日アナトミーのバージョンアップを行いました。
そこで新たに追加された機能をご紹介します。 
大きく分けて以下の6つの機能が増えました。
  • ダッシュボード機能
  • グループ表示順 入れ替え機能
  • グループ表示/非表示 切り替え機能
  • グループ別集計機能
  • ページソート機能
  • ページカーソル移動機能

2016年9月26日月曜日

【課題の発見】改善効果の高いページや導線を見つける

改善のインパクトが大きいページはページビュー数(PV数)・流入数の多いページや導線です。

流量の大きいページからのリンク先とその遷移数を追いながら、ユーザーがより多く移動してくるページ・導線を見つけます。 重要なことは、流量の大きいページがどのページにリンクしているかという静的な導線だけでなく、実際にどれだけのユーザーが移動しているかという導線の実績に着目して、その流れを掴むことです。

アナトミーを使うと全景ビュー上で簡単に流れを掴むことができます。

2016年9月21日水曜日

【D3.js講座】D3.jsを使用した図形の描画

AnatomyではD3.jsを使用しsvgタグでタイルを描画しています。
データごとに属性の値を変更する処理は複雑ですが、D3.jsを使用すると
比較的簡単に描画できます。

2016年9月15日木曜日

【Googleアナリティクス】複数ドメインで正確な参照元を取得するには?

Googleアナリティクスで1つのドメインの分析を行うのはそれほど難しくありません。しかし、複数ドメインの統合的な分析を行おうとすると何かと設定が必要となり、途端に難易度がアップします。

複数ドメインの該当する例を言えば、プロモーションサイトがECサイトと別ドメインになっているとか、製品サイトとブログが別ドメインになっているとか、歴史的経緯で複数ドメインで構成されているとかいろいろあると思います。

今回は、複数ドメインで統合的な分析を行う手法をお知らせします。

2016年9月14日水曜日

2016年9月12日月曜日

新機能を追加しました

アナトミーに「ページ並べ替え」機能が追加されました。 
従来のバージョンでは、ページ(クローンアイコン)はURLを基準とした並べ替えを行っていましたが、今回のバージョンアップによりページの順序を自由に変更できるようになりました。

2016年9月9日金曜日

【リンク解析】ランディング後の経路を確認し、サイトの特性を把握する

アナトミーを使うと、ユーザーの動線となっているリンクを視覚的に把握することができます。

自社ページにあるリンクのうち、どのリンクがユーザーの動線になっているか把握することは重要です。例えば製品ページのリンクで、ユーザーはどのリンクをクリックして自社ページを周回しているのかを把握し、ユーザーが閲覧しやすいページへの改善策を考えましょう。

2016年9月2日金曜日

【Googleアナリティクス】フィルタの条件式でORを使用するための正規表現


Googleアナリティクスで表示されたレポートを絞り込むときは、フィルタを使います。しかし、フィルタ入力欄には「AND」の表記しかなく、「OR」の表記がありません。

レポートのフィルタにはAND条件を指定するのが基本となっています。それではOR条件は指定できないのでしょうか?

2016年8月31日水曜日

【D3.js講座】 D3.jsとは?

Anatomyでは、webサイトの情報を俯瞰するというコンセプトで開発しており、
多量のデータをブラウザの1画面に収める必要がありました。
そこで登場したのが D3.js です。
D3.jsはデータの可視化のためのJavaScriptライブラリです。(公式サイト:https://d3js.org/
Anatomyの全景ビューのタイル、ツリー、折れ線グラフなどをこの D3.jsを使って表現しています。


このD3.jsを例を挙げつつ紹介します。

2016年8月29日月曜日

WebサイトのPDCAを支援する「アナトミー」が正式リリースしました

本日「アナトミー」が正式リリースしました。同時に、無料トライアルの受付も開始しました。

アナトミーは、WebサイトのPDCA活動を支援するためのツールで、Webマーケティング担当者はもちろん、システム担当者からマネージャクラスまで幅広い関係者が情報を整理し、共有するツールとして活用できます。

【シミュレーション機能】改善施策がサイト全体に与える影響を推察する

シミュレーション機能は、各ページの流入数が変動した場合に、ページビュー数がどのように変動するのかを予想します。

流入数の増加がどのページのPVに影響するかを予想する

自社サイトのランディングページに仮の流入数を設定すると、流入したユーザーが自社サイトを周回して増やすページビュー数を予測計算します。この予測計算により、例えばリスティング広告やSNSでWebサイトへ集客する際に、どのランディングページへ誘導すれば効果的かが判断できます。

2016年8月26日金曜日

【リンク解析】リンク・被リンクの構造を把握し、流れを掴む

あるページのリンク・被リンクページを簡単に把握することができます。

リンクページを確認する

クローンアイコンをクリックすると青色の枠で囲まれ、周りにオレンジ色の枠で囲まれたクローンアイコンがハイライトされます。これらが、クリックしたページのリンクページを示しています。クリックしたページからどのリンクページへアクセス数が移動したかは、リンクページに表示されている数値で把握できます。  

【キャプチャー表示】現在・過去のページデザインを瞬時に確認する

アナトミーでは、GoogleAnalyticsのデータを確認しながらページデザインを瞬時に確認することができます。

現在のページデザインを瞬時に確認する

クローンアイコンにカーソルを合わせると、右側の画像が切り替わります。この右側の画像が、カーソルを合わせたページのデザインを示しています。数百ページのデザインを簡単にチェックでき、デザインの乱れにもすぐに気づくことができます。

【品質表示】リンク切れ、レスポンスが遅いページを検知する

クローンアイコンに表示される情報はアクセスデータだけではありません。クローンアイコン上に表示されているマークやその色で、ページにどのようなエラーが発生しているか確認することができます。

リンク切れなどのエラーを確認する

クリップに×印がついたようなマークが出ているページには、リンク切れ・IMGやCSSなどのリソース切れがあります。これらのエラーの数が多いほど×印が赤・橙・黄の順で表示されます。

【アクセス解析】全景ビューでサイト全体のアクセス状況を把握する

アナトミーを使うと200以上のページ全体のアクセス状況を簡単に把握することができます。

クローンアイコンの背景色の濃さでアクセス数の状況が分かる

全景ビューを見ると緑色の濃淡が所々で異なっていますが、この濃淡を見ることでどのページへのアクセス数が多いのか一目で確認できます。濃い緑色の箇所にはどのような種類のページが集まっているのかを見ることで、自社サイトの集客力が高いページを把握できます。逆に薄い緑色のページはアクセス数が少ないということです。

アナトミーと連携するGoogleアナリティクスのビューを作成する手順

分析対象のWebサイトで、アナトミーが推奨するGoogleアナリティクスのビューが存在しない場合は、Googleアナリティクスにアナトミー専用のビューを作成する必要があります。作成するビューの概要は以下の通りです。

アナトミーと連携するGoogleアナリティクスのビューの推奨設定

アナトミーはGoogleアナリティクスと連携し、指定されたビューからページビューやユーザー数といった情報を取得します。
アナトミーが推奨するビューの設定は以下の通りです。
  1.  URLにホスト名を連結するアドバンスフィルタを設定する
    参考:https://support.google.com/analytics/answer/1012243?hl=ja
  2.  URLを大幅に書き換えるフィルタ(URL末尾にタイトルを追加するフィルタ等)を設定しない
アナトミーで表示するデータをより正確にするために、上記の条件を満たすビューを選択することをお勧めします。

注意:
  • 推奨設定を満たしていない場合でも、アナトミーを開始していただけます。GoogleAnalyticsの設定に詳しくない、この記事の内容がよくわからない場合は普段ご利用しているビューを選択してください。
  • 連携するビューは利用開始後にいつでも設定変更、切替をすることができます。

【Googleアナリティクス】新規追加したビューには過去のデータは含まれない

Googleアナリティクスを使っていると、既存のビューと異なるフィルタ設定で新しくビューを作成したいときがあります。この時、新しく作成したビューには過去のデータが一切含まれないなど、いくつかの注意点があります。

2016年7月6日水曜日

Webサイトを完全保存。イントラ内にあるポータルサイトの移行事例

イントラで使用している社内向けポータルWEBサイトを、データを残しつつ新システムに移行するという案件があり、そこでは色々な制約から新システムには旧システムのデータをimport/exportできないという課題が発生していました。

2016年6月15日水曜日

アナトミーはWebサイトを再発見、より良く理解できるツール

アナトミーを利用すると、よく知っているWebサイトが更によく見えるようになります。アナトミーは、自社サイトの再発見をするツールと言うことができます。

ある特定サービスのWebサイトであっても、次のように様々な要素によって構成されています。

  • サービスや商品そのもののページ
  • サービスのプロモーションや企画などの付随ページ
  • ショップなどの購入ページ
  • Adwordsやバナー広告や記事広告
  • ブログなど自社メディアページ
  • facebookやTwitterなどのSNS
  • Google検索
  • 企業情報や法的に必要なページ



訪問者は、これらWebページをあらゆる方向から横断的にアクセスしますが、その姿を想像することは困難です。アナトミーであれば、どのページが繋がっているのか、どこにリンクがあるかをキャプチャー画面を見ながら次々に辿ることができるので、様々な実ルートを疑似体験することができます。

更に、以下のようなアナリティクスのアクセスデータによって、そのルートをどれくらいのユーザーが通過したのか情報を与えてくれます。

・そのページのアクセス数
・アクセス数のうち、内部被リンクからの実アクセス数
・そのページから、内部リンクを踏んで出ていったアクセス数

単に存在するリンクを辿るのではなく、実アクセスと紐づいた追跡によって、リンクの有用性を知り、ページデザインの改善を考察できるようになります。

Webページを数多く辿ることで、サイトのページ数の多寡やデザインの統一感、似たようなページがどれだけあるのか、PVやUUがどのように分布しているのか、ページ間リンクの強弱や、ページごとの容量など、個別には掴んでいても全体感としては曖昧なことを知ることができるようになります。

このようにアナトミーは、サイトを俯瞰しサイトについて深い理解を助けるサービスなのです。次回は、サイトの変化を把握する方法を伝えます。

2016年6月7日火曜日

Webサイトを俯瞰する【サイトクローン アナトミー】モニター利用スタート!

5月の展示会で発表して大きな反響を頂いたサイトクローンアナトミー(以下、アナトミー)ですが、この度一部ユーザにおいてモニター利用が始まりました。モニター利用は順次拡大し、本サービスに展開していく予定です。使ってみたい!という企業様は弊社までご連絡下さい。

とはいえ、まだ無名なアナトミーなので、少しづつ紹介していこうと思います。では、アナトミーとは何か?

2016年5月26日木曜日

WEBサイトを丸ごとアーカイブできるサービスSiteClone Archiveの紹介

今月リリースされたサービス「SiteClone Archive」は動的・静的関係なくWEBサイトを保存して、いつでも・いつまでも見れるようになるサービスです。

以前の記事にもありましたが、これまでのサイトクローンの技術をそのまま利用しており、動的なWEBサイトを静的に保存する事やJavaScriptの完全再現、Ajax等も動作します。

SiteCloneの新バージョン1.1.3をリリースいたしました。


Webサイト検証ツール「SiteClone」の新バージョン1.1.3を本日リリースいたしました。
今回のバージョンでは以下の修正が行われています。

・オートパイロット機能でタイマー予約が起動しない不具合を修正

現在ご使用いただいている企業様はマイページよりダウンロードの程宜しくお願いいたします。
まだ使用していないがWebサイトのテスト・監視を効率よく行うツールをお探しの方は、
以下URLよりSiteCloneのページをご覧ください。

2016年5月6日金曜日

Web&デジタルマーケティングEXPO 春で新サービス「SITECLONE ANATOMY」を初披露します

ゴールデンウィーク明けの5/11(水)~5/13(金)に開催される「Web&デジタルマーケティングEXPO 春」で、クローン技術を使った新サービス「SITECLONE ANATOMY(サイトクローン アナトミー)」を初披露します。

サイトクローン アナトミーはWebサイトのPDCAを支援するツール


Webサイトに絶えず加えられるデザイン、システム、リンク/被リンクの変更、アクセス状況の推移。次のPCDAを仕掛けるにはこれらを網羅的に把握し分析する作業が必要…とはいっても、ページ1つ1つに対する日々の情報はバラバラで、これらをまとまった情報で見るための作業はPDCAのスピードに大きな支障となります。

サイトクローン アナトミーはWebページの分析情報とGoogleAnalyticsの集計情報を統合し、サイト全体に対する俯瞰的な視野を提供することでPDCAを強力にサポートします。

SITECLONE ANATOMYの分析画面

2016年4月22日金曜日

ページ移動時に警告ダイアログが表示されるサイトを自動テストするには?


オートパイロット中に以下の様なアラートが表示されてしまいオートパイロットが止まってしまうことはありませんか?



このアラートはbeforeunloadイベントが発生することによって表示されるアラートです。
こんなときFirefoxの設定でbeforeunloadイベントを発生させなくすることができます。

2016年4月19日火曜日

SiteCloneの新バージョン1.1.2をリリースいたしました。

Webサイト検証ツール「SiteClone」の新バージョン1.1.2を本日リリースいたしました。
今回のバージョンでは以下の修正が行われています。

・リソース編集でHTML編集については目印を出すように変更
・クローンの保存設定が正しく動作していない不具合を修正
・オートパイロットの予約機能がスタンダード版ライセンスで使用できない不具合を修正
・リソース一覧表示時に警告が出ていた不具合を修正

現在ご使用いただいている企業様はマイページよりダウンロードの程宜しくお願いいたします。
まだ使用していないがWebサイトのテスト・監視を効率よく行うツールをお探しの方は、
以下URLよりSiteCloneのページをご覧ください。

2016年4月1日金曜日

新サービス「SiteClone WebArchive」が登場しました


Webサイト検証ツール「SiteClone(サイトクローン)」の技術を応用した新サービスが登場しました。
その名も「SiteClone WebArchive」です。


SiteClone WebArchiveは、WebシステムなどのあらゆるWebコンテンツを完全保存し、
動くコンテンツとしていつでも見ることができるサービスです。

「新しいWebシステム構築をしたいけど、過去のシステムを動くコンテンツとして残しておきたい」
「過去のシステムをスナップショットのようにいつでも確認できるようにしたい」
こんなときはありませんか?

2016年3月31日木曜日

Ajaxで取得するJSONデータをローカル環境で編集・テストする方法

クライアントJSでAjaxをするようなプログラムを開発する時は通常は通信先のサーバーを用意します。
既にサーバー環境があればいいのですが、無い場合は用意しなければいけません。

また、サーバーがあっても作成・編集したデータをそこにアップロードしたりする手間もあります。
ちょと面倒ですよね。


2016年3月9日水曜日

歴代の自社サイトをアーカイブとして保存する

過去の自社サイトを取っておきたいことはありませんか?


会社の歴史として残したい、
リニューアル前の過去のWEBサイトを解析したい、
過去の情報を文言単位で参照したい、
これまでのキャンペーンサイトを確認したい、
デザインテンプレートとして使いたい、
なんてこともあると思います。


日々更新されるWebサイトをその当時のまま保存することはなかなかできませんよね。
そんな時クローンを作ってアップロード機能を使えばクラウド環境に簡単にアーカイブとして保存しておくことが出来ます。

2016年2月29日月曜日

Webサイト修正後の全ページチェックを素早く終える回帰テスト方法とは

シンメトリックでは頻繁にWebサイトを更新しますが、こちらの活用事例のように、サイトクローンを使いスピードを上げながらコンテンツの品質改善を実践しています。
活用事例では品質チェックの専任担当を置いて実施していると紹介しましたが、サイト更新担当も自身の修正内容のチェックにサイトクローンを利用します。

例えば、ページヘッダー・フッターのような共通部品を変更すると、作業はほんの少しでも、テスト対象範囲がサイト全体に及びますよね。そんなときにオートパイロット機能とコンテンツ比較機能が、時間をかけずにテストを終わらせる手段として非常に有効です。

2016年2月24日水曜日

イントラ上の社内システムを静的に保存して外出先から閲覧する

サイトクローンが様々なWEBサイトをクローンしてローカルのPC上で再現する事は他の記事でも書きました。
クローンは公開されているサイトはもちろん、非公開なイントラネット用のWEBシステムでもサイトクローンはローカルのPC上にクローンを構築し、いつでも好きな時に見る事ができます。いつでもというのはPCがオフラインの時でもです。


2016年2月1日月曜日

検証だけじゃない!サイトクローンを営業ツールとして使う!



今回は、弊社営業部で実際に使われているサイトクローン使用方法をご紹介します。


客先で会議中にWebサイトを見せながら説明することがよくありますが、Webサイトが重たくて中々表示されず、気まずい思いをしたことはありませんか、、、、?


重たいだけではなく、紹介したいページがフォーム入力後などの深い階層にあって遷移に時間がかかってしまうなんてこともよくあると思います。


どんなに良い企画や提案でもスムーズにプレゼンを進めることが出来ないとマイナスなイメージを与えかねません。


そんな時サイトクローンを使って事前にローカル環境にWebサイトを保存(クローン)しておくだけで
どんなに重たいWebサイトでも、ネットワーク環境の悪い場所でもサクサクとWebサイトを動かし見せることができます!

2016年1月26日火曜日

自動テストの妨げになるCookieを簡単にリセットする方法

サイトクローンで回帰テストを行うには「オートパイロット」機能を使いますが、その実行メニュー画面には「実行前に全てのCookieを削除する」というチェックボックスがあります。

さてどんなときに使ったらいいでしょうか?今回はこのチェックボックスの使いどころをご紹介します。


2016年1月22日金曜日

動的コンテンツを静的保存し、UIテストで使用する方法

WEBアプリケーションを色々なスマートデバイスでUIテストをする事はなかなか大変な事です。

例えば、フォームアプリケーションのテストをしようとします。
通常はアプリケーションロジックが動作するので、フォームアプリケーションの途中の画面には直接アクセスできません。

完了画面が見たいのであれば、テストするデバイスごとにフォームに正しい値を入力をして完了画面まで遷移する必要があります。

パターンが途中で分岐している場合は、1つのデバイスで何度も最初からやり直す必要がある場合もあります。


2016年1月15日金曜日

本番サイトと同じWebページを思う存分デバッグできる方法とは

サイトクローンはWebサイトのテストや運用監視を自動化するツールで、アクセスしたWebページのコピーを丸ごと保存するクローン技術の応用でできています。作られたクローンはJavaScriptやCSSが完全に動作し、そこがブラウザ純正の機能で行ったローカル保存とは大きく違います。

このクローンはその特長ゆえにテスト・監視自動化の他に開発・デバッグにも役立てることができます。今回はその使い方の1つ、「リソース編集」機能を紹介したいと思います。