1.
社内ソーシャルメディア開発
トライ＆エラー
～俺たちの#4tate～
原島 法子
株式会社インターネットイニシアティブ
B-3 事業基盤システム部 業務システム課
岩永 義弘
株式会社インターネットイニシアティブ
プロダクト本部 アプリケーション開発部
応用開発課
Developers Summit 2012

2.
質問
システムを作れば
会社は変わるの？
Developers Summit 2012

3.
質問
システムを作れば
会社は変わるの？
Developers Summit 2012

4.
システム では
会社は変わらない。
Developers Summit 2012

5.
システム では
会社は変わらない。
Developers Summit 2012

6.
システムを
通して
会社を変えたい
Developers Summit 2012

7.
このお話は
 エンジニアが、
ここまで
頑張ってみた
Developers Summit 2012

8.
提供
Developers Summit 2012

9.
プロローグ
IIJのコミュニケーション課題
Developers Summit 2012

10.
人が増えた
1,400
1,200
1,000
800
600
２倍
400
200
0
Mar-09 Mar-10 Mar-11
従業員数
Developers Summit 2012

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.
你好 Моё имя Пе
你是從哪里來的
Developers Summit 2012

12.
使っているツールや文化が違う
Developers Summit 2012

13.
つまり問題は・・・
Developers Summit 2012

14.
ただし来年3月末までね
Developers Summit 2012

15.
２０１１年１月１４日
２０１２年３月３１日まであと
約
Developers Summit 2012
日

16.
実際の社内資料
「・・・マジか」 （上司）
Developers Summit 2012

17.
プロジェクトが目指すゴール
 組織を横断して
 スタッフがコラボレーションできる、
 社内コミュニケーション基盤で
 イノベーションを起こす
Developers Summit 2012

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

19.
理由は２種類ある
いつ無くなるか
わからない
どうせ誰も
不便 使わないでしょ
面倒
会ったことも
使い方が ない人とやりとり
わからない するのはなぁ
Developers Summit 2012

20.
システムだけでは解決できない
 でも、エンジニアとして
システムを提供して
問題を解決するのが
仕事
Developers Summit 2012

21.
システムだけでは解決できない
 でも、エンジニアとして
システムを提供して
問題を解決するのが
仕事
Developers Summit 2012

22.
使う動機になる
実例、実績も
提供しよう。
Developers Summit 2012

23.
プロジェクトが目指すゴール
 組織を横断して
 スタッフがコラボレーションできる、
 社内コミュニケーション基盤で
 イノベーションを起こす
Developers Summit 2012

24.
自分たちがやってみる
コラボして
イノベーション
を起こせ！
Developers Summit 2012

25.
メンバー紹介
Developers Summit 2012

26.
原島 法子（@noriko_iwai）
 事業基盤システム部所属
 バリバリの文系
 JavaとかC#とか大好き
 モットーは広く浅く前向きに☆
＃おさけのむとひどい
Developers Summit 2012

27.
岩永 義弘 アプリケーション開発部の戦闘員。
yoshi.iwanaga @quake_alert を作りました。
主な武器 趣味
C++ ・ 代々木公園でジョギング
R ・ 初任給でワインセラー購入
Perl
・ 統計分析を勉強中
JavaScript
2.2kg steak
Developers Summit 2012

28.
上司２人
Developers Summit 2012

29.
どうして私たちなの？
 他の開発部署とあまり交流がない。
 他の開発部署の文化を知らない。
 社内に人脈がない。
 ずば抜けた技術はない。
もっとできる人たちが
いるんじゃない？
Developers Summit 2012

30.
生きた事例になるから
1. コミュニケーションの課題を体感する。
2. プロジェクト内で課題を解決させる。
3. 解決方法をアウトプットする。
4. 想定しているユーザにも意味の
ある解決方法になる。
Developers Summit 2012

31.
やるからには効率よく！
 何かしらの確立した手法を使う。
Developers Summit 2012

32.
利用した手法
Developers Summit 2012

33.
アジャイル
UX
２０１１年５月～２０１１年９月
議論する
残り
Developers Summit 2012
日

34.
議論しながら仕様を詰めたいけど
 メンバーの時間が合わない。
 皆の意識がそろっていない。
 ベースになる背景が違う。
