超絶UXを実現したい！小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践【根性論と精神論編】先生：桟義雄

小規模Web制作会社でも
フロントエンドのスキルを磨く方法と実践
エンジニア桟義雄 / @katapad
Vol.1【根性論と精神論編】

桟義雄@katapad
Bascule
スーパー肩パッド
http://unko.me
かけはし
2003
文系大学を卒業
2006 2007 2010
Web業界に入る
デザイン+コーディング
Flasher Bascule入社
• Flash
• iOSネイティブアプリ
• スマホHTML
• Adobe AIR

TVとスマホを連動させた番組を作ったりしてます。
広告キャンペーンやアプリも。
広告賞も多数いただいたりしてます。
「エモーション」という言葉をよく使ってます。
宇宙と未来のニューヒーローを目指す会社です。

私の最近のお仕事
• TOYOTOWN http://www.toyotown.jp
• ポータル (HTML)
• CARS (HTML)
• IMAGINE エコドラ (Flash)
• THE DOOR (Flash + JS)
• PASSO AMIDA DRIVE (HTML + Canvas)
!
• YAHOO! 震災ビッグデータビジュアライゼーション (Flash)
• http://promo.search.yahoo.co.jp/searchfor311/

• http://www.toyotown.jp/amida-drive/
• AndroidでFPS20、iPhone4SでもFPS30
• CreateJS
• AngularJS
• 5/22(木)に最後のイベントあります

http://bapa.ac/
バスキュールとパーティーで学校をはじめることになりました。
Both Art and Programming Academy, 略してBAPA。
!
もしひとりの人間がデザインとプログラミングを両方できるとしたら、
表現の可能性はもっと広がるはず。

最近、どうですか？
フロントエンド。

すんごい覚えること
増えましたよね。

• Jade, Sass/Compass, Stylus, CoﬀeeScript, TypeScript
• Angular, Backbone, MV**
• Grunt
• スマホ対応
• パフォーマンス・チューニング
• CDN, AWS類
• WebGL, Canvas, CreateJS
• ネイティブアプリ
• Objective-C
• Java
• Titanium
• Flash / Adobe AIR
• テスト駆動開発
• CI, Jenkins
• Git
• デバイス系
• フィジカルコンピューティング

• Jade, Sass/Compass, Stylus, CoﬀeeScript, TypeScript
• Angular, Backbone, MV**
• Grunt
• スマホ対応
• パフォーマンス・チューニング
• CDN, AWS類
• WebGL, Canvas, CreateJS
• ネイティブアプリ
• Objective-C
• Java
• Titanium
• Flash / Adobe AIR
• テスト駆動開発
• CI, Jenkins
• Git
• デバイス系
• フィジカルコンピューティング
!?

現実を直視しましょう

割合的にはこんな感じ(想像)
0%
25%
50%
75%
100%
2009 2014
80%
20%
20%
80%
HTML/CSS/JS それ以外
!

今まで通りに
やってたら無理！

• どうやって時間を作る？
• どうやって覚える？
• どうやっていいものを作る？

できるひとと
できないひとの
格差社会

授業のゴール

意識が
マジですごい
高くなる
ズルを覚える

なぜ小規模Web制作としたか？

世の中には大企業のひとが
書いてる記事が多い
• 大企業だと専門職(100点求められる)
• ちっさい会社だとオールラウンダー
• 大企業での手法をそのまま小さい会社で 
適用するのはむずかしい
!
(もちろん、そうでもない場合もありますが、フロントエンドでは 
この傾向がある気がします)

オールラウンダーなら
あらゆるフィールドで
80点を取ろう

オールラウンダーなら
あらゆるフィールドで
80点を取ろう
まあ、僕は取れませんけどね

アジェンダ

1. スキルとはなにか
2. スキルが身につかないひと
3. マインドセット
4. いまからできること
アジェンダ

HTML/CSS/JSは
あたりまえ
!
それ以外で差がつく
スキルとはなにか

問題解決能力
成長する能力
プログラム能力

• 問題解決能力
• 問題把握能力
• ググる能力
• 成長する能力
• 他人から盗む能力
• ネットから入手する能力
• プログラム能力
• 設計
• コマンドライン
• 自動化(機械にまかせる)

「似たような問題をやったことがないか」

