NOW LOADING... 0%

root inc

いかにしてSlackは市場を席巻したか –– UIデザインを担当したMetalab創業者がその舞台裏を語る

この記事はSlackのUIデザインを手がけたMetaLabの創業者アンディ・ウィルキンソンのブログ記事を公式に許可をいただき翻訳したものです。
社内チャットツールSlackの初期サービス開発の舞台裏をご紹介します。


================
「Slack成長の秘密は何なのでしょう?」車内にBluetoothを通した声が響きます。
「あなたがたが、Slackに行ったことを私たちにもしてほしい」と、今後クライアントになるであろう、成功を収めたSaaSアプリのCEOが、彼のプロダクトのリデザイン依頼をしてきました。
それから私は今までに何百回もした話を始めました。

この一年、ほぼ毎日のように同じ質問を、Slack成功の鍵について分析を試みるクライアント、投資家、デザイナーから浴びせられていました。
Slackは今や世界を席巻しており、28億ドルの評価額と何十万ものユーザーを持ち、猛スピードで成長しています。

なぜ私にSlackの質問がくるのか?
私はMetaLabというデザイン会社を経営しています。
私たちは普段表舞台には出ないので、おそらく、あなたはこの名前を耳にしたことはないでしょう。しかし、私たちがデザインしたものを使ったことがあるでしょう。
2013年末、Slackから、初期段階のプロトタイプを完成品に仕上げる依頼がやってきました。ロゴ、マーケティングサイト、ウェブやアプリのデザインをわずか6週間で手がけました。
Slackのチームにデザインを納品して以来、多少の微調整はなされましたが、デザインはほとんどそのままです。他にも有名なクライアントと仕事をしてきましたが、10年程のMetaLabの歴史の中で、Slackは間違いなく最も成功したプロジェクトと言えます。現在28億ドルの価値と20万の課金ユーザーを持ち、さらに、嬉しいことに素晴らしいデザインについて人々が話しています。しかし、こうなるとは予想していませんでした。

2013年の7月、スチュワート・バターフィールドから一通のEmailが届きました。
名前ですぐ気がつきました。私はFlickrの大ファンだったから。
そう彼はFlickrの共同創業者で、YahooにFlickrを売却した後、私と同じくカナダ北西部を拠点としていました。
彼の大きなニュースは、2009年に始めたGlitchというゲームを閉鎖し、新しいものに取り組んでいるという情報でした。
彼は私たちにその新しい社内チャットツールのデザインを依頼してきました。
私はうめき声をあげました。私たちはCampfireの熱烈なユーザーで、何年もの間、次から次へと出てくる模倣プロダクトをテストしてきました。チャットサービスの問題は既に解決し尽くされていると思っていたのです。
スチュワートのプロダクトをレッドオーシャンのマーケットの中から際立ったものにすることは難しいだろうと考えていました。
それでも、スチュワートと働く機会を得ることに興奮し、Campfireで遭遇した問題を解決できる面白い試みになると思いました。

私たちは握手を交わし、袖をまくりあげ、さっそく取り掛かりました。
初日に見せてもらったプロトタイプは、ブラウザに少し装飾されたようなIRCクライアントでした。
ただの骨組みで、味気ないものでした。
その6週間後、私たちのキャリア史上で最高の出来に仕上げることができました。
どのようにして、殺風景なブラウザIRCから、今私たちの知る世界中で愛されているSlackを作ることができたのでしょう?

Slack UI

成功した理由を振り返って分析することは、水の味を表現することと同じで、大変難しいことです。
私たちは頭をフルに使って、デザインし、しっくりくるまで何度も作業を繰り返すすことを好みます。Slackも同じようにして出来ました。魔法なんて存在しません。
しかしながら、思い返すと、この大きな成功へと導いた鍵がいくつか思い当たります。

多くの人がSlackを「面白い」と評価してくれています。
使っていても仕事をしているように感じることはありません。Slackを使って仕事にとりかかっていても、ゆるっとした(slack off)感じになるのです。
しかし、仕組みは、他の社内チャットツールとほとんど変わりません。
ルームを作成し、人を追加し、ファイルを共有し、グループでチャットしたり、ダイレクトメッセージを送ります。
Slackはどこが違うのでしょうか? 3つのポイントがあります。

Slack CI

1.インターフェースの違い

レッドオーシャンンのマーケットの中で注目を集めるための方法が必要でした。
ほとんどの企業ソフトウェアは70年代の安い卒業パーティのスーツのようです。
控えめな青とグレーのスーツがそこらへんにいるようです。
そこで、私たちはロゴを、紙吹雪の大砲が発射したようにデザインしました。
エレクトリックブルー、イエロー、パープル、グリーンをふんだんに使いました。企業とコラボしたプロダクトではなく、ビデオゲームのような色彩を使用しました。

(以下の画像は、HipChatとSlackの比較です)

hipchat & slack

どちらを使いたいですか?どちらも機能は同じですが、ひとつはさえない感じ、もう一方はワクワク陽気な感じです。
違いはなんでしょう? 鮮やかな色使い、サンセリフのフォント、フレンドリーなアイコンと、顔文字や絵文字がいたるところにある点でしょう。

2.インタラクションの違い

Slackは、ちょっとした面白いインタラクションであふれています。
ロゴのアニメーションは読み込む度に弾け、モーダルはスクリーン上部から下までスライドし、チームを変更するときはトランプのようにスクリーンが切り替わります。
Slackの全てが、スクリーンから飛び出して、跳ね回っているようです。
これらのインタラクションは、ユーザに何が起こっているか知らせるためだけにデザインされたわけではなく、少し笑顔になってもらうためにデザインされました。

今まで、たとえば、家に入って形容しがたいけれど、なんだか安っぽいなと感じたことはありませんか?
プロの建築業者でしたら修繕点をリストアップするでしょう・・・

