エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

『LINE』『クックパッド』『Wantedly』のUI開発に見る、技術者が陥るUIデザイン3つの罠と、その解決策【五十嵐悠紀のUI/UX座談会】

タグ : LINE, NHN Japan, UI, UX, Wantedly, Webサービス, クックパッド, デザイン, ユーザーインターフェイス, 仲暁子 公開

 
CG・UIの研究家として知られる五十嵐悠紀さんの連載17回目。今回は特別企画として、今旬のPC・スマホWebサービス『LINE』『クックパッド』『Wantedly』のUI/UX担当者に登場してもらい、UI/UX座談会を開催。後編は、エンジニアがUI/UX設計に携わる際に陥りがちな罠とその解決策を紹介してもらった。人気サービスを生み出したデザイン設計プロセスから語られる、本質的な価値とは一体何なのだろうか。
ファシリテーター

筑波大学  システム情報工学研究科  コンピュータサイエンス専攻  非数値処理アルゴリズム研究室(NPAL)
五十嵐 悠紀

2004年度下期、2005年度下期とIPA未踏ソフトに採択された、『天才プログラマー/スーパークリエータ』。筑波大学 システム情報工学研究科 コンピュータサイエンス専攻 非数値処理アルゴリズム研究室(NPAL)に在籍し、CG/UIの研究・開発に従事する。プライベートでは二児の母でもある

ゲストトーカー

NHN Japan株式会社 ウェブサービス本部 UXデザイン室 UIデザイン3チーム マネージャー
橋本建吾

Web制作会社よりNHN Japanへ転職。2012年7月26日現在、全世界で5,000万ユーザーを突破したLINEのデザイナー。年内1億ユーザーという目標を掲げながら、北米・中国市場に本格進出すべく日々サービス開発に励む

ゲストトーカー

クックパッド株式会社 サービスデザイン部 デザイン・UIグループ
池田拓司

Webデザイナーとしてキャリアをスタートさせ、はてな、ニフティなどで活躍後、2012年4月にクックパッド入社。入社してまもなくクックパッドのUIデザイン開発環境の再構築を一任される。以前同社が主催したUI勉強会でも登壇

ゲストトーカー

ウォンテッド株式会社 CEO
仲 暁子

京都大学を卒業後、ゴールドマン・サックス証券に就職。その後、米Facebookへ入社。Facebook退職後、独学で学んだRuby on Railsでソーシャルリクルーティングサービス『Wantedly』を開発。サービス設計、デザイン、開発など、幅広い分野に携わっている

五十嵐 みなさん、座談会後半もよろしくお願いします。前回、そもそもUI/UXの実体とは何か?各サービスのデザインプロセスをお伺いしました。後半では、みなさんのご経験をふまえて、これまでUI/UXデザインに携わったことのないエンジニアが初めて携わる際に注意すべきポイントをお伺いできればと思います。

まず、皆さんのご経験上、UI/UXをデザインするプロセスで陥りがちなワナを3つ挙げていただきました。

【ワナ1】カッコいい・イケてるデザインを使いたがる
【ワナ2】目的を見失う
【ワナ3】シンプルじゃなくなる(ぶれる)

五十嵐 では、まず1つ目の「カッコいい・イケてるデザインを使いたがる」に関してお話しいただけますか?

##

より直感的でかつ、斬新なUIデザインを採用する『Path』

橋本 例えば、海外の有名なサービス『Clear』と『Path』。このサービスには斬新なUIが実装されていますが、ああいった要素をLINEに組み込むのは難しい。

五十嵐 そうなんですね。

橋本 特殊な操作を伴うインターフェイスのデザインって、最初は使うのに戸惑うんですよ。確かに僕らが斬新なインターフェイスのアプリを体験して盛り上がることもありますが、あくまでもそれはそれ。僕らは知識としては吸収するんですけど、果たして一般の人がそれを求めてるのかなと問われれば、たぶん求められてない。LINEはとにかくシンプルに、ノイズが入らないように細かく設計してここまできています。