「似たような問題をやったことがないか」
→ 似たところから手法をパクればよし！

ちなみにスライドのテンプレートもヒト様の
ものをありがたく使わせてもらっています！
大体いい感じになるKeynoteテンプレート「Azusa」作った
http://goo.gl/U9VlsQ

jQueryは使える
なんでも試せばいいだけ！

スキルが
身につかないひと

やみくも
ググらない
受け身
スキルが身につかないひと

やみくも
ググらない
受け身
スキルが身につかないひと
私がそうでした

• YESマンになる
• 誰よりも速く作る
• 本気で作る
• まっすぐ成長する
• 根性論の限界を知る

YESマンになる
• 世の中には難しい課題しか残ってない
• いろんなアプリが問題を解決している
• 誰にでもできる簡単なお仕事は機械かバイトにしてもらう
• やるかやらないかを悩む時間がない
• Noと言うときは提案をする
マインドセット

誰よりも速く作る
• スピードは誰でも追い求められる
• クリエイティブ∼！な面は経験が必要
• モックを超速で作ることが成功へのカギ
• 見える・触れるようにする

本気で作る
• 制約は取っ払う
• 交渉する
• 自分で決める
• 作りきる
• 広める
• 結果を報告する

まっすぐ成長する
• 効率よく、回り道をせずに成長する
• サーバーサイドの人と仲良くなる (後述)
• 怒られてるひとを観察する (後述)
• 問題解決能力の高い人を見つける (後述)
• 武井壮も言ってる
• 武井壮が語った「スポーツが短期間で上達するコツ」が説得力あり過
ぎてスゴい http://goo.gl/c35R9B

根性論の限界を知る
• 根性で乗り切れた時代はFlashの時代
• でも、根性がなければクオリティには表れない
「根性に逃げるな」

えらい！
ここまで見たあなたは…
休憩します
ものすごく疲れてると思うので

質問
今後フロントエンドをやっていくうえで重要
だとおもうスキルとはなんですか？

1. カンヌ広告祭などを見る
2. 一軍に上がる
3. Yesしか言わない
4. スマホの実装をする
5. ライバルを作る
6. サイトの感想文を書く
7. 効率よく情報を集める
8. 経験の量を増やす
9. 無駄なシェアをしない
10. 他人から盗む
いまからできること

1.カンヌ広告祭などを見る

カンヌ広告祭などを見る(1)
• カンヌ国際広告祭
• One Show
• Yahoo! Japan インターネットクリエイティブアワード
• 東京インタラクティブ・アド・アワード(休止中)

カンヌ広告祭などを見る(2)
• 作品紹介ページを見てプレゼンの仕方を盗む
• Mission→Solution→Result
• PARTY 清水幹太さんのブログは必見
• qlog » 私は広告賞を獲りたかった http://goo.gl/xrryW
• ジェラシーと怨念

2.一軍に上がる

一軍に上がる
• 二軍には更新案件しかない
• 一軍 = 責任を負う = プロジェクトを成功さす
• どこに失敗が存在するか、をチェックする
• 埋もれているひとに、評価をくだすことはできない
• 小規模制作会社なら、上司=評価してくれる人は少ない
• 他のひとにも自分をわかりやすくアッピール！

3.Yesしか言わない

Yesしか言わない
• 世の中には難しい課題しか残ってない
• 即答でYES！
• オノ・ヨーコもYESと言っている
• オノ・ヨーコ - Wikipedia 
http://goo.gl/zjiWV

1. カンヌ広告祭などを見る
2. 一軍に上がる
3. Yesしか言わない
4. スマホの実装をする
5. ライバルを作る
6. サイトの感想文を書く
7. 効率よく情報を集める
8. 経験の量を増やす
9. 無駄な所作をしない

4.スマホの実装をする

スマホの実装をする
• 実現可能性がとても重要
• 落とし穴だらけ
• デザイナーに注文をつけることも
• 「この表現は重いので、こうしてください」
• 必然的にトレードオフを考える
• 自分で判断をくだし、説明をする
• 責任を持てるようになる

「フィージビリティ」
「トレードオフ」
言えるとかっこいい
ひとつ上の男感ある

5.ライバルを作る

ライバルを作る
• ライバルより劣るものは作りたくなくなる
• 自分の長所が見えてくる 
+ 長所を伸ばせるようになる

