グロースハックに学ぶビジネス改善 #1 "けんすうさん(nanapi)のお話"
6月20日に秋葉原UDXで開催された”グロースハックに学ぶビジネス改善”に参加してきました。
Growth Hackに関してはまだまだ知識も経験も不足しているので、非常に有意義な時間でした。
そして何より、登壇してくれる方々が豪華。(笑)
パートとしては3つあり、ここではまず最初のけんすうさんのお話について書こうと思います。
(以下、”です・ます”は省略。)
まとめだけ見たい人は最後に簡単にまとめているので、そこだけ見てね。
■ けんすうさん (nanapi)
1. Growth Hackするのに大切なこと
まず大きくわけると3つ。
① ビジョンを共有しておく。
② 立ち戻れるところとしてしておく。
③ Growth Hackのためのチーム作り。
(ここがあまりちゃんと聞けませんでした・・・残念。)
今回の話のメインは③。
nanapiでは③において良いチームを作るために3つのルールがある。
A. 「許可より謝罪」
B. 「発見の賞賛」
C. 「継続と破壊」
それぞれの詳細は以下に。
A. 「許可より謝罪」
Growth Hackは多くの検証(A/Bテスト)を行うことで成長のきっかけを見つける営みなので、多くの会議体を通すこと自体に時間も労力も取られてしまう。
結果的に「許可を取るよりやってからごめんなさいしてやめる方がコストが低い。」
意思決定に時間がかからないように、チームの中に経営陣の誰かを含めておくと非常に早い。
”取締役＋エンジニア＋デザイナー”で組んだら意思決定が非常にスムーズ。
B. 「発見の賞賛」
”良い結果がほめられる”のを当たり前としていると”良い結果”を得る為にどうするかだけを考えるようになる。
この結果、以前上手く行ったことに対してBiasが強くなる。
例としては、
Hotpepperで飲食店のバナーと言えば”焼肉”だという神話が存在していた。
このため、CTRをあげるための改善の話をしても”焼肉”から逃げることができない。
これでは発見につながらない。
(実は食べ物と全然関係のないソファーの写真を使ったバナーが一番良かった。)
結果は偶然の産物であることが往々にして存在するので、結果だけを賞賛していると本質を見失う。
C. 「継続と破壊」
Growth Hackは改善活動なので、細かい改善をどんどんやりたくなってしまうが、インパクトを大事にしなければならない。
使っている人が少ないページにパワーをかけるより、多くのユーザーが使っているページを改善した方が、上昇率が低くてもGrowthとして与えるインパクトは非常に大きい。
時には破壊的な改善を考えることも大事。
nanapiではけんすうさん自ら「社名を変えることもあり」というレベルで議論をする。
何かに縛られることで発想が制限されて破壊的なアイデアが生まれないということを避けるため。
[チーム作りに関するおまけ]
新規サービスチームとGrowthのチームをFacebookではわけている。
理由は、
・新規サービスチームはコンセプトを。
・Growthチームは数字を。
大事にしており、分かり合えない(譲りたくない)ところが出てくる。
お互いが集中すべきところで集中する方が効率的。
nanapiでもやりたいなぁ・・・という話。
2. nanapiでの具体例
前提として大事なことは、「真似をしても上手くいかない」ということ。
扱っているサービスの性質、対象とするユーザー等から違うもの。
nanapiでまず考えたことは、
① Vision
② どうやるか？(How)
③ 何を見せるか？ (What)
を①、②、③の順番で考える。
この結果、nanapiのVisionは
「わからないことがあった時にそれを解決に導くサービスであれば良い。分からないことを検索した結果nanapiにたどり着いて解決すればよく、ユーザーが”nanapi"というサービスであることを認識している必要はない。」
ということになった。
このVisionを受けてnanapiが選んだ”How”は、
「SEOを鬼のようにやる」
これは、分からないことを検索したユーザーがとにかくnanapiのページにやってくる状況を実現するため。
具体的に何をやったのかはここでは割愛。
SEOを鬼のようにやる過程で、コンテンツに関しても最適化するように(開発者が腱鞘炎になるほどに)手作業で作成して行った。
3. まとめ
簡単にまとめると、
① Growth Hackは事例の中身を真似するだけじゃ結果は出ない！
② ビジョンを明確にして、立ち戻れる基準とすること！
③ その上で”改善”を文化にすること！
④ 良いGrowth Hackチームを作るには「許可より謝罪」「発見の賞賛」「継続と破壊」の3つのルールを大切にしよう！
どうしても分かりやすい事例ばかり聞きたくなりますが、実際に大事なのはGrowthさせるために必要なものを追求出来るマインドとそれを実現出来る文化を築きあげることだなと。
#2ではドリコムのtokorotenさんのお話を。
HTML CSS 真似で覚えるデザインその１ Formのスタイリング＠Facebook
今年はできるだけいろいろなサイトを真似して、練習をしていこうという試み。
第一弾はFacebookのログインページ。
本家のサイトはテーブルレイアウトを使ったりしていますが、通常は使わないほうがいいので、自分で作ったものはテーブルレイアウトは使用していません。
土台はBootstrap3.0を利用。
3.0からは”fluid”の概念がなくなり、レスポンシブレイアウトでしか作れません
レスポンシブを切る方法もあるのですが、今回は使用せずに行こうと思います。
※レスポンシブを切るには以下を参考にすると良いかも…
Facebookのログインページのレイアウトは
Header + 2Column構成で作ることができます。
まずは本家。
そして自作。
自作の方がロゴの位置などがズレているのはスクショを撮る時に縮小したせい。
本来は下のConnect~のところに合わせないといけないんだけど、ここがまだまだ甘いところ。
というか今回はフォームのスタイリングが中心なので細かいところは端折ってしまいました。
おそらくHeader部分もdiv class="container"とかで括って位置を合わせたらもう少しマシになるような・・・
フォームのスタイリングですが、
右上のようにlabelの下にformを持ってきたい時は、display: block;を使えば出来ます。
labelとinput部分を一つのdivで括り、input部分にdisplay: block;をあてればOK.
blockにしてしまうことでh1やh2を入れた時と同じ状況になります。
二つ横に並べる時はfloatで回り込ませれば大丈夫。
ポイントはfloatの解除。
clear: both;を入れたいところですが、htmlに書くのもかっこわるいので、ここは::afterを使って、要素の後にclear: both;を差し込みます。
.hoge:after {content: ''; display: block; clear: both;}とすればOK.
Bootstrapの.rowのafterにこれが設定されていたはずです。
上手く出来ています。
右側のsign up部分は一番上のName部分だけrow+col-**-6で半分にし、Bootstrapのpaddingを上書きすることでformの隙間を調整。
Chromeのdevツールを使いながら細かい調整は実施した方が良い。
Macならcommand + option+ i
WinならF12でショートカット出来ます。
作成時間はfontとか細かいところに時間をかけてしまったこともあり4時間強・・・というところ。
ゼロから書き始めたにしても時間かかり過ぎですかね。
Bootstrapのpaddingの設定にも実は苦戦したりしました。
隙間があきすぎるんですよね・・・
逆に言うと、超初心者の私でも半日あればここまではもってこれるということです。
しかも一回作ればいくらでも使い回し出来るので次からはほとんど時間がかからないはずです。(といいつつ、配色とかフォームのデザインとか細かいところを変更するとすぐに時間はたってしまうのですが・・・)
次回は既に出来ているのですが、masonry + flat designなサイトを紹介出来ればと。
凄いざっくりした感じになってしまいましたが、”新米父親”の隙間時間に書いているのでご容赦を・・・
夫になること、親になること
2012年11月に結婚
2013年11月に第一子誕生
生活環境が大きく変わり続けたこの2年。
今年は子供の成長をに合わせて変化し続ける1年になりそうです。
先日、自分の親が家に遊びにきてくれました。
11月に子供が誕生して以来、同じく東京に住む父親を中心に関西に住む母親や妹も遊びにきてくれるようになりました。
とても嬉しいことです。
なんだかんだ言って片道3時間以上かかるし、お金もかかる。
それでも遊びにきてくれるというのは、純粋に嬉しいの一言に尽きます。
こういう経験や感情はもちろん子供が出来て初めて分かったことです。
やはり経験しなければ”分かったような感じ”にしかならない。
実際に経験しないと分からないというのは、
生活の中では比較的置き去りにされやすいことのように感じます。
思い返してみると、社会人になってから色々経験しました。
①”一人暮らし”を始めた。
ずっと関西で実家暮らし。
就職して東京に出て、初めて一人暮らしなるものを経験しました。
誰に何を言われることもなく、気ままに暮らせる。
でも、今まで当たり前のようにやってもらっていたことを自分でやるようになり、改めて「養ってもらっていたんだなぁ」と実感。
これでまず、家事をやってもらっていたことに感謝する。
とともに、家に帰った時に誰かがいることや家族と会話出来ていたことのありがたみを知ります。
②”結婚生活”を始めた。
社会人3年目で奇跡の結婚。
正直、結婚なんて出来ないと思っていたのでとても幸せです。
妻は専業主婦として生活してくれたので、家に帰ると晩ご飯が出来ており何気ない会話が出来るようになりました。
なくなってから改めて得ると、ありがたみ倍増です。
どれだけ幸せなことだったのかがよくわかります。
そして、ここから新たな経験を得るわけです。
一つは”自分以外の人を養っていく”ということ。
でも、まだこの段階では大人が一人増えただけなので、金銭的な部分がメインです。
”誰かの為に働く”ということを知りました。
守るべき者が出来ると仕事の見え方も変わります。
幸せを感じる一方で不安感／焦燥感も出てきます。
働くということの意味が変化し、重みの増すタイミング。
もう一つは”他人と生きる”ということ。
妻をどんなに愛そうが、好きだろうが二人は死ぬまで他人です。
血のつながりがないことは実はとても重要なことです。
誰かを気遣いながら日々生活していくことを知ります。
何気なく見ていた”両親”もこうだったのかと考えるようになります。
③子供が生まれた。
正直これが一番大きいです。
自分はずっと”子供”として生きてきました。
が、ここで初めて”親”になるわけです。
子供の為にたくさん話しかけ、テレビを見なくなり、散歩に出かけ、やらなくなっていた家事までやるようになりました。
お風呂に入れて、笑顔を見て喜び、泣き止まないことでストレスを溜め、でも可愛さに癒され、トータルで見たら人生的には思いっきりプラスです。
”親”として、一人の命に責任を持つようになったわけです。
そして、親になって驚きました。
今までの親に対する感謝の”薄っぺらさ”を。
こんな言い方は語弊があるとは思いますが、実際経験しないことには分からないものです。
しばらくしたらこれも”薄っぺら”く感じるんでしょうが、
それはそれで正しいわけです。
新しい経験をした証拠なのですから。
”百聞は一見に如かず”
経験したことのないことはどこまでブログを読み、本を読み、話を聞き、勉強しても”経験した気になっている”だけ。
その中身の薄さに自分で気付くには、やはり何事も経験するしかない。
”これまで経験出来ていなかったことを経験すること”
これが全ての根底にあるのかもしれないなぁと思ったそんな3連休でした。
Pinterest風UI ~Masonry.js~
作る必要性が出たのでちょっと書いてみる。
http://www.pinterest.com/
TopページのUIは多くの画像が、ある意味規則性なく並んでいる。
流し見をするにはいいUIということで、社内でゆくゆく公開される(?)サービスのトップページに利用しようと。
スマホ・タブレット対応をという要請もあったので技術力不足カバーと時間の短縮の為にTwitter Bootstrapを利用して作成。
なんか特殊なのかと戸惑ったものの、実はそんなことなかったという話。
利用するのはNHKで利用されて有名になったMasonry。
使い方が分かると使いやすい。
① jsのダウンロード
"Download these docs"からまとめて落とした方が何となく良いような気がする。
これくらいの実装で困らないよっていう人は"min.js"の方を落とせば良いと思う。
利用するのはその中の"masonry.pkgd.min.js"
② jQueryの準備
jQueryのページから引っ張ってくる(http://jquery.com/download/)かGoogleのHosted Libraryを活用する(https://developers.google.com/speed/libraries/devguide#jquery)か。
jQueryのページからだと、<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
を貼付けるか、
Download the compressed, production jQuery 1.10.2
から取ってくるか。
Googleを活用する時は
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>をつかう。
③Imgesloaded.js
画像が読み込まれる前にmasonryが動くと崩れることがあるので、画像を読み込んでからmasonryを動かしたいので、imagesloaded.jsを使う。
https://github.com/desandro/imagesloaded
ここの右カラムにあるDownload zipから取得。
使うのはimagesloaded.js
<script type="text/javascript" src="../js/imagesloaded.js"></script>
をhead内に記述。
④実装
<head>内のscriptはこんな感じ。
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="../js/imagesloaded.js"></script>
maisonryを動かす為には、動かしたいところのwidthはどれくらいで・・・などの指定をしなければならないので、下記scriptをhtml内に記述。
<script>
var $container = $('#container');
$container.imagesLoaded(function(){ //imagesLoadedを入れて崩れないように
$('#container').masonry({ // id="container"の中の
itemSelector : '.item', // class="item"に対して適用
columnWidth: 270, //一列の幅サイズを指定
isAnimated: true, //スムースアニメーション設定
isFitWidth: true, //親要素の幅サイズがピッタリ
});
});
</script>
cssは
.item {
width: 250px;
margin: 10px;
float:left;
}
大事なのは
columnWidth = .itemのwidth+margin*2になっているかどうか。
上の例だと
270 = 250 + 10*2
となっているので、綺麗に動いてくれる。
じゃないと崩れる・・・
script内に記述しているオプションとしては
isAnimated: true, //スムースアニメーション設定
isFitWidth: true, //親要素の幅サイズがピッタリ
だけどこれくらいは入れた方が良いと思う。
他のオプションについては個人の自由でおkかと。
参考：オプションたち
itemSelector
整列対象のclass名を指定する。'.grid'と記述すれば「grid」が整列対象になる。
isAnimated
ウインドウサイズを変更したときにブラウザの幅に合わせて移動するアニメーションが実行される。trueまたはfalseを指定する。
isFitWidth
全体を中央に寄せる。trueまたはfalseを指定する。これとは別に、cssで基本となるボックス（grid）を囲むdiv（center）にセンタリングさせる記述をする必要がある。
isRTL
右上から左下に向かって並べたい場合に指定する。trueまたはfalseを指定する。
columnWidth
一列の幅サイズを指定する。これを使わずcssで指定することもできる。
isFitWidth
親要素の幅サイズがピッタリになる。trueまたはfalseを指定する。
gutterWidth
整理される要素間の溝の幅を指定する。数値を指定する。
containerStyle
親要素にスタイルを追加できる。
isResizable
ウィンドウサイズが変更された時に並び替えするかしないか。trueまたはfalseを指定する。
animationOptions
アニメーションオプションを指定する。
とこんな感じ。
これで最低限動くかと。
「こんな風にしたい！」
って思った時に、だいたいは探したら見つかるんですよね。
凄い便利な世の中です。
というか、便利にしてくれているエンジニアの方々に頭が上がらないなぁと思う次第です。
