Startup Datingでインタビュー連載を始めてみることになりました。さて連載の初回は、2011年に新卒としてクックパッドに入社し、現在UIデザイナーとして活躍する片山育美さん。片山さんが現職に就くまでの道のりや、クックパッドのUIに関する考え方、片山さんが手がけた具体的なUI改善の事例やヒントなどをたっぷりお伝えします。

美術大学で勉強、もともと職人になりたかった

もともと絵を描くのが好きだし得意、高校のときから職人になりたいと思っていたと話す片山さん。美術大学に進学し、ファイン系とデザイン系でデザイン系を学ぶことを選択。ファイン系とは、絵画や彫刻などいかにも“アート”というもの。ファイン系が芸術だから、どこか自分の中で完結してしまうところがある。でも、職人って誰かのために技術を使える人なんじゃないか、と。情報デザイン学科を専攻し、サービスデザインやUXと言われる意図して設計するデザインを学びました。

もともとウェブサービスが好きだった片山さん。デザインできれいな画面をつくっても、開発までして実際に動かすことはできない。動かなければ誰にも使ってもらえず、妄想で終わってしまう感じが悔しくてプログラミングを学ぶことを決めたそう。その決意を後押しするために企画を応募したのがIPAが主催する「未踏IT人材発掘・育成事業」だった。

何が何でもプログラミングを習得するためのプレッシャー

プログラミングを確実に身につけるためには、自分を追い込むプレッシャーが必要だと感じた彼女は、エンジニアの学生を対象とするIPAの「未踏IT人材発掘・育成事業」2009年に企画を提出。学生の面白い企画に国が投資して、半年間で物を作って世にだすプロジェクト。3人のチームで応募した企画は見事に採用され、半年間開発に取り組むことに。

例えば雑誌をとってみると、そのデザインはすごく意図して設計されてる。美しいパッとした見た目だけじゃなく、当然コンテンツの重要度を反映して情報に強弱がついてる。そんなデザイナー張りに情報がうまく設計された、自分だけのウェブマガジンがつくれちゃうサービス。今でこそ流行っているウェブマガジンやキュレーションコンテンツ、ユーザが自分だけのウェブマガジンを半自動的につくれるサービスは時代の先駆けだったのかも。このプロジェクトを通してプログラミングを独自に習得していった。

情報設計への関心の高さからクックパッドに入社

mixiでデザイナーとしてアルバイトをした後、情報設計を実践的に行うために入社したのが自社のウェブサービスを持つクックパッド。クックパッドの魅力は、なんといってもユーザ主義を徹底していること。とはいえ、片山さんが入社した1年半ほど前にはまだUIチームは存在しなかった。エンジニア採用で入社し、エンジニアとディレクターで構成された新規機能チームに配属された。

片山さんがUIデザイナーになったのは、ある意味偶然の産物。エンジニアがつくった機能デザインを直したりしているうちに、それが自分の得意分野であることに気づかされたそう。一通り出来上がった機能やサービスのUIに片山さんが手を入れてみたところ、クリック率が20倍になったことも。目に見えて結果がでたことで周囲が彼女を頼るようになっていった。

そんなこんなで、2011年8月、もともとUIデザインを大切にしていたクックパッドにUIチームが正式に発足。動きやすいよう、社長直属のチームとしてつくられたチームメンバーは当時3人。いまはデザイン総合チームとして5人のメンバーがいる。クックパッドPC版に新機能を追加していく人もいれば、新しいものをつくるより様々な要素を統一してより使いやすくする改修を主に担当する人がいたり。片山さんは、新しい機能をつくったり、新規事業チームのプロダクトUIを手伝うことが多いんだそう。

「クックパッドものづくり三原則」

現在クックパッドのユーザは1,500万人超、男女比は男性2.9％、女性97.1% と断然女性が多い。そんなクックパッドには「クックパッドものづくり三原則」と呼ばれるルールが。これは元社長の佐野さんがよくおっしゃってたことなんだとか。

1. 無言実行
2. 必ず値段をつける
3. 無言語化

１．「無言実行」…大切なのは言ったことを実行することではなく、ユーザにとっての価値をつくることに集中すること。先に宣言してしまうことで、ユーザに変なプレッシャーを与えたり誤解されるのはよくない。

