ユージック

Google Analytics の使い方 2009最新版

2009-10-15T15:35:24Z

以前に書いた記事「Google Analytics の使い方」から早半年以上たっており、基本的な機能は変わっていないのですが、Google Analyticsも結構進化を遂げています。

そこで今のGoogle Analyticsの最新機能やちょっとした裏技をご紹介しようと思います。

アドバンスセグメント
ピボットテーブル
アドバンステーブルフィルタ機能
複数ドメインにまたがるサイトにトラッキングコードを入れる方法
外部へのリンクのトラッキング方法
参照元の検索エンジンを追加する方法
簡単にサイト内検索を設定する方法
検索結果順位を取得できるプロファイルの設定
マルチカスタム変数
変化のお知らせ機能インテリジェント
携帯サイトの解析

アドバンスセグメント

アドバンスセグメントとはトラフィックやユーザーデータなどの各項目を様々な条件によってフィルタリングをかけることのできる機能です。

フィルタリング設定例

キーワードによるフィルタリング
新規ユーザーとリピーター
サイト内の各カテゴリーによるフィルタリング（フォルダ名でフィルタリングをかける）

これを行うことによって様々な視点からの検証が可能になり、よりCVの検証がしやすくなるということです。

ピボットテーブル

入り口ページを設定し。その次の遷移先のページや、どこで離脱したかを図によって確認しやすくなる機能です。注意点としてはアドバンスセグメントをした後にピボットテーブルを設定するとアドバンスセグメントが解除されていまうので、ピボットテーブルを設定した後にアドバンスセグメントを行うようにしましょう。

アドバンステーブルフィルタ機能

複数の指標を条件にデータを絞り込むことができる機能です。まだ試していませんが、かなり高度な絞込みを実装できそうですね。詳しくは下記の動画をチェック！

複数ドメインにまたがるサイトにトラッキングコードを入れる方法

たとえば、ASPのカートを利用していて、カートのページで外部ドメインに移動する場合や、共用SSLを利用していてフォームのページで外部ドメインに移動する場合、通常であればトラッキングを行うことができません。

そういう場合は、トラッキングコードを少し変更するのと、外部ドメインに移動するリンクのaタグやフォームのsubmitにJavascriptで仕掛けをつくることによって外部ドメインでも追跡を行うことができます。

トラッキングコードに追加するコード

pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);

トラッキングコードに追加する場所

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-12345-1");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
</script>

aタグの設定例

<a href="https://www.secondsite.com/?login=parameters" onclick="pageTracker._link(this.href); return false;">ログイン</a>

フォームの設定例

<form action="http://newdomain.com/form.cgi" onSubmit="javascript:pageTracker._linkByPost(this)">

参考：複数のドメインにまたがるサイトにトラッキングコードをインストールするにはどうすればよいですか？

外部へのリンクのトラッキング方法

たとえば、フィードの購読やアフィリエイトなど外部リンクへのクリックをトラッキングし、コンバージョンの目標設定にしたい場合はaタグのhrefにJavascriptを書き込みトラッキングされたURLを目標設定にすることでコンバージョンを設定できます。

aタグの設定例

<a href="http://www.example.com" onClick="javascript: pageTracker._trackPageview("/G1/example.com");">

目標（コンバージョン）の設定例

目標先のURLを下記のように設定します。簡単に説明すると外部リンクを内部リンクのように集計しているだけです。.(ドット)を_(アンダーバー)に変更しています。

/G1/example_com

ちなみに「G1」の名称部分は任意で決めれるようです。

参考：外部へのリンクのトラッキング

参照元の検索エンジンを追加する方法

通常であれば、GoogleとYahoo以外は「search」という項目でまとめて統計されますが、トラッキングコードを埋め込む際に細工をすることで国内のその他の検索エンジンも統計に加える事が可能になります。

