スクリーンショット_2018-09-17_20

CXO Night#4 「見えない魅力の引き出し方」:「LIPS」誕生からリニューアルまで

この記事は2018年9月12日に行われたCXO Night#4の参加レポートです。
内容は以下の通り。

コスメアプリ「LIPS」 誕生からリニューアルまで
今年5月にリニューアルした「LIPS」。リニューアルに関わった内外部の開発&デザイナーの方々をお呼びし、そのデザインプロセスや秘話などをお話いただきました。
見えない魅力の引き出し方
シンデレラバスト向けの下着ブランドfeastを経営するハヤカワ五味さんと、「ソーシャルホテル」をコンセプトにしたホテルプロデューサーの龍崎さんを迎え、坪田さん交えたトークセッションが行われました。

後半の「見えない魅力の引き出し方」トークセッションは別記事でまとめます。

コスメアプリ「LIPS」 誕生からリニューアルまで

前半のパネルディスカッション、登壇者は以下の方々でした。

■ スピーカー
松井友里さん:株式会社AppBrew。LIPSの開発全般を担当。
池田大季さん:株式会社Futurize。LIPSリニューアルではUIをiOS、Androidで実装。
タカヤ・オオタさん:タカヤ・オオタデザイン事務所。新しいLIPSのブランドデザイン周りを担当。
■ モデレーター
広野さん:株式会社FOLIO CDO

LIPSはリリースをしてから1年半で100万ダウンロードを誇るコスメアプリです。どんなアプリか簡単にいうとインスタのコスメ版。コスメのコミュニティサービスで、ソーシャルに化粧品を探せるアプリです。
リニューアルの際に、ブランドロゴなどを担当したのがオオタさん、オオタさんが作ったブランドアイデンティティを元にUIを作ったのが池田さんでした。

(広野さん)競合サービスである@cosmeさんは2018年6月 月間PV数が3.1億、月間UB数は1600万人で日本人女性の4人に一人は使っている計算です。今、共同創業してからら2年半で、LIPSのコンセプトを作ったのは1年半前だと思います。この強大なプレイヤーがいる中で、コスメアプリだ!と思った経緯やリニューアルの際の戦略を教えてください。

(松井さん)もともと@cosmeさんも使っていたんですけど、最近twitterやインスタでコスメを見つけることが多くなったなと個人的に思っていました。自分が好きでフォローしている人が使っているものを買う、という体験ですね。
でもtwitterとかはコスメ特化ではないので、価格別に探すなどコスメ特有の探し方ができず、少し不便だなと思っていました。
例えばWEARみたいなソーシャルにファッションを探すアプリがあるんですよ。それをコスメでやったら面白いかなと思って開発を始めました。

(広野さん)強大なプレイヤーがいて、それでも勝てるぜと思った根拠ってありますか?

(松井さん)@cosmeさんはwebユーザーさんが多いけれど、アプリはこれからのタイミングだったんですよ。@cosmeさんは2000年からやられているが、2018年の今、PCをひらいてwebから投稿するよりも、スマホから気軽に投稿する体験の方が身近になってきました。今のタイミングだったら、スマホでアプリかなと思っていたので、アプリが空いていたのは大きかったです。

(広野さん)やっていて、すぐ10万ダウンロードになって、思った通りだな、と思ったんじゃないですか?

(松井さん)サービスを出した直後は、流入数は10~20人/day、投稿者も自分だけでした。
一番初めに優良モニターとして、サービスを使ってもらったユーザーさんがいました。その人たちが期間終了後も使い続けてくれて、今まで作っていたサービスよりは目がありそうだったと思い始めました。
本格的に拡大できそうだなと思ったタイミングは、去年の4月にyoutuberにアプリプロモーションしてもらった時です。思った以上に流入と定着が多く、youtubeをみるような若い世代に使ってもらえるサービスなんだと、その時はっきり思いました。

(広野さん)こういうアプリって、口コミがないと人が来ないし、人がいないと口コミが起きない。そういう鶏卵みたいな状況を打破できたのはすごいですね。
次にリニューアルに至った経緯を教えてください。