２．「必ず値段をつける」…ユーザは、無料だとしても本当に価値があると思わないと使わない。今つくっているサービスに値段をつけるとしたらいくらなのか考えるということは、ユーザにとっての価値を考えるということにつながる。

３．「無言語化」…社内では、「言葉で説明しなければいけないUIは、レベルが低い」という風に捉えられている。まだまだ説明してしまっているところが多く、見て2秒でわかるUIを常に目標として掲げている。

UI設計のプロセス

ほとんどのプロジェクトが、最初はエンジニアとディレクターから始まって、ある程度動くものができたタイミングでUIチームが参加する流れ。ビジョンや理想が強く反映された結果、高機能になってしまいがちなサービスを、ユーザが使いやすいものに引き算して落とし込んでいく。

UIもだいたいパターンは決まっているため、対象とする機能に最適なデザインの検討はつく。UIを設計するプロセスは少しプログラミングに似ているそう。最初はソースコードをコピーしてきて少しカスタマイズして動かす感じ。類似サイトのそれぞれに最適化された画面をみて研究をする。そのデザインの理由を理解して、引っ張ってくることは大事。それを踏まえて作ったり、参考がない場合はクリエイティブを自ら生み出すことも。

「UIデザイナーの仕事は、エンジニアやプランナーの持ってる理想やビジョンと、ユーザのやりたいことのギャップを埋めることです。困ったときはわかりやすい方に倒すようにしています」。

片山さんが普段から参考にしているウェブサイトには、「UI-patterns.com」や「Collection: Design Patterns」などがある。書籍では、オライリーの「デザイニング・インタフェース」を常にデスクに置いているそう。

データをもとに仮説を立て、検証

普段から、小さな疑問を数字で検証してみることを当たり前にやっているクックパッドのUIチーム。Google analyticsなどのツールでデータを取得したり、ABテストを行ったり。

「ある時、タイトルのフォントサイズを１ピクセル下げるという実験をしてみたんです。そんなに大きな変化はないだろうと思ったら、それだけでクリック率が20%も減少しました。ユーザは、パッと見て見づらい印象を受けると見たくなくなってしまうんですね。このテスト結果がわかってから、小さい画面系で迷ったらちょっと大きい方に倒すことにしています」。

最近片山さんが担当したのは、スマホウェブの改善。検索結果のページで、どのレシピもクリックせずサイトを離脱してしまうユーザがけっこういることが判明。UIを改善することで何とかレシピクリックというアクションまで持っていけないかを検証してみたそう。そのとき立てた仮説は以下の3つ。

——-
１。文字が小さすぎて読みづらいのでは？
２。レシピの材料を「…」（続く）にせず、全て表示してみたら判断しやすいのでは？
３。以前は「→」でページングしていたのを、「もっと見る」にすることで次のアクションにつなげる？
——-

上記の仮説をそれぞれ実験してみた結果、材料が全部見える・見えないはあまり関係ないことが判明。では、いっそのこと材料を全部取ってしまう？など、次々と仮説を立てて検証することを繰り返していく。

でも、そんな細かい変更が多いとユーザのストレスになってしまう。そのため、ABテストは、1,000人ほどの少人数限定でライブサイトとは異なるバージョンを出す。クックパッドが独自につくっているシステムで自動的に違うバージョンが割り当てられる。UIチームのメンバーは必要最低限のプログラミングもできるため、小さなABテストをスピーディにそれぞれが完結して行える。

クックパッドPC版のリニューアル

クックパッドの料理のカテゴリは、ただジャンル分けしているだけではなく、中の人が手動でいいレシピを厳選しているそう。リソースをかけていいコンテンツを集めても、それがあまりユーザに認知されていないのが現状。

「ほとんどのユーザが、材料の絞り込みではなくキーワード検索でレシピを探しています。作るものが決まっている人には便利だけれど、決まっていない人にもやさしいサイトにしたいと考えました。そのため、PC版クックパッドのリニューアルの目的のひとつには、「もっとカテゴリを使ってもらうこと」がありました」。