トラッキングコードのカスタマイズ例

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("XXXXX-X");
pageTracker._addOrganic("images.google","prev");
pageTracker._addOrganic("biglobe","q");
pageTracker._addOrganic("nifty","q");
pageTracker._addOrganic("infoseek","qt");
pageTracker._addOrganic("rakuten","qt");
pageTracker._addOrganic("livedoor","q");
pageTracker._addOrganic("so-net","query");
pageTracker._addOrganic("fresheye","kw");
pageTracker._addOrganic("auone","q");
pageTracker._addOrganic("ocnsearch", "MT");
pageTracker._addOrganic("hi-ho", "MT");
pageTracker._addOrganic("odn","search");
pageTracker._addOrganic("eonet","search");
pageTracker._addOrganic("goo", "MT");
pageTracker._addOrganic("excite","search");
pageTracker._addOrganic("asahi","Keywords");
pageTracker._addOrganic("luna", "q");
pageTracker._addOrganic("lunascape", "p");
pageTracker._addOrganic("hatena", "word");
pageTracker._addOrganic("ecnavi", "Keywords");
pageTracker._addOrganic("mixi", "keyword");
pageTracker._addOrganic("twitter", "q");
pageTracker._trackPageview();
} catch(err) {}
</script>

マイナーな検索エンジンが多いですが、結構こういうのも設定しておくとおもしろかったりします。

簡単にサイト内検索を設定する方法

静的にサイトを構築しば場合、コンテンツの検索でGoogleやYahooなどで「site:www.example.com」のようなサイト内のフィルタリングをかけたフォームを設置することがありますが、まだ検証段階ですが、Google Analyticsのサイト内検索でデータを拾ってくれません。簡単にサイト内検索を利用したい場合は無料で利用することのできるGoogleカスタムサーチを設置すると良いでしょう。これは無料で利用することができますが、広告が表示されます。

広告を出したくない場合やサイト内のメインコンテンツなどで検索結果を表示したい場合はGoogle Site Searchというのもあります。

検索結果順位を取得できるプロファイルの設定

あと、検索結果順位を取得できるプロファイルの設定などもあったりします。設定が結構複雑だったりするので、解説は下記サイトを参照してください。

参考：Google Analyticsで検索順位を調べるフィルタ設定

マルチカスタム変数

既存の _setVar() 機能、ユーザー定義用のカスタム変数を拡張させたもので、ユーザー、セッション、ページの各レベルで定義をおこなうことができる機能のようです。

簡単に説明すると、ユーザー属性（例：会員 vs. 非会員）、セッション属性（例：ログイン vs. 非ログイン）、ページレベル属性（例：スポーツカテゴリを閲覧）で定義をおこない、ユーザーのサイトでの行動や、ページでのインタラクションを分類してトラッキングすることができるようです。

変化のお知らせ機能　インテリジェント

トラフィックの変化があればお知らせしてくれる機能です。忙しくてチェックがしにくいときなんかに重宝しそうな機能ですね。

携帯サイトの解析

これがもっとも待ち望まれていた機能ではないでしょうか？現在は特定のパートナーだけ利用できるようですが、近々すべてのユーザーが利用できるようになるようです。

Movabletypeのレコメンドエンジンプラグイン

2009-09-10T09:02:17Z

レコメンドエンジン「Recommend.DRAGON」がEC-CUBEとMovabletypeのプラグインを発表しました。

レコメンドエンジンとは「○○を買った人が買った商品はこちら」といった感じに関連商品や関連ページを自動で表示する機能です。

従来までMovableTypeではカテゴリーやタグ付けの機能を利用して似たような機能を実装することができるし、ログからアクセス数が多いエントリーを抽出することもできる。このブログでは同カテゴリーの他の記事を紹介する「Related entries」がそれにあたる。

でもAMAZONのような、サイトに訪れた全ユーザーの行動ログを元に、ユーザー間の類似度を抽出し、その後類似ユーザーの趣向性をキーにレコメンドを出力する仕組みである「協調フィルタリング」が実装できるプラグインは今まで見たことがなかった。

従来までの手法でのレコメンドエンジンの実装では物足りない場合や、さらに本格的なレコメンドエンジンを実装したい場合は費用はかかるが選択技として良いのかもしれない。

価格は初期費用￥99,800と月額￥39,800～という感じで類似のシステムの販売価格よりは抑えられているようだ。

レコメンドエンジン「Recommend.DRAGON」、EC CUBE/MovableType プラグインに対応

楽器・ソフトシンセの特価品検索サイト Valuetools

2009-09-07T06:17:40Z

PHPの勉強がてらに楽天APIを利用して「楽器・ソフトシンセの特価品だけの検索サイト」を作ってみました。

楽器・ソフトシンセの特価品検索サイト Valuetools

構成的には楽天ジャンルAPIを使ってカテゴリー自動生成と楽天商品APIを使って商品情報の自動生成を組み合わせています。

