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