コンビニから学ぶアクセス解析の基本用語13個


【9分で読めるよ】

突然ですが皆さんコンビニは好きですか?
私は大好きです。ほぼ毎日行っています。
好きすぎてコンビニでバイトまでしてました。

コンビニは24時間年中無休なのですごい助かりますよね。
あれ?そういえばホームページも年中無休で24時間営業です。


これは、なにか近いものがありますね。
そこで、ちょっと分かりにくアクセス解析の用語の意味を
初心者でも分かるようにコンビニで考えてみました。

Webサイトを制作してアクセス解析を導入したけど
「よくわかないカタカナや英語がいっぱいでてきて全然楽しくない」
と思っていた方に少しでも意味がわかってもらえたら嬉しいです。


アクセス解析ででてくる基本用語13個

  1. ユニークユーザ
  2. セッション数
  3. ページビュー
  4. リファラー(参照元)
  5. 滞在時間
  6. 直帰率
  7. 離脱率
  8. 検索キーワード
  9. コンバージョン
  10. セグメント
  11. パーソナライズ
  12. 動線/導線
  13. EFO



ユニークユーザ (UU)

IT用語辞典 e-Wordsから引用
ユニークユーザ 【unique users】(UU)とは
WWWにおけるアクセス数の単位の一つで、あるWebサイトを特定に期間のうちに訪れた人のユニークな数。

■コンビニで言うと
特定の期間に何人(同じ人は数えません)来たかってことですね。

会社や学校に行くときにコンビニがあると毎日来るお客さんもいますから
その方は1人として数えます。
でも、変装とかしてきたら分かりませんのでその人はカウントされますね。
アクセス解析も違うパソコンからアクセスされたらカウントされますから
正確ではないです。



セッション数(訪問回数)

セッション数(訪問回数)

IT用語辞典 e-Wordsから引用
セッション数とは
特に、Webの分野ではアクセス数の単位の一つで、Webサイトを訪れたユーザがサイト内で行う一連の行動をまとめて1セッションという。「ビジット」(visit)もほぼ同義。同一のユーザでも、ある程度間隔が開いた場合は、新しいセッションとしてカウントする。どのくらい開いたら新しい訪問とみなすかについてはいろいろな基準があるが、概ね30分程度とする場合が多い。

■コンビニで言うと
店に来た人の数ですね。
朝に来て、昼に来て、夜に来たら3回ですね。
店を出て30分以内でまた来た人は数えません。
グーグルアナリティクスは30分以上何もしないとカウントするようです。



ページビュー(PV)

ページビュー(PV)

IT用語辞典 e-Wordsから引用
ページビュー 【page view】(PV)とは
WWWにおけるアクセス数の単位の一つ。Webサイトの訪問者のブラウザにHTML文書(Webページ)が1ページ表示されるのが1ページビューである。

■コンビニで言うと
1人のお客さんが本ゾーン、ご飯ゾーン、おかしゾーン、ドリンクゾーン、
トイレなどゾーンに行った回数をひたすら数えて合計した数ですね。



リファラー(参照元)

IT用語辞典 e-Wordsから引用
リファラ 【referer】とは
あるWebページのリンクをクリックして別のページに移動したときの、リンク元のページのこと。

■コンビニで言うと
車できたのか電車できたのか徒歩できたのか自転車できたのか
歩いてきたのかってことですね。



滞在時間

滞在時間
ウェブサイトにアクセスしてきた人がサイトに滞在していた時間です。あるページを開いてから別のページが開かれた時間の差です。

■コンビニで言うと
本を立ち読みして次にドリンクゾーンに行ったときに何分本を
読んでいたかってことですね。

滞在時間が長いと良いと思われがちですが、ジャンプを全部読んで
いたら滞在時間が長くなります。
また、その店の配置が悪くホッチキスがどこにあるのか分からず
ウロウロしていたら長くなります。

逆に水を買いにきたお客さんはドリンクゾーンに行って購入まで
店にいた時間は短いですが、売り上げにつながりました。
数字ではなく中身が大切ってことですね。



直帰率

直帰率

Google Analyticsのヘルプから引用
コンバージョン 【conversion】とは
直帰率とは、閲覧開始ページ (リンク先ページ) からサイトを離脱した訪問、つまり1 ページだけを閲覧したセッション数の割合で、セッションの質を評価することができる重要な指標のひとつです。

■コンビニで言うと
ドリンクゾーンなど他のゾーンにいかないで、本を立ち読みだけして帰ったり
トイレだけ行って帰ったりする割合ですね。

