1

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

について

CREATIVE MEDIA PROMOTION Life is Good

キャンペーンサイト制作

コーポレートサイト制作

メディアサイト制作

WordPress テンプレートプラン

ランディングページ制作

保守・運用

システム開発

CREATIVE

映像制作・運用サービス

LIG BANNER LIGSA

LIGPR LIGMO

LIGLIS

LIG PROMOTION

MEDIA PROMOTION

シェアオフィス

観光体験販売

ゲストハウス

Life is Good

LIGフリースペース

いいオフィス

LAMP

@frontainerFront-end Engineer

林　優一

株式会社LIG - CTO （フロントエンドチームリーダー)

AngularJS Japan User Group

フロントエンド開発・フロントエンドエンジニア育成を担当し デザイン分野からサーバーサイド分野まで幅広く対応。 AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitで

スピーカーを務める。得意言語はJavaScript。

2015年6月にフロントエンドチームリーダー兼務のままCTO就任。

本日の内容

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

2014年1月～2015年8月の話

８人 退職者なし

２人

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

取締役就任

NEW FACE

NEW FACE

若手グループ

中堅グループ

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

天然なHTML/CSS設計にいさん

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

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

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

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

チーム内No.1のAngularおじさん

フロントエンドチームメンバーでAngularJSの経験が一番豊富。フロントエンド以外が弱いので、広い分野で活躍すべく精進中

成長著しいAngularおじさん候補

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

行動力No.1エンジニア

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

NEW FACE

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

NEW FACE

2014年1月

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

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

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

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

デザイナーから転向 サーバーサイド中心のCTO

かけもち

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

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

JavaScriptもかなり怪しい・・・

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

たしかに・・・

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

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

CSSは悪くない状態

JSの書き方はバラバラ

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

コメントが皆無

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

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

ソースコードレビュー

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

・コーディング規約がなくてもある程度の統一ができた（命名規則など）

・パフォーマンスや読みやすいコードを心がけるようになった

・人のコードを見る機会ができ、それ自体が勉強になった

・実装で悩んでいるところを皆に相談するいい機会ができた

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

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

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

フリータイム制の導入

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

事前にいつ何をしたいかを全員に周知

------------

フリータイム希望

8月20日（木曜日）

テーマ: 「LIGにおけるフロントエンドチーム構築法」

詳細: 21日にランサーズ・インテリジェンス合同でチームビルディングの勉強会を行うので、 そのリハーサルをかねてみんなにも聞いて欲しいです。 1年半前に３人だったLIGフロントエンドチームが、現在の形になるまでを知ることができます。

------------

勉強会しても良いし、LT会しても良いし、もちろんコードレビューをしても良い

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

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

・能動的に動いて考える人が増えた

・ダラダラした勉強会の時間が減った

・コントロールする責任者を立てることでリーダー育成ができる

・コミュニケーションが活性化した

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

会社に育ててもらうのではなく

エンジニア自身が制度を利用して成長できる環境づくり

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

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

開発環境 JavaScript CSS その他

GruntGulpGithubBitbucketYeomanCircleCINPMBowerPHPStormCharles

AngularJSJasmineMochaPower-Assert CoffeeScriptTypeScriptWebPackBackboneJSPhantomJSBabel

OOCSSSMACSSBEMAutoPrefixerStyleGuide

SlackECTEJSGitFlowIssueDriven

良いものは積極的に

もちろん反対もあった

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

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

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

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

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

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

・新しいモノへの興味を持つ人が増えた

・良いものは積極的に導入する風土になってきた

・変化に対する拒絶反応が少なくなった

・それによってお仕事増えた

制作フローの見直し

2014年4月でのフロー

デザイナー エンジニアディレクター

顧客対応 仕様決め

ワイヤーフレーム プロジェクト管理

デザイン HTML/CSS/JS

サーバー構築 PHP

HTML/CSS/JS

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

デザイナー エンジニアディレクター フロントエンド

顧客対応 仕様決め

ワイヤーフレーム プロジェクト管理

デザイン サーバー構築 PHP

HTML/CSS/JS

これから目指すもの

デザイナー エンジニアディレクター

顧客対応 プロジェクト管理

デザイン サーバー構築 PHP

フロントエンド

HTML/CSS/JS

仕様決め ワイヤーフレーム

そのための取り組み

デザイン・スプリント

Understand （理解）

Define （定義）

Diverge （発散）

Decide （決定）

Prototype （試作）

Validate （立証）

1. プロジェクトの内容を理解する

なぜこのプロジェクトをやるのか 何を目指すのか いつまでにやるのかをきちんと理解する

Understand （理解）

2. ターゲットユーザーを定義する

誰が使うのか どのように使うのか 何を求めて使うのかをきちんと定義を行う

Define （定義）

3. アイデアを広げる

どうやってターゲットに届けるか どうしたらターゲットに伝わるかを考えながらアイデアを出す。

Diverge （発散）

4. 決定していく

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

Decide （決定）

5. 試作する

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

Prototype （試作）

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

Validate （立証）

・プロジェクト関係者全員が参加

・短期間で集中して仕上げる

・メンバー全員が共通の認識を持てる

・ペルソナやプロジェクトに愛着が持てる

・ただし、関係者全員の時間を取るのは難しい

そのための取り組み

デザイナー エンジニアディレクター

顧客対応 プロジェクト管理

デザイン サーバー構築 PHP

フロントエンド

HTML/CSS/JS

仕様決め ワイヤーフレーム

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

100%

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

75%

社外勉強会での登壇経験

75%

書籍・雑誌の執筆経験

0%

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

課題

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

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

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

ナレッジの共有と蓄積

世界展開への準備として

遠隔地との連携 東京

長野

セブ島

採用について

採用基準

・LIGのファンであること

・作ることが好きで実際にモノづくりを行っている人

・能動的な人

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

・書類選考・筆記試験・面接などの採用選考はなし

・ラブレターだけで判断し、内定を出す

・年齢の制限はなし

・内定後にLIGの説明聞き、内定者が納得すれば入社

・メールはNG。郵送のみ。

・LIGのファンであること

・作ることが好きで実際にモノづくりを行っている人

・能動的な人

デザイナーサーバーサイドエンジニアディレクター フロントエンド

長野(野尻湖)東京(上野)

Wantedlyで「LIG」を検索

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

最後に

・LIGはまだまだ発展途上

・足りないところがまだたくさんある

・それを一緒に改善して構築ができるチーム作り

・能動的に動ける環境を目指している

・アウトプットはこれからもどんどんやっていきます

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

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