時間が
足りない
Developers Summit 2012

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

36.
各工程でファシリテーション
1. 課題を共有する
2. 課題を分類する
3. イメージを元に機能を抽出する
4. 機能の優先度をつける
Developers Summit 2012

37.
１．課題を共有する
付箋を使って、各々に課題を
書いてもらい、共有した。
5 26日
2011年 月
1時間
Developers Summit 2012

38.
２．課題を分類する
皆で立って話しながら、
付箋を分類する。
5 26日
2011年 月
1時間
Developers Summit 2012

39.
３．イメージを元に機能を抽出する
 課題を解決するシステムの
イメージを描いてきて
もらう。
 イメージの中から、機能を抽出する。
6 17日
2011年 月
2時間
Developers Summit 2012

40.
４．機能の優先度をつける
ここから
手をつける
6 23日
2011年 月
2時間
Developers Summit 2012

41.
結構あっさり決まったね
・・・。
Developers Summit 2012

42.
これが
システムになると
良いんじゃね！？
Developers Summit 2012

43.
当時の完成イメージ図
Developers Summit 2012

44.
ファシリテーション
UX
２０１１年１０月～２０１２年１月
開発する
残り
Developers Summit 2012
日

45.
問題発生！
 開発チームは２ 人
 経験がまるで違う。 先が
 お互いのスキルは未知数。 読めない
Developers Summit 2012

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

47.
やってみた
お試し期間
メンバー ：４人（内開発２人）
期間 ：３週間（内３８時間）
Developers Summit 2012

48.
役割分担して開発
目的は、２人それぞれが何かの
エキスパートになって
あとでお互い教え合うこと！
Developers Summit 2012

49.
１週目のレビュー
◆見せた成果物 付箋
付箋
・チャット機能
・文字列出力
・付箋UI
・付箋追加・移動
・サイズ変更・文字入力
Developers Summit 2012

50.
２週目のレビュー
◆見せた成果物
付箋
・チャット機能
・登録・読込ができる（MySQL使用）
・クライアントとサーバとの連携
・付箋UI
・編集・削除
Developers Summit 2012

51.
３週目のレビュー
◆見せた成果物
・チャット機能
・MySQL→MongoDB
・付箋UI
・付箋の変更を伝播 付箋
Developers Summit 2012

52.
実績を元に見積もり
Developers Summit 2012

53.
振り返り（Keep）
見えるモノがあったおかげで
すんなり進んだ。
役割分担で、うまく回せた。
フィードバックがモチベーショ
ンアップにつながった。
Developers Summit 2012

54.
振り返り（Problem）
不便。
 同じ場所で作業しないと
 連絡がないと無駄が発生
しやすい。
Developers Summit 2012

55.
本格的にやってみた
実装開始 から
実装完了 まで
メンバー ：４人（内開発２人）
期間 ：３ヶ月
Developers Summit 2012

56.
振り返りからのTry その１
 細切れ時間で一緒に作業する！
Developers Summit 2012

57.
振り返りからのTry その２
 とにかく連絡する！
Developers Summit 2012

58.
振り返りからのTry その３
 やることとやらないことを、きっちり分ける。
 やることはやる！
テストコード スコープ外作業
コーディング規約 無理な時間合わせ
朝ミーティング 手段にこだわる
振り返り 資料作成に時間をかける
連絡・相談 不確定な約束
Developers Summit 2012

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

60.
プロジェクトが目指すゴール
 組織を横断して
 スタッフがコラボレーションできる、
 社内コミュニケーション基盤で
 イノベーションを起こす
Developers Summit 2012

61.
プロジェクトが目指すゴール
 組織を横断して
 スタッフがコラボレーションできる、
 社内コミュニケーション基盤で
 イノベーションを起こす
「イノベーション
忘れてた・・・」
Developers Summit 2012

62.
２人
開発チーム でやるのは
お勧めしない
・・・正直しんどかった
Developers Summit 2012

63.
＊ + 巛ヽ
〒 ! + 。 + 。 ＊ 。
+ 。 | |
＊ + / / イヤッッホォォォオオォオウ！
∧＿∧ / /
（´∀｀ / / + 。 + 。 ＊ 。
,- ｆ
/ ｭﾍ |＊ + 。 + 。 +
〈＿｝ ） |
/ !+ 。 + + ＊
./ ,ﾍ |
ｶﾞﾀﾝ ||| j / | | |||
――――――――――――
ようやく完成！
まずは、顔見知りに使ってもらう。
Developers Summit 2012

