2015/08/21にいいオフィスにて行われた「スタートアップにおける技術チームの作り方(http://eventdots.jp/event/567057)」の勉強会での登壇資料です。2014年から取り組み始めたフロントエンドチーム構築をどのように行っていったかをお話しました。 ※ 基本トーク中心で、資料は非常に簡素になっています。細かい内容につきましては個別にご相談ください。

1. 1
LIGにおけるフロントエンドチーム構築

2. について

3. CREATIVE
MEDIA
PROMOTION
Life is Good

4. キャンペーンサイト制作
コーポレートサイト制作
メディアサイト制作
WordPress
テンプレートプラン
ランディングページ制作
保守・運用
システム開発
CREATIVE
映像制作・運用サービス

5. LIG BANNER LIGSA
LIGPR LIGMO
LIGLIS
LIG PROMOTION
MEDIA
PROMOTION

6. シェアオフィス
観光体験販売
ゲストハウス
Life is Good

7. LIGフリースペース

8. いいオフィス

9. LAMP

11. @frontainer
Front-end Engineer
林 優一
株式会社LIG - CTO （フロントエンドチームリーダー)
AngularJS Japan User Group
フロントエンド開発・フロントエンドエンジニア育成を担当し
デザイン分野からサーバーサイド分野まで幅広く対応。
AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitで
スピーカーを務める。得意言語はJavaScript。
2015年6月にフロントエンドチームリーダー兼務のままCTO就任。

12. 本日の内容

13. フロントエンドチームの歴史

14. 2014年1月∼2015年8月の話

15. ８人 退職者なし
２人

16. 2015年8月のフロントエンドチーム

17. 取締役就任
NEW
FACE
NEW
FACE
若手グループ
中堅グループ

18. こんなメンバーと仕事をしています

19. 天然なHTML/CSS設計にいさん
CSS設計にこだわりを持っていて、Schooなどにも出演。
天然なところがあり、チーム内でのいじられキャラ。
今まさにこの時間にSchooに出ている。

20. コツコツ頑張るコスプレ娘
技術力はまだまだだが、コツコツと作業を積み重ねていける性格。
人見知りなのであまり表にはでないが、趣味が割と目立つ趣味。

21. 時間でカバーする努力家
足りないところは時間でカバーしてでもやり通す努力家。
クリエイティブにこだわりが強い。勉強会では出落ち担当。

22. チャラい風まじめエンジニア
フロントエンドからサーバーサイドまで広く対応できる。
発言や行動がチャラく見えるが、実は人見知りですごくまじめ。

23. チーム内No.1のAngularおじさん
フロントエンドチームメンバーでAngularJSの経験が一番豊富。
フロントエンド以外が弱いので、広い分野で活躍すべく精進中

24. 成長著しいAngularおじさん候補
Web経験が決して長くないが、まじめで成長著しい。
AngularJSを使ったプロジェクトにアサインされてさらに成長中。

25. 行動力No.1エンジニア
まだ入ったばかりだが、社内調整もできる行動派。
ディレクションからフロントエンドまで上流工程を中心にこなす。
NEW
FACE

26. 素直でまっすぐ期待株
本当に入ったばかりで未知数なところが多い。
素直な性格で人当たりが良いので、これからの成長に期待。
NEW
FACE

27. 2014年1月

28. 「フロントエンドチームを作って欲しい」

29. 「うちはどこの会社よりも必要としている！」

30. 熱い人だなぁと思い入社を決めた

31. 2014年4月のフロントエンドチーム

32. デザイナーから転向 サーバーサイド中心のCTO
かけもち

33. フロントエンド２人+CTOという体制
＼かけもち／

34. ルールもしっかり決まっていない

35. JavaScriptもかなり怪しい・・・

36. 「うちはどこの会社よりも必要としている！」

37. たしかに・・・

38. 技術力向上とルールの整備のために

39. HTMLは比較的きれいにしてある

40. CSSは悪くない状態

41. JSの書き方はバラバラ

42. パフォーマンスが考慮されていない

43. コメントが皆無

44. きちんと基礎から学ばないといけない

45. だが、業務時間をそれほど割けない

46. ソースコードレビュー

47. 当番制で週２回コードを出して
全員でレビュー

48. ・コーディング規約がなくてもある程度の統一ができた（命名規則など）
・パフォーマンスや読みやすいコードを心がけるようになった
・人のコードを見る機会ができ、それ自体が勉強になった
・実装で悩んでいるところを皆に相談するいい機会ができた

49. それを約１年間続けました

50. その結果、次へ進めて良いと思った

51. 2015年4月
ソースコードレビューを廃止

52. フリータイム制の導入

53. 週２回45分間のフリータイム

54. 事前にいつ何をしたいかを全員に周知
------------
フリータイム希望
8月20日（木曜日）
テーマ: 「LIGにおけるフロントエンドチーム構築法」
詳細: 21日にランサーズ・インテリジェンス合同でチームビルディングの勉強会を行うので、
そのリハーサルをかねてみんなにも聞いて欲しいです。
1年半前に３人だったLIGフロントエンドチームが、現在の形になるまでを知ることができます。
------------
勉強会しても良いし、LT会しても良いし、
もちろんコードレビューをしても良い

55. 自分で考えてチームでやりたいことを
実現する時間

56. 事前周知がない日は何も行わない

57. ・能動的に動いて考える人が増えた
・ダラダラした勉強会の時間が減った
・コントロールする責任者を立てることでリーダー育成ができる
・コミュニケーションが活性化した

58. 自分で動く大切さを体感してもらう

