Embed Size (px)
Citation preview
Building your websitewith team
Frontrend in Osaka x Re:Creator’s Kansai2013.9.4@ku_suke
About meYusuke Kawabata
@ku_suke
CyberAgent Inc.
Ameba Osaka managerSenior CopyPaste Programmer
大阪でソシャゲ作ってます。
前職はiPhone屋さん。
どちらかと言うとフロントの人ではない ＼(^o^)／
宣伝。先日本を出しました。
iPhoneアプリを作る方、デザインをする方は、
参考にしてみてください！
プログラミング「以外」全部を解説しました。
Agenda
★３人のレンガ職人の話
★プロダクトの存在意義
★フロントの上流工程技術
★ユーザに一番近いフロントができること
The Three Bricklayers3人のレンガ職人のおはなし
The Three Bricklayers
あるところに、３人のレンガ職人が作業をしていました。それぞれに
「あなたは何をしているのですか？」
と尋ねると・・
The Three Bricklayers
1人目は「わたしは見ての通りレンガを積んでいます」と答えた。
２人目は「私は家族を養うために壁を作っています」と答えた。
The Three Bricklayers
３人目は「私は皆が祈りを捧げる教会を作っています」と答えた。
The Three Fronts...3人のフロント職人のおはなし
The Three Fronts
1人めのフロント職人「HTML(PSD)を書いてます」
2人め「RWDでペライチページ作ってます」
３人め「不動産の問い合わせを獲得するた
めのLPを作っています。」
注意。今日はどれがいいという話ではありません。
フロントが全工程にもっと進出する話
３人目だったらこうする。
What is your product for?
何のためにプロダクトはあるの？
プロダクトの存在意義
★ビジネスゴールを達成するため
★ユーザーゴールを達成するため
★That’s all!
Business Goal?ってなんぞや
集客したい儲けたい★商品を売りたい（ECサイト）
★有料サービスを購入してほしい
★商品を売るための見込み客の獲得（高額商材・車・住宅・B2B）
★ユーザの獲得
ユーザーゴールは？
★ユーザが「やりたい」事
★天気予報を確認したい
★長靴を買いたい
★友だちの日記を読みたい
満たしたいゴール×
多様な接点(=手段)
多様化する接点
★Webサイト（PC）／モバイル(スマホ)
★Facebookページ/twitterアカウント
★iPhone/Androidアプリ
★広告
ユーザの目にふれるのは常にフロント
フロント≠最終工程
★プログラマーがサーバ側を作って
★デザイナーがデザインを作って
★フロントって最後の工程だから口出しできないよね。
フロント≠最終工程
★プログラマーがサーバ側を作って
★デザイナーがデザインを作って
★フロントって最後の工程だから口出しできないよね。
フロント＝上流も。
★今日は３つの上流技術を取り上げます。
★Information Architect
★ユーザ回遊の最適化
★運用することが大事
Information Architect
★「情報」の見せ方を設計する。
★どのようなユーザに何を見せるか。
最近のネット記事
最近のネット記事
最近のネット記事
http://uid-lab.tumblr.com/post/58605815304/gunosy-ui
情報を設計するのは誰？
★フロントでしょ！！
★プロダクトオーナーが示したターゲットやユーザ層に向けて何を見せ何を隠すか。
★LWDとかパララックスはひとつの手法でしかない。
回遊の最適化チャネルを意識する
回遊の最適化PCサイトSPサイト
回遊の最適化PCサイトSPサイト
人気記事
回遊の最適化PCサイトSPサイト
人気記事
拡散！
回遊の最適化PCサイトSPサイト
人気記事
流入！
回遊の最適化PCサイトSPサイト
人気記事
広告タグ
第三者サイト
リタゲ広告
回遊の最適化PCサイトSPサイト
人気記事
広告タグ
第三者サイト自社の公式メディア
回遊時に必要なもの★OpenGraphタグ、TwitterCards
★（短縮リンクの）クリックカウント
★GA等の場合、流入キャンペーン設定
★各種広告用タグ
★なにより先ほどのサイト構造設計重要！
回遊時に必要なもの★OpenGraphタグ、TwitterCards
★（短縮リンクの）クリックカウント
★GA等の場合、流入キャンペーン設定
★各種広告用タグ
★なにより先ほどのサイト構造設計重要！
ぜんぶHTMLまわり!
→サイト公開前に事前に準備しよう
運用＋マーケティング作って終わりじゃない！
運用してなんぼ★先ほど出た流入や広告の設計を見ながら
徐々に改善を加えていくのが一般的な運営
★ソーシャルメディアも育ててなんぼ
★担当者が変わっても、情報設計や回遊設計、PDCAサイクルが決まっていればうまくまわっていく
★上流工程と最後の工程を両方押さえる！
フロントの基準作り★先回りして、ゴールを満たすための基準を策定
★ローディング時間基準
★ページサイズ・リクエスト数の基準
★導線とURLリソースの対応表
★対応ブラウザ（Internetなんちゃらとか）
★先回り
例えばロード★画像は全て最適化すること
★共通部品はスプライト化すること
★小さな画像は埋め込みにすること
★DOMロードまでを１秒以内にすること
★etc
基準を作り、ビジネスゴールと結びつけることで、不毛な作業を減らせる。
先手必勝。
やられたらやりかえす！
フロントができること★それは、上流からWebサイトを中心とした
ビジネスとユーザのゴールを満たすこと。
★決して頼まれたものを「再現」する仕事ではない。
★環境や技術が多様化している現状をもう一度見つめなおそう。
フロント技術×
ビジネスセンス
例：パフォーマンス
★HTML書く。CSS書く。JS書く。
★読み込み、レンダリング気を使う。
例：パフォーマンス
★HTML書く。CSS書く。JS書く。
★読み込み、レンダリング気を使う。
★GoogleAnalytics追加←New
例：パフォーマンス
★HTML書く。CSS書く。JS書く。
★読み込み、レンダリング気を使う。
★GoogleAnalytics追加
★リターゲティング効果測定追加←New!
例：パフォーマンス★HTML書く。CSS書く。JS書く。
★読み込み、レンダリング気を使う。
★GoogleAnalytics追加
★リターゲティング効果測定追加
★このブログパーツ貼っといて←New!
！？
本当にそのタグ必要？だいたいマーケティング担当者はわかってない。
自分の場合
★もともとプログラマーだった。
★よくあるキャリアパスでプロマネになった。
★マーケティングを覚えた。
★仕事の幅が広がった。
作り手が、ビジネスも学ぶと、いい事たくさん。
一緒に学んでいきましょう