リニューアルしたのは、2012年4月。キーボードで文字を打つのにも時間がかかるような初心者ユーザでも、クリックするだけでレシピを探せるカテゴリを目立たせるようにした。具体的には、タイアップ広告エリアを削除してカテゴリをファーストビューに入れる、カテゴリのデザインを変える、などして対応。主要な導線を初心者ユーザがより使いやすいと思えるように改善をし、かつヘビーユーザにとっても満足いく体験ができるようログイン後のマイページなどの改善に取り組んだ。

ユーザのザッピング能力、薄目で見てみる

エンジニアのバージョンを20倍にしたというのが、新機能を使ってもらうためのボタン。最初は、すごい新機能だから派手にして目立たせようと思い、いきなりピンクを使ってみたんだとか。ところがピンクのボタンがなかなか押されなかった。その理由をユーザの気持ちになってみると、パッとみてバナーのような広告に見えてしまうのではないか、と。

「ユーザはバナーを無意識にスルーする能力がすごく高いため目に留まらない。そう仮説を立て、ボタンをやめてUIに馴染むような普通のテキストリンクに変えてみました。またテキストリンクにはユーザの名前を入れて、「○○さんへのおすすめレシピ」という風に表示を変えました。するとユーザへのひきが強くなって、クリック率が上がったんです」。

ユーザが広告っぽいものをスルーするということに関しては、他のクックパッドのテストでも顕著に結果がでている。その一例がプレミアムサービスへのリンクをつくったとき。すごく綺麗な画像を使って、テキストもフォントを使って作ったバージョンと、普通の四角のサムネイルとHTMLで書いたテキストバージョンをつくってみた。比較してみた結果、普通のテキストの方がクリック率が高いことが判明。

上記のキャプチャは、バレンタイン時のプレミアム会員向けバナーのデザイン。画像の真ん中あたりのピンクのバナーがそれ。4パターンのデザインを試したところ、Aに比べてDは2倍もクリックされたそう。パッと見、Aのほうが目立つ印象を受けるものの、広告色が強すぎてユーザとしてはスルーしやすかったのではないか、と分析。ただ色や画像を使って派手にするよりも、サービスに馴染ませるようにした方が結果的にユーザが価値を理解しやすくなる。

「ユーザは広告はスルーするけれど、自分が興味ありそうなものに注目する能力はすごく高いんです。ザッピング能力というか。そんな引き算（何を取っ払うか）をするためのひとつの裏技として、「薄目で画面を見てみる」ことをしてます。昔、絵やデッサンを描く時にやっていたんですけど。薄めで見ると文字などが見えなくなって、目立つものが目立つ。普通に見ていると自分の好きなものとか気になってるものが目に飛び込んでくるので。他がおろそかになって俯瞰できるんです」。

クックパッド流、情報や学びの共有の仕方

クックパッドは、全社的にユーザインタビューへの投資に理解があると話す片山さん。今年の入社した新卒向けに行った、ただひとつの研修がユーザインタビューの研修だった。傾聴研修と言って、3日間を使ってユーザインタビューの概要から実践まで学ぶというもの。今年の新卒は１人だったので、ユーザインタビューに興味のある片山さんをを含む約20名が参加。

「ユーザはしゃべっていることと実際にやっていることが違うことがあります。なので、ユーザインタビューは、その内容から何かを判断するというより、アイディアをもらう場と捉えています。大掛かりにせず、まず身近な友達などに対してユーザテストをしてみることが大切だと思います」。

また、クックパッドで情報共有のツールとしてあるのがGROUPAD。UIに限った話ではなく、さまざまなプロジェクトで常に新しい発見や学びがある。チームメンバー一人一人がノウハウをいっぱい持っているため、それを共有するために用意された社内ブログ。社内の半数が使っていて、多くの記事がエンジニアの技術メモやMTGのメモ。GROUPAD人気記事の例には、「○○機能のペーパープロトタイプメモ」、「○○のユーザアンケート結果共有します」、「みんなで使う実践Sass」などがあるそう。

煮詰まったときは、あえて周囲の人と雑談することも心がけている片山さん。

「むかし先輩に言われたのが、“良いデザインは雑談から生まれる”ということ。例えば、ユーザテストっていうと時間をかけて準備をしてバッチリやらなくていけない感じがするけれど、ちょっと周りの人に見てもらうことで見えることがあったりします。煮詰まって自分で判断することが難しくなったりするときは、周囲の人と話したりしてちょっと距離をおいてみます」。

