【B-3】社内ソーシャルメディア開発トライ＆エラー～おれたちの4tate～原島法子氏/岩永義弘氏

社内ソーシャルメディア開発
トライ＆エラー
～俺たちの#4tate～
原島法子
株式会社インターネットイニシアティブ

B-3 事業基盤システム部業務システム課

岩永義弘
株式会社インターネットイニシアティブ
プロダクト本部アプリケーション開発部
応用開発課
Developers Summit 2012

質問

システムを作れば
会社は変わるの？


システムでは
会社は変わらない。


システムを
通して
会社を変えたい

このお話は

 エンジニアが、

ここまで
頑張ってみた

提供


プロローグ
IIJのコミュニケーション課題


人が増えた
1,400

1,200

1,000

800

600

２倍
400

200

0
Mar-09 Mar-10 Mar-11
従業員数

用語や習慣が違う

n passe-temps, c'est le tennis.
serais content de pouvoir jouer au tennis avec

Меня зовут
elqu'un qui a le même passe-temps que moi.

你好 Моё имя Пе
你是從哪里來的

使っているツールや文化が違う


つまり問題は・・・


ただし来年3月末までね

２０１１年１月１４日

２０１２年３月３１日まであと

約
日

実際の社内資料

「・・・マジか」（上司）


プロジェクトが目指すゴール

 組織を横断して
 スタッフがコラボレーションできる、
 社内コミュニケーション基盤で
 イノベーションを起こす


コミュニケーションの
システムは流行らない
 今までも、社内ではSNSを導入しようという
前向きな活動はあった。
 でも、どうしても一部の人にしか知られずに、
消えてしまう・・・。


理由は２種類ある
いつ無くなるか
わからない

どうせ誰も
不便使わないでしょ
面倒
会ったことも
使い方がない人とやりとり
わからないするのはなぁ


システムだけでは解決できない

 でも、エンジニアとして

システムを提供して
問題を解決するのが
仕事

使う動機になる
実例、実績も
提供しよう。

自分たちがやってみる

コラボして
イノベーション
を起こせ！

メンバー紹介


原島法子（@noriko_iwai）

 事業基盤システム部所属

 バリバリの文系
 JavaとかC#とか大好き
 モットーは広く浅く前向きに☆

＃おさけのむとひどい

岩永義弘アプリケーション開発部の戦闘員。
yoshi.iwanaga @quake_alert を作りました。

主な武器趣味
C++ ・代々木公園でジョギング
R ・初任給でワインセラー購入
Perl
・統計分析を勉強中
JavaScript

2.2kg steak


上司２人


どうして私たちなの？

 他の開発部署とあまり交流がない。
 他の開発部署の文化を知らない。
 社内に人脈がない。
 ずば抜けた技術はない。

もっとできる人たちが
いるんじゃない？


生きた事例になるから

1. コミュニケーションの課題を体感する。

2. プロジェクト内で課題を解決させる。

3. 解決方法をアウトプットする。

4. 想定しているユーザにも意味の
ある解決方法になる。

やるからには効率よく！

 何かしらの確立した手法を使う。


利用した手法


アジャイル

UX
２０１１年５月～２０１１年９月

議論する

残り
日

議論しながら仕様を詰めたいけど

 メンバーの時間が合わない。
 皆の意識がそろっていない。
 ベースになる背景が違う。

時間が
足りない


ファシリテーションの定義
 中立な立場で
 チームのプロセスを管理し
 チームワークを引き出し
 そのチームの成果が最大となるように支援
するおすすめ


各工程でファシリテーション

1. 課題を共有する
2. 課題を分類する
3. イメージを元に機能を抽出する
4. 機能の優先度をつける


１．課題を共有する

付箋を使って、各々に課題を
書いてもらい、共有した。
5 26日
2011年月

1時間

２．課題を分類する

皆で立って話しながら、
付箋を分類する。

5 26日
2011年月

1時間

３．イメージを元に機能を抽出する

 課題を解決するシステムの

イメージを描いてきて
もらう。
 イメージの中から、機能を抽出する。

6 17日
2011年月

2時間

４．機能の優先度をつける

ここから
手をつける

6 23日
2011年月

2時間

結構あっさり決まったね

・・・。

これが
システムになると
良いんじゃね！？


当時の完成イメージ図


ファシリテーション

UX
２０１１年１０月～２０１２年１月

開発する

残り
日

問題発生！

 開発チームは２人

 経験がまるで違う。先が
 お互いのスキルは未知数。読めない

アジャイルの定義
 プロセスやツールより人と人同士の相互作
用を重視する。
 包括的なドキュメントより動作するソフトウェ
アを重視する。
おすすめ
 契約上の交渉よりも顧客との協調を重視す
る。
 計画に従うことよりも変化に対応することを
重視する。
「アジャイルソフトウェア開発宣言」より

やってみた

お試し期間
メンバー：４人（内開発２人）
期間：３週間（内３８時間）


役割分担して開発

目的は、２人それぞれが何かの

エキスパートになって
あとでお互い教え合うこと！


１週目のレビュー

◆見せた成果物付箋
付箋
・チャット機能
・文字列出力
・付箋UI
・付箋追加・移動
・サイズ変更・文字入力


２週目のレビュー

◆見せた成果物
付箋
・登録・読込ができる（MySQL使用）
・クライアントとサーバとの連携
・付箋UI
・編集・削除


３週目のレビュー

◆見せた成果物
・MySQL→MongoDB
・付箋UI
・付箋の変更を伝播付箋


実績を元に見積もり


振り返り（Keep）

見えるモノがあったおかげで
すんなり進んだ。

役割分担で、うまく回せた。
フィードバックがモチベーショ
ンアップにつながった。