IDをルート（一番上の階層）にすることで、半額.comのような感じにもできたんですけど、趣味の音楽も兼ねてあえてIDをルートの1階層下の楽器・DTMのカテゴリーにしてみました。

楽器とか音楽ソフトってまず、半額ってのはないんですよね。値下げ率も比較的低いほうなので、「50-99％OFF/オフ」とかで絞込みしちゃうとまったく表示件数がでないんですね。なのでキーワードでの絞込みの設定は「セール」「特価」「0-99％OFF/オフ」という感じに複数指定にしています。

僕は今、レディオヘッド的な歪が出せるエフェクターのマーシャルのShredmasterがほしいんですが、在庫も薄いし、ヤフオクなんかの中古市場でも値段が高沸してるので、まず値引きして売ってるところはないんですけどね...

お買い得な楽器やエフェクターなんかがほしい人はぜひチェックしてみてください。たまに掘り出し物なんかも見つけれちゃいますよ。

レピュテーション（評判）対策っておもしろい

2009-09-06T14:11:17Z

株式会社エルテスが行っているレピュテーション（評判）対策というのがおもしろそうなのでご紹介したいと思います。

簡単に説明すると逆SEO対策です。順位を上げる対策ではなく、順位を下げる対策になります。

どういった場合に順位を下げる必要があるの？というと誹謗中傷をネット上で受けている企業サイトや個人サイトにニーズがあります。

具体的にいうと新規のサイトをガンガン作ってそのサイトのページにSEO対策をかけることで、誹謗中傷を受けているページの上位に割り込ませ、誹謗中傷のページの順位を下げる対策をとります。

誹謗中傷を受けてるということは根本的な解決にはならないと思いますが、これって結構ニーズありそうですよね。発想がすごいなぁ。

Excelでワイヤーフレームを作る

2009-09-05T14:02:01Z

WEBサイトを設計する際、制作に入る前にステークスホルダーが情報を共有するためにワイヤーフレームを作ります。人によって作成するツールが違うと思いますが、僕はいつもFireworksで作っています。でも、小規模の案件の場合はExcelでワイヤーフレームを作ると結構便利なんですよね。

Excelで作ることの利点

ほとんどの場合、WEBサイトを受注する際にはクライアントから原稿を頂いて、それをワイヤーフレームに落とし込むと思います。クライアントからデータをもらうとき、ファイル形式はほとんどExcelかWordといったOfficeソフトだったりします。

なので、最初からワイヤーフレームをExcelで作ってクライアントに渡してあげることで、クライアントが原稿をワイヤーフレームに書きこむことができ、クライアントとワイヤーフレームを共同で編集することができます。パワーポイントでも良いのですが、おそらくExcelのほうが扱える人が多いと思います。

サイトの情報が固まれば、そのままそのExcelファイルをデザイナーに渡してあげることで、その情報を元にデザイン作成、コーディングに進めます。

要するに1つのファイルでクライアント・ディレクター・デザイナーが情報を共有することができるので作業効率をアップすることが出来るということです。

Excelでワイヤーフレームを作る例

こういう感じであらかじめテンプレートを作っておけば、かなり短時間でサクサク作れちゃいます。画面レイアウトだけはなかなか編集しにくいので、そこはデザイナーがレイアウト設計してあげたり、ディレクターが指示を出してあげれば良いと思います。

小規模案件で単価が低い場合、会社としてはやはり作業時間を案件に合わせて短縮しなければいけません。そういう時にExcelでワイヤーフレームを作ってみてはどうでしょうか。

Twitterでの口コミ分析に使える「topsy」

2009-09-04T10:52:03Z

最近、盛り上がり（※IT業界関係者ぐらいでしょうけど）を見せているTwitter。このTwitter内を検索できるtopsyを利用してWEBサイトの口コミ分析が利用できそうです。

topsy

このサイトはTwitterの検索エンジンという位置付けになるのかな。bitlyやTinyurlなどの短縮URLの情報を抽出できるので口コミ分析に使えるという事です。

使い方はGoogleやYahooの外部リンクのチェック方法と同じで「site:ドメイン」で検索すればOKです。上の画像でこのサイトを例にとると「site:u-ziq.com」です。

mixiもそうですが、人気のソーシャルサイトの口コミは割と重要度が高いのでチェックしてみるのも良いかもしれませんね。

思考を「熟成」させる

2009-08-20T18:21:05Z