大切なのは『ユーザの目的を達成すること』、UIデザインはその手段に過ぎない

最後に、片山さんご自身についていくつか質問をしてみました。

Q。UIが好きなウェブサイトやアプリは？

GoogleカレンダーやgmailなどGoogleのサービスがすごく好き。カレンダーに予定を入れるという複雑な行為を、一度もヘルプ読むことなく完了することができる。気づかないうちに使えるようになってるってすごい。

スマホアプリで好きなのは、「Instagram」。ユーザは写真家でもデザイナーでもないけれど、どの写真も作品に仕上がる。写真投稿の編集の設計がすごく上手にできていて、誰のものでもきれいになるように考えられていて、それが続けるモチベーションになってる。みんなの表現したい欲求を上手くサポートしてる。

でも、ウェブサービスのUIデザインより、「ゲーム」のUIデザインの方が進んでいるなあと思います。例えば任天堂のwiiをやっていて、画面が分かりづらくて操作に迷うことってほとんどない。情報が上手に整理されていて分かりやすく、かつ世界観があって楽しい。ゲームからはUIという側面で学べるものが多そうです。

Q。お仕事の他に熱中していることは？

週末は友人のエンジニアとアプリをつくったりしています。『恋人クイズ』というアプリで、じわじわダウンロードが伸びて来て今１万ダウンロードを超えました。『恋人クイズ』は、恋人同士がお互いをコンテンツにして遊んでいちゃいちゃできるクイズアプリ。大切な人と2人でいるときも、SNSを見てお互い別々のことしているって結構あると思うんですが、そういうシーンを減らしたいと思って、カップルが2人でスマホで遊べるアプリを作りました。恋人向けのアプリは今後もつくっていきたいです。

Q。モットーは？
「一石二鳥」。もともとデザイナーになろうとしたのも、自分がもともと作るのが好き、かつその作ったものでお金がもらえる。おまけにユーザが喜んでくれるという一石二鳥。UIをやっているのも、ユーザを喜ばせたいかつエンジニアたちの思いをちゃんと届けたいっていうwinwinな状況をつくりたいから。一石二鳥でみんなを幸せにしたいです。

Q。お気に入りの本やバイブルは？
パッと思いついたのは「すごいよ、まさるさん」というギャグ漫画。描いている作者の情熱みたいなのがすごく詰まってるから。つくってる人の思いや情熱が反映されてるものがすごく好きです。最近のアニメだと、すごくマニアックな恋愛ストーリー「謎の彼女X」。ついつい応援したくなります。

Q。自分の強み、弱みは？
弱みは抽象的だけどすぐ諦めちゃうこと。プログラミングを覚えるために未踏プロジェクトに応募したのも、自分だけでやろうとしたら難しくてスグに諦めてしまったから。UIデザインってなくても何とかなるし、一応リリースできる。わたしが諦めたらそこで仕事が終わってしまうので、諦めずにやっていこうと思ってます。

強みは、つくること全般が好きなこと。目的のために手段を選ばないところ。大学でもサービスデザインをやっていたけれど、立体像系、絵、漫画を描くこともしていたし、みんなの実現したいビジョンをつくりたいから、UIにこだわらずにプログラミングでも何でもやりたいです。

Q。いまの自分のゴールは？
何かをつくってる人って絶対思いを持ってます。料理をするお母さん、開発者、みんなこの人に喜んでほしいというものがある。Instagramもそうで、自分の思い出を綺麗にしたいというユーザの願いがあったり。それがプロでなきゃできないのはつらい。Instagrtamの話だと、今まではプロでないときれいな写真を撮ることができませんでした。エンジニアにしても、UIが微妙な結果、素晴らしい機能つくってもユーザに届かないことがあったり。そんなことがなくなるようにしたいと思っています。

「結局大切なのは『ユーザの目的を達成すること』であって、UIデザインはその手段に過ぎません。サービス開発に携わっている人はみな、実現したい未来を持っていると思います。ユーザにこんな価値を届けたいとか、こういう楽しい思いを持ってもらいたいとか。そういう見えない「思い」をかたちにして、ユーザに直接届けるのが、UIです。ただ画面をつくるだけではなく、その思いの表現として、クックパッドのUIをつくっていきたいと思います」。