(松井さん)もともとLIPSは10~20代前半の若いユーザーさんを想定してデザインされていました。ビビッドでおもちゃみたいな色合い、若い印象のデザインです。
けれど、実際にマネタイズを考えたときに、もっと間口を広げないといけない。化粧品って若い人はプチプラって言われる若いブランドを使って、20代後半からデパコスという少し高めのブランドを使うんですね。そういうデパコスを買うような人にも使って欲しいとなっていきました。そうするとデザインから変えないと、ってなりました。

(広野さん)スタートアップって最初から最後までやるような風潮があると思うんですけど、LIPSはリニューアルの時に外部の有名な方にCIもUIもお願いしています。CIはともかくUIも外部って珍しいなと思ったんですが、どういう経緯で外部の方にお願いしたんですか?

(松井さん)もともとリニューアルの際に、CIに関してはすぐにタカヤさんの名前が社内で出ていました。
普段からTwitterを見ていたり、ちょうどリニューアル直前に、PKSHAのCIデザインのプロセスを見てカッコいいと思っていました。
社内のリソースも少ないし、CIを外注しようというのはすぐに決まりましたね。

(広野さん)UIはどういう経緯で決まったのですか?

(松田さん)社内でできたほうが良いと思っていたのですが、リニューアルでCIの話を始めたタイミングで社員が4人しかいなく、デザインもコードも私が書いてるしリソース的に無理!ってなったんですよ。それでタカヤさんに誰かいいデザイナーさんご存知ないですか?と聞き、池田さんを紹介いただきました。

(広野さん)タカヤさんと池田さんは、もともとペア組んでやったりしていたんですか?

(タカヤさん)そのときが始めてでした。AppBrew社に出資している中川さんという方に、誰かいいUI作る人いませんか?と聞いた時、池田という男しかいないと言われて紹介してもらいました。
UIデザインをやる人ってどこまでやるのか?という領域の話があると思います。その点池田さんは構造とか、一からどのくらい早くコンポーネントを作るかに徹していると話を聞き、それなら自分がビジュアル部分はやって、池田さんにはインターフェースの刷新をやってもらおう、うまく区分けができるなと思い、お願いしました。

(広野さん)池田さんはLIPSでやられたことは、かっこいいものを作ることではなく、例えばSketchデータを大人数で触っても崩壊しない、長期的に見て超早いデザインサイクルを回せるような礎を築いたことな気がしますね。

(タカヤさん)LIPSって、僕が担当させていただく前からファンがいるし、その好きという熱量が高かったんです。
よくリニューアルで全く新しくする時って、今までいたファンの方が新しいものに違和感や抵抗感を持つことが多いと思います。
なるべくそういうのを生まないデザインが作りたいと思っていました。もともと好きだった人はもっと好きになるし、前のデザインだと私のものではないなと思っていた同年代の人や他の年代の方にもユーザー層を広げたい。その2つを見た目上でも果たしたいと思っていました。
あまりにも最初から洗練させすぎると、10代の人は自分のサービスだと思えなくなると思うんですよ。そういった個々の感情を、観察というほと大げさではないですけど、少しずつ反応を見つつやっていました。

(広野さん)フォリオも8月に大きくリブランディングをしたんですね。その時の反応は概ね良かったんですけど、数個、「お前はユーザーじゃないって言われてるみたい」というツイートを見たんですね。でも、僕たちはそういうユーザーをある意味おざなりにしてでも新しくすべきだと思って進めた挑戦的な李ブランディングだったので、それでも良かったんです。
でも今回のLIPSのリニューアルは、もともといた人はそのままに、新しいユーザーを開拓しようという目的の違いがあるなと思いました。刷新ではなくリデザインですね。

(オオタさん)デザインを新しくする時って、デザイナーやブランドを見ている立場からすると、他社よりもぶっ飛んだことをしたいという思いがあるとは思います。
でもあくまでアイデンティティデザインっていうのは、どういう事業上の目的においてブランドを展開すべきかという逆算の計画があってこそなんですね。その点フォリオが、「私のサービスではない」と思わせたのは、ある意味成功していると思います。

(広野さん)もともと知り合いではなかったタカヤさんに、どうやってアプローチしたんですか?

