「Web Service x Design」を日本デザインセンターで聞いてきた

「Web Service x Design ― 人々の日常を変えるWebサービスのつくり方」に行ってきました。

---

追記

Pressoについては、色々なところでブログ記事があります。あと、はてなで関係していそうな記事を追記しておきます

• はてなのニュースアプリ「Presso」のデザインができるまで - Hatena Designer’s Blog
• YAPC::Asiaで開発合宿について発表してきました #yapcasia - 大西ブログ
• はてなセミナールームで「ユーザテストLive! 見学会 in KYOTO」を開催しました - Hatena Developer Blog
• 「SIer→フリーランス→アプリ開発会社→フリーランス→はてな」なアプリエンジニアの、これまでとこれから - Hatena Developer Blog
• UI/UX設計の教科書、About Face 3輪講の資料を公開します - ninjinkun's diary
• About Face 3を読んだ - $shibayu36->blog;

---

• 2014年9月5日（金） 19:30〜
• 日本デザインセンター
  • グラフィックが中心の会社
  • 菅原さん
  • そうした場所で、ウェブサービスの話をする

登壇

• 伊野さん（ROLLCAKE.inc）
• 川上さん（はてな）

ポイント

• アプリを作っているのは同じ
• 抱えているユーザー数が違う
• スタートアップ企業と、IT企業では老舗
• クローズドなサービスと、オープンなサービス
• 新規のサービスと、既存サービスを新機軸にしたもの
• 月一で触れるものと、毎日触れるもの
• 有料サービスと、無料サービス

共通な点は、アプリである事だけで、それ以外は全然違う

---

レターの作り方

• @memocamera
• リリースまでどうやってきたか？を話します

経歴

• ウェブデザイナーとしてやったが、体験や企画を含めてやるように働き方を変えた
• VOYAGE
• cookpad
  • 新ロゴ！
  • iOS のリニューアル担当
• ROLLCAKE
  • 自分たちのサービス

レター

• 両親が喜ぶカレンダーの便り

• 届く、喜ぶ、飾る、たまる

  • 両親に催促されてメールで送ったりする
  • 日々の生活なかで、忘れがち
  • 自分も、両親も幸せじゃない
  • カレンダーなので、継続性を生むように作っている
  • 届いた写真がたまる

• 2月に開始

• 10万ダウロード
  • 10万通、送った
• クックパッドは、1000万ダウンロード

レターを作っていく上で大事にした事

地図（道順）を作るのをやめて、コンパスを使う

• 設計図つくってから作る　→　地図
  • 最初に全部決める
• 現在地から方角を見て作る　→　コンパス
  • 目的を決めてるだけ

地図とコンパスの違い

地図

コンパス

• どう歩けばいいかわかっていない
• そのつど現状を確認しないとつかない
• 遠回りになるかもしれない
• すごく不安
• 難しい

どうしてコンパスなのか？

「サービスデザインは、答えのない霧の中をずっと歩くようなもの」

• 市場調査、戦略が信頼できない
• 顧客、製品が本当はわかっていない
• 不確実性が高い
  • インターネットは、発展途上
• 地図を作ると、計画を捨てる事が出来ない

コンパスとは？

• ユーザーゴール
  • サービスを通してユーザーが達成すること
  • 無意識で言語化されていない
  • ゴールを達成することによって良いサービス体験
    • レーターだと、写真を共有する事から一歩踏み込んでいる
• 動機
  • ユーザーが行動する理由
  • ユーザーゴールは無意識なので
• 行動
  • 実際のユーザーの行動
  • この行動によってゴールを達成できる
  • 体験が変わると必ず行動が変化するので、その数値をもとに現在地を確認して、ゴールや動機づけにフィードバックする
  • ダウンロード数、購入率
  • 獲得、登録、購入、紹介、ソリューション

どうやってコンパスを使ってきたか

• リリースまでの2ヶ月間4回のサイクル

1回目にやったこと

• ゴールに関わらないものは、徹底的に排除
• いるかも？は、いらない
  • 写真補正とか、シェアとか
• 60個ぐらい必要なんじゃないか？というモノを減らして、15個ぐらいになった

