Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2015/08/21にいいオフィスにて行われた「スタートアップにおける技術チームの作り方(http://eventdots.jp/event/567057)」の勉強会での登壇資料です。2014年から取り組み始めたフロントエンドチーム構築をどのように行っていったかをお話しました。

※ 基本トーク中心で、資料は非常に簡素になっています。細かい内容につきましては個別にご相談ください。

  • Be the first to comment

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

  1. 1. 1 LIGにおけるフロントエンドチーム構築
  2. 2. について
  3. 3. CREATIVE MEDIA PROMOTION Life is Good
  4. 4. キャンペーンサイト制作 コーポレートサイト制作 メディアサイト制作 WordPress テンプレートプラン ランディングページ制作 保守・運用 システム開発 CREATIVE 映像制作・運用サービス
  5. 5. LIG BANNER LIGSA LIGPR LIGMO LIGLIS LIG PROMOTION MEDIA PROMOTION
  6. 6. シェアオフィス 観光体験販売 ゲストハウス Life is Good
  7. 7. LIGフリースペース
  8. 8. いいオフィス
  9. 9. LAMP
  10. 10. @frontainer Front-end Engineer 林 優一 株式会社LIG - CTO (フロントエンドチームリーダー) AngularJS Japan User Group フロントエンド開発・フロントエンドエンジニア育成を担当し デザイン分野からサーバーサイド分野まで幅広く対応。 AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitで スピーカーを務める。得意言語はJavaScript。 2015年6月にフロントエンドチームリーダー兼務のままCTO就任。
  11. 11. 本日の内容
  12. 12. フロントエンドチームの歴史
  13. 13. 2014年1月∼2015年8月の話
  14. 14. 8人 退職者なし 2人
  15. 15. 2015年8月のフロントエンドチーム
  16. 16. 取締役就任 NEW FACE NEW FACE 若手グループ 中堅グループ
  17. 17. こんなメンバーと仕事をしています
  18. 18. 天然なHTML/CSS設計にいさん CSS設計にこだわりを持っていて、Schooなどにも出演。
 天然なところがあり、チーム内でのいじられキャラ。
 今まさにこの時間にSchooに出ている。
  19. 19. コツコツ頑張るコスプレ娘 技術力はまだまだだが、コツコツと作業を積み重ねていける性格。
 人見知りなのであまり表にはでないが、趣味が割と目立つ趣味。
  20. 20. 時間でカバーする努力家 足りないところは時間でカバーしてでもやり通す努力家。
 クリエイティブにこだわりが強い。勉強会では出落ち担当。
  21. 21. チャラい風まじめエンジニア フロントエンドからサーバーサイドまで広く対応できる。
 発言や行動がチャラく見えるが、実は人見知りですごくまじめ。
  22. 22. チーム内No.1のAngularおじさん フロントエンドチームメンバーでAngularJSの経験が一番豊富。
 フロントエンド以外が弱いので、広い分野で活躍すべく精進中
  23. 23. 成長著しいAngularおじさん候補 Web経験が決して長くないが、まじめで成長著しい。
 AngularJSを使ったプロジェクトにアサインされてさらに成長中。
  24. 24. 行動力No.1エンジニア まだ入ったばかりだが、社内調整もできる行動派。
 ディレクションからフロントエンドまで上流工程を中心にこなす。 NEW FACE
  25. 25. 素直でまっすぐ期待株 本当に入ったばかりで未知数なところが多い。
 素直な性格で人当たりが良いので、これからの成長に期待。 NEW FACE
  26. 26. 2014年1月
  27. 27. 「フロントエンドチームを作って欲しい」
  28. 28. 「うちはどこの会社よりも必要としている!」
  29. 29. 熱い人だなぁと思い入社を決めた
  30. 30. 2014年4月のフロントエンドチーム
  31. 31. デザイナーから転向 サーバーサイド中心のCTO かけもち
  32. 32. フロントエンド2人+CTOという体制 \かけもち/
  33. 33. ルールもしっかり決まっていない
  34. 34. JavaScriptもかなり怪しい・・・
  35. 35. 「うちはどこの会社よりも必要としている!」
  36. 36. たしかに・・・
  37. 37. 技術力向上とルールの整備のために
  38. 38. HTMLは比較的きれいにしてある
  39. 39. CSSは悪くない状態
  40. 40. JSの書き方はバラバラ
  41. 41. パフォーマンスが考慮されていない
  42. 42. コメントが皆無
  43. 43. きちんと基礎から学ばないといけない
  44. 44. だが、業務時間をそれほど割けない
  45. 45. ソースコードレビュー
  46. 46. 当番制で週2回コードを出して 全員でレビュー
  47. 47. ・コーディング規約がなくてもある程度の統一ができた(命名規則など) ・パフォーマンスや読みやすいコードを心がけるようになった ・人のコードを見る機会ができ、それ自体が勉強になった ・実装で悩んでいるところを皆に相談するいい機会ができた
  48. 48. それを約1年間続けました
  49. 49. その結果、次へ進めて良いと思った
  50. 50. 2015年4月 ソースコードレビューを廃止
  51. 51. フリータイム制の導入
  52. 52. 週2回45分間のフリータイム
  53. 53. 事前にいつ何をしたいかを全員に周知 ------------ フリータイム希望 8月20日(木曜日) テーマ: 「LIGにおけるフロントエンドチーム構築法」 詳細: 21日にランサーズ・インテリジェンス合同でチームビルディングの勉強会を行うので、 そのリハーサルをかねてみんなにも聞いて欲しいです。 1年半前に3人だったLIGフロントエンドチームが、現在の形になるまでを知ることができます。 ------------ 勉強会しても良いし、LT会しても良いし、
 もちろんコードレビューをしても良い
  54. 54. 自分で考えてチームでやりたいことを
 実現する時間
  55. 55. 事前周知がない日は何も行わない
  56. 56. ・能動的に動いて考える人が増えた ・ダラダラした勉強会の時間が減った ・コントロールする責任者を立てることでリーダー育成ができる ・コミュニケーションが活性化した
  57. 57. 自分で動く大切さを体感してもらう
  58. 58. 会社に育ててもらうのではなく エンジニア自身が制度を利用して成長できる環境づくり
  59. 59. 新しいものを取り入れる文化
  60. 60. この1年あまりで導入してみたもの
  61. 61. 開発環境 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
  62. 62. 良いものは積極的に
  63. 63. もちろん反対もあった
  64. 64. 「この前入れたばかりなので後にしましょう」
  65. 65. 各ツールを地道にプレゼン
  66. 66. 「うまく動作しないよー・・・」
  67. 67. 困った人がいればすぐにフォローへ
  68. 68. 現在使っていないものもあるが、 良いと思ったものは取り入れる
  69. 69. できない人がいるのは当たり前 フォローできる余裕と体制を維持する
  70. 70. ・新しいモノへの興味を持つ人が増えた ・良いものは積極的に導入する風土になってきた ・変化に対する拒絶反応が少なくなった ・それによってお仕事増えた
  71. 71. 制作フローの見直し
  72. 72. 2014年4月でのフロー
  73. 73. デザイナー エンジニアディレクター 顧客対応 仕様決め ワイヤーフレーム プロジェクト管理 デザイン HTML/CSS/JS サーバー構築 PHP HTML/CSS/JS
  74. 74. フロントエンドを入れた形に
  75. 75. デザイナー エンジニアディレクター フロントエンド 顧客対応 仕様決め ワイヤーフレーム プロジェクト管理 デザイン サーバー構築 PHP HTML/CSS/JS
  76. 76. これから目指すもの
  77. 77. デザイナー エンジニアディレクター 顧客対応 プロジェクト管理 デザイン サーバー構築 PHP フロントエンド HTML/CSS/JS 仕様決め ワイヤーフレーム
  78. 78. そのための取り組み
  79. 79. デザイン・スプリント
  80. 80. Understand (理解) Define (定義) Diverge (発散) Decide (決定) Prototype (試作) Validate (立証)
  81. 81. 1. プロジェクトの内容を理解する なぜこのプロジェクトをやるのか 何を目指すのか いつまでにやるのかをきちんと理解する Understand (理解)
  82. 82. 2. ターゲットユーザーを定義する 誰が使うのか どのように使うのか 何を求めて使うのかをきちんと定義を行う Define (定義)
  83. 83. 3. アイデアを広げる どうやってターゲットに届けるか どうしたらターゲットに伝わるかを考えながらアイデアを出す。 Diverge (発散)
  84. 84. 4. 決定していく 話し合いと投票によって軸となる機能や UIをどんどん決定していく Decide (決定)
  85. 85. 5. 試作する いきなり完成を目指すのではなくペーパーモックから作る 操作性もチェックするために簡単に動作するモックを作る Prototype (試作)
  86. 86. 6. 立証する ターゲットユーザーに実際に触ってもらい、意図した通りになるか確認 エンジニアチェックにより期日に間に合うか検証 その結果がNGの場合は定義やアイデア出しからやり直して修正する Validate (立証)
  87. 87. ・プロジェクト関係者全員が参加 ・短期間で集中して仕上げる ・メンバー全員が共通の認識を持てる ・ペルソナやプロジェクトに愛着が持てる ・ただし、関係者全員の時間を取るのは難しい
  88. 88. そのための取り組み
  89. 89. デザイナー エンジニアディレクター 顧客対応 プロジェクト管理 デザイン サーバー構築 PHP フロントエンド HTML/CSS/JS 仕様決め ワイヤーフレーム
  90. 90. 制作業務以外への取り組み
  91. 91. 100%
  92. 92. LIGブログで記事公開 入社3ヶ月以内に1本、それ以降は毎月1本がノルマ
  93. 93. 75%
  94. 94. 社外勉強会での登壇経験
  95. 95. 75%
  96. 96. 書籍・雑誌の執筆経験
  97. 97. 0%
  98. 98. フロントエンドチームからの退職 \まだ1年半ですが/
  99. 99. 課題
  100. 100. CTOとしてはまだまだこれから
  101. 101. サーバーサイドチームも含めたチーム
  102. 102. 個性が高まりチャレンジも増えたので
  103. 103. ナレッジの共有と蓄積
  104. 104. 世界展開への準備として
  105. 105. 遠隔地との連携 東京 長野 セブ島
  106. 106. 採用について
  107. 107. 採用基準
  108. 108. ・LIGのファンであること ・作ることが好きで実際にモノづくりを行っている人 ・能動的な人
  109. 109. ラブレター採用 http://liginc.co.jp/news/notice/employment/171113
  110. 110. ・書類選考・筆記試験・面接などの採用選考はなし ・ラブレターだけで判断し、内定を出す ・年齢の制限はなし ・内定後にLIGの説明聞き、内定者が納得すれば入社 ・メールはNG。郵送のみ。
  111. 111. ・LIGのファンであること ・作ることが好きで実際にモノづくりを行っている人 ・能動的な人
  112. 112. デザイナー サーバーサイド
 エンジニア ディレクター フロントエンド 長野(野尻湖)東京(上野) Wantedlyで「LIG」を検索
  113. 113. または直接お声がけください 直接スカウトでは書類面接や1次・2次面接が免除されることがあります
  114. 114. 最後に
  115. 115. ・LIGはまだまだ発展途上 ・足りないところがまだたくさんある ・それを一緒に改善して構築ができるチーム作り ・能動的に動ける環境を目指している ・アウトプットはこれからもどんどんやっていきます
  116. 116. 勉強会・セミナー等 一緒にこのような勉強会を行って頂ける方、ぜひLIGと一緒にやりましょう
  117. 117. ご静聴ありがとうございました

×