1. Building your website
with team
Frontrend in Osaka x Re:Creator’s Kansai
2013.9.4
@ku_suke

2. About me
Yusuke Kawabata
@ku_suke

3. CyberAgent Inc.
Ameba Osaka manager
Senior CopyPaste Programmer
大阪でソシャゲ作ってます。
前職はiPhone屋さん。
どちらかと言うとフロントの
人ではない ＼(^o^)／

4. 宣伝。
先日本を出しました。
iPhoneアプリを作る方、
デザインをする方は、
参考にしてみてください！
プログラミング「以外」
全部を解説しました。

5. Agenda
★３人のレンガ職人の話
★プロダクトの存在意義
★フロントの上流工程技術
★ユーザに一番近いフロントができること

6. The Three Bricklayers
3人のレンガ職人のおはなし

7. The Three Bricklayers
あるところに、３人のレンガ職人が作
業をしていました。それぞれに
「あなたは何をしているのですか？」
と尋ねると・・

8. The Three Bricklayers
1人目は「わたしは見ての通りレンガ
を積んでいます」と答えた。
２人目は「私は家族を養うために壁
を作っています」と答えた。

9. The Three Bricklayers
３人目は「私は皆が祈りを捧げる
教会を作っています」と答えた。

10. The Three Fronts...
3人のフロント職人のおはなし

11. The Three Fronts
1人めのフロント職人
「HTML(PSD)を書いてます」
2人め
「RWDでペライチページ作ってます」
３人め
「不動産の問い合わせを獲得するた
めのLPを作っています。」

12. 注意。
今日はどれがいいという話ではありません。

13. フロントが全工程に
もっと進出する話
３人目だったらこうする。

14. What is your product
for?
何のためにプロダクトはあるの？

15. プロダクトの存在意義
★ビジネスゴールを達成するため
★ユーザーゴールを達成するため
★That’s all!

16. Business Goal?
ってなんぞや

17. 集客したい けたい
★商品を売りたい（ECサイト）
★有料サービスを購入してほしい
★商品を売るための見込み客の獲得
（高額商材・車・住宅・B2B）
★ユーザの獲得

18. ユーザーゴールは？
★ユーザが「やりたい」事
★天気予報を確認したい
★長靴を買いたい
★友だちの日記を読みたい

19. 満たしたいゴール
×
多様な接点(=手段)

20. 多様化する接点
★Webサイト（PC）／モバイル(スマホ)
★Facebookページ/twitterアカウント
★iPhone/Androidアプリ
★広告

21. ユーザの目にふれる
のは常にフロント

22. フロント≠最終工程
★プログラマーがサーバ側を作って
★デザイナーがデザインを作って
★フロントって最後の工程だから
口出しできないよね。

23. フロント≠最終工程
★プログラマーがサーバ側を作って
★デザイナーがデザインを作って
★フロントって最後の工程だから
口出しできないよね。

24. フロント＝上流も。
★今日は３つの上流技術を取り上げます。
★Information Architect
★ユーザ回遊の最適化
★運用することが大事

25. Information Architect
★「情報」の見せ方を設計する。
★どのようなユーザに何を見せるか。

26. 最近のネット記事

27. 最近のネット記事

28. 最近のネット記事
http://uid-lab.tumblr.com/post/58605815304/gunosy-ui

29. 情報を設計するのは誰？
★フロントでしょ！！
★プロダクトオーナーが示したターゲットや
ユーザ層に向けて何を見せ何を隠すか。
★LWDとかパララックスはひとつの手法で
しかない。

30. 回遊の最適化
チャネルを意識する

31. 回遊の最適化
PCサイト
SPサイト

32. 回遊の最適化
PCサイト
SPサイト
人気
記事

33. 回遊の最適化
PCサイト
SPサイト
人気
記事
拡散！

34. 回遊の最適化
PCサイト
SPサイト
人気
記事
流入！

35. 回遊の最適化
PCサイト
SPサイト
人気
記事
広告
タグ
第三者サイト
リタゲ
広告

36. 回遊の最適化
PCサイト
SPサイト
人気
記事
広告
タグ
第三者サイト
自社の公式
メディア

37. 回遊時に必要なもの
★OpenGraphタグ、TwitterCards
★（短縮リンクの）クリックカウント
★GA等の場合、流入キャンペーン設定
★各種広告用タグ
★なにより先ほどのサイト構造設計重要！

38. 回遊時に必要なもの
★OpenGraphタグ、TwitterCards
★（短縮リンクの）クリックカウント
★GA等の場合、流入キャンペーン設定
★各種広告用タグ
★なにより先ほどのサイト構造設計重要！
ぜんぶHTMLまわり!
→サイト公開前に事前に準備しよう

39. 運用＋マーケティング
作って終わりじゃない！

40. 運用してなんぼ
★先ほど出た流入や広告の設計を見ながら
徐々に改善を加えていくのが一般的な運営
★ソーシャルメディアも育ててなんぼ
★担当者が変わっても、情報設計や回遊
設計、PDCAサイクルが決まっていれば
うまくまわっていく
★上流工程と最後の工程を両方押さえる！

41. フロントの基準作り
★ 先回りして、ゴールを満たすための基準を策定
★ ローディング時間基準
★ ページサイズ・リクエスト数の基準
★ 導線とURLリソースの対応表
★ 対応ブラウザ（Internetなんちゃらとか）
★ 先回り

42. 例えばロード
★画像は全て最適化すること
★共通部品はスプライト化すること
★小さな画像は埋め込みにすること
★DOMロードまでを１秒以内にすること
★etc

43. 基準を作り、ビジネスゴー
ルと結びつけることで、
不毛な作業を減らせる。

44. 先手必勝。

45. やられたらやりかえす！

46. フロントができること
★それは、上流からWebサイトを中心とした
ビジネスとユーザのゴールを満たすこと。
★決して頼まれたものを「再現」する仕事
ではない。
★環境や技術が多様化している現状を
もう一度見つめなおそう。

47. フロント技術
×
ビジネスセンス

48. 例：パフォーマンス
★HTML書く。CSS書く。JS書く。
★読み込み、レンダリング気を使う。

49. 例：パフォーマンス
★HTML書く。CSS書く。JS書く。
★読み込み、レンダリング気を使う。
★GoogleAnalytics追加←New

50. 例：パフォーマンス
★HTML書く。CSS書く。JS書く。
★読み込み、レンダリング気を使う。
★GoogleAnalytics追加
★リターゲティング効果測定追加←New!

51. 例：パフォーマンス
★HTML書く。CSS書く。JS書く。
★読み込み、レンダリング気を使う。
★GoogleAnalytics追加
★リターゲティング効果測定追加
★このブログパーツ貼っといて←New!

52. ！？

53. 本当にそのタグ必要？
だいたいマーケティング担当者はわかってない。

54. 自分の場合
★もともとプログラマーだった。
★よくあるキャリアパスでプロマネになった。
★マーケティングを覚えた。
★仕事の幅が広がった。

55. 作り手が、ビジネスも
学ぶと、いい事たくさん。
一緒に学んでいきましょう