(松井さん)たまたまイベントに登壇されていたときに名刺交換して、リデザインを考えているんですと詳細を送らせていただいて、打ち合わせをしました。

(広野さん)いろいろある案件の中でLIPSをやろうと思ったのはなぜ?

(タカヤさん)事務所を去年11月に設立した時に、この1年どういう方とお仕事したいと期間区切りの目標を立てたんです。いろんな事業の領域で、トップもしくは魅力的に事業をしている人と組みたいという意志があって。
そこにちょうど候補としてLIPSさんがあったんですね。

(広野さん)最初の共有というか、LIPSリニューアルしたい目的みたいのはプレゼントかしたんですか?

(松井さん)ほとんど口頭で伝えました。MERYさんでも同じような課題があったと言ってもらい、すぐに目的や背景を汲み取ってもらえました。それは嬉しかったですね。

(タカヤさん)初回のMTGで、アウトラインの方針としてはこういう風にいった方がいいんじゃないですかと決め、制作に移りました。

(広野さん)二人でムードボード作ったりとかいう作業はなかったんですか?

(タカヤさん)なかったですね。年齢層を広げ、かつ同じ年齢でも幅を広げたいとなると、攻め方がいくつかに絞られるんですね。
その時のLIPSの課題が、前職で抱えていた課題に似ていたので、その辺りを検証して見たら精度は高いのではと思って、ディスカッションでさっと決まりました。

(広野さん)シカのアイコンの方向性は最初っから決まっていたんですか?

(タカヤさん)それに関しては、一旦持ち帰りました。大前提のデザインの方向性は今言ったことがあったんですけど、どうやってファンを大事にするかという方向性は僕の中でちゃんと噛み砕かないとなと思って。その中で他のモチーフ案も考えていたんですけど、最終的にシカを残す結果になりました。

(広野さん)案はどのくらい出したんですか?

(タカヤさん)一度僕の側で制作をしたんですけど、全くピンとこなくて。これでLIPSを好きだった人が好きであり続けるか自信がなくて、1案だけもっていきました。もしシカ以外のモチーフにするんだったらこういう方向性もありますよっていうのを見せる意味で。
そのときの社内の雰囲気がこれはあかんぞっていう感じだったんですよね。

(松井さん)そんなことはないですよ。ただ、シカは残ったら嬉しいなという気持ちがありました。なので、シカの案が入っている時点で嬉しかったです。シカが特徴的だったし、なんでシカなのと話しかけてもらうことも今まで多かったので。

(広野さん)新しくなったLIPSのシカの形に近づいたのは、何回めの打ち合わせの時なんですか?

(松井さん)シカでいこうって初めのミーティングで決まって、次の打ち合わせでいくつかの顔を出してもらいました。もうそれで大まかな形の方向性は決まりましたね。

(タカヤさん)なので、2回目で今の原型になるものは決まりました

(広野さん)早いですね!あれっ、依頼はいつしたんでしたっけ?

(松井さん)最初にメッセージを送ったのは去年の12月で、制作が始まったのは1月末ですね。

(タカヤさん)依頼をいただいた後リサーチを始めて、持って行くまでは長かったんですけど、そのあとは毎週出していました。

(広野さん)他の案件と並行ではやっていなんですか?

(タカヤさん)あまりやらないようにしています。その期間はそのクライアントのことだけを考えたいので、並行しても2くらい。なので倒産危機が;;

(広野さん)そこは頑張ってください。
フォリオの場合はリニューアルしようとなったのが80人くらいの規模の時で、コミュデザイナーと経営層とのニケーションが大変だったんですね。LIPSの時は社員数的にも、そういうところは楽だったんですかね?社長的にもリニューアルはスムーズに受け入れられたんですか?

(松井さん)むしろ社長から変えたほうが良いんじゃない?という話が始まりました。もう私は、はい、やりますみたいな実行する感じでした。
もともと社長もエンジニアリングやりながらデザインにも関心がある人間なので、リニューアルすることによって印象がどう変わるかみたいな話は受け入れられやすかったですね。社員4名でしたし、そこは大変ではなかったかなと。

