Webナントカ

╭( ・ㅂ・)و ̑̑ グッ !

Cookpad Tech Kichen #10 〜Product Design Talk〜 に参加してきた

概要

所感

  • 各サービスのデザインに対するこだわりのポイントを知れた
  • 手がけた機能の具体例の話が中心で、分かりやすかった

「料理の追体験」を実現するデザイン」

  • 若月 啓聡 - @puzzeljp

    • クックパッド株式会社
  • タイムラインを作った

    • つくれぽとレシピがある
    • 「自分のフォローしている人が同じ料理を作った」が分かる
    • つくれぽを通して、レシピ投稿者とコミュニケーションが生まれる
      • 返信がもらえてないものはコメントを表示しない
    • 誰が作ったかわかる
  • タイムラインについて検証
    • 社内インタビュー
    • ユーザインタビュー
    • ユーザさんの懇親会
    • タイムライン上部に利用開始後に意見を送るボタンを設置

「6年続くはてなブログの世界観になじむデザイン」

  • 松井 沙織 - @mazco_dx

    • 株式会社はてな
  • はてなブログ

    • しっかりも簡単も
    • 書くことを邪魔しないように
      • サイドバーの出し分け
      • 機能ごとにON、OFF
    • 読まれるブログ
      • はてなスター
      • はてブ
    • 6周年
  • デザイナー2名体制
    • 東京でリモート
  • なじむようにデザインする
    • 新画面でも、ユーザからすると、体験の延長
  • 履歴画面
    • 既存のUI
      • Dropboxのバージョン管理
      • GitHubの差分のUI
    • 簡略化しすぎない
      • アイコン内に色々格納しすぎないようにする
    • 元のデザインから情報整理
  • 新機能
    • こよみモード
      • 読み返せるように
      • 手帳、日記帳のように
        • セリフフォント
      • 続けた分だけ、楽しい、嬉しいを可視化する
  • まとめ
    • サービスを知ろう
    • ちょっとずつ変えていこう
  • デザイナー募集中

「温度のあるサービスづくり」

  • 木坂 名央 - @naomeme

    • GMOペパボ株式会社
  • minne

    • 国内最大級のハンドメイドマーケット
    • ハンドメイド作品を売ったり買ったりできる
    • 人の手のぬくもりを伝えたい
  • 施策
    • こっそり褒める
    • 作家に近づく
  • こっそり褒める
    • 嬉しいタイミング
      • 作品がお気に入りされた時
      • 売れた時
    • 紙吹雪が振るアニメーションでおめでたい演出
    • アプリを開いた時にポンと出る
    • みんなTwitterでつぶやいてくれる
    • 嬉しいことに気づくきかけと、それをシェアするきっかけ
  • 作家に近づく
    • リアルイベント
    • アトリエ
    • ものづくり部
      • 作家さんを呼んで社内でワークショップ
    • より身近に感じてもらえたり、雑談の中からヒントが得られる
  • エンジニア募集中

「自然さを追求した音楽体験のためのUX」

  • 冨樫 晃己 - @kokiiiviii

    • CyberAgent, Inc. / AWA Co. Ltd.
  • AWA

    • 1350万DL
  • 技術軸でモックアップを複数作った

    • こういう見せ方できるよ
    • レコード風にジャケットを丸くするとレーベルさんから怒られた
  • テーマ
    • GAPLESS
      • 現実世界にありえる自然な動きにする
      • 背景のパララックスで位置関係
      • ブラーをかけて後ろにあることを分かりやすく
  • 音楽認識機能
    • 楽曲数が3000万曲を超えたタイミングでリリース
    • 認識中のインタラクション
      • 水の表現に着目
      • 何もできないとストレス
      • 音に反応して、波紋が広がる
      • 触ることで波紋が広がる
      • 周囲の音に反応していることが分かる
    • 以前に作っていたインタラクションが活きた
  • その場で使えなくても、チームで色々作ってみる

Airbnb Storyを読んだ

Airbnbの創業ストーリーをまとめた本。ワクワクしながら読めた。臆面なく、度胸を持って、色々なことに取り組んでいきたいと思わせる本だった。

