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万曲を超えたタイミングでリリース
    • 認識中のインタラクション
      • 水の表現に着目
      • 何もできないとストレス
      • 音に反応して、波紋が広がる
      • 触ることで波紋が広がる
      • 周囲の音に反応していることが分かる
    • 以前に作っていたインタラクションが活きた
  • その場で使えなくても、チームで色々作ってみる