(広野さん)いつまでにリニューアルしないといけないような、経営目標も決まっていた?

(松井さん)色々やばかったです笑
CIはタカヤさんのtwitterを見ていて、期間がかかるなと思っていました。でもCIがあがってきたらUIのリデザインは2週間でやろう!みたいな話になって、それで池田さん頑張りましょうみたいな。それで初めは2週間のスケジュールで始まってしまいました。
ただ2週間経った後、これはまだまだ終わらないぞとなり、スケジュールを引き直しました。そこから1ヶ月半くらいですかね。そこに関しては、その後リデザ大反省会が行われました。

(池田さん)デザインは2週間でできる自信があったんですけど、さすがにiOS、Androidのリファクタリング含めて2週間は無理じゃない?と。

(松井さん)池田さんが普通にデザインを2週間で仕上げてくださったので、そこは本当に申し訳なくて。やばかったですね。

(広野さん)一般的にブランドが決まってから、実際にUIを制作する期間に移ると思います。そこは並行ではないですよね。

(池田さん)実は少しだけ並行期間があって、最後の詰めというかテーマカラーとかがコロコロ変わったりはしました。
けど、今回のリニューアルって、もともとSketchファイル自体が4こあって、色々カオスだったんですね。

(松井さん)名前も「古い」とか(一同爆笑)

(池田さん)「-01」とかみたいな感じで。そこの整理や、それに伴って開発側とコンポーネントは同じ名前を持つみたいな、アップデート後のリニューアルの開発をブーストさせるための発射台制作みたいなところがありました。

(広野さん)それなら並行して進めることもできますね

(池田さん)そうです。なので、メインカラーが変更されたとしても、3クリックくらいで全部反映されるようなシステムを構築していったので、なんら問題はなかったです。

(広野さん)具体的な話の打ち合わせを3人ですることはあったんですか?

(松井さん)なかったです。リアルでは今日初めて三人で会いましたね。

(広野さん)そうなんですね!じゃあ松井さんが池田さんとかと個別で1on1やったりして進めたんですか?

(松井さん)池田さんに社内のslackに入ってもらって、そこでほぼ他のメンバーともコミュニケーションを取って進めてもらいました

(広野さん)このくらいかかりますみたいな具体的なスケジュールは出したんですか?

(池田さん)僕自身、リニューアルを2週間でやるっていうのを本気にしていたので、数日後にはメインのレイアウトをエンジニアさんに渡さないと思ってまず大枠をふわっと作りました。見積もりとかは覚えてないんですけど、だいたいフルリニューアルでこのくらいってのがあるので、その金額を提示しました。

(松井さん)リニューアルを始める前に、旧デザインのほうでも一緒にデザインの仮説検証をやりつつ、フィーリングを探り合うみたいな機会をとりました。それで1ヶ月くらい週2くらいで会う期間を取っていて、それが終わってからのフルリニューアルでした。

(広野さん)仮説検証って何の仮説検証ですか?

(松井さん)リデザインとは別に、ここのボタンをここに置いたらどういう数値が上がるみたいな機能改善のものですね。そういう既存のものを触りながら、sketchファイルも見てもらっていました。今もやっている

(池田さん)リデザイン前はフルスクラッチでUIをなぞるみたいな作業が発生していました。リデザ前後でそういう期間はだいぶ減りましたね。

(広野さん)具体的な話になるんですけど、Abstructとかinvisionとかいろんなデザインツールがある中で、sketchファイルを綺麗にしたっていうUIアップデートに際して具体的に使ったツールを教えてもらえると嬉しい

(池田さん)先ずはsketchのコンポーネントとかスタイルの機能をしっかり使いこなすことですね。そこで2点力を入れた部分があって。
一つはデザイン側とエンジニア側で、コンポーネント名という共通の言語を持つということです。新しいスクリーンが出てきた時に、ここはこのユーザーセルを並べておいてくださいというと新しいスクリーンが秒でできてしまう、みたいな。そこには力を入れました。
もう一つは今後、デザインがインハウス化した時に、経験がない人でも新しいスクリーンがすぐに組めるようにパーツを作っていくっていう作業をしましたね

