【マーケティング】「インサイト」を学ぶ

昨日5/21に勝手にマーケティング大学 第2回勉強会 『インサイト　消費者が思わず動く、心のホットボタンに参加してきました！

今回のテーマは「インサイト」。
インサイトとは消費者のホンネのことです。
例えば目の前にいる人が自販機でコーラを買ったとします。
その人はなぜコーラを買ったのでしょう？？
「喉が渇いたから」、「ジュースの缶を集めているから」、「小銭が欲しかったから」、「その人の周りでは空前のコーラブームだったから」。
理由は様々考えられます。
この理由こそインサイトから来ているのです。

従来の消費者分析は商品が軸にあり、商品をどう作れば、どう広告すれば売れるかを
試行錯誤していました。

しかしインサイトのマーケティングでは消費者が軸になります。
消費者が普段何気なく取っている行動には何かしら理由があって、
その理由を探ることで消費者の本当のニーズを知ることが出来ます。

いやぁ、面白いですねー。
マクドナルドの原田さんじゃないけどやっぱ消費者本位で考えることの方が大事なんだな
としみじみ。

ほんと面白い勉強会でした。

勉強会で使用したスライドはこちら

【html】最大文字数を指定する方法

記事とかブログとかで最大文字数を制限して、
レイアウトのバランスを崩さないようにする方法を挙げる。

PHPで実装

$news = '表示させたいニュース' ;

// 表示制限を17バイトにしてそのあとは「...」にする。
$display_news = mb_substr($news, 0, 17).'...';
echo $display_news;

CSSで実装

.classname {
 width:240px;
 height:3em;
 overflow:hidden; ←あふれた文字に関しては隠す
}

JavaScriptで実装(引用元：JavaScriptでマルチバイト文字列を決まった文字数で制限する方法)

文字列を省略する

@arg  text  省略する文字列

@arg  len  半角文字数で指定

@arg  truncation  省略時の文字列

*/

function substr(text, len, truncation) {

  var count = 0;

  var str = '';

  for (i=0; i

    n = escape(text.charAt(i));

    if (n.length < 4) count++; else count+=2;

    if (count>len) {return str+truncation;}

    str += text.charAt(i);

  }

  return text;

}

【PHP】ブラウザの判定

スマートフォン対応や各ブラウザ対応等で
ブラウザ情報でページを出し分けするときは
user agentから情報を判別すればよい。

getenv(string varname)

解説	環境変数の値を取得する
引数	varname 変数名
返値	varnameで指定した環境変数の値を返す。varnameが存在しない場合はfalseを返す。

例：
// ブラウザの情報取得
$bsr = getenv("HTTP_USER_AGENT");

echo $bsr;

⇒Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.165 Safari/535.19

mb_eregとかを使ってページを出し分ければいけそうだな。
phpinfo()にある情報は全部とれるっぽいから結構使えるファンクションだね。

【html•css•javascript】マウスオーバーはCSSだけでいける！

文字や画像が載ったときに色や画像を変更させるいわゆるマウスオーバーは
実はCSSで行けるということを知りましたー（おろかものだ。。）

hoverというCSSの擬似クラスで設定可能ということでして。

例：

a{

color:FFFFFF;

}

a:hover{

color:000000

}

上の簡単な例だと文字にマウスが載った瞬間に黒に変わる。

CSSで作った方がシンプルで高速らしい。
確かにシンプルだー

【API】Google APIとかすごすぎやろ

Google APIにはMapとか検索のAPIが存在することは知っていたけど、Chartもあるのね。
しかも超簡単でびっくりした。



Google Chart API

2分ぐらいで試しに適当に作った。


imgタグにちゃちゃっと書いてこんなにステキな円グラフが出来ている。。
ちなみに上のソースは下記の通り。

• chtt : タイトル
• chs  : 図のサイズ
• chd  : 各項目のパーセント,数値
• chco: 各項目の色
• chdl : 右の説明表の設定
• chl   : 各項目名

他にも棒グラフや折れ線グラフ等の定番チャートからQRコードとかも作ってくれる。
とても便利すぎてびっくり。
Google Chart API グラフ画像のサンプルにもたくさんサンプルがあり、使える！
API使って効率よく作業をしていかなければ。

【etc】こりゃたまらん！ドットインストール

たまたま発見した。


『ドットインストール』

初心者用のプログラミングサイトで一つの授業は3分程度。
ささっと見れて逆に言うとささっと見れる分どんどん見てしまうー。

PHPとかJavaとかだけでなく、
最近流行のTwitterbootstrapとかGoogleのAPIとかも受講できちゃう。
これが全部ただって言うのがまたすごい。
ぜひお試しあれ。

                                   こんな感じで結構コースも豊富なんです。

【tool】chromeデバッグツール

chromeには標準装備でめちゃめちゃ優れた
デバッグツールを搭載している。
ただこいつの使い方を簡単に紹介しているサイトはないかなとか
思って探していたら、あった。


作業効率が10倍アップする Chrome Developer Tools の使い方

めちゃ簡潔に書かれていてわかりやすい。

（全然関係ないけどタイトルにもあるように「10倍アップ〜」

とかいう文言はとても魅力あるように感じるのは自分だけかな？

別にその数字の信憑性など誰も問わないけどなんかクリックしてしまう。）

標準装備されているのに、全然使っていなかった自分に後悔。。

JSもHTMLもこいつを使ってもっと効率よく開発をしたいね。