Airbnb Story 大胆なアイデアを生み、困難を乗り越え、超人気サービスをつくる方法

Airbnb Story 大胆なアイデアを生み、困難を乗り越え、超人気サービスをつくる方法

ストーリーは、美大出身のデザイナーのチェスキーとゲビア、エンジニアのブレチャージクの三人で、赤の他人を自宅に泊めるという奇抜なアイデアを、様々な問題を乗り越えながら形にして、時価総額3兆円の会社にしていく話。

アイデアの奇抜さから、投資家から投資を受けるまでに苦労した話や、ホストの部屋が荒らされたり、既存のホテルや法律との戦いなど、たくさん失敗の経験談が細かく描かれている。

以下、ネタバレを含んでいるが、個人的に印象に残ったエピソードや言葉を書いていく。

シリアル

サービス開始当初、資金不足で継続がままならない時に、大統領選にちなんだデザインのシリアルを作成して売り、後にYコンの面接でシリアルの話が活きたというエピソード。創業時の泥臭さがにじみ出ていて良かった。

のちにグレアムは、例のシリアルが決め手だったと言っていた。「4ドルのシリアルを40ドルで売れるなら、他人のエアベッドで寝るようにみんなを説得できるだろうと思ったんだ。たぶんね」

プロダクトへのこだわり

Airbnbのウェブサイトは、3つのこだわりを持って作られていた。

  • 簡単に使えること
  • 掲載物件が美しく見えること
  • 必ず3クリック以内で予約が完了すること

掲載物件を美しく見せるために、プロの写真家をホストの家に派遣していた。3クリックルールはジョブズがiPodを開発した時に3クリックで楽曲が手に入るようにデザインさせた話から由来している。

このプロダクトへのこだわりが熱烈なファンの獲得に繋がったと思う。

ウィムドゥを買収しない選択

パクリサービスにヨーロッパに先行された時の判断。アツかった。

メイソンは、ウィムドゥがエアビーアンドビーを殺す可能性もあると言った。ザッカーバーグは買わないほうがいいと言う。一番いいプロダクトを持つ会社が最後に勝つ、と。決定打になったのは、ポール・グレアムのひとことだった。エアビーアンドビーとウィムドゥの違いは、エアビーアンドビーの創業者は伝道師で、ウィムドゥの創業者はカネで動く傭兵だということ。たいていは伝道師が勝つ。「自分に賭けた」瞬間だった。チェスキーたちは、ウィムドゥを買わないと決めた。

「ゼロをひとつ加える」

ホストの家が荒らされた時の対応の決定が内部でモメたことにより、和解が遅れた時の話。共同創業者のアンドリーセンがチェスキーの送ろうとした被害者への手紙の賠償額に0を一つ加えたエピソード。

この経験から、チェスキーが学んだのは、コンセンサスで決定するなということだ。「危機のときコンセンサスで決めると、中途半端な決定になる。それはたいてい最悪の判断だ。危機のときには、右か左かに決めるべきなんだ。」それ以来、考え方をひとつ上のレベルに持っていくことを、「ゼロをひとつ加える」と呼ぶようになった。

「文化を壊すな」

チェスキーは文化を壊さないために、日曜の夜に社員向けのメールを送り、社員が300人になるまで、必ず面接をしていた。文化を守ることによって、イノベーションが生まれやすい環境を作るというのは、ベンチャーっぽい考え方で良い。

ティールはただ、「文化を壊すな」と言った。投資した理由のひとつが、エアビーアンドビーの文化だが、企業規模が拡大すればかならず文化が「壊される」、とティールは言う。チェスキーはこれを挑戦と受け止め、以来エアビーアンドビーの文化に執着と言っていいほどの注意を払ってきた。「文化が壊れるってことは、プロダクトをつくる機械が壊れるってことだ」チェスキーはそうブログに書いた。文化が協力であればあるほど、社員を信頼でき、その分正式な規則や手続きが少なくて済む。手続きがすくなければそれだけ管理も軽くなり、イノベーションが生まれやすい環境ができる。

3人だからこそ

ゲビアの言葉がアツかった。この3人だったからこそ成功できたという言葉が、かなり印象的だった。