• スタートから2週間で対象ユーザーにテストリリース

• 削りすぎたとき

  • 本当に必要なら、あとで必要だとわかるはず

1回目

• 獲得 20%
• 登録 10%
• 購入 0%
• 紹介 0%
• リテンション

2回目：サービスを通した体験を伝える

• ランディングページ
• アプリ

• Walk Through

• 獲得 53%

• 登録 25%
• 購入 5%
• 紹介 0%

• リテンション

• ユーザーの価格の予想

• 未知への不安

3回目：はじめのハードルを下げる

• 1通から出来るようにした
• PSN 分析をした

• お試しが出来るようにした

• 獲得 53%

• 登録 30%
• 購入 12%
• 紹介 5%

• リテンション

• そもそもサービスとして、整理するラインを想定していた

• そこまで達していなかった

4回目：実物のイメージを伝える

• インタビューは難しい
• 使っていると、いいものを送れる感じがしない

• デジタルな商品だと思っている人が多い

• よりリアルに

• リアルなアニメーションに

• なにが送れるのか？

• 獲得 60%

• 登録 50%
• 購入 40%
• 紹介 12%

• リテンション 70%

• 最低ラインを超えた

• リリース時には、リテンションを加えてリリース

最後に

• 地図を作るのがダメじゃない。自分たちでは出来ない作り方だった
• コンパスは、とりあえず適当に作るわけじゃない
  • 良いモノを作るのは大前提
  • モノを市場にフィットさせることが大切

参考

• About Face 3 インタラクションデザインの極意
• リーンスタートアップ
• リーンUX
• ユーザビリティエンジニアリング

About Face 3 インタラクションデザインの極意

リーン・スタートアップ

Lean UX ―リーン思考によるユーザエクスペリエンス・デザイン (THE LEAN SERIES)

ユーザビリティエンジニアリング(第2版)―ユーザエクスペリエンスのための調査、設計、評価手法―

最後に

• クックパッドの求人

---

• @akwkm

はてなブックマーク

グラフィックデザインをしていた

こんなことできたらいいな、できたらいいな

• 悩みの解決を明確に行う
• 荷物を運ぶとしたら

電話1本で集荷
1個でも家庭へ集荷
翌日配達
運賃は安くて明瞭
荷造りが簡単

クロネコヤマト、小倉 昌男さん

アイデアがカタチになると日々の生活が変わる

• 道具、材料
• 人員
• 場所
• 拠点

「アイデアをカタチにするのは難しい」

スマートフォンの登場

• 平成25年末：62.6%
• いつでもどこでもインターネットに接続できる社会環境が整備された
• アイデアがそのままサービスになる時代がやってきた

Web Service

• 実現したいアイデアを実現できる場所

Presso の開発

• コードネーム： Sunbridge
• 新チーム発足
• スマホでの情報収集をもっと快適にしたい
  • ディレクター1名（兼務）
  • デザイナー1名（兼務）
  • エンジニア1名（兼務）
  • 人的リソースがない

ペルソナを考える

• 名前、生活、どいう行動をしているかなどなどを決める
• 顔写真が用意されていた
  • リアリティがでた
  • ペルソナ（岸野さんという名前）

ユーザーインタビュー

• 想定するユーザー層のスマートフォン利用状況を調査
• はてなブックマーク
  • 想定ユーザーは、タグ機能をメインとして情報収集ツールとして使っていた
  • はてなブックマークをそのまま持ってきてはダメ

テーマを絞り込んで人気記事を提案してくれるアプリ

• まずは「開発合宿」
• 一気にやりたい、リソースがない
• 今津サンブリッジホテル
  • アプリの名前なる
• スマホ片手に、紙に書き出した
  • やりたいことを整理していく
  • テーマ、ジャンルをディスカッションしながら決めた
• ニュースの量のさじ加減
• エントリーのバリエーション
  • 読んでる間をだしていた
• ペーパープロダクトを用意していく
  • POP で動きをつけた
• ここで合宿終了

機能実装開始