―― デザインに対してエゴみたいなもの、「もっとこういうの付けたらカッコいい!」という思いは出てこないんですか?

橋本 まったく考えないことはありません。UIを研究する中で、話題のアプリをたくさん見ていたりするので。例えば、「このアプリのこの要素を取り入れたらどうなるんだろう?」と画面上でテストしてみて、いろんな人にヒアリングすることはあります。でも、やっぱり「これは合わないね」となっちゃう。要するに、インターフェイスのギミックを練るというのは、かなり苦肉の策なのかなと思うんですよ。

一同 (笑)

橋本 もしLINEが『Path』の「+」ボタンなんか始めちゃうと「アプリの本質的な弱みを隠そうとしている」と思われちゃう。『Path』の場合は成立しているとしても、そのままの形で自分たちのサービスに持ってくると、まったくハマらなくなりますね。

五十嵐 でも、現場のエンジニアや非UIデザイナーの方と接していると、そういう「カッコいい」アイデアが上がってきませんか?

橋本 はい、もちろんありますね。エンジニアチームは「機能的で斬新なアイデアのインターフェイスだから、材料の一つとして検討してみたらどうですか?」と提案してくるんです。彼らは最新のサービスやアプリが大好きですから(笑)。そういう時は、「なるほど。検討はしてみるけど、改めてユーザーの観点から見た時にそれは使いやすいのか。実際はそうとは言えないかもしれないね」と話すことがあります。結果的に、自分たちやギークの視点ではなく、ユーザーの視点で考えてみようとなります。

五十嵐 「カッコいい」、「新しい」ばかりではなくて、ということですね。

橋本 そうです。

「足す」ではなく「そぎ落とす」。Facebookも実践していた発想

五十嵐 では、2つ目の「目的を見失う」という点についてもお伺いしたいと思います、これは3つ目の「シンプルじゃなくなっちゃう」という点と密接に関係しているような気がしますが。

EE

「そもそも論」を繰り返すことで、ユーザーに提供できる(したい)ことの価値を最大化しているクックパッド

池田 わたしは「何でこの機能作ったんだろう」という、そもそもの目的に立ち返るようにはしていますね。どうしても作り始めると、作ること自体に没頭しがちになるので、「そもそもそれは何のための機能か」を常に振り返るようにしています。

―― 「そもそも」論が大事、ということですね。

池田 はい。そうすれば、余分な機能追加をする必要がなくなりますし、もしかするとその機能自体が必要なかったりするかもしれません。

五十嵐 仲さんは非UIデザイナーとしてこれまでサービス改良を繰り返してこられましたが、「これは失敗だったな」ということはありますか?

 失敗はいくらでもあります(笑)。最初は「ユーザーはこういう機能があったら便利だろうから作ろう」ととてもシンプルなんですが、作っているうちに気が付いたら自分が作りたいものを作っちゃっていたり……。

五十嵐 あぁ(笑)。

 今取り組んでいる「ゴールド・エクスペリエンス」というUI/UX改善の取り組み(※座談会を開催した7月30日時点)でも、「履歴書ではなく、人で判断されるリクルーティングサービスを作ろう」と思っていたのですが、誰かが「サーチ機能も入れた方が良いんじゃないか」と言った途端、みんながサーチ機能にこだわり出したり。気が付いたら「これ何で作り始めたんだろう?」となって、まさに目的を見失ってましたね。だから要所要所でチェックする人がいないと。

五十嵐 俯瞰して見れる人が必要なんでしょうね。

 そうですね。どんどん足したくなっちゃうんですよね。ユーザーがこう思っている「だろう」というのを勝手に妄想しちゃう。シンプルにしないといけないのは、わたしが以前働いていたFacebookでも感じました。Facebookが生まれる前って、すでに同じようなSNSがすでにハーバード大学にはあったんです。でも、そのサービスはカレンダーもあれば、日記もあれば、自分のスケジュール管理もできて……、とにかくごちゃごちゃして、使い勝手が良くなかったんです。それを横目に、無駄を削ぎ落したFacebookが一気に浸透していきました。絞れば絞るほど良いんですよね。

