狠狠撸

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

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

? 2
登壇者自己紹介
画力
?0！

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

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

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

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

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

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
8
「デザイン負債」とは
「デザインの年輪」が見える状態！

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
?? ナレッジ上の負債
?? 実装上の負債
?? 心理上の負債
9

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
10
ナレッジ上の負債

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
11
100回

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
12
バージョンアップの回数

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
13
3人

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
14
歴代のディレクターの数
歴代のデザイナーの数
これリハで知りました！

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
15
もはや何も
引き継がれていない……

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

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

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

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

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

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

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
22
実装上の負債

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

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

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
25
心理上の負債

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
26
理由がわからないし。
?
全然統一されてないし。
?
ダサいって言われるし。
?

?
もう、全面リニューアルしたい！
?
全部変えたい。
?

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
27
しかし。。。

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

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

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

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

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

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

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

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

35
要するにアジャイルをスプリントで回す話です。

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

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

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

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

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

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
?? Androidの爆速化についてご質問がおおかっ
たので追記します。
?

?
タイムラインが爆速な件ですが。
?
実装をご担当いただいた。弊社で協力いただいているプログラマーの宮越さんに聞いてみました！
?

?
背景:
?
Android版のタイムラインの表示速度があまりにも遅かった。
?
12月にAndroidエンジニアの宮越さんにご協業いただけることになったので、UIスレッドが原因だとおもうけどということで調査をお願いしました。
?

?
ネイルブックの場合の原因
?
-?‐
?UIスレッドが主な原因とのこと。
?
-?‐
?ネイルブックではキャッシュのファイルアクセスが原因だった。
?
-?‐
?ファイルアクセスを別スレッドに
?

?

?タイムラインチューニングのコツ
?
-?‐
?
?スクロール中には何も処理をやらないのが理想なので極力なにもやらないで済むようにチューニング。
?

?
?
?
?スクロール完了で画像のロード?表示を順次実行する。
?
-?‐
?
?表示している位置が全体の半分を越えると追加読み込み。
?
-?‐
?
?メソッドの前後でタイムスタンプとって遅い処理を探してつぶす。
?

?
キャッシュや通信周りでの使用ライブラリ
?
最近、先日まで協業いただいていました。ゆめみの久須さん(hFp://hkusu.github.io/)によりpicasoに移行しました。
?
Volleyとpicasoの併用になっています。本当はvollyはやめたかったそうですが、現在のところは併用で一旦置いています。
?
41
[追記]Android爆速化について

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

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
主に以上。他に細かい改修や
負荷対策をすすめた。
結果。
43

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

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

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

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

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

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

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

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

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

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

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

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

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
ノウハウ
成果物管理方法変更
56

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
?? Gitをデザイナーさんにも導入、ただしゆるく
?

?
?
?-?‐
?SourceTreeまかせ
?

?
?
?-?‐
?PullRequestとか面倒なのはなし
57
デザイン成果物の管理方法

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
ノウハウ
レビュー制度化
58

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

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
60
Sketch3すごくいい

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
まとめ
61

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
?? ユーザーの行動を変えられるものが優先。
?
?? ないものはない。議論より、リリースと結果。
?

?
?
?
?
?[追記]　手数を増やして成功にいかに早く近づくか。
?
?? 割り切れる仕組みづくりとマインド形成の努力。
?
?? 結果的にリニューアルできて数字も伸びる。
62
デザイン改修に対する考え方
前提：デザインは目的を実現するための手段

Copyright
??
?Spika
?Inc.
?2015
?all
?rights
?reserved.
con?den'al
?? ご清聴ありがとうございました
?

?

?
まだまだ、改善が必要な箇所が多いです!
?
どんどん改善をつづけていきます！
?

?
この資料は後日、公開いたします。
?
63
まとめ

狠狠撸

デザイン負債の返し方 ?ネイルブックの場合?

More Related Content

デザイン負債の返し方 ?ネイルブックの場合?

Editor's Notes