企業とコラボした製品ではなく、ビデオゲームのような色彩を使用しました。

凸凹な壁、隙間のある板間、中が空洞になっているドア、安い金物・・・しかし、一般人なら本能的にリアクションするだけです。
丁寧に施行された住宅のように、素晴らしいソフトウェアは、満足のいく数多くの小さなインタラクションをユーザに与えることにフォーカスしています。
モバイルアプリの素晴らしいトランジションは、まるで重厚な木の扉に取り付けられたドアノブに手をかけたときと同じ感触を得ることができます。
インタラクションに指で触れることはできませんが、まぁまぁ、このお家はよくできていると思いませんか?
Slackは使っていて面白いでしょう。まさにしっかりした作りの家と同じです。

3.言葉遣いの違い

Slackは、見た目と感覚だけでなく、言っていることも違います。
Slackのすべてのコピーは面白みを出す大切な要素だと捉えています。
他のアプリでは、ローディング中、アイコンを表示するだけですが、Slackは面白い言葉を表示します。
例えば、「デザートを急いで作りたいって? OREOを床にぶちまけて動物の様に食べよう」このように、少し変なユーモアを退屈な1日に注入します。
Slackは、退屈な企業チャットツールの代わりに存在する気の利いた友達の様なものです。
例えば、映画InterstellarのTARSと、2001年:宇宙の旅のHAL9000を比べてみましょう

Slack:

TARS: 調子はどう?俺のロボットコロニーの奴隷たち?

Slackの競合:

HAL9000: 通常業務に戻ることを完全に保証します。このミッションに対する偉大なる熱意と自信を失っていません。

SlackのTwitterアカウントでさえ、何十億ドルの企業ソフトウェア企業より、絵文字好きなコメディアンっぽいです

Lightning

@SlackHQ :

みんないい仕事してるね。ほんと、すごい。

どのチャンネルにいるかすぐ知りたい? マウスは触らないでね。Cmd/ctrl+Fで検索できるよ。

忙しいチャンネルに気が散るって?
離れたくないけれど、ちょっと静かにしてほしい?ミュートしましょう!

「もういい!スマホで編集するなんて冗談だろう」だって?
冗談じゃないよ!メッセージを長押ししたら、編集できます〜!

私たち人類は、ペットから無生物までのすべてを擬人化する傾向にあります。
車が笑っている様に思えたり、街灯に対して「寂しそう」と思ってしまうのです。
Slackは、元気で、明るいUI、楽しいインタラクションと、面白いコピーライティングがすべて一緒になって人格を作り上げます。
これによって、ユーザーはSlackを気にかけてくれるようになります。
他者とシェアしたくなるのです。単なるツールやユーティリティではなく、お気に入りの同僚のような気分になるのです。

“Slackは、退屈な企業チャットツールの代わりに存在する気の利いた友達の様なものです。”

子供の頃、White Spotというハンバーガーチェーンが大好きでした。小さなお店として野球スタジアムから始まったのが、過去85年でカナダ全土に広がるチェーンに成長しました。この成功の秘密はなんでしょう?
”Triple-O”の秘密のソースがWhite Spotのハンバーガーのすべてに使われています。
私は両親に、愛情こもった家庭料理よりも、White Spotに行こうとねだって困らせていました。それは、父が「家でハンバーガーを作ればいいじゃないか」と衝撃なことを言うまで続きました。
「ほら、秘密のソースはマヨネーズとケチャップとピクルス少しでしょう?」と父は言いました。ということで、ハンバーガーを自宅で作ってみたのですが、White Spotの秘密のレシピは、スーパーで買える調味料を混ぜただけだと判明したのです。
誰でも作ることができるのに、作り方を知っているのも知ろうとするのも少数の人間だけです。知らない人は、秘密のレシピで我慢するだけなのです。

Slackの「秘密のレシピ」も同様です。
もちろん、材料をちょうどよく仕上げることは難しいですが、HipchatとCampfireが構築できない機能は持っていません。
同じ企業チャットクライアントですが、Slackは使っていて面白く、あなたの生活にひとつのキャラクターが登場したような気分なのです。
SlackはTARSです。HAL9000ではないのです。

この数ヶ月で、Slackの競合は追いついてきました。
カジュアルなコピーを使い始めたり、デザインを変えてきました。
しかし、これはおじさんがマカレナの振り付けを仕込み始めたのと少し似ています。
少しばかり遅いのです。みんな、Slackをすでに選んでしまいました。
Slackが人気をかっさらってしまいましたから。

Andrew Wilkinson(MetaLabとFlow創業者)

最後に

いかがでしたか?
既に出尽くしたと思われていたチャットツール市場の中で差別化するポイントはほんの些細なディテールにありました。
Slackの成功からわかることは、既に世の中にあるプロダクトでも満たされない価値は存在すると言うことです。
重要なのは機能的な特長ばかりに目を向けることではなく、利用するユーザーとプロダクトの間のコミュニケーションの最適化にあるように思えます。
Slackを利用するとまるで人と対話をしているよなワクワク感を味わうことができます。そういったヒントは競合プロダクトから学ぶものではなく、日常の体験の中に溢れていることもあるのではないでしょうか。

翻訳元:
Slack’s $2.8 Billion Dollar Secret Sauce
How Slack stole a multi-billion dollar market by becoming everyone’s favorite sassy robot sidekick.

翻訳:Kanako Baba

MetaLab: http://metalab.co/
Slack: https://slack.com/

Pocket

人気記事

お問い合わせ

新規事業立ち上げやWebサービスの改善でお困りの方は
お気軽にご相談ください。
課題に応じたデザイン手法をご提案させていただきます。

お問い合わせフォームへ