役割

プロダクトデザインリード

チーム

Microsoft Office · 東京

プラットフォーム

iOS · Android · Windows

成果

Google Play ベストアプリ2015

概要

すべてのポケットに、スキャナーを

Office Lensは、手元のスマートフォンをスキャナーに変えました。ホワイトボードでも、レシートでも、名刺でも、向けて撮るだけ。アプリが画像を整え、WordやPowerPoint、OneNoteへそのまま送り届けます。Google Playはこれを2015年のベストアプリの一つに選びました。

原点

バックエンドチームの、最初の製品

マイクロソフトの日本拠点は、約25年にわたってOfficeの土台となるコードを書き続けてきました。すべてバックエンドの仕事で、自分たちの名前が載るものは一つもありませんでした。Office Lensは、そのチームにとって最初の製品でした。そして私は、そのチームに初めて加わった二人のデザイナーのうちの一人でした。

問題自体は、誰もが知っているものでした。会議が終わります。ホワイトボードは、いま練り上げたばかりの考えで埋まっています。ところが、次のグループはもうドアの外です。それを残す良い方法がなかったのです。スマホで撮っても、歪んで色も飛んでしまい、翌日には使い物になりませんでした。

しかも、私たちはほとんど手探りでした。2013年のカメラはまだ十分ではなく、当時最も良かったNokiaのカメラを積んだWindows Phoneから始め、次にiOS、そしてカメラが追いついた段階でAndroidへと広げていきました。比べる相手もほとんどいません。CamScannerがあるくらいでした。だからフローは自分たちで組み上げるしかなく、そのほとんどは壁の前で議論しながら決めていきました。

想定ユーザー

一つの不満、いくつもの声

すべての根っこにあったのは、ただ一つの不満でした。目の前にあるものを確実に取り込み、後からちゃんと使う方法がない。それは、使う人自身の言葉でいくつかのペインポイントとして表れました。

ペインポイント

この問題を最も切実に抱えている三人を起点に、設計の根拠を組み立てました——同じ製品に対して、それぞれまったく違うものを求めている三人です。

ホワイトボードを残す人

マーカスと、10秒の窓

彼の一日は会議の連続で、いままさに消されようとしているホワイトボードの書き込みを、目の前で見ています。彼にとっての「最高」は、圧力の中でも速く、信頼できることです。

マーカス・ウェブ

シニアプログラムマネージャー · 38歳

「人が引く前に残せなければ、それはなかったことになる。」

「最高」とは数秒で考えを取り込んで、確かに残ったと確信できること。

  • 背景3チームを率い、週に20件以上の会議
  • デバイスNokia Lumia——OneNoteのヘビーユーザー
  • 環境30分ごとに入れ替わる会議室

ゴール

  • ホワイトボードに残った考えを、会議の合間に消えさせない。
  • チームが既に使っているOneNoteにそのまま届ける。
  • 数秒で一発撮って次へ進む——撮り直しはしない。

不満

  • ホワイトボードをスマホで撮ると、歪んで反射で読めない。
  • ボードが消されてからでないと、うまく撮れたか確かめられない。
  • 撮ったものはチームのノートではなく、カメラロールに取り残される。

勝負の瞬間

  • 「会議終了」から「ボードが消される」までの10秒。
  • 一発で撮り、それを信じて、次へ進みたい。

ユーザージャーニー

「もっと良い方法があるはず」から「これは入れた方がいい」へ

マーカスのジャーニーを、始まりから終わりまで追います——ホワイトボードを残すことを諦めた日から、自分からチームに導入を勧める日まで。

MWマーカスのジャーニーシニアプログラムマネージャー

01 · 問題

疲弊

「もっと良い方法があるはず」

残しておきたいものは常にあります——決定事項が書かれたホワイトボード、署名の必要な書式、レシート。それなのに、どの道具もうまくこなせません。

「二度と見つからないボケた写真は、仕組みとは言えない。」

02 · 発見

期待

やっと道具が現れる

