DeNAで行われた「クリ☆ステ特別版 UIデザイナーの今とこれから ~現役UIデザイナーによるUIデザイナーのためのセミナー~」 に参加してきました。
毎日の料理のためのUIデザイン
クックパッド株式会社 池田拓司さん
▼クックパッドについて。
「毎日の料理を楽しみにして心からの笑顔を増やす」をスローガンとしている。
利用ユーザーは男性15%、女性85%
▼デザイナーをとりまく開発環境
エンジニアとデザイナーで50名
うちデザイナーは８人。
・クックパッドはユーザーの体験に沿った組織構造をとっている。
・プロジェクトの規模は１週間?３ヶ月まで様々ある。
▼サービス開発の特徴
・ユーザーへの密着・駆動開発
共感（インタビューなど）
↓
限定公開
↓
行動ログ・指標評価
↓拡大公開
・根源的なユーザー理解
EOGS（Emotion-oriented）という独自の指標を使っている。
・ユーザーの声を集める
・説明なしでも分かる・無言語化
無言実行→自然とUIに組み込んでいった取り組みを行っている。
▼UIデザインのガイドライン化
・３つのガイドライン
UI Design Rules
UI Development Rules
UI Design Framework
→毎日の料理のため
・毎日アクセスしても自然に馴染める使い勝手
・デバイスをまたいでも違和感のない使い心地
→開発効率のため
・デザイナーが全ての開発で手を動かさないように
・素早いプロトタイプ開発を行える
・個々の意思決定を素早く
▼ガイドラインの例
料理を最大限よく見せる
・寒色はあまり使わない
・料理写真の見栄え
一番大切なページへの体験
・レスピへのリンクは緑
別々である必要性がないこと
・アップ、ステイ、ダウン
ガイドラインはドキュメントにしているのではなく、
UIコンポーネントとしてフレームワーク化（Sara）している。
（ボタンの色やタブメニューなど）
・クックパッドはSassを導入している
・ルールにはスタッフ全員がアクセス可能にしている。
▼UIデザイン改善事例
事例その１：PCトップページの送客改善
レシピをさがすページからクックパッド全体を俯瞰して見られる構造に。
送客枠の位置の変更することで送客数をコントロールしようとした。
→だがそんなに大きな変化は起こらなかった。
送客枠のクリエイティブを変更してみた。
バナー型の広告からユーザー参加型のコンテンツにしてみた
→仮説通りアクセス数が上昇した。
事例その２：スマートフォンアプリへの送客改善
記事の表示を「一枠ランダムで説明付」→３枠同時で説明なし」に変更
→２つのサービスは上がって、１つのサービスが下がった。
※トータルでのパフォーマンスを優先した。
事例その３：検索結果ページの要素位置変更
「●●だけで作れるレシピ」
→画面上部がよいとはかぎらなかった。
事例その４：アレルギー対応レシピアプリアイコン
アレルギーちゃんを子どもをイメージしたアイコンにしてみた。
→定性的なデザインの判断
※こういった改善事例は社内でも共有している。
▼今、そしてこれから
レシピから食のプラットフォームへ
（買い物、健康、教育娯楽、美容）
※新しいユーザー価値の創造
UIデザイン
・ユーザーにとって目的とすることを自然に可能とするデザイン
・届け手と受け手とのギャップの少ないデザイン
・ユーザーにとって驚きや感動を与えることができるデザイン
どこまで実現できているかはわかりませんが、
クックパッドさんではUXとUIデザインに真剣に取り組んでいる様子でした、
やはり少ない労力でリリースして検証することが大事なようです。
fladdict流UIデザイン
fladdict 深津貴之さん
▼ツール
アプリ開発の前にツールとメソドロジーを開発する。
自分でツールやメソッドを作ることで、工程を理解し最適化するバイアスが働く
・ペーパープロトノート
・iOSのテンプレート（ペーパープロトと合わせて使用する）
・ピクセルスケール（iPhoneのピクセル数用定規）
・ブレストデック（ブレスト用アプリ）
▼メソッド
時代や環境、経験則に依存しないように、
考え方や学習を抽象メソッドベースで行う（時代が変わっても使える技術）
・プロコンリスト（長所と短所を並列に並べたリスト）
例：プロコンリストのプロコンリスト
長所
・客観的に評価する機会を得られる
・簡単に行える
・チームで状況を共有しやすい
短所
・感覚、感情面の評価ができない
・正確な重み付けが難しい
→釣り合いの撮れる長所と短所をセットで消していき、どっちが重いか考える。
感覚や思い込みでの先走りにブレーキをかけ、客観的評価の機会を設けられる
・ステートメントシート（コアコンセプトのチーム共有）
・ステートメント
・ターゲット
・ユースケース
・コア機能
・諦めること
例：ステートメントシートのプロコンリスト
長所
・工数が低い
・チーム全体で優先順位を共有できる
・アプリが本質からブレなくなる
・引き継ぎや途中参加しやすくなる
短所
・アプリのコンセプトが短所になる（急な方向転換が難しい）
・フィッシュボーン図（あいまいな問題なブレイクダウン）
問題と原因を網羅するツール
1.まず問題を書く
2.ゴールを書く
3.問題を具体的にわける。
4.さらに分割していく。
5.解決策を書いていく
フッシュボーン図のプロコンリスト
長所
・複雑な問題を単純化できる
・複数の解決アプローチを探せる
・状況を俯瞰できる
短所
・枝の精査/評価に時間がかかる
・イメージボード（関連しそうやイメージをひたすら集める）
イメージボードのプロコンリスト
長所
・多方面からの視点が得られる
・事前に可能性や方向性を検証できる
・トレンド等を俯瞰しやすくなる
・対案作成のフットワークがよくなる
短所
・既存のイメージに引っ張られることも
例：ATMのアプリを考えてみる。
1.コアコンセプトを考える。
2.リサーチ
3.シナリオを考える
4.何を入れるか入れないか考える
5.プロトタイピング（紙）
事例：入金のミスをなくす
プロトタイプのUIをフィッシュボーン図で解決する。
→テキスト入力型のUIを避ける
事例：送金ボタンのミスタッチをなくす
→確認画面を出す
※プロトタイピングを何度も繰り返す
ペーパープロトのツールを販売しているようでそれに反応している人が多数いましたが、
コピー機で実機を拡大コピーすればいいだけなので、私はそこには惹かれませんでしたが、
早い段階でラフなプロトタイピングを繰り返すということには同意しますね。
ペーパープロトタイプはPOPというアプリで撮影しリンクをつけることが出来るので、
いつかワークショップで試してみたいですねー。
https://popapp.in/
また、深津さんがiPhoneの動作をプレゼンするのに、
「リフレクター」というアプリでスマホの操作をMacの画面に表示していたので、
有料ですが、これもインストールしておいたほうがいいですね。
http://www.airsquirrels.com/reflector/
新規サービス立ち上げにおけるUIデザイナーのミッション
UIデザインの今とこれから
株式会社ディー・エヌ・エー 坪田朋さん
▼DeNA流 新規サービスの開発プロセス
DeNAの新規サービスを請け負うUXデザイン部は5人
事例：開発プロセス
リサーチ→ストーリー策定?UI開発→ユーザーテスト
→タスク分解→開発?レビュー/QA→リリース
コンセプト調査
1.そもそものニーズ調査
2.ターゲット（地域）調査
3.ターゲット（人）調査
4.刺さった場合、要望ヒアリング
開発前に決める事
1.リリースする日
2.キークレーム（ブレないコンセプト）
3.リソース人数
4.リリース後の撤退基準
※プロトタイプ作成からリリースまで約１ヶ月半
▼ストーリー作成と優先順位
リサーチ結果とビジネスインパクト予測を足して最終的に
サービス価値としてなりうる物をストーリー化して優先順位を決める。
▼実機でのモック作成/検証
プロトタイプテスト
・html/cssで再現
・実際に実機で触ってみる
・違和感を感じた部分は何度も作り直す
・迷ったら機能を落とす
▼定性調査
アイトラッカーを使ってユーザーテストを実施。
▼実機調整
TestFlightとBasecampというプロジェクトツールを使用する。
▼リリース後
★分析もデザイナーの業務！
▼定性調査
国内では社内のユーザーインタビュールームでユーザーテストを実施
北米ではUser Testing.comというサービスを利用している。
▼アプリ分析
1.DAU
2.ダウンロード数
3.ARPU（アープ）
4.R/R（リターンレート）
※DAUとダウンロード数に振り回されない、
リターンレートとアクション率を重視する。
▼UIデザイナーの仕事とは
ユーザーの立場を中心に考えながら様々な方法論を組み合わせて、
課題・欲求を解決する人
対象ユーザーを絞り込んで３人で結果を出すとのことだったんですが、
プロジェクトの規模感からすると少ないような気もしますね。
分析もUIデザイナーの業務ということでしたが、それは当たり前で、
むしろやらないとボタンを作るだけの狭義のUIデザイナーになってしまうと思います。
参照リンク
＜第2回＞魚の図が解決してくれる！
【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が0を1にする仕事なら、デザインは1を100にする仕事 」
コメント