##

仲さんの話す「あるある」失敗談を受け、LINE流の回避術を話す橋本氏

橋本 どんどん足したくなる、というのは確かにそう。最初に考えていたものからブレていっちゃうんですよね。それは僕らもやっぱりあって、当初の目的を見つめ直すというのをやっていかないといけない。

五十嵐 でも、そういう本来の目的を意識することって現実的にできるんでしょうか。振り返りのタイミングを決めていたりするんですか?

橋本 タイミングとかは決めていませんが、「UIを決めて作ったマークアップにデータを流し込んで見てみましょう」という時に「これやっぱり違うよね」となったら、リリースを遅らせるかどうかを判断します。止めちゃうこともある。その判断は本当に難しいです。

「シンプル命」の世界だからこそ、サービスの生命線はオリジナリティ

五十嵐 では、挙げていただいた3つの罠に陥らないためには、これからデザインもやりたいというエンジニアたちは一体どうすれば良いのでしょうか?

橋本 まず言えるのは、複雑にしないということですよね。ユーザーがアプリの中でできることは限られているので、目的を明確にする。特にスマートフォンは画面が小さいので。あと、新トレンド、新技術を追いたくなるのですが、あえて追わない。なぜならユーザーが本当に求めているポイントではないから。今広く普及している「感覚」を優先して参考にする、ということでしょうか。

池田 スタートアップのように人数が少なかったりすると、頭の中で固まってしまいがち。なので何らかの目的を持って、人目に触れさせることが大事です。あまり自信を持っていなかったとしても、出さないと経験値が貯まらないので、判断できませんよね。

 前編でも話があったように、要するに「シンプルである」ことがとても重要だということでしょうか。

五十嵐 ユーザーが画面を見た瞬間、2~3秒で何ができるかが分かることが大事なんでしょうね。

橋本 そうですね。

五十嵐 いっぱい機能があると、何のためのサービスなのかが分からない。サービス開発者視点で見ると、軸となる機能があって、そして周辺の機能がある。でもユーザーからすると、全部の機能が並列に見えてしまう。だから、その軸を見せるためのシンプルなのかなと思いました。

池田 あと、シンプルであることが大事である一方で、そのサービスならではのオリジナリティも大事。そのさじ加減が難しいんですけど。

橋本 バランス感覚ですよね。

(次ページに続く)




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング 起業 Android スマートフォン えふしん SIer 技術者 UI アプリ開発 Webサービス クラウド btrax スペシャリスト Apple ギーク 英語 CTO Twitter Facebook デザイン 村上福之 IoT Google SNS Brandon K. Hill ツイキャス モイめし 世良耕太 IT 30代 採用 赤松洋介 コーディング UX 20代 勉強会 プロジェクトマネジメント Ruby 中島聡 ITイベント 法林浩之 ビッグデータ Webエンジニア ウエアラブル 五十嵐悠紀 LINE ひがやすを ドワンゴ モノづくり 受託開発 IT業界 ロボット コミュニケーション ハードウエア MAKERS tips ソーシャルゲーム インフラ SI Webアプリ 女性 ゲーム iPhone イノベーション 高須正和 女性技術者 UI/UX トヨタ マイクロソフト iOS 研究者 チームラボ 自動車 ノウハウ システム プラットフォーム 息抜き 和田卓人 グローバル オープンソース メイカームーブメント 開発者 イベント エンジン 教育 ソニー サイバーエージェント Java 女子会 コミュニティ 家入一真 メーカー ソフトウェア スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 音楽 日産 テスト駆動開発 ソフトウエア 40代 TDD ニュース モバイル PHP TechLION

タグ一覧を見る