同僚がOffice Lensを絶賛しています——スマートフォンで本格的に取り込めて、普段使っているアプリにそのまま届くそうです。

「これが本当に使えるなら、悩みが一気に十数個片付く。」

03 · 初回利用

半信半疑

実戦で試す

本番で一発だけ——斜めから、構える時間もありません。アプリが書類の端を見つけてくれます。

「ちゃんと見ている——机ではなく、書類を見ていた。」

04 · 疑い

緊張

信じていいのか?

正念場です。本当に、まっすぐで読める状態で取れているのか。

「取り込みを信じられないなら、二度と使わない。」

確認のステップが、主導権をマーカスに渡します——確定前に見て、直せる。運任せにするのではなく、自分の目で確かめられるようにするのです。

05 · ちゃんと動く

安堵

完了——しかも正しく

歪みが取れて整った状態でOneNoteに保存され、署名と日付を入れて送れるPDFになります——スキャナーも、打ち直しも要りません。

「自分の書類を、大事なものとして扱ってくれた。」

自動補正とOCR、そしてOneNoteが、取り込んだ一枚をどこでも即座に使える状態にします。

06 · 推奨

誇り

「これは入れた方がいい」

席に戻っても、食事の席でも、チーム全員に勧めているのは彼です。

「これなしでどうやっていたんだろう。全員に教えている。」

すべては一つの瞬間にかかっていました。撮った直後の疑いです。うまくいっていると願うだけではなく、自分の目で確かめられる方法を渡す。それだけで「もううんざり」が「これは入れた方がいい」に変わるのです。

時々署名する人

エレナと、今日期限の書式

エレナは時間と競っているわけではありません。フリーランスとして署名すべき契約書があるけれど、身の回りにスキャナーは一台もない。彼女にとっての「最高」は、外出しなくてもちゃんとして見えること——きちんとした書類として通用するものが、2分で送れることです。

エレナ・ルイス

フリーランスコンサルタント · 41歳

「スキャナーは持っていない。持っているのはスマホと、自分のサインだけ。」

「最高」とは署名と日付入りの、きちんとして見えるPDFを、2分で送れること。

  • 背景オフィスを持たず、自宅とカフェで仕事
  • デバイスiPhone——メールとPDF中心の毎日
  • 環境今日中に署名が必要な書式、スキャナーは見当たらない

ゴール

  • 署名した紙を、整ったきちんとしたPDFにする。
  • 署名したその場で返信する——印刷店には行かない。
  • 台所で契約書を撮ったようには見えないようにする。

不満

  • 署名の必要な書式が届くのに、周囲にスキャナーがない。
  • 書類をスマホで撮ると歪んで、仕事の体をなさない。
  • 印刷→署名→スキャン→メールの往復で、午後が一つ消える。

勝負の瞬間

  • 午後4時、今日中の署名と返送が必要な契約書が届く。
  • 彼女がいるのはオフィスではなく、台所のテーブル。

ユーザージャーニー

スキャンに見える、署名済みの一枚

エレナのジャーニーは、マーカスのそれとはまるで違います。時間に追われもしなければ、慌てもしません。すべては、もっと静かな一つの問いにかかっています。これはちゃんとした書類に見えるのか、それとも台所で撮った写真に見えるのか。

ERエレナのジャーニーフリーランスコンサルタント

01 · 問題

うんざり

「また印刷して署名してスキャンか」

署名して当日中に返す必要のある書式が届きます——しかも彼女の生活にスキャナーは存在しません。

「たった1枚にサインするだけで、どうして午後が潰れるの。」

02 · 発見

期待

「スマホでできるの?」

Office Lensならスマートフォンの写真を、ちゃんとした綺麗なPDFにできると耳にします。

「公式に見えるなら、もう二度と印刷しない。」

03 · 初回利用

探り探り

台所のテーブルで一枚

署名して、そのまま座っている場所で撮ります——照明もスキャナーもありません。

「この悪い光でどうなるか見てみよう。」

04 · 疑い

