2016_01_25_デザインナイト発表資料 スマホの本格的な普及から5年、長期運用の入ったアプリではUIに負債と言える問題を抱えることが多くなって来たのではないでしょうか？ UX・UIをサービスの数字の改善を行いながら改修していく事例を紹介いたします。 発表後、お問い合わせがおおかった。 Androidの爆速化について追記しています。 スケール対応という部分が何をいっているのかわかりづらいので、追記しています。 結果の内容を修正しています。 [お問い合わせ] stella@spika.co.jp

1. confiden'al
デザイン負債の返し方
∼長期運用アプリにおけるデザインリニューアル事例「ネイルブック」の場合∼
株式会社スピカ

2. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 星 雄介（ほし ゆうすけ)
• 株式会社スピカ グロースチームリーダー
ネイルブックのアプリとWEBのユーザ獲得を担当。
• 2015年４月入社
• 元はプログラマです。モバイル業界にいました。
• デザインは素人です。絵は描けません。
• ファシリテート、バグの調査、インタビュー調査、
Sketch3まで、なんでもやる雑用係です。
• Facebook:yusuke.hoshi.35
Qiita:Hoshi_7(読みづらいけど細かい事例のせてます)
2
登壇者自己紹介
画力
0！

3. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• ネイルブックの紹介
• ネイルブックが抱えるデザイン負債
• デザイン負債返済事例
• デザイン負債返済ノウハウ
• まとめ
3
本日の発表内容

4. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
ネイルブックの紹介
4

5. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
5
ネイルブックの紹介
サービス開始
2011年4月30日
対応言語
日本語・英語
対応OS
iOS/Android
URL
hFp://nailbook.jp
毎日約1500枚の新作ネイルが投稿される日本最大のネイル写真共有サービス
MAU
80万(全プラットフォーム合計)
ダウンロード数
130万(iOS・Android計)
ネイリスト １万人
公式サロン
3000店舗

6. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
6
ネイルブックの紹介
ネイルデザインを探す！
(ほとんどの人はこれ)
気になるネイルがあれば
ネイリストの投稿を確認。
つづいてサロンの情報を
チェック！
場所や人柄などをチェックして
サロンに行くタイミングと合えば
サロンに来店してオーダー
こんなイメージでお願
いします
次のネイルはこんなイ
メージでやりたい！
気になったサロンの情
報をチェック

7. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
ネイルブックが抱えるデザイン負債
7

8. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
8
ネイルブックが抱えるデザイン負債
「デザイン負債」とは
「デザインの年輪」が見える状態！

9. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• ナレッジ上の負債
• 実装上の負債
• 心理上の負債
9
ネイルブックが抱えるデザイン負債

10. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
10
ネイルブックが抱えるデザイン負債
ナレッジ上の負債

11. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
11
ネイルブックが抱えるデザイン負債
100回

12. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
12
ネイルブックが抱えるデザイン負債
バージョンアップの回数

13. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
13
ネイルブックが抱えるデザイン負債
3人

14. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
14
ネイルブックが抱えるデザイン負債
歴代のディレクターの数
歴代のデザイナーの数
これリハで知りました！

15. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
15
ネイルブックが抱えるデザイン負債
もはや何も
引き継がれていない……

16. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 存在理由がよく分からないものがある。
• 予定が実現されなかったものがある。
• こうするつもりだったかな?が多い。
• なぜそう決まったの？も多い。
16
よくわからないものがある

17. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
17
存在理由がよくわからないものがある
「どうしてこうした」の例
「たぶんこうしたかった」の例
たぶん、自己紹介タグで検索させたかった。
検索に使えないのに自由入力まで可能。
「講演口頭」
通常は選択されている方がハイラ
イトされてピンクではないでしょう
か？

18. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
覚えてないレベルでたくさん存在する。
18
こういうところはキリがない！
「講演口頭」
ネイリストを追加できると思いますが、
実は追加できません。
ネイリストさんから実際にお問い合わせが
多いポイントになります。
「講演口頭」
こちらもリンクしません。
検索にはつかえます。

19. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
覚えてないレベルでたくさん存在する。
19
こういうところはキリがない！
あっちこっち実装が中途半端。
日本語で書くとわかりやすいんですが。
ユーザーが体験を完結できない！
行動の過程がブツ切りのマグロのよう。

20. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 1dpでも見た目ぜんぜん違うのに！
20
スタイルガイド的なものがなくてバラバラ
「講演口頭」
見ずらいですが、
写真が1dp大きいだけで、
左右のpaddingのとりかたが
変わります。
がスタイルガイドがないので
細かいところが
画面によりバラバラです。

21. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
21
スタイルガイド的なものがなくてバラバラ
特にわかりやすい。
Web版ですが。
ほぼ同じ要素の画面。
なぜか統一されていない。
アプリ側も色やサイズ、
padding、margin等から
しっかりしているとは
いいづらい。

22. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
22
ネイルブックが抱えるデザイン負債
実装上の負債

23. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• Auto Layoutじゃない！
• スケーリング非対応なのでiPhone6が荒い。
• MRC！なので凝った実装がしづらい。
• 可読性が低いのでデザイン改修に時間がかかる。
• 部品をレイヤーで分けてない!
23
iOS3時代からリファクタリングしてない
[追記]正確にはLunchScreenOnで引き延ばしているのでiPhone6でも画面が狭いです。
次ページにわかりやすい例をのせます。

24. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
24
追記:自動で引き延ばされる機能Offの対応
Before After
表示領域が！
段違い

25. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
25
ネイルブックが抱えるデザイン負債
心理上の負債

26. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
26
ネイルブックが抱えるデザイン負債
理由がわからないし。
全然統一されてないし。
ダサいって言われるし。
もう、全面リニューアルしたい！
全部変えたい。

27. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
27
ネイルブックが抱えるデザイン負債
しかし。。。

28. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
UIがダサいという指摘。
「自分自身」と「中の人」
『プラットフォーマー』からしか言われない。
肝心のユーザーには、あまり言われない。
28
本当はもう全部リニューアルしたい

29. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 検索が望む結果にならないとか。
「かわいい！」が整理できないとかは多い。
• 優先すべきは望ましいUXの実現や実現したいUX
の具現化。
• UXとはユーザーの課題や需要を解決・満たすこ
とができる体験。
• なんといっても潤沢なリソースを使える状況で
はない。
29
本当はもう全部リニューアルしたい

30. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
全面リニューアルを
ユーザが求めて
いるわけではない！
よく見られたいと思う。
承認欲求に踊らされている。
30
本当はもう全部リニューアルしたい

31. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
自己の承認欲求が満たされる事は
ユーザーには関係がないので。
チームの数値目標は達成されない。
結論
フルリニューアルは
やらない！
31
本当はもう全部リニューアルしたい

32. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
デザイン負債返済事例
32

33. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
デザイン負債返済の基本方針
横浜駅方式
33
デザイン負債返済方針

34. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 横浜駅とは？
日本のサグラダファミリア！
- 1915年以来100年も改修工事を続けている。
- 非常に未完成な駅。
- 実際2008年のころ横浜勤務だったけど。使いづらい。
• でも使われてます！
- 世界５位:平均220万人/日の巨大駅
- 横浜市のターミナル機能という役割を果たしている。
- 横浜の玄関口としてのUXを実現している。
- 構内のレイアウトは微妙だけど！
34
デザイン負債返済方針

35. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• ネイルブックも横浜駅を目指す！
UIは微妙なので徐々に直す。
ネイルのデザインを探したいという課題に対して。
お気に入りのデザインが見つかるという答えを返
すところを優先。
この形のUXの追求
MAU向上につながる施策を優先。
35
要するにアジャイルをスプリントで回す話です。

36. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
デザイン改修事例
改修内容の紹介
36
デザイン改修事例

37. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• Android
2015年4月時点
37
改修のスタート
いろいろ指摘噴出
「講演口頭」
こちらの細かい文字はみなくても
大丈夫です。
4月にいろいろ指摘があって、
フルリニューアルするかも前提で、
40pほどの指摘をだしたという点と
最初の画面をお見せする意図です。

38. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• iOS
2015年4月時点
38
デザイン改修
「講演口頭」
iOS版も同じように指摘や。
改修点の洗い出しを最初におこ
なっています。

39. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
39
デザイン改修
基本的な改修の流れ
A:7月 I:9月
チュートリアル導入
(会員登録率 5%UP)
A:8月 I:8月
写真タグ複数登録・検索対応
(１ヶ月継続率 7%くらいUP)
A:6月
Support Library更新
フローティングボタン試験
右上のが使われる結果。
検索機能の改修を決意。

40. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
40
デザイン改修
Android:10月∼11月
2ペイン化
かわいいボタンをホームに
お気に入り機能の非会員提供(10枚まで)
マテリアルに段階的に対応始める
(1ヶ月継続率10%くらいアップ
かわいいやお気に入りの利用率もアップ)
Android:12月
見た目のブラッシュアップ
ツールバーにお知らせボタン追加
マテリアル化も進める
お気に入りインジケーター。
読み込みも爆速化。
(１ヶ月継続6∼7%アップ)

41. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• Androidの爆速化についてご質問がおおかっ
たので追記します。
タイムラインが爆速な件ですが。
実装をご担当いただいた。弊社で協力いただいているプログラマーの宮越さんに聞いてみました！
背景:
Android版のタイムラインの表示速度があまりにも遅かった。
12月にAndroidエンジニアの宮越さんにご協業いただけることになったので、UIスレッドが原因だとおもうけどということで調査をお願いしました。
ネイルブックの場合の原因
-­‐
UIスレッドが主な原因とのこと。
-­‐
ネイルブックではキャッシュのファイルアクセスが原因だった。
-­‐
ファイルアクセスを別スレッドに
タイムラインチューニングのコツ
-­‐
スクロール中には何も処理をやらないのが理想なので極力なにもやらないで済むようにチューニング。
スクロール完了で画像のロード・表示を順次実行する。
-­‐
表示している位置が全体の半分を越えると追加読み込み。
-­‐
メソッドの前後でタイムスタンプとって遅い処理を探してつぶす。
キャッシュや通信周りでの使用ライブラリ
最近、先日まで協業いただいていました。ゆめみの久須さん(hFp://hkusu.github.io/)によりpicasoに移行しました。
Volleyとpicasoの併用になっています。本当はvollyはやめたかったそうですが、現在のところは併用で一旦置いています。
41
[追記]Android爆速化について

42. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
42
iOS:11月∼12月
２ペイン化のiOSへの反映
段階的にAndroidの見た目に追従。
(紙面的にのせないがタブの見た目は未統一)
タブメニュー化の実施
iOS:12月∼1月
タブや色等の見た目やバグの改修

43. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
主に以上。他に細かい改修や
負荷対策をすすめた。
結果。
43
デザイン負債返済方針

44. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
１ヶ月継続を『45%』から
『69.5%』まで改善!
全面リニューアルしなくても
数値は改善できる！！
44
デザイン負債返済状況

45. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
45
結果
11月新規ユーザーの1ヶ月継続Reproだと7割越え
GAで69.5%
季節的(ネイル業界は夏と冬が繁忙期)要因がなくても62%は固い状況。
地味に10月第２月も61%まで上がっている。
当月は集計期間中で
あてにならない
普段は週別を追っています。

46. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
46
結果
アクティブユーザーの推移
[追記]
繁忙期に合わせて
リテンションをあげておけば
繁忙期に増える分がそのまま
上昇しやすいので年末頑張った。
[追記]
昨年同時期に積めてないのと大き
な差がでている。

47. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
47
クラッシュ対応はしっかり
継続率向上の背景として。
今回はデザインナイトなので省きましたが。
いつでも、きちんと使えることを担保するのは大切

48. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
デザイン負債返済ノウハウ
48

49. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
デザイン負債返済に伴う
ノウハウ
合意形成の方法
49
デザイン負債返済方針

50. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 合意を得るのが大変
-「変えたい」意欲のある人は大切。
- 変えたい人は主張が強い。
横浜駅方式では[追記](行き過ぎの)コントロールが必要。
• なぜそんなに変えたいのか？
-「みんな」結果がでるか不安。
- [追記]結果はでなくてOkです。いきなり出なくて当然です。
手番を増やして、最後に当たればいいと思います。
不安だと極端な「保守」か「変革」に走る。
過渡期の場合どっちにも寄ってはいけない。
大切なのはバランス。
50
たぶん最も苦労するのは合意形成

51. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
信号を切り替えるように、やるやらないをコントロール。
青・黄・赤的に調整する。
具体的な手段を２つ紹介。
• 会議時間の限定で信号を切り替える
- １時間で切る。
- 分割して話の内容をコントロールする。
- マストのストーリに絞る。
- 細かいとこは委任する。(黄)
- 1時間を超えて合意できないものは
重すぎるか時期尚早。(赤)
51
信号を切り替える

52. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 実装期間の制限
- ２週間で1度出す。優先度決める。
- 揃わなくても出す。とりあえず出す。
- 終わらないものは次に回して優先度再設定。
- 明日で済むものは今日やらなくてもいい。
- 期間内のリファクタリングは基本青信号。
52
信号の切り替え方

53. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
53
伝え方
• 結果(数字)がでるまでは意図は伏せる。
「報告・連絡は正確に。意図は伏せる。」
• 他チーム向け
「数字がでるところを優先します。」
「積極的なリニューアルはできません。」
「実験です。ダメなら戻します。」
• スタッフ向け
「余裕が出ればリニューアルします。」

54. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 説明なしNG。
• 微妙な状況は事実。事実は認める。
• 提案は聞く。聞いた上で判断。
• 相手の性格によってやり方を変える
• 基本はどう「やる」・「やらない」信号を切り替えるか。
• 煙たがられてもYES・NOはハッキリ伝える。
- あいまいは黄色信号。
- 止まるか止まらないかは相手しだい。
- 止めたいなら赤を出す。やってほしいなら青を出す。
- できればやってほしいけど、プラス1でいいなら黄色のまま。
54
実装スタッフとの合意の取り方注意点

55. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• 嘘はいってはいけない!
「リニューアルは今すぐできません。(数字を追うと結果的
にリニューアルされます。)」
(相手が保守的ならリニューアルはしません。数字改善につながる箇所の改修
実験はしますとか言っておくとか。)
「余裕が出れば（徐々に段階的に)リニューアルします。」
省略する。
55
嘘はNG

56. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
デザイン負債返済に伴う
ノウハウ
成果物管理方法変更
56
デザイン負債返済方針

57. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• Gitをデザイナーさんにも導入、ただしゆるく
-­‐
SourceTreeまかせ
-­‐
PullRequestとか面倒なのはなし
57
デザイン成果物の管理方法

58. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
デザイン負債返済に伴う
ノウハウ
レビュー制度化
58
デザイン負債返済方針

59. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• レビューの制度化
Sketchの導入でコミュニケーションロスを回避しておく
- スタイルガイドなしでもなんとかなる。
- 綺麗には組めていなくても、無いよりいい。
- 全員分買っています。
レビューの実践
- ワイヤーとデザイン清書の２回。
- リリース前にモンキーテスト会。
レビュー導入の利点
- エンジニア・デザイナーの意見反映が可能になる。
- 調整が１回で済むので時間短縮。
59
ワークフロー整理

60. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
60
Sketch3すごくいい

61. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
まとめ
61

62. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• ユーザーの行動を変えられるものが優先。
• ないものはない。議論より、リリースと結果。
[追記] 手数を増やして成功にいかに早く近づくか。
• 割り切れる仕組みづくりとマインド形成の努力。
• 結果的にリニューアルできて数字も伸びる。
62
デザイン改修に対する考え方
前提：デザインは目的を実現するための手段

63. Copyright
©
Spika
Inc.
2015
all
rights
reserved.
confiden'al
• ご清聴ありがとうございました
まだまだ、改善が必要な箇所が多いです!
どんどん改善をつづけていきます！
この資料は後日、公開いたします。
63
まとめ