この割合が高いと商品が売れないのでコンビニがもうかりません。
ただのボランティアになってしまいます。
だからこそ陳列方法や商品の種類、ディスプレイなど様々な対策を行います。



離脱率

離脱率

インターネット広告用語辞典から引用
離脱率とは
ウェブサイトにアクセスしてきた人が、サイトでの商品購入や資料請求などのコンバージョン(=最終成果)に達することなく、そのサイトから離脱(ブラウザを閉じたり、他のサイトに移動してそのサイトを退出すること)してしまう割合。

■コンビニで言うと
本を立ち読みして次にドリンクゾーンに行ったけど欲しいお茶がなくて
何も買わずに帰ってしまう割合ですね。

コカコーラ欲しかったのにペプシしかなかったときはショックですね。



コンバージョン

IT用語辞典 e-Wordsから引用
コンバージョン 【conversion】とは
ネット広告の分野では、広告や企業サイトの閲覧者が、会員登録や資料請求、商品購入など企業の望む行動を起こすことを言う。「単なる訪問者から会員や(見込み)顧客への転換」という意味合いがある。

■コンビニで言うと
商品を購入してもらうことですね。

以下にトイレの利用や立ち読みだけしていくお客さんに購入してもら
うかが大事ですね。



検索キーワード

検索キーワード
検索キーワードとは
ユーザーがWebサイトを訪れたときに使用したときの検索の言葉です。ユーザーの興味・関心やニーズを知ることができます。

■コンビニで言うと
コンビニに何をしにきたかってことですね。
商品点数が増えればそれだけキーワードの数が広がりますね。

だけど、それってどこも他のコンビニも簡単にできますよね。
そこでそれ以外で対策をたてます。いわゆる差別化ですね。

例えば、自分の家の近くだから行くとか(長野 コンビニ)
地域に合わせた商品を扱うとか、トイレが広くてキレイとか・・・。
かわいい店員、イケメンの店員がいると遠くても行きますね。



セグメント

セグメントとは
消費者全体を何らかの基準で分けた同質な集団をセグメントとよんでいます。

■コンビニで言うと
レジで支払いをしたときに年齢と性別を勝手に判断されることですね。
これにより、20歳代の男性はどんな商品を購入しているのか
調べられますね。

知ってる方も多いと思いますが、レジに青と赤の背景に数字がかかれた
ボタンがあります。店員はお客さんからお金をもらったときに押します。
これは、何を意味しているかというと何歳ぐらいの男性か女性が購入した
のかデータをとっています。
見た目で判断しているので店員の観察力にたよるしかないですね。
瞬時に判断をしなければいけないので実際やってみると難しいです。



パーソナライズ

IT用語辞典 e-Wordsから引用
パーソナライズ 【personalize】とは
顧客やユーザ全員に同じサービスやコンテンツを提供するのではなく、一人一人の属性や購買/行動履歴に基づいて最適化されたものを提供する手法。

■コンビニで言うと
タバコの銘柄を言わないでも自動で出てくることですね。

私がいたコンビニだけなのかもしれませんが、
ある程度常連になってくるとタバコの銘柄を覚えられます。
タバコちょうだいっていうと出てきます。
さらに、常連になるとレジに並んだ瞬間にでてきます。

タバコだけでなく袋を入れるのを毎回断っていたり、
レシートをもらわないでいると何も言わないでも対応してくれます。
さらに、バレンタインにはチョコがもらえます。
こうなるとそのコンビニしかいかなくなりますね。



導線(予定)/動線(実績)

導線は、作り手側が目的を達成するためにユーザーを誘導することです。
つまり、「トップページ」→「商品詳細」→「購入」のようにユーザーを目的のところまで導きます。
そして、動線は実際にユーザーが移動した動きです。

■コンビニで言うと
本ゾーン→ドリンクゾーン→パンゾーン→弁当ゾーン→レジという感じですね。
あれは、コンビニが人の心理を上手くつかって誘導しているらしいです。

レジをしていると分かるのですが店に入ったときに高確率で本ゾーンの方
に誘導されていきます。
私はコンビニに負けた気がするのであえてこの順序にさからって移動します。



LPO

IT用語辞典 e-Wordsから引用
LPO 【Landing Page Optimization】とは
ランディングページ最適化。Webサイトにおいて、サイト訪問者が最初に訪れるWebページを工夫し、訪問者が会員登録や商品購入など収益につながる何らかの取引を行う割合(コンバージョンレート)を高めること。Webマーケティングの新しい手法として注目されている。