振り返り（Problem）

不便。
 同じ場所で作業しないと

 連絡がないと無駄が発生

しやすい。


本格的にやってみた

実装開始から

実装完了まで

メンバー：４人（内開発２人）
期間：３ヶ月

振り返りからのTry その１

 細切れ時間で一緒に作業する！


振り返りからのTry その２

 とにかく連絡する！


振り返りからのTry その３

 やることとやらないことを、きっちり分ける。
 やることはやる！

テストコードスコープ外作業
コーディング規約無理な時間合わせ
朝ミーティング手段にこだわる
振り返り資料作成に時間をかける
連絡・相談不確定な約束


３ヶ月後、必須機能が実装完了
ここで一旦
一部に公開することに


プロジェクトが目指すゴール

 組織を横断して
 スタッフがコラボレーションできる、
 社内コミュニケーション基盤で
 イノベーションを起こす
「イノベーション
忘れてた・・・」

２人
開発チームでやるのは

お勧めしない

・・・正直しんどかった

＊ + 巛ヽ
〒 ! + 。 + 。＊。
+ 。 | |
＊ + / / イヤッッホォォォオオォオウ！
∧＿∧ / /
（´∀｀ / / + 。 + 。＊。
,- ｆ
/ ｭﾍ |＊ + 。 + 。 +
〈＿｝） |
/ !+ 。 + + ＊
./ ,ﾍ |
ｶﾞﾀﾝ ||| j / | | |||
――――――――――――

ようやく完成！
まずは、顔見知りに使ってもらう。

約50人でαテスト
手応えのある滑り出し！

うはw なんか面白いwww
今度の勉強会
ウェブアプリか
時報うぜ
WebSocket ktkr /hidden

これで次の飲み会の場所でも決めようず


２週間後
アクティブユーザ

人

いいともだったら…

大歓声♪

＿＿＿
／＼
／ノ＼ u. ＼！？
／（●）（●）＼
| （__人__） u. |
＼ u.｀ ⌒´ ／
ノ＼
／´ ヽ

＿＿＿_
／＼！？？
／ u ノ＼
／ u （●）＼
| （__人__）|
＼ u .｀ ⌒／
ノ＼
／´ ヽ


利用者のフィードバック

 「絵を描けたらいいな」
 「付箋同士を線で繋げたい」
 「アニメーションで再生できるといいね」
 「バックは黒が好み」
 「付箋の自動整列」
 「i18n対応に！」


フィードバックを取り入れていけば
ユーザは増える？

NO!!

＿＿＿
/ ||￣￣|| ∧＿∧
|.....||＿＿|| （
|￣￣＼三⊂/￣￣￣/
）どうしてこうなった？
| | ( ./ /

 馴染みの無いコンセプト
 ぱっと見で使い方、魅力が理解されない

 機能の見せ方
 あったら便利だが、邪魔。
 せっかく作ったのに、使われない


一言でまとめると、

ユーザエクスペリエンス
の視点が欠けている。


上司

UXのプロを探しなよ。
予算ならなんとかするから！

※ 社内にUXのプロがいないのです。


ファシリテーション

アジャイル

2012年３月〜６月

プロの力を借りて、UX強化


UX強化の道のり
１. いつ、どのように使われるのか知る

デザイン修正

２. プロトタイプテスト

デザイン微修正、実装

３. 実システムでテスト

1. いつ、どのように使われるか

 質問内容
1. コミュニケーションの手段と内容、人数は？
 企画立案、開発、運用
 IRC、ML、Wiki

2. そのコミュニケーションがどうなったら嬉しい？
 たくさんの人から反応がある
 アドバイスがもらえたとき


Step. 1 の後のUIデザイン
トップ画面
Step.1 後

before


この時のUIデザイン
ディスカッションスペース


2. ペーパープロトタイプテスト


プロトタイプテスト後のUIデザイン
トップ画面


画面デザイン決定！
実装完了！

次は、実システムでのテスト


3. 実システムでテスト

今回は、リアルな操作デバイスで。

• ショートカットキー
• delete キー、esc キー
• 右クリック

操作デバイスの違いをここで吸収

更に修正を加え、
UXのブラッシュアップも完了。

その出来映えは...!!


効果てきめん！
プロジェクトの課題整理
開発項目の決定タスク管理

５０人中１人 → ３０人 !!

SPECIAL THANKS

AQ株式会社


今月初旬

開発完了


この開発の旅で得たもの

 ファシリテーション、アジャイル開発、UX
への挑戦が、実績として注目された！

 同じ志を持つ仲間に出会えた！

 システムを「面白い!!」と言ってもらえた！


おれたちの #4tate

システムを通して
会社を変えられるか!?


答え

変えられる!!
・・・といいな


∧∧
ヽ(･ω ･)/ ズコー
＼(.＼ノ
､ﾊ,,､￣
￣
and one more thing…

最後に


エンジニア絶賛募集中！
是非 IIJ へ！
UXのプロとか！

変わった人と言われるアナタ！

新しいことに挑戦するのが好きなアナタ！

詳しくは、お手元の資料を！
中途採用説明会： 8/25(土)


ご清聴ありがとうございました
アンケートにご協力ください


ちなみに・・・

２週間限定で公開しちゃいました
本日～2012年8月12日

/


【B-3】 社内ソーシャルメディア開発トライ＆エラー ～おれたちの4tate～ 原島法子氏/岩永義弘氏

More Related Content

What's hot

Viewers also liked

Similar to 【B-3】 社内ソーシャルメディア開発トライ＆エラー ～おれたちの4tate～ 原島法子氏/岩永義弘氏

More from Developers Summit