64.
約50人でαテスト
手応えのある滑り出し！
うはw なんか面白いwww
今度の勉強会
ウェブアプリか
時報うぜ
WebSocket ktkr /hidden
これで次の飲み会の場所でも決めようず
Developers Summit 2012

65.
２週間後
アクティブユーザ
人
Developers Summit 2012

66.
いいとも だったら…
大歓声♪
Developers Summit 2012

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

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

69.
フィードバックを取り入れていけば
ユーザは増える？
NO!!
Developers Summit 2012

70.
＿＿＿
/ ||￣￣|| ∧＿∧
|.....||＿＿|| （
|￣￣＼三⊂/￣￣￣/
） どうしてこうなった？
| | ( ./ /
 馴染みの無いコンセプト
 ぱっと見で使い方、魅力が理解されない
 機能の見せ方
 あったら便利だが、邪魔。
 せっかく作ったのに、使われない
Developers Summit 2012

71.
一言でまとめると、
ユーザ エクスペリエンス
の視点が欠けている。
Developers Summit 2012

72.
上司
UXのプロを探しなよ。
予算ならなんとかするから！
※ 社内にUXのプロがいないのです。
Developers Summit 2012

73.
ファシリテーション
アジャイル
2012年 ３月〜６月
プロの力を借りて、UX強化
Developers Summit 2012

74.
UX強化の道のり
１. いつ、どのように使われるのか知る
デザイン修正
２. プロトタイプテスト
デザイン微修正、実装
３. 実システムでテスト
Developers Summit 2012

75.
1. いつ、どのように使われるか
 質問内容
1. コミュニケーションの手段と内容、人数は？
 企画立案、開発、運用
 IRC、ML、Wiki
2. そのコミュニケーションがどうなったら嬉しい？
 たくさんの人から反応がある
 アドバイスがもらえたとき
Developers Summit 2012

76.
Step. 1 の後のUIデザイン
トップ画面
Step.1 後
before
Developers Summit 2012

77.
この時のUIデザイン
ディスカッションスペース
Developers Summit 2012

78.
2. ペーパープロトタイプテスト
Developers Summit 2012

79.
プロトタイプテスト後のUIデザイン
トップ画面
Developers Summit 2012

80.
画面デザイン決定！
実装完了！
次は、実システムでのテスト
Developers Summit 2012

81.
3. 実システムでテスト
今回は、リアルな操作デバイスで。
• ショートカットキー
• delete キー、esc キー
• 右クリック
操作デバイスの違いをここで吸収
Developers Summit 2012

82.
更に修正を加え、
UXのブラッシュアップも完了。
その出来映えは...!!
Developers Summit 2012

83.
Developers Summit 2012

84.
効果てきめん！
プロジェクトの課題整理
開発項目の決定 タスク管理
５０人中 １人 → ３０人 !!
Developers Summit 2012

85.
SPECIAL THANKS
AQ株式会社
Developers Summit 2012

86.
今月初旬
開発完了
Developers Summit 2012

87.
この開発の旅で得たもの
 ファシリテーション、アジャイル開発、UX
への挑戦が、実績として注目された！
 同じ志を持つ仲間に出会えた！
 システムを「面白い!!」と言ってもらえた！
Developers Summit 2012

88.
おれたちの #4tate
システムを通して
会社を変えられるか!?
Developers Summit 2012

89.
答え
変えられる!!
・・・といいな
Developers Summit 2012

90.
∧∧
ヽ(･ω ･)/ ズコー
＼(.＼ ノ
､ﾊ,,､ ￣
￣
and one more thing…
最後に
Developers Summit 2012

91.
エンジニア絶賛募集中！
是非 IIJ へ！
UXのプロとか！
変わった人と言われるアナタ！
新しいことに挑戦するのが好きなアナタ！
詳しくは、お手元の資料を！
中途採用説明会： 8/25(土)
Developers Summit 2012

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

93.
ちなみに・・・
２週間限定で公開しちゃいました
本日～2012年8月12日
/
Developers Summit 2012