■コンビニで言うと
本を立ち読みできることですね。

コンビニによっては袋がかかっていて立ち読みができないようになっている
ところもありますが、立ち読みしてついでにコーヒー買っていこうってなるから
個人的にはちょっと残念です。
逆にジャンプとか立ち読みできないようになってると発売日には
コンビニに行っちゃいますね。

また、地域によってはその場所にあったものが置いてあったりしますね。
スキー場に近いコンビニは手袋やゴーグルなどスキー・スノーボード用品
が置いてありますね。



EFO

IT用語辞典 e-Wordsから引用
EFO 【Entry Form Optimization】とは
Webサイトの入力フォームを利用しやすいよう改善すること。また、そのような改善を行うサービス。「入力フォーム最適化」とも訳される。

■コンビニで言うと
店員のレジさばきが上手いってことですね。

レジが遅かったりレジにお客さんがきているのに気づいていなかったり、列になってたり
しすると購入する気がなくなりませんか?

そこで、EFOです。
店員のレジスキルを改善しましょう。
または、かわいい子やイケメンを雇ってみましょう。
かわいい店員やイケメンの店員だとそっちのレジに並びたくなるし
購入したくなりますね。
お釣りをもらうときに手が触れるのであえてお釣りがでるように
したりしますね。



最後に

こうしてみると意外にあてはめることができますね。
ホームページもリアルと変わらないですね。
そう考えると色々と対策・改善が考えやすいのではないでしょうか。

これでもっとコンビニがスキになれたのでは?
私はセブンイレブン派なのですが、みなさんはどこのコンビニが好きですか?



コンビニの売り場の秘密を知りたい方はこちら

驚異の人間誘導力――コンビニの売り場作りの秘密
「人はお店に入ってからどのような動きをするのか?」「どのような基準で商品を選ぶのか?」「どうすれば商品を買いたくなるのだろうか?」など、コンビニ側は「どのように準備をすればお客さまは商品を購入するのか?」ということを考え、具体的に展開しているのです。

実は、普段何気なく利用しているコンビニからマーケティングを学べることが多いです。
これは、まだまだ勉強になりそうなところがありそうですね。






iPhone/iPad向けWebアプリ作成の基礎知識のまとめ


iPhoneやiPadのアプリを作りたいけど、iPhoneアプリ初心者なので
作るにはObjective-Cを覚えたり登録したりお金かかったりとか
iPhoneアプリの作成にはハードルがちょっと高い。

そこで、今までのWebの知識を活かして、Webアプリにしようと
思って試してみた。
基本的な知識を理解しなければいけないので、超簡単なWebアプリを作成してみた。
だた、写真を100枚表示するだけ。

Webアプリと呼べるのだろうか?
今回は、基本的な知識を知りたかったのと分かりやすいので
Webアプリと呼ぶことにします。

完成したものはこちら!iPhoneで見てください。
iPhone/iPadのWebアプリを作ってみた


ホーム画面に追加をするとアイコンがでて、そこから起動するとツールバー
が消えた状態(フルスクリーン)で表示されます。
原因は分からないですが、遅延読み込みが重いです。


流れはこんな感じ

  • HTML5でコーディング
  • 写真をスクロールしたら表示させる
  • ブラウザのツールバーや検索ボックスを消す
  • アイコンから起動できるようにする
  • iPhoneぽいデザインを付ける
  • iPhone用に表示を最適化する



HTML5でコーディング

まず、HTML5で作るには、HTML5の基礎を知らないといけない。
そこで、初心者でも分かる解説があったので参考にしてコーディングしてみました。
HTML5でWebページをマークアップするための基礎知識

HTML5のDOCTYPE宣言

XHTMLの場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

って書いていました。ん-----長いですねっ!

しかし、HTML5ではたったのこれだけ
<!DOCTYPE html>

短いですね。

また、上記のような書き方だと宣言を出力できない場合があるので
<!DOCTYPE HTML SYSTEM "about:legacy-compat">

のような宣言でも良いらしいです。


文字エンコーディングの指定方法

<meta charset="UTF-8">

短いですね。

HTML5で中身がない状態で最低限必要なものはこんな感じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iPhone,iPadで動くHTML5で作るWebアプリのまとめ</title>
</head>
<body>
ここがコンテツエリア
</body>
</html>



HTML5のスタイルシートをリセットする方法はこちら
HTML5 のリセット・スタイルシート

より詳しい説明、レイアウトやデザインをしたい場合はこちらを参考にすると
分かりやすいです。
CSSの解説やデザイン方法まで紹介されているのでiPhone用のサイトを作る
ときにも役に立ちます。