3人が違っていたからこそ成功できたと彼らは言う。「ひとりじゃ絶対にできなかった。ふたりでもできなかった。ネイトとブライアンと僕の持ち寄るものがひとつになったから、この数年の困難を乗り切れたと思う」とゲビアは言う。

エアビーアンドビーは投資家の考え方を変えた。

どこからどう考えても、エアビーアンドビーはありえなかった。3人ともそれまでほとんどビジネスの経験はなく、起業してからずっと独学だった。これまでのビジネスの常識とは反対のことをした。最初の頃は、規模拡大に集中する代わりに、大陸の反対側の一握りのユーザーにありったけの力と資源を注いだ。お金をかけてプロの写真家を雇い、一件ずつ訪問した。ありとあらゆるリスクのありそうな奇妙なサービスを、世間に受け入れさせたばかりか、流行らせた。

3人の才能が集まったからこそ、成し遂げられた。

すべてを可能にしたのは3人のめずらしい才能の組み合わせだった。このトリオだからこそ、巨大な障壁を乗り越え、複雑すぎる問題を解決できた。グローバルな決済プラットフォームをつくり上げ、検索照合の手法を開発し、リスクをできるだけ排除して安全を育むシステムをデザインした。そうしたイノベーションのすべてが、その後に生まれる類似サイトに標準装備されるようになった。スムーズで速くて親しみが持てて使いやすいサイトと奇妙なアイデアの組み合わせに、待ちかねていたファンは飛びついた。3人はそれらをすべて取り込んで、拡大した。よく見逃されているが、エアビーアンドビーは今も昔も実行力で抜きん出ている。

おまけ(作中に出てきた本)

ブレチャージクは下記の書籍から経営に関する知恵を得ていた。

ビジョナリー・カンパニー ― 時代を超える生存の原則

ビジョナリー・カンパニー ― 時代を超える生存の原則

あなたのチームは、機能してますか?

あなたのチームは、機能してますか?

キャズム

キャズム

まとめ

創業時のエピソードがたくさん盛り込まれていて、スラスラ読めて面白かった。臆面なく、度胸を持って、色々なことに取り組んでいきたいと思わせる本だった。うめさんに漫画化して欲しい。

コートエシエルのリュックを買った

2016年秋にSサイズが販売されたので、買った。通称餃子バッグ。半年以上使ってみたが、かなり満足している。

買ったのは、これのSサイズの黒。

以前からコートエシエルのリュックは使っている人が多くて、気になっていたのだが、いかんせんデカいと感じていて、自転車とかならともかく、電車乗る時とか大変そうだなー、小さいサイズがでないかなー、と思っていた。

そう思っていた矢先、2016年秋にちょうどSサイズが出たので、実店舗に行って、背負わせてもらったところ、とても背負いやすくて、気に入ったので、買った。

ちなみに、エンジニアのリュックとしての下記の要件を満たしていた。

  • 13インチのMacBookProが入ること
    • 入る
  • 雨の日にも中が濡れない
    • 雨を弾く素材
    • 使っている中で、中まで浸水したことはない
  • 背負うのが楽
    • 肩まわりの形状がしっかりしていて、かなり背負いやすい
    • MacBookProを入れていても重さをあまり感じない
    • 以前、物理的な重さがかなり軽量なタイプなリュックを使っていたが、その時よりも背負うのが楽に感じる

Mサイズとは形状が異なり、ファスナーの位置や中の構造が違っていた。この辺りは実物を見てから決めた方が良さそう。Mサイズの方が当然のことながら、容量は大きいし、収納力は高く便利なのだが、普段使いにはオーバースペックだと感じたので、Sサイズに決めた。YAGNIの精神。

ちなみに、小物の収納力が乏しいので、これを入れて、小物を整理して使っている。見た目の相性も悪くない。

あと、リュックによくついている上部の取っ手がかなり丈夫で、家の中では、地べたに置かず、こんな感じで机の高さに吊るして使っている。帰ってきて、リュックからPCを取り出し、机に置く動線がかなり楽。PCを入れたまま吊るしても、全然壊れる気配はない。

f:id:kikunantoka:20170707020908j:plain

長く大切に使っていきたい。