ついさっき急ぎのデザインの仕事をしていたが、行き詰ったので作業を切り上げ、お風呂に入っているとぱっと良いデザインアプローチが思いついた。そしてPCの前に戻ってさっそくTRY！

そんなとき偶然読んだ記事「「ひらめき」のためにはいったん思考を保留して、機を熟すのを待つことも必要」の記事は没頭している時にかぎって気付かない問題解決について、とても大事なことを伝えてくれてるような気がする。

デザインにかぎらず、新しい事を勉強しようとしてるときだったり、生活や家族のことを考えていたりして行き詰ったら、どうしようもなくなってくるので、まずは寝かせてみるのが解決の糸口になるなるのではないかという話。

後回しって感覚ではなくて、この「寝かせる」「熟成させる」って表現が適しているのかなと思った。そうすると新しい何かが急にひらめく事が多々ある。人間の脳ってそういうふうにできているのかもしれない。

僕はそれが家族との世間話だったり、音楽をきいたり、TVを見たりって時間で無意識に寝かせているような気がする。この「無意識」ってのがポイントで、意識の水面下で動いている感じ。

この「寝かせる」「熟成させる」時間を取り組んでいる課題にたいしてうまくコントロールできればいいのになとふと思ったりした今日この頃でした。

この記事のブログDESIGN IT! w/LOVEは物事の真実を追究するという意味での「デザインのなんたるか」を掘り下げていて、読んでいてとても勉強になります。

google insights for searchが日本語化

2009-08-19T05:46:06Z

特定の検索語句の人気度を追跡できるgoogle insights for searchが日本語化されました。結構これ検索エンジンマーケティングの際に使えるツールなんですよね。

ユーザーインターフェイス

キーワードごとに検索数の多い地域や検索クエリの一覧、さらには注目検索クエリの伸び率なども表示してくれるので結構便利です。

グラフの埋め込み機能

検索トラフィックのグラフや検索クエリのリストグラフなどをJavascriptを利用して埋め込むことも可能です。以下は「花火」で検索したときのグラフを埋め込んだものになります。

人気検索クエリ - 次の条件に関連: '花火'

Androidアプリケーションの開発環境

2009-08-18T15:30:11Z

iPhoneアプリケーションの開発環境をまとめたついでにAndroidアプリケーションの開発環境についても調べてみた。

開発環境

Windows XPまたは、Vista
Mac OS X 10.4.8以降
Linux

iPhoneと違ってAndroidのアプリは色々なOSで開発ができるようですね。やっぱり開発環境の選択技が多いほうが広く普及していくのでしょうか。

開発ツール

Eclipse: WikipediaではEclipseが推奨と記載されていた。たぶんEclipseがJava開発でメインで使われているからだと思います。他のツールでも良いみたい。
Android SDK: Androidも開発にもAndroid SDKをインストールしなくてはいけない。これにはエミュレータなどが含まれている。

開発言語

Java: 基本開発言語はJavaを利用するそうです。日本の携帯アプリといえばJava MEですが、こちらとの互換性はないようですね。
その他の言語: Android Scripting Environment(ASE) を利用することで、Python、Lua、Beanshellが利用可能になるようです。ちなみにiPhoneと同様にRubyで開発を行うRhodesなども利用できる。

iPhoneアプリケーションの開発環境

2009-08-18T15:10:34Z

つい先日、知人と話をしていてiPhoneのアプリケーションって何で作ってるの？って質問をされて、かなりあいまいに「Xcode使って、C言語っぽい言語で作られてると思うよ」みたいな返事をしました。自分自身もうちょっとちゃんと知っておかなければってことで、覚書としてiPhoneアプリケーションの開発環境の基本的な部分をまとめてみようと思います。

開発環境

Mac本体（インテルのCPUを搭載したもの）: Apple製品なのでやはりMacを使うようです。
Mac OS X v10.5（Leopard）以降: OS Xに標準で搭載されているXcodeを利用するので新しいOS（Leopald）以降が望ましいようですね。

開発ツール

Cocoa Touch: iPhoneアプリケーションの基本パーツやカメラとの連携機能、GPS機能などを集めたフレームワークになる。
Xcode: OS Xに付属する無償のソフトウェア開発環境。主にUIをがしがし作るInterface Builderや動作チェックをするエミュレーターもこれに含まれる。
iPhone SDK: Xcodeは，基本的にMac向けのアプリケーションを開発するためのツールなので、iPhoneアプリを開発するためにiPhone SDKという開発キットを追加でインストールする必要がある。