写真をスクロールしたら表示させる

ZOZOTOWNのiPhoneアプリの写真表示が縦に長く指でスクロールさせる感じが
良いのでこれを実現させてみました。

写真をスクロールしたら表示させる


jQueryで遅延読み込みさせる


フェードさせたりすることもでき、設置が簡単だったので
jQueryで画像の遅延読み込みさせる「lazyload」を使いました。
デモはこちら

使い方
 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.lazyload.js" type="text/javascript"></script>

でjavaScriptを読み込む

そして、以下のように実行するだけです。
<script type="text/javascript" charset="utf-8"> 
$("img").lazyload({         
     placeholder : "img/grey.gif"
 });
</script>


こんな感じになります。



jQueryで遅延読み込みさせる



ブラウザのツールバーや検索ボックスを消す


今のままだとブラウザから見ているのでアプリっぽくないですね。
そこでツールバーなどを消してみました。

ブラウザのツールバーや検索ボックスを消す



URL&検索バーを消してフルスクリーンモードを設定する方法はこちら
邪魔な表示を消す

フルスクリーンモードにする
Webクリップしたアイコンから起動することにより、このツールバーを非表示にすることが可能です。※iPhone2.1以降のみ。

<meta name="apple-mobile-web-app-capable" content="yes" />


ステータスバーを黒または半透明にする
Webクリップしたアイコンから起動することにより、このステータスバーが黒または半透明になります。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> :半透明
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> :黒



アイコンから起動できるようにする


Webアプリでもホーム画面に設定するとiPhoneアプリみたいに
アイコンが表示されそこから起動できるようにできます。

ホーム画面に設定



ここでホーム画面に追加を選択するとアイコンが追加されます。

アイコンから起動できるようにする



アイコンの設定方法
アイコンのサイズや指定方法は以下のサイトが分かりやすかったです。
WEBクリップアイコンの指定

Webクリップアイコンについて
iPhone/iPod touchでは、ホーム画面と呼ばれる通常アプリアイコンが並ぶ画面に「Webクリップ」と呼ばれるWebページのリンク(ショートカット)を設置することが出来ます。
これはそのWebクリップのアイコンを指定するもので、faviconに相当します。

Webサイトのルートに、"apple-touch-icon.png"というファイル名のアイコンを置いておくだけでも反応するのですが、より正確を期す場合はHEAD内への記述が望ましいでしょう。

PNGファイルのみ可能です。大きさは57pixel*57pixelがピッタリサイズなのですが、Yahooやアップルなどは129pixel*129pixel程度に作っておき、高精度のアイコン表示を行っています。なお、角丸やテカリ処理はiPhone側で自動で行ってくれます。
書式など 
 

ホーム画面のアイコンを指定する書式は次の通りです。
Webクリップは1.1.3以降のみ有効です。

<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />

2.0以降では、「apple-touch-icon-precomposed.png」名で指定することにより、角丸やテカリ処理を行わなくなります。
<link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png" />


アイコンの作り方
アイコンにしたい画象を用意すれば角丸や光る処理は自動でやってくれるので簡単にかっこいいアイコンができあがります。

iPhoneアプリっぽいアイコン


アイコンができたと思ってよくみるとタイトルが省略されています。
表示されるアプリケーション名には文字数制限があるようです。

アイコンと一緒に表示されるアプリケーション名の文字数
日本語 – 6文字
アルファベット(半角文字) – 12文字

これを超えると、自動的にアプリケーション名が省略されてしまうようです。

そこでタイトルを変えてみました。

iPhoneアプリっぽいアイコン



これで、iPhoneアプリっぽくなりました。



iPhoneぽいデザインを付ける


ページ増えたときにページ遷移やデザインをiPhoneぽくしたいですよね。
こんな感じ!

iPhoneぽいデザインを付ける





何か良い方法がないかと探していたら簡単な方法がありました。
javaScriptで動くフレームワークiUI iUIのダウンロードはこちら
これを利用すると超簡単にiPhoneぽいデザイン・動作を実現できます。

使い方はこちらを参考にすると分かりやすいです。





iUiフレームワークを使うときにviewportの指定を
initial-scale=1.0; maximum-scale=1.0;を指定しないと
スクロールの際に画面が崩れる場合があるそうです。
viewportの指定について



iPhone用に表示を最適化する


ページを表示する際に何も設定をせずデフォルトのままだと横幅980ピクセルまで縮小されます。
そのため表示が小さくなります。