6.サイトの感想文を書く

サイトの感想文を書く
• クソサイトの研究
• なぜダメなのか
• 俺だったらこう作る
• 優良サイトの推薦文を書く
• 自分の作ったサイトを推薦するときのために

7.効率よく情報を集める

効率よく情報を集める(1)
• JS界隈の有名人のTwitterを追う
• JS界隈の話題のブログをチェケラする
• HTML5Experts.jp (http://html5experts.jp/)
• JSer.info (http://jser.info/)

• 追いかける情報と追いかけない情報を決める
• 本が出たものから試す
• 本のほうがググるより体系的に素早く学べる
• 多数派に流れる
• StylusよりSass/Compass
• IDEがあるものから試す
• WebStormならsassのほうがStylusより早くサポートされていた

• ドットインストールを見る
• ひととおり全部見てみる
• 労力なく基本の「き」がわかる
• unixコマンド、サーバー構築、sed, awk
• Qiitaを眺める
• 基本がわかったら応用
• Github Exploreを眺める
• GitHub に Explore というのがあるというのを最近知った - Qiita 
http://goo.gl/b2YRb2

8.経験の量を増やす

経験の量を増やす(1)
• 仕事だけでは幅が広がらない
• 毎日ブログを書く
• カタチにすることを覚える
• 魅力的に伝える
• 技術の伝え方を知る
• Qiitaもよし
• Qiitaはストック数の競い合いになっている
• Qiitaでは効率よい + キャッチーな伝え方が求められる

経験の量を増やす(2)
• たまに作品をつくる
• 自分のしたいことを発散する
• 他人の目に留まるきっかけ
• ディスられることもある
• 私事ですが、CreateJSのサンプル作ったら、Yahooニュースに載りました。
• フリーズ注意！ Webサイト「与沢翼が秒速で億を稼ぐそうです。」公開（KAI-
YOU.net） - Yahoo!ニュース 
http://goo.gl/YdcCna

9.無駄なシェアをしない！
(精神論)

無駄なシェアをしない！
(精神論)
• この業界には寿司クラスタ、肉クラスタが存在するが……
• Facebookでご飯の写真をシェアしない！！
• シェアしてる人は「すごろくであがり」になったひと…
• 寿司職人を目指すならよし！！
• でも、そんなヒマがあればQiitaを眺めてたほうがよし！！

私がシェアした寿司
いいね数:6

私がシェアした寿司
いいね数:6
いいね！もらえるかどうかで
そわそわするくらいなら
Qiita見てるほうが100倍マシ
(個人の感想です)

他人から盗む(1)
• 他人を採点する
• 自分との違いを認識する
• レーダーチャートを作る
• 他人と一緒に仕事をするときのシミューレーション

• 問題解決能力の高い人から盗む
• 難しい課題を相談してみると、思考回路の違いがわかる
• 「これ、和田さんやったらどうやって実装します？」
• 自分の悪いところが浮き彫りになる

• サーバーサイドの人から盗む
• 自動化を教えてもらう
• プログラムの知識
• フロントでは直面しにくい課題をこなしていたりする

• 怒られているひとを観察する
• 怒られている = 期待されていることと結果に差異がある
• 期待されいていることを理解しやすい

いろいろ言いましたが
もうあのスライドみたいに
なってるはず

次回予告
来週は実践編です

• すんごい頑張って作ったサイトの実際の作り方
• 自動化のはなし
• Grunt
• Jenkins
• SlicyとかPSDの効率化
• 他人との働き方
• 新しい技術を使うときの注意点

フロントエンドのひと
募集中
• バスキュールではフロントエンドのひとを募集しています。
• 「俺のほうが意識高い！」
• 「そんなズルはズルくもなんともない！」
• という人はぜひ来てください！

社内のひとで、ライバルと言えるひとを考えてみましょう。
そのひとのレーダーチャートを作ってみましょう。

超絶UXを実現したい！小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践【根性論と精神論編】先生：桟義雄

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (20)

Similar to 超絶UXを実現したい！小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践【根性論と精神論編】先生：桟義雄

Similar to 超絶UXを実現したい！小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践【根性論と精神論編】先生：桟義雄 (20)

More from schoowebcampus

More from schoowebcampus (20)

Recently uploaded

Recently uploaded (9)