開発言語

Objective-C: 基本開発言語はC言語を拡張したObjective-Cという言語を利用する。
その他の言語: Rubyで開発を行うためのRhodesなどもある。iPhone版のRailsみたいなものなのでしょうか。

Twitterにも投稿

2009-08-15T04:44:58Z

Twitterをはじめたけど、まったく手をつけていなかったのでブログを書いたらTwitterにも投稿できるプラグインを導入してみました。

利用したのはエムロジック株式会社の「PostToTwitter」というプラグインです。

興味のある方はお試しあれ。

EFO(エントリーフォームの最適化)のまとめ

2009-08-07T02:18:51Z

フォームのユーザービリティーの改善がコンバージョンレートの向上に一役買っているようです。

WEBサイトの最終的な受け皿であるお問い合わせフォームやショッピングカートといったフォームは他のコンテンツに比べて制作の際にないがしろにされがちですが、アクセス解析を見るとサイト内でもかなり上位の閲覧数のあるページとなります。

コンテンツできっちり情報を伝えて、アクションをおこしてもらってもフォームの操作性ひとつで機会損失につながることだってあります。

そこで最近ではEFO(エントリーフォームの最適化)としてフォームの改善対策が注目をあびています。

致命的な改善すべき項目

1.入力の訂正をする際に以前に入力した内容が消えないようにする

せっかく入力したのに書き直しやエラー訂正の時に入力した内容が消えているとモチベーションがいっきに落ちる。タイピングに不慣れなユーザーにとって入力という作業はとても労力のいる作業なんだと認識すべき。

2.入力項目を必要以上に複雑にしない

入力項目が複雑でわかりにくいと、どこに何を入力すればいいかわからなくなる。間違った内容を送るくらいならまた後日改めようと思って離脱してしまう。

3.正規表現チェックやＩＤの重複などエラー内容がわかるようにする

バリデーションを行うのはいいことだが、入力した項目が何で間違えているのかきっちりと表示してあげないとユーザーはどう訂正すればいいのかわからなくなる。そういう経験をするときっとユーザーは離脱してしまうだろう。

できるなら改善したほうがいい項目

1.必須項目をアスタリスク「＊」だけにしない

必須項目をアスタリスク「＊」だけにしてしまうと不慣れなユーザーには伝わらないので、日本語で「必須」と表示し、できれば赤色などを使用して伝えてあげる。逆に必須でない項目は「任意」と表示してあげると親切かもしれない。

2.入力例を用意する

全角なのか半角なのか、郵便番号や電話番号などハイフン「-」がいるのかいらないのか、住所をどこまで正確に書けばいいのかわからないなど些細な事でも気なる人は気になるので入力してて気持ちの悪いものだ。半角と全角の違いも分からない人だっているのだからテキストフィールドの下にきっちりと「例」を入れてあげると間違いも起こりにくくなり、気持ちよく入力していくことができる。

3.エラー項目を見つけやすくする

項目の多い入力フォームで小さなテキストだけでエラー項目を示している、もしくはフォームの上部にまとめてテキストでエラー項目を表示している場合、どこを修正していいのかとてもわかりにくい。tableでフォームを組んでいるのであれば、tr全体をclass="error"などをつけて背景色を変化させて視認性を高めてあげるべき。エラー内容もテキストフィールドの「上」に表示して伝えてあげると親切。なぜ上かというとユーザーの目線は基本上から下なのでかならず訂正しなければいけないエラー内容はテキストフィールドの「上」が望ましいと考える。「例」はあくまで補助的役割なので、テキストフィールドの下でも良いと考える。

4.現在位置がわかるようなナビゲーションを用意する

買い物カゴのように数ページにまたがって画面遷移するフォームの場合はフォームの上部に現在位置をわかりやすく表示してあげると親切である。

5.ラベルをクリックして選択できるようにする

ラジオボタンやチェックボックスはfieldset,label要素を活用してラベルをクリックしたらチェックが入るようにしてあげたい。ヘビーユーザーはかなりこれを活用しているし、不慣れなとくに高齢者のユーザーはきちんとチェックを入れれない方もいるだろう。もちろんテキストフィールドにもラベルを活用しよう。

6.入力している箇所は色を変えてわかりやすくする

間違った項目に入力するのを避けるためにもCSSやJavascriptを使ってフォーカスしているテキストフィールドの背景やボーダーの色を変えてあげよう。