• デザインも用意していた
• イラレで作り、DropBox で見てみた
  • 出勤時にモックを見てみた
  • いろんな場所で見てみた
  • スマホは接触頻度が高いので、画面を繰り返し見て、調整
  • 継続的な使用に大きな影響を与える

デザイン

• デザインのコミュニケーションはこまめにした
  • 紙に書いて共有したり
  • イラレで指示したり

命名

• Press + espresso = Presso
• 新聞、雑誌を抽出する

Promotion

• ティザーサイトを作った
• 「はてながニュースアプリを作るらしい」ということを伝えた
• メール登録を作った
• 人気ブロガーに使ってもらった
  • 記事になった
  • 面白く書いてもらえた
• iTunes のためにニュースを自分たちで作った
  • 写真は自分
  • ニュースタイトルも自分
  • 社員のコメントは勝手に

3月27日リリース

• 記事とコメントを見れるように
• 先週メジャーアップデート
  • 昨日の話題を配信して、見逃しがないようにした
• ニュースカテゴリで2位になった
• Yahoo! トップに載った

まさかの事態

• シャープも「お茶プレッソ」が同日リリース
• そこで、コラボ企画
  • 会場の人は知らなかったかも？

まとめ

• Web Service に完成はない
• あなたのアイデアをWeb Service で世界中に届けよう

---

質疑応答

Q. インタビューは何人ぐらい？

A, 伊野さん それぞれ30〜40人 共通の人は基本なし。でも、共通の人はいた 友達の友達を紹介してもらった（2次の人）

Q. ペルソナをどういうふうに使ったのか？

A, 川上さん ペルソナをたてときは、ディレクターが主体で動いていた。ディレクターがペルソナを用意していた どいうサービスを作るのか？共有するためにペルソナを使った 職種に関係なく、アイデアや企画を出すのはみんな まとめていくのは、ディレクター

Q. 60個から15個に絞ったが、どいう封に決断したか？

A, 伊野さん ポストイットに書いてはりだして、ユーザーゴールに必要か？を３人で話して決めた 変なものを入れたくない！ということで決断した

Q. ブラウザは嫌いですか？アプリとブラウザの違いは？

A, 伊野さん どっちでもいい。使っている人が最高の体験が出来たら、どっちでもいい。 ブラウザはみんなものというイメージがある

A, 川上さん アプリの裏でもウェブサービスは動いている 出力の違い いろんな要因があって決まると考えている

Q. 受託で情報設計をしているので、もし、クライアントのサービスを作る場合は、今回のような動きが出来たか？この機能を入れてほしい、と言われたらどうするか？

A, 伊野さん クライアントワークで、結果まで共有することができるのであればレベニュー的なものでコミュニケーションをするしかないかなあ、と思う クライアントとの共同作業をしていかないと、いいものを作る事ができないかも ワークショップというか一緒に作る

A, 川上さん ペルソナをつくることは、受託でも問題ない アジャイル的な開発となると、全体像を磨いて作り出していくことが出来るのか？という疑問 納品後にサービスに関わっていくのか次第 よりよい信頼関係を作り、クライアントと一緒に作っていくスタンスが、もし出来るのであれば、開発手法が出来るかも

Q. 新しいものを作るとしたら、今回の反省を活かしたいところはありますか？

A, 伊野さん 世代が縦なのが弱点 一緒に使うものか（ネットワーク効果）、サービスを受ける人がいいなあ、と思って使う、ということがレターにはない この弱点を改善したい

A, 川上 個人の見解だけれど、バイラルの仕組みが弱いので、改善したい

Q. サービスの成長について

A, 粘着型、リテンションで、紹介や、広告なども検討している

Q. 調査をするにあたり、ディザーサイトをみてアプリをダウンロードさせてたりという具体的な方法を知りたい。テストのバイアスがかかっているんじゃないか？ Q. Pressoを作るときに調査をどれぐらいしたのか？

A, 伊野さん テストのバイアスがかかっているんじゃないか？という点については、難しいし、予算が必要になってしまう。2次に紹介をメインにする

A, 川上さん 最初にペルソナを決めて、10名ぐらいにインタビュー。その後、作ってから試してみた