半信半疑

「ちゃんと見える?」

正念場です。スキャンされた書類に見えるのか、歪んだスマートフォンの写真に見えるのか。

「写真と丸わかりのものをクライアントには送れない。」

答えは傾き補正と自動画質補正——写真ではなく、書類になるのです。

05 · うまくいく

安堵

「スキャンしたみたい」

鮮明でまっすぐ、日付入りのPDF——テーブルに座ったまま2分で署名して送れます。

「本物のスキャンと見分けがつかない。」

答えはOneDriveへのPDF書き出し——仕事の成果物として、その場で手元を離れます。

06 · 推奨

誇り

「スキャナーはいらない」

知り合いのフリーランス全員に、印刷・署名・スキャンの儀式をやめるよう勧めます。

「スキャナーは捨てた。」

エレナの心を動かすのは速さではありません。写真を自分の名前を出せる書類に変える、2秒の補正です。同じ製品でも、「成功」の定義はまったく違う——そのすべてにデザインで応える必要がありました。

出張の多い人

サムと、出張のたびに残る精算書

サムはホワイトボードと競ってもいなければ、契約書に署名してもいません。そしてだらしない人でもない——むしろ几帳面です。出張ごとにフォルダーを作り、レシートも名刺も順番に保管しています。ただ、どんなに整ったフォルダーでも、次の出張までに精算書へ仕上げなければなりません。その作業で、彼の夜がまるごと潰れます。彼にとっての「最高」は、自分の仕組みが、一晩ではなく数分で回ること——レシートは一本の綺麗な精算書に、名刺はそのまま連絡先に、そして書類仕事の重荷が肩から下りる。

サム・レイエス

地域営業マネージャー · 44歳

「出張ごとにフォルダーを作っている。それでも提出作業で、余裕などない夜が一つ潰れる。」

「最高」とは出張分のレシートと名刺が、一晩ではなく数分で片付くこと——肩の荷が下りること。

  • 背景月に3週は出張、一回で数十枚のレシート
  • デバイスiPhone——メールと経費精算ツール中心の毎日
  • 環境出張最終日のホテルの机、次の出張までに提出が必要

ゴール

  • 出張ごとのレシートを、提出できる一つの精算書にまとめる。
  • その場で取り込み、次の出張前に前回分を終わらせる。
  • 集めた名刺を輪ゴムの束ではなく、連絡先に入れる。
  • デジタルの控えを残しつつ、原本は経理に渡す。

不満

  • 整理していても、感熱紙のレシートは提出前に色が飛ぶ。
  • 1枚ずつ撮る作業自体が手間で、しかも歪んで読めない。
  • 輪ゴムで束ねた名刺の山が、いつまでもCRMに入らない。
  • ボケたものは経理に差し戻され、出張一回の突合に一晩かかる。

勝負の瞬間

  • レシートを整理して提出しなければならない、出張最終日の夜。
  • レシートのフォルダーを、一回で提出済みの精算書にしたい。

ユーザージャーニー

提出作業が、彼の仕事でなくなった日

サムはだらしない人ではありません。むしろその逆です。彼にとっての痛点は、手間そのものです。整った出張フォルダーでさえ、手作業で精算書に仕上げなければなりません。Office Lensが彼に返したのは、その夜でした。グラフが上向く場所に注目してください——取り込む瞬間ではなく、提出作業が自分の仕事でなくなる瞬間です。

SRサムのジャーニー地域営業マネージャー

01 · 問題

疲れ

最後に残る一仕事

フォルダーは整っています——それでも手作業で精算書にするのに、夜が一つ潰れます。

「整理はしている。それでも夜が潰れる。」

02 · 発見

期待

「全部撮っていいのか?」

Office Lensならレシートを撮って、そのまま文書に入れられると耳にします。

「出張一回分をまとめてやれるなら、帰り着く前に終わる。」

03 · 初回利用

検証中

夜11時、ホテルの机

