Building your website with team - Frontrend in Osaka

1,522 views
1,398 views

Published on

1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total views
1,522
On SlideShare
0
From Embeds
0
Number of Embeds
128
Actions
Shares
0
Downloads
13
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

Building your website with team - Frontrend in Osaka

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

×