59. 会社に育ててもらうのではなく
エンジニア自身が制度を利用して成長できる環境づくり

60. 新しいものを取り入れる文化

61. この１年あまりで導入してみたもの

62. 開発環境 JavaScript CSS その他
Grunt
Gulp
Github
Bitbucket
Yeoman
CircleCI
NPM
Bower
PHPStorm
Charles
AngularJS
Jasmine
Mocha
Power-Assert
CoffeeScript
TypeScript
WebPack
BackboneJS
PhantomJS
Babel
OOCSS
SMACSS
BEM
AutoPrefixer
StyleGuide
Slack
ECT
EJS
GitFlow
IssueDriven

63. 良いものは積極的に

64. もちろん反対もあった

65. 「この前入れたばかりなので後にしましょう」

66. 各ツールを地道にプレゼン

67. 「うまく動作しないよー・・・」

68. 困った人がいればすぐにフォローへ

69. 現在使っていないものもあるが、
良いと思ったものは取り入れる

70. できない人がいるのは当たり前
フォローできる余裕と体制を維持する

71. ・新しいモノへの興味を持つ人が増えた
・良いものは積極的に導入する風土になってきた
・変化に対する拒絶反応が少なくなった
・それによってお仕事増えた

72. 制作フローの見直し

73. 2014年4月でのフロー

74. デザイナー エンジニアディレクター
顧客対応
仕様決め
ワイヤーフレーム
プロジェクト管理
デザイン
HTML/CSS/JS
サーバー構築
PHP
HTML/CSS/JS

75. フロントエンドを入れた形に

76. デザイナー エンジニアディレクター フロントエンド
顧客対応
仕様決め
ワイヤーフレーム
プロジェクト管理
デザイン サーバー構築
PHP
HTML/CSS/JS

77. これから目指すもの

78. デザイナー エンジニアディレクター
顧客対応
プロジェクト管理
デザイン サーバー構築
PHP
フロントエンド
HTML/CSS/JS
仕様決め
ワイヤーフレーム

79. そのための取り組み

80. デザイン・スプリント

82. Understand
（理解）
Define
（定義）
Diverge
（発散）
Decide
（決定）
Prototype
（試作）
Validate
（立証）

83. 1. プロジェクトの内容を理解する
なぜこのプロジェクトをやるのか
何を目指すのか
いつまでにやるのかをきちんと理解する
Understand
（理解）

84. 2. ターゲットユーザーを定義する
誰が使うのか
どのように使うのか
何を求めて使うのかをきちんと定義を行う
Define
（定義）

85. 3. アイデアを広げる
どうやってターゲットに届けるか
どうしたらターゲットに伝わるかを考えながらアイデアを出す。
Diverge
（発散）

86. 4. 決定していく
話し合いと投票によって軸となる機能や
UIをどんどん決定していく
Decide
（決定）

87. 5. 試作する
いきなり完成を目指すのではなくペーパーモックから作る
操作性もチェックするために簡単に動作するモックを作る
Prototype
（試作）

88. 6. 立証する
ターゲットユーザーに実際に触ってもらい、意図した通りになるか確認
エンジニアチェックにより期日に間に合うか検証
その結果がNGの場合は定義やアイデア出しからやり直して修正する
Validate
（立証）

89. ・プロジェクト関係者全員が参加
・短期間で集中して仕上げる
・メンバー全員が共通の認識を持てる
・ペルソナやプロジェクトに愛着が持てる
・ただし、関係者全員の時間を取るのは難しい

90. そのための取り組み

92. デザイナー エンジニアディレクター
顧客対応
プロジェクト管理
デザイン サーバー構築
PHP
フロントエンド
HTML/CSS/JS
仕様決め
ワイヤーフレーム

93. 制作業務以外への取り組み

94. 100%

95. LIGブログで記事公開
入社３ヶ月以内に１本、それ以降は毎月１本がノルマ

96. 75%

97. 社外勉強会での登壇経験

98. 75%

99. 書籍・雑誌の執筆経験

100. 0%

101. フロントエンドチームからの退職
＼まだ１年半ですが／

102. 課題

103. CTOとしてはまだまだこれから

104. サーバーサイドチームも含めたチーム

105. 個性が高まりチャレンジも増えたので

106. ナレッジの共有と蓄積

107. 世界展開への準備として

108. 遠隔地との連携 東京
長野
セブ島

109. 採用について

110. 採用基準

111. ・LIGのファンであること
・作ることが好きで実際にモノづくりを行っている人
・能動的な人

112. ラブレター採用
http://liginc.co.jp/news/notice/employment/171113

113. ・書類選考・筆記試験・面接などの採用選考はなし
・ラブレターだけで判断し、内定を出す
・年齢の制限はなし
・内定後にLIGの説明聞き、内定者が納得すれば入社
・メールはNG。郵送のみ。

114. ・LIGのファンであること
・作ることが好きで実際にモノづくりを行っている人
・能動的な人

115. デザイナー
サーバーサイド
エンジニア
ディレクター フロントエンド
長野(野尻湖)東京(上野)
Wantedlyで「LIG」を検索

116. または直接お声がけください
直接スカウトでは書類面接や1次・2次面接が免除されることがあります

117. 最後に

118. ・LIGはまだまだ発展途上
・足りないところがまだたくさんある
・それを一緒に改善して構築ができるチーム作り
・能動的に動ける環境を目指している
・アウトプットはこれからもどんどんやっていきます

119. 勉強会・セミナー等
一緒にこのような勉強会を行って頂ける方、ぜひLIGと一緒にやりましょう

120. ご静聴ありがとうございました