出張分のレシートを並べ、次々に撮っていきます。アプリが一枚ずつ端を見つけ、補正していきます。

「このペースについてこられるか見てみよう。」

04 · 疑い

警戒

「経理はこれを通すか?」

正念場です。本物のレシートとして通るのか、差し戻されるスマートフォンの写真なのか。

「1枚でも読めなければ、精算書ごと戻ってくる。」

答えは自動トリミングと自動画質補正——各レシートがまっすぐで鮮明、日付入り。写真ではありません。

05 · うまくいく

安堵

精算書一本で完了

すべてのレシートが順番どおりOneNoteに並び、1つのPDFとして書き出して経理に直送できます。集めた名刺はそのまま連絡先へ。

「出張の書類仕事が、家に着く前に終わっている。」

答えはOneNoteへの連続取り込み——出張一回分が綺麗なPDF一本になり、一度の提出で経理へ渡ります。

06 · 推奨

誇り

チーム全員に伝える

次のキックオフで営業チームに実演して見せます。

「うちのチームにレシートを手入力する人間はもういない。」

サムの場合、片付けるべき乱雑さは最初からありませんでした——彼はすでに整理できていたのです。取り除くべきは負担でした。出張のフォルダーが精算書になり、一晩ではなく数分で経理に届く。これが三つ目の「最高」です。速さでも、体裁でもなく、良い仕組みを手間なく回すこと

リフレーム

速いカメラではなく、2秒で得る信頼

いったん、技術のことは脇に置きます。この体験の理想形は、そもそも意識せずに済むことです。ボードに目をやるだけで、もう保存されている。綺麗でまっすぐで、しかも正しいと分かっている。シャッターも、確認も、疑いもない。人が本当に欲しいのはそれです。

2013年の私たちには、そこまでは届きませんでした。端の検出は、それだけで信頼できる精度ではなかったのです。だから本当の問題は、「カメラを速くすること」ではありませんでした。目に見えない理想と、技術が正直にできることとのあいだにある隔たり——それこそが問題だったのです。そして、その隔たりを埋められるのは信頼だけでした。私の仕事は、どうしても省けない一つの工程——確認——を、「アプリが自信なさげな工程」ではなく「アプリが使う人を見守っている工程」に感じさせることでした。

01 — 難しい判断

速さか、信頼か

これは、私が最も強く主張し続けた判断でした。全フレームを自動保存すれば、確かに速くなったでしょう。同時に、使い物にならない画像の山を、自信たっぷりに保存し続けたはずです。

そこで、フローの真ん中に確認を置きました。撮る、切り抜きを見る、ずれていたら直す、保存する。わずかな速さを手放す代わりに、ジャーニー全体がかかっていたただ一つのもの——信頼を得たのです。

切り抜きと回転の編集フローを、一画面ずつ描いた指示書
確認のステップを描き起こしたもの——タップして入り、切り抜きを調整し、回転させて、完了。信頼を勝ち取る2秒です。
2秒の速さと引き換えに、この製品だけは決してごまかせないもの——信頼を手に入れました。
机の上で斜めに撮られたレシート
これが斜めからとっさに撮った、歪んだ一枚。
同じレシートがまっすぐに整えられ、読める書類になった状態
こうなるまっすぐに整えられ、読める書類に。

小さな判断たち

チーム

最初の二人のデザイナーのひとりとして

私はOffice Lensのデザインリードを務めました。60人ほどのエンジニアとPM、25年に及ぶバックエンド開発の歴史、そして私の前にいたデザイナーはたった一人——デザインと一度も組んだことのないチームでした。エグゼクティブディレクターは、意思決定の場でデザインの立場から発言できる人間を求めていました。それが私の仕事でした。レビューを進行し、フローを定め、ユーザーのことを考えた経験のない60人ほどのエンジニアとPMに向かって、使う人の立場を主張し続けました。私たちはリサーチ部門の傘下にありましたから、判断を分けたのは声の大きさではなくリサーチでした。製品アイコンも私がデザインしました——最終的なアセット制作は中央チームの担当ですが、マーク自体は私のものです。