(松井さん)すでにリデザ中〜リデザ後に入社した社員が、池田さんが作ってくださった礎の上にデザインを制作しています。

(池田さん)けっこう試しにやっていたことが多かったが、実際に使ってもらって成功だなと安心しましたね。僕が作っても大差ないようなものが、かなりスピーディーに上がってきたのでよかったなと思いました。

(広野さん)命名規則はどうやって考えましたか?勝手にこっちで考えちゃうのか、エンジニアさんとコミュニケーションをとりながらののどっちですか?

(池田さん)僕自身、100~200くらいアプリを世に出してるんですけど、その中でエンジニアさんとやりとりをたくさんしていて、だいたいこんなものだろというのがあるんですね。他にもAtomicデザインみたいなアカデミックに研究されているものを翻訳して落とし込んでいたりもします。なので、オレオレ仕様だが、浸透はするかな、と。

(松井さん)一番気をつけていることは、ちゃんとデータを見て改善することですね。今の時代どの会社もデータ見てますっていうけど、スタートアップで一つ一つの施策の数値を見て、誰か一人の意見に従ってオレオレ的な感じで進めるのではなく、再現性を持って進められるところは少ないと思っています。
というのも、データを取れるようにするまでに時間がかかるし、ノウハウもサービスによって条件が違ってくるので自分で構築しないといけない。そもそも毎週毎週データ分析に時間をさくことも、リソースが限られている中では難しい。でもその中でしっかりやっているのかなと思っています。
結局ユーザーファーストといっても、自分たちが思うユーザー像は結局想像になっちゃう。実はLIPSではペルソナをあまり立てていません。自分本位になるよりは、使っているユーザーの行動を見るのが一番正確だなと思っています。

(広野さん)社長の深澤さんもデータを見ていますよね。トップがデータを見ているから、会社の文化も割とデータ・ドリブンで動いているんですかね?

(松井さん)そうですね。社長が自らデータ基盤の開発もやっています。データの見方も普通にアプリ開発していると触れないことが多いので、毎週の定例会で、こういう施策をやってこういう結果になりましたという会を開いています。そこで、社長が解釈とかこういうデータを取ったほうがいいのではといった助言などをして、がっつり関わっています。なのでそういう文化になっているのではないでしょうか。

(広野さん)そういう定常的にデータをみる一方で、さっきのような仮説検証、実際に触ってもらっているところを見るみたいな定性的なこともやっていて、バランスが良いなと思っています。後者のユーザーテストはこういうテストをこういう頻度でやってるみたいなことを教えていただけませんか?

(松井さん)ユーザーインタビューは一時期めちゃくちゃやっていたのですが、最近はやってないです。ユーザーインタビューって、どうやって活かすかがすごく難しいんですね。
やり方としてはユーザーさんの中から退会するタイミングで声かけたり、周りで使っている人に時間をいただいて実際に触っているところを見せていただいて、謝礼を渡すみたいな一般的なユーザーインタビューのプロセスを取っています。
ただ、そこであがってきた定性的な課題が、全ユーザーの中のどのくらいのユーザーに当てはまるものなのかが判断が難しいので、参考程度でやっています。
ただ、試したいなと思っているのは、データを見てもなんでこういう数字になっているのか分からないことがあるので、そこを探るインタビューをピンポイントでやってみたいなとは思っています。

Q1「タカヤさんにお聞きします。普段のブランディングのデザインプロセスで毎回やるプロセスはありますか?」

(タカヤさん)まずリサーチを大事にしています。例えば、LIPSとかMERYだと僕はそもそも性別が違うので、自分が見たLIPS感を表現してもどうしようもない。いまの若い人がどういうものに触っているもののか、コスメの分野だけでなくファッションや音楽など、そういうものをまず洗い出します。その中で、その世代に好まれているデザイントーンや色を見つけます。
今回LIPSのピンクには少しだけ紫色を混ぜているんですね。数年前は真っピンクが流行っていたんですけど、この1年くらいは甘くなりすぎない中性的なピンクが流行りそうというのがあって、それをデザインに活かしたりしています。