iPhone用に表示を最適化する



これを解決するためにmetaタグでviewportを指定します。

viewportの指定
viewportの指定について

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/>


Viewportプロパティ

width
ページロード時の横幅で標準値は980。利用可能範囲は200~10,000。iPhone専用であれば、320がピッタリのサイズ。

height
ページロード時の縦幅で標準値は横幅の数値に対するアスペクト比によって設定される。利用可能範囲は223~10000

initial-scale
ページロード時のスケール値。標準値はスクリーンのサイズと同じ。利用可能範囲は[minimum-scale、m
aximum-scale]。ユーザは“ピンチ”および“ダブルタップ”でズーム値を変更可能

user-scalable
ユーザのズーム動作の制御。“No”にするとズーム機能をoffにできる。標準値は“yes”

minimum-scale
ズーム機能を利用する際の最小スケール倍率。標準値は0.25。利用可能範囲は0~10

maximum-scale
ズーム機能を利用する際の最大スケール倍率。標準値は1.6。利用可能範囲は0~10



viewportを設定するとiPhoneで見たときにキレイに表示されます。

viewportを設定するとiPhoneで見たときにキレイに表示されます






これで、Webアプリの基本的なことはできたのであとはアイデア次第ですね。
完成したものはこちら!iPhoneで見てください。

本買わ解決
iPhone/iPadのWebアプリを作ってみた

ホーム画面に追加をするとアイコンがでて、そこから起動するとツールバー
が消えた状態(フルスクリーン)で表示されます。
原因は分からないですが、遅延読み込みが重いです。


今回は、基本的なものでしたが、ジャスチャーイベントを取得して
ゲームとか作りたいって方にイベントを取得する方法があります。



タッチ、ジェスチャーイベントを取得する方法

取得するには、タッチイベント、ジェスチャーイベントを使うとできます。
XXXに取得したいイベント名を入れるとイベントを発生させることができます。
iPhone向けwebアプリを作ってみる-タッチイベント、ジェスチャーイベントに関するまとめ-


タッチ、ジェスチャーイベント
document.addEventListener("touchXXX", touchXXXHandler, false);
function touchXXXHandler(event) {
//各処理
}

タッチイベント
touchstart: 新しくスクリーンに指が触れた場合に発生するイベント
touchend: スクリーンから指を離した場合に発生するイベント
touchmove: スクリーンに触れている指をスライドさせた場合に発生するイベント
touchcancel: システムによってタッチイベントがキャンセルされた場合に発生するイベント

ジェスチャーイベント
gesturestart: 新しくスクリーンに二本以上の指が触れた場合に発生するイベント
gesturechange: 二本以上の指がスクリーンに触れている状態で指をスライドさせた場合に発生するイベント
gestureend: ジェスチャーイベントが終了した場合(スクリーンに触れている指が一本以下になった場合)に発生するイベント



iPhone向けwebアプリ(ネイティブアプリ)作成の参考になるサイト

iPhone向けWebアプリを作ろう
iPhone Webアプリテンプレート
iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた


スマートフォンサイトの作成に参考になるサイト

優れたiPhoneサイトデザイン集 - iPhoneデザインボックス
私が運営・管理をしています。良いサイトがありましたら教えてください。



$本を買わずに解決するWeb制作の小技-2010年の人気Web制作テクニックのまとめ

明けましておめでとうございます。
2011年もよろしくお願いします。

そこで、2010年を振り返ってみようと思います。
2010年はどんな情報があり、人気があったのかまとめてみます。

アクセスの多かった記事 トップ10

  1. PHPでファイルの絶対パス、ディレクトリ名、拡張子取得
  2. jQueryで簡単にフェードイン フェードアウト表示させる方法
  3. Flash Actionscript3.0(AS3)でボタンを作る
  4. PHPでエクセル(excel)を読み込む「Spreadsheet_Excel_Reader」
  5. 印刷用CSSで背景画像を印刷する方法
  6. Javascriptで金額表示に使う3桁区切り、カンマ挿入
  7. jQueryでHTMLのIDやクラスのスタイルを取得・変更をする
  8. AS3で一定の間隔毎に処理をさせるTimerクラス
  9. FirefoxやChrome、Safariのみに適用させるCSSハックの方法
  10. jQueryでURLのパラメーターを簡単に取得する関数


高度なテクニックよりも、使う機会が多くてちょっとした機能を実装する方法が多いですね。
今年は、スマートフォン、jQuery、HTML5やCSS3に関するテクニックが増えてくると思いますので
使いこなせるようになりたいですね。