Office Lensのアイコン検討から、製品に搭載されたマークまで
アイコンの検討——初期案から、製品に搭載されたマークまで。

プロセス

無視できない場所に、仕事を置く

初日からレビューを回し、リサーチにはすぐ隣に座ってもらいました。スプリントごとに短いフィードバックの往復と、オフィス内での小さなユーザビリティテスト。そしてスタジオの壁には、床から天井までプリントを貼り出しました。チームの誰もがペンを取って書き込めるようにです。

フロー

一つの全体図で、すべてのプラットフォームを

製品全体を突き詰めれば、6つのステップになります。信頼を得るのは、3番目の確認です。

  1. 01取り込む斜めから、一発で
  2. 02端を検出四隅をリアルタイムに検出
  3. 03確認して調整信頼を得るステップ
  4. 04補正する歪み補正とシャープ化
  5. 05OneNoteに保存OCRで検索可能に
  6. 06使う・共有するWord、PowerPoint、署名

これがハッピーパス——本当に大事な6つのステップです。その背後にあったものが、これです。

全体図

製品のすべてを、1枚に

すべての画面、すべての状態、すべての分岐——取り込み、確認、公開——を、全プラットフォーム分。プロトタイピングツールは使わず、Illustratorで手描きし、議論を重ねて作り上げました。この1枚があったからこそ、バックエンドのチームが3つのOSで同じ製品を、一貫した形で出すことができたのです。

Office Lensのマスターフロー——手描きのクロスプラットフォームUX全体図
フロー全体を見る(PDF)

リリース

そのまま、OneNoteへ

取り込んだものはすべてOCR付きでOneNoteに入ります。検索できて、上から書き込めて、バックアップもされています。名刺はそのまま連絡先へ。一度撮れば、ずっと使えるのです。

OCR付きでOneNoteで開いた取り込み画像
取り込んだ一枚を、OCR付きでOneNoteで開いたところ。

ループが閉じる

推奨の声が、次の要件になった

どのジャーニーも、終わり方は同じです。誰かが、知り合い全員に伝える。でもそこはゴールではありません。次の要件を書くフィードバックなのです。人々が実際にOffice Lensをどう使っていたか——ホワイトボードより圧倒的に書類が多く、外出先で、しかも多くはオフライン——それがそのまま私たちに戻ってきて、ロードマップになりました。

  1. 01人が人に伝えたレビュー、口コミ、「入れてみて」
  2. 02実際の使われ方を見たホワイトボードより書類、しかも外出先
  3. 03それを土台に次を作ったより鮮明な取り込み、クラウド+端末内処理

書類の取り込みを鮮明にし、画像処理の専任チームを迎え、処理を端末クラウドの両方に乗せて高速化しました。どのリリースも、前回が実際にどう使われたかへの答えでした。あるジャーニーの終わりで語っていた人たちが、次のジャーニーの問題定義を書いていたのです。これがループです。

ポケットの中に、スキャナーを——文字どおりに。比喩ではありません。Office Lensは、本当に使えるスキャナーを誰のポケットにも入れました。そして10年のあいだ、廊下の先のあの一台は要らなくなったのです。

成果

少ないことを、10年もちこたえる精度で

Office Lensは、たくさんのことをやって勝ったのではありません。少ないことを、正しくやって勝ちました。取り込む、整える、人がすでに働いている場所に届ける。それだけです。このアプリは10年にわたってオフィスのスキャナーの代わりを務め、Google Playのベストアプリ2015に選ばれ、マイクロソフトで最も成功した単体のクロスプラットフォームアプリの一つになりました。のちにMicrosoft Lensと改名され、Microsoft 365に統合されました。製品としては、もうありません。しかし、それが人を助けた年月は消えません。

2015

Google Play ベストアプリ

3

プラットフォームを、手描きの全体図1枚で

1st

70人のチームに立った、ただ一つのデザインの声

プロダクトデザインに戻る