Q2「広報戦略についてお聞きしたいです。まず優良モニターに使ってもらって次にyoutuberに頼んだとおっしゃっていましたが、いろんな方法がある中でなぜそういう形をとったのか教えてください。」

(松井さん)まず、モニターさんに関しては、LIPSにとって一番最初の投稿者になるので、連絡が密にとる必要があるなと思い、1対1で連絡してお願いしました。
Youtuberさんについては他にもFB広告やtwitter・インスタグラマーなどにも頼んだりしていましたが、世の中に出てきてから時間が経っているので、コスパが悪かったんです。お金のないスタートアップができる、コスパの良い新しいマーケティングの経路、方法を見つけたいとなったとき、Youtuerに宣伝してもらうといいよという噂が入ってきたんです。それで試してみました。
当時はyoutuberさんにアプリ紹介をしてもらう人が少なかったので、とてもコスパがよかったんです。加えて、YoutuberさんがあらかじめLIPSデ投稿して、動画できっちり紹介するという戦略がハマったので、引き続きやりました。
そこから数ヶ月でYoutuberさんによる宣伝は値段が上がったので、本当にタイミングが良かったです。

Q3「タカヤさんに質問です。最初の質問でトレンドの話がありましたが、自分のデザインの寿命みたいなことを考えたりしますか?デジタルプロダクトだと、iOSなどプラットフォームのデザイン変わると、アプリのデザインもガラッと変えないといけないというようなことがありますが、そこらへんはどう思いますか?」

(タカヤさん)基本的にCIとかBIは、そのサービスが生きている間は使いうることを前提に設計するということを自分はテーマにしています。
結論から言うと、僕はサービスに関して、ユーザーが変わったり、ブランドイメージを大刷新したい時まではデザインが持つようにしたい。
今回のLIPSのリニューアルは裏テーマとして、20代前半までは耐えうるデザインのアイコンにしておいて、もしかするとLIPSのシンボルを外すとデザインが洗練されて、20代後半までは持たせられるかもしれないみたいな、今のデザインを使いつつリファインできるようなcapabilityを持たせることを考えています。
今のデザインで3年いってくださいってよりは、これを今作っておいて、ちょっとずつ手を加えたり、若干形状を変えることで長く持つみたいなモードですね。

(広野さん)リブランディングって、作るのは一回だけど、それがうまくいったかって数値化しにくいし、すぐにわかるものでもないんですよね。3年後も使えるではないけど、今はこうだけどみたいな信念があるんですかね。

(タカヤさん)自分の中でも矛盾かと思うが、基本的にスタートアップは速い流れの中で生きていて、デザインのUIはトレンド、ユーザーの動向の変化に応じて発展させていくものだと思います。
なので、シンボルとか結構速いタイミングで変えるところもあるが、自分はそのスピード感を理解しつつもなにを変えるべきで何を変えないべきかを見定めないとダメだと思います。
全く新しくすると、何も残らないじゃないですか。使えるところは残して使いつつ、資産として計上していく部分があると良いと思います。

(広野さん)最後に一言、今後の意気込みとか宣伝とかお願いします

(松井さん)宣伝になるんですけど、今17人の社員数でやっていますが、まだまだ一緒にLIPSを作っていける仲間を探しています。よろしくお願いします!

(池田さん)LIPSチームは、データをめちゃくちゃとってくれるので、UIを変えた結果を見ることができます。UIデザイナーとしてはとても楽しいので、デザイナーの人は応募して欲しいです。
僕自身も日本のスタートアップでデザイナーを育てようとしていて、あまりまだプロダクトを引っ張っていく自信がない人を育てて放出しようとしています。勉強中って人はメッセージください。

(タカヤさん)池田さんは男気がありますね。
LIPSさんでは今回大規模なリデザインをさせていただいて、かなり見た目も機能も生まれ変わりつつあります。これからデザイン的にも今回作ったシンボルが他のところで活きる機会が増えると思っています。デザイナーにせよディレクターにせよ、興味がある方はお問い合わせして見てください。

(広野さん)皆様ありがとうございました!
では、引き続きUX Nightをお楽しみください。チャンネルはそのままで!(DJ風に)

この記事が気に入ったらサポートをしてみませんか?