7.定型文で対応できる項目はプルダウンにする

たとえば、「年収」という項目があるとする。これがフリーのテキストフィールドだと「年収452万」と正確にかけばいいのかアバウトでいいのか、「452」と数字だけでいいのかなど色々悩んでしまう。こういうケースではプルダウンなどで定型文を用意してあげて対応できないか検討したほうがいい。

8.重要な項目は重複して項目を作る

メールアドレスやパスワードなど間違えて登録すると困るような項目は重複して確認用の項目を作るほうが良い。コピー＆ペーストを禁止にしていると結構ストレスが溜まる。できればコピー＆ペーストでも入力できるようにしてあげよう。最近だとiphoneのパスワードの入力フォームの「＊＊＊＊d」のように最後の1文字を表示させることで間違ったコピー＆ペーストをしていないか確認することができると非常に親切だ。

9.ログインフォームはページ読み込み時にフォーカスさせる

Mixiのような最初にまずログインを行うサイトなどではページが表示された際に自動的にテキストフィールドにフォーカスしている状態にしてあげるのが親切だと思います。ヘビーユーザーはこれが当たり前と思っている節があるので、フォーカスしていなければストレスがたまる事もあるでしょう。

10.前後のスペースは必要に応じて削除する

メールアドレスやID、パスワードをコピー＆ペーストで入力した時に、末尾にスペースが入ってしまってエラーになる場合があります。これが意外と気付かない事が多い。そんなケースのためにシステムで末尾のスペースを削除するようにしてあげたい。

11.フォーム要素の幅はCSSで指定する

size属性やcols,rows属性は設定する必要がありますが、この属性だけで幅をコントロールするのは難しいのでCSSで適正な横幅に設定するようにしたほうが良いでしょう。

ここまでやったら素晴らしいと思う項目

1.半角/全角を自動で変換してあげる

意外と半角/全角の違いを知らないユーザーというのは多いです。エラー表示で「半角で入力してください。」と表示しても半角の入力の仕方を知らないユーザーも多いと思います。そんな方のために全角で入力しても半角に変換してあげるようなシステムの配慮はとても親切だと思いますし、離脱防止にも一役買うのではないでしょうか。

2.二重submit防止対策をする

単純な操作ミスで押せてないと思ったら、サーバーが重いだけで2重送信になるケースがたまにある。Javascriptなどを利用して2重送信を防ぐ対策も重要だと考える。

参考：Jqueryを使った二重submit防止対策

3.Submitボタンは大きくする

これは意見が分かれるところですが、Submitボタンは画像でわかりやすくしてあげると視認性があがって良いと思います。しかし、ローソンのタッチパネルディスプレイのボタンがわからないケースのようにあまりに大きくわかりやすくすると逆に目に入らないなんてケースもあるようです。

4.ツールチップで詳しい例を表示させる

JSライブラリを活用してリアルタイムでツールチップを表示させて入力サポートしてあげるととても親切だと感じます。

5.残り文字を表示させる

たとえば、入力文字制限を設けている場合、Javascriptで残り文字数などを表示させているとユーザーにとってとても親切です。

6.必要な部分だけ表示させる

ラジオボタンにチェックを入れるとその項目の必要事項だけを表示させる機能を搭載するとフォーム自体がシンプルになり非常にわかりやすくなります。

時間ができたら画像のサンプル付でまた紹介していきたいと思っています。

WEB制作会社の契約方式について考える

2009-08-04T06:34:04Z

最近、個人で仕事をもらう機会がいくつかあり、契約方式や単価の設定などに悩まされていました。そんなときに、「情報システム関係の人とかこれ見とくといいよ-チョコっとラブ的なにか」を見てWEB制作業界に当てはめて色々考えてみました。

WEB制作業界の従来の契約方式の問題点

クライアントにとって経営層に説明できない価格設定では、投資の妥当性を提示できず、投資意欲そのものを減退させてしまうという側面もあるのではないでしょうか。

また、固定価格のみでは、制作会社の品質向上や創意工夫等へのモチベーションが生まれにくいという側面もあったり、他社は○○○円だから～なんて値引きを要求される時などモチベーションが下がってしまうことがよくあると思います。

不景気な今では、価格の妥当性が見えにくいことが、過剰な値引きを引き起こし、価格破壊を起こす要因にもなっているのではないかと考えたりします。

数字をベースに考える

経営戦略や投資では、まず命題となる「目標」を定め、次にその目標を具体的に実現するための「手段」を策定し、その手段がきちんと遂行されているかどうかを定量的に測定する「指標」を決める。その指標を「KGI（重要目標達成指標）」や「KPI(重要業績評価指標)」と呼びます。

KGI(重要目標達成指標): プロセスの目標（ゴール）として達成したか否かを示す定量的な指標
※プロモーションサイトであれ、ビジネスであれば「収益」「成約件数」「利益率」などがKGIに各当する。
KPI(重要業績評価指標): プロセスの実施状況を計測するために、実行の度合い（パフォーマンス）を定量的に示すもの。KGI達成に向かってプロセスが適切に実施されているかどうかのパフォーマンスを計測するための指標
※「ページビュー」「ユニークユーザー数」「離脱率」「新規登録者数」「資料請求者数」などプロジェクトによって適正なKPIは異なる。

成果報酬方式を考える

WEBサイトの場合、まず、WEBサイト独自の目標KGIを設定する（コンバージョンレートなど）。そして、設定した目標KGIを達成するためのKPI(PVやUU、離脱率)を設定し、そのKPI指数に準じて料金を設定していく「パフォーマンスベース契約」も選択技の1つとして良いなと思います。共同運営といったレベニューシェアであればKPI指数ではなく、KGI指数を報酬として考えるのが当然ですが、クライアントの商品やサービスの価値の部分まで踏み込んで考えなければいけないKGIを目標設定にしてしまうのはWEBサイトの設計・構築だけのアウトソーシングの場合、ハンドリングできる領域が少しずれていると感じますのでKPI指数ベースが良いと思います。

パフォーマンス契約のメリット

クライアントにとって「無駄な投資が減る等，適正な価格での投資ができる」，「目的を共有することから，制作会社の積極性を期待することができる」，制作会社にとっては「WEBサイトの効果に応じた適正な対価を得ることができる」，「人月,ページ単価ベースの契約から脱却することで，付加価値の創出や効率化に対するモチベーションが向上する」などがあげられます。

パフォーマンス契約のデメリット

クライアントにとっては「契約時に価格が確定せず，実績により事後的に価格が変動するため，定額固定契約と比べて予算確保が難しい」，制作会社にとっては「期待した効果が出せない場合，定額固定契約と比べて収益の縮小となる可能性がある」「価格を決めるための作業が煩雑となる可能性」などがあげられます。

柔軟な契約方式についても考える

パフォーマンス契約のメリット・デメリットを踏まえたうえで、双方にとってベストだと思える契約方式をクライアントに提案してみるのも1つの改善策だと思います。

「人件費方式」方式、もしくは「ページ単価」などの固定価格方式
最低ベース金額と一部の「パフォーマンスベース契約」のハイブリッド方式
完全「パフォーマンスベース契約」の成果報酬方式

まとめ

案件の規模にかかわらず、成果という形が見えにくいWEBサイトは実現可能な数字での目標設定を行い、それに応じて報酬をいただくという契約のあり方が今後のWEB制作において重要になってくると思うし、業界全体が健全な発展を遂げることにつながっていくのではないかと思いました。

オープンソースのCMSを納品する際の注意点

2009-08-01T16:03:36Z

オープンソースのCMSは開発費用を抑えれることで多くのWEB制作会社が利用していると思いますが、MTなどでは月に1度くらいの頻度でクロスサイトスクリプティングの脆弱性が発見されている。

最近ではEC-CUBEのクロスサイトスクリプティングの脆弱性も発見され、悪用されるとユーザーのウェブブラウザ上で任意のスクリプトを実行されてしまう。そうなると偽ページの表示や、偽情報の流布による混乱、フィッシング詐欺による情報の漏えいなどが起きる可能性がある

「EC-CUBE」の利用サイトは迅速なバージョンアップを：読売新聞

WordPress 2.8.4未満を使用している場合は要アップデート

納品後のアップデートを行う取り決め

保守契約を結んでCMSを納品しているケースであれば、このような問題が発生した際にアップデートを行うことは当然であるが、そうでないケースの場合は無料でアップデート、もしくは別途料金を頂いてアップデートのどちらかになるだろう。

数百単位のクライアントがいる場合、アップデートを行うことはかなりの労力を必要することになる、その際には必要労力としても制作会社としては痛手になると想像する。

保守契約を結ばない際にも、クロスサイトスクリプティングの脆弱性が発生した際のアップデートを有料、もしくは無料で行う際の取り決めをきっちり結んでおかないといけない。個人で仕事を行う際には特に注意しておかないといけないなと感じました。

靴とバッグの専門通販サイトJavariがすごい

2009-07-31T10:56:55Z

以前紹介したAmazonが運営するJavariで前から欲しかったクラークスのデザートブーツを買ってみたんだけど、あまりの機能とマーケティングの卓越さに圧巻しました。

検索機能のすごさ

カテゴリー、ブランド、色、サイズ、価格帯を調整することで滑らかなAjaxのモーションで絞込みする事ができる。

ディテールが伝わる

Javascriptを利用した虫眼鏡機能で商品の質感といった細部までかなり確認できるので、WEBでも迷いなく買ってしまう。

ターゲティングも明確

BEYESは実店舗を表参道ヒルズに持ち、単価の高いファッションアイテムをWEBサイトで販売することに成功しているサイトだが、Javariは中間層の幅の広いユーザーを狙っているのがうまく成功していると思う。

極めつけは送料無料で翌日配達、30日間返品可能という点は他社ではなかなか真似できないのではないだろうか。

あまりWEBでは買い物をしないユーザーでも一度サイトを閲覧してみたら購買意欲がそそられると思いますよ。

ユージック

Google Analytics の使い方 2009最新版

目次

アドバンスセグメント

フィルタリング設定例

ピボットテーブル

アドバンス テーブルフィルタ機能

複数ドメインにまたがるサイトにトラッキングコードを入れる方法

トラッキングコードに追加するコード

トラッキングコードに追加する場所

aタグの設定例

フォームの設定例

外部へのリンクのトラッキング方法

aタグの設定例

目標（コンバージョン）の設定例

参照元の検索エンジンを追加する方法

トラッキングコードのカスタマイズ例

簡単にサイト内検索を設定する方法

検索結果順位を取得できるプロファイルの設定

マルチカスタム変数

変化のお知らせ機能 インテリジェント

携帯サイトの解析

Movabletypeのレコメンドエンジンプラグイン

楽器・ソフトシンセの特価品検索サイト Valuetools

レピュテーション（評判）対策っておもしろい

Excelでワイヤーフレームを作る

Excelで作ることの利点

Excelでワイヤーフレームを作る例

Twitterでの口コミ分析に使える「topsy」

思考を「熟成」させる

google insights for searchが日本語化

ユーザーインターフェイス

グラフの埋め込み機能

人気度の動向 '花火'

人気検索クエリ - 次の条件に関連: '花火'

Androidアプリケーションの開発環境

開発環境

開発ツール

開発言語

iPhoneアプリケーションの開発環境

開発環境

開発ツール

開発言語

Twitterにも投稿

EFO(エントリーフォームの最適化)のまとめ

致命的な改善すべき項目

1.入力の訂正をする際に以前に入力した内容が消えないようにする

2.入力項目を必要以上に複雑にしない

3.正規表現チェックやＩＤの重複などエラー内容がわかるようにする

できるなら改善したほうがいい項目

1.必須項目をアスタリスク「＊」だけにしない

2.入力例を用意する

3.エラー項目を見つけやすくする

4.現在位置がわかるようなナビゲーションを用意する

5.ラベルをクリックして選択できるようにする

6.入力している箇所は色を変えてわかりやすくする

7.定型文で対応できる項目はプルダウンにする

8.重要な項目は重複して項目を作る

9.ログインフォームはページ読み込み時にフォーカスさせる

10.前後のスペースは必要に応じて削除する

11.フォーム要素の幅はCSSで指定する

ここまでやったら素晴らしいと思う項目

1.半角/全角を自動で変換してあげる

2.二重submit防止対策をする

3.Submitボタンは大きくする

4.ツールチップで詳しい例を表示させる

5.残り文字を表示させる

6.必要な部分だけ表示させる

WEB制作会社の契約方式について考える

WEB制作業界の従来の契約方式の問題点

数字をベースに考える

成果報酬方式を考える

パフォーマンス契約のメリット

パフォーマンス契約のデメリット

柔軟な契約方式についても考える

まとめ

オープンソースのCMSを納品する際の注意点

納品後のアップデートを行う取り決め

靴とバッグの専門通販サイトJavariがすごい

検索機能のすごさ

アドバンステーブルフィルタ機能

変化のお知らせ機能　インテリジェント