テーマは“UI、UXの衝撃”　CROOZ主催の開発者向け技術勉強会“第4回テックヒルズ”

2012-11-08 03:06 投稿

●ユーザーの心を掴み、ビジネスになるUI、UXとは？

2012年11月7日、都内の六本木ヒルズ内アカデミーヒルズにて、Mobage向けにソーシャルゲームを提供しているCROOZが“第4回テックヒルズ”を開催した。同イベントは、次世代技術の可能性を追求する開発者向けの技術勉強会で、CROOZが今年から定期的に行っている取り組み。これまで、“全文検索＆検索を利用したサービスの使命、利用プロダクト、事例紹介”、“「ネイティブアプリ」vs「Webアプリ」これからのアプリケーション開発のトレンド”、“2012..Flashの終焉!? ～Flashの今後を見抜く～”といった、そのときそのときの旬な開発技術をテーマに、ゲスト見識者を招いてのプレゼン、パネルディスカッションが行われてきた。

4回目を数える今回のテックヒルズのテーマは“UI、UXの衝撃”。最近注目を集めているUI、UXに関して、どのようなプロダクトがユーザーの心を掴み、またビジネスとして成り立つのかというテーマで、プレゼンとパネルディスカッションが行われるということで、会場には約300名が来場した。そして、UI、UXをテーマにしたこの日のテックヒルズでは、酒井洋平氏（UX Tokyo）、橋本建吾氏（NHN Japan）、坪田朋氏（ディー・エヌ・エー）がゲストとしてステージに登壇。それぞれ、UX、UIをテーマにしたプレゼンテーションを行った。

●UXはそのスペシャリストがいればいいというわけではなく、全社的にやるべき（酒井）

最初に登壇したのは、UX実務者向けのコミュニティを手掛けるUX Tokyoの酒井洋平氏。まず、今回のテーマである“UXとUI”についてだが、UXとはユーザーエクスペリエンス、UIとはユーザーインターフェースの略だが、酒井氏曰く「最近、“UX/UI”というように、ふたつの言葉がひと括りにされている」とのこと。どうしてひとつのものとして考えられているのか？　その辺りを整理するために、酒井氏はスクリーンである映像を流した。映像では、同氏が朝出勤するために電車を利用するところから始まる。改札を通ろうとしたとき定期券の期日が切れていたため、券売機のタッチパネルでICチャージを行う（反応が遅くてイライラしたとか）。そして何とか電車に乗り、乗り換えの駅で下車。そして定期券を購入するためコンビニエンスストアのATMで現金を下ろし（ATMが旧式のためパネル操作等が遅くてここでもイライラ）、その現金で継続定期を購入（カードを印字しているため、なかなか定期が出てこなくてここでもイライラ）。やっと定期が発券され、電車に乗り換えるためにホームへ。ここでタッチパネル式の自動販売機でドリンクを買う、といった酒井氏の日常生活のいち場面が上映された。

この映像で酒井氏が伝えたかったことは、“UXとは、ユーザーの主観的経験（酒井氏の映像）、人に属するもの”であり、“UIは、ユーザーの主観的経験を支える接点（映像ではタッチパネルなどのおもな接点）とそれをシステムと繋げているもの”ということだった。それを踏まえて、UXとUIがひと括りにされているのはどうしてか？　この点について酒井氏は「UIがユーザーのUXを支えるものになっているので、UXを意識してUIをデザインする、という意味でひと括りなのかなと思っています」との持論を展開した。

つぎに、UXデザインについて。UXをデザインするうえで、ユーザーにとっての価値を考える必要性があると説明した酒井氏は、「そのユーザーとは誰のことで、そのユーザーの価値とは何なのかを考えないとＵＸデザインはできない」と説明。では、それをどうやって見つけるのか？　ここで酒井氏が用意したのが、本屋の店員が主人公のとあるマンガ。紹介された一部分のエピソードについては下記の通り。

ある本をハンディーターミナル（在庫情報や注文情報がわかるスキャナーのような機器）にかけたときに、その本が1年以上前から売れていないことを主人公が知ったところから始まる。ある日、絵本コーナーが狭くて子ども連れのお母さんとぶつかってしまい、絵本コーナーにゆとりがないことに気付いた主人公は、絵本コーナーに椅子を置くことを考え、他店の絵本コーナーをチェックしながら、椅子がどのように使われているのかを調べることになり、結果、椅子に子どもを座らせて読み聞かせをするなどの使いかたがあることを知る。それを踏まえ、同僚に絵本コーナーに椅子を置くことを相談するが、同僚はあまり乗り気ではない。そこで、「長い目でみれば絵本コーナーが重要になる。大人の本への入り口になる」や「子どものころに読んでいた本はいまでも覚えている」と言って説得を試みる。その話を受けて、同僚も主人公同様に絵本について考えるようになり、「同じ本がずっと並んでいるのは絵本だけじゃないか」と絵本の価値に気付く。

というのが紹介されたマンガのエピソードだったわけだが、このマンガから言わんとしたかったのはこうだ。

【主人公の価値発見プロセス】
・計測（ハンディターミナル）
・発見（絵本コーナーでの出来事）
・ベンチマーキングと観察（他店の観察）
・プロトタイピング（脳内）
・ストーリーテリング（同僚の説得）
→絵本の価値が浮かび上がる

これが、価値観を見つけることに通ずるとのことだ。最後に、酒井氏はUXデザインについて、「あるUXの価値（具体的な目標）のために、マーケティング、プランニング、デザイン、エンジニア、QA、カスタマーといった、ＵＸのスペシャリストだけが考えるのではなく、（分野横断的な活動を）全社でやるべき」と語り、そういった活動が活発になっていく企業が今後成長するのではないか、とした。

●見た目や使い勝手に磨きをかけること（橋本）

続いての登壇者は、インスタントメッセンジャーアプリ“LINE”を手掛けるNHN Japanで、UIチームのデザインマネージメントやLINEのプロダクトなどを担っている橋本建吾氏だ。同氏のプレゼンでは、NHN Japanの中で体験してきたことを踏まえて、UXデザイン、UIデザインについて語られていった。

その前に、UXとUIの違いについて、「酒井さんからも紹介されていましたが、どれだけの人が本当に認識しているかは正直“？マーク”です。僕のチームでも、ちゃんと定義して話せる人はいないし、僕自身もそうです。ですから、ここでは自分なりの考察についてお話します」と前置きしたうえで、橋本氏の見解は“UXとUIはノットイコール”とのことだ。それをわかりやすく解説するべく、橋本氏が用意したのが2枚のスライド写真で、1枚目にはテーブルに置かれたカップやスプーン、ミルク、シリアル食品が写っていた。この写真に写っているものを、プロダクト、機能リストと見立てた場合、それぞれがバラバラでどうすることもできない。このバラバラなものを統合するものとして紹介されたのが、2枚目のスプーンが写っている写真だ。橋本氏によれば、そのスプーンがバラバラなものをひとつに統合するスプーンであり、いわばインターフェースで、最終的にスプーンを使ってカップにシリアル食品やミルクを入れて食べることができると説明。さらに「ミルクを入れる量でシリアル食品の質感が変わったり、砂糖を入れたりすることで味を調整するのもUXだと思います」と続けた。また、「（日本の朝ごはんを例に）僕なりに理解すると、用意する箸やお皿も素材が変われば、食べる側の受けかたも変わってくると思っていて、そういうことを意識して素材を用意することで、“食べる”という結果は同じだけれども違うものになる」とも。つまり、素材選びや材料をチョイスするのが、UIデザイナーの役割というわけだ。ここまで紹介して、橋本氏がUXとUIの定義について、「UXはユーザーの感受であり体験、UIは感受を生み出す入口、窓」と説明した。

つぎに、NHN Japanのデザインプロセスについて、橋本氏による事例説明が行われ、3つのポイントが語られた。

１：シンプル……「僕もこの会社でよく言われていましたが、“UIはシンプルにデザインをしろ”ということ。なぜUIにシンプルが必要なのかというと、インターネットの情報の供給と仕組みにあるのかなと思います。インターネットが出てきたのが、1997年ごろで、2005年ごろにターニングポイントがあって現在に至ります。1997年ごろから、世の中にホームページというものが生まれ、検索エンジンが出てきた。そのころのインターネットの図式は、Web→インフォメーション→ユーザーという、一方通行でした。しかし、2005年以降、その図式が変わってきた。キッカケとなったのが、“ブログメディアの台頭と不特定多数の出現”です。ブログが出てきたことで、ユーザー←→Web←→ユーザーという、供給と消費の構造となり、情報の流通が変わったのです。そうなると、不特定多数の人たちに向けた情報を流通させることが必要で、そのためには重要なのが、誰でも使えるシンプルなUIであり、それが必要なんだと考えます」（橋本）

ちなみに、この考えかたについては、ビジュアルデザインにも繋がると橋本氏。以前、LINEのバナーデザインを2パターン（デザインAはイラストが散りばめられ、デザインBは“無料通話アプリ”というシンプルなキャッチコピーのみ）を用意したそうな。一見、デザインAのほうが目につくかと思いきや、効果的だったのはシンプルなデザインBだったという。

2：クイック＆ファースト……「（よくあるデザインプロセスは）プロセスプラン→デザイン→デベロップという工程で進めていきますが、このやりかたは工期が読みやすく進行に有利というメリットがある反面、プロジェクトのロールバックに弱い。ですから、NHN Japanではそうではなく、UXチームがリサーチとフィードバック、UIチームがプロトタイプに落とし込み、デベロップチームと連動する。この3部門のサークルが8の字型で動いているので、意思決定が早くスピード感が出てきます。わかりやすく例えると、サッカーにはパスを出す司令塔がいますが、べつに司令塔からのパスじゃなくても、サイドバックからのパスでも、ゴールキーパーのゴールキックも起点になってゴールが生まれることがある。起点を1ヵ所に固めないことがいい」（橋本）

3：ノイズとプロトタイプ（インターフェースのデザインの中で具体的に何をしているか？）……「手帳やカバン、財布など、身の回りに置いておくものの材質や色、形は、皆さん感覚的にこだわって選びながら買っていると思うんです。ただ、毎日使うアプリにまで、そのようなところにこだわっている方はどれだけいるでしょうか？　加えて、最近はUIコンポネットのライブラリ化が進んでいて、そこからパーツを組み合わせるだけでUIができますし。そんな中で、差別化を図るためには表側の見た目にこだわることが大事で、そこはUIデザイナーが考えていかなければいけないことだと思います。その考えることについて、私は“ノイズを削除する”と呼んでいます」（橋本）

このノイズを削除する、という点について、橋本氏はLINEと、LINEと同様のサービスを提供しているアプリの画面の比較をスクリーンに表示。それを見ると、一方のアプリの画面に比べて、LINEは情報量を極力少なく、ユーザー間のコミュニケーションを阻害する機能や表示が削られていることがわかった。

「なるべくシンプルにするため、ノイズを取ったり鉋をかけて（無駄なもの、サービスを阻害するものを）削ったりする必要があり、それをやるのがUIデザイナー。そのためには、プロトタイプデザインを重ねていくしかなく、何回もテストをくり返して、気付いたところは消していき、見た目や使い勝手に磨きをかけていくことが重要です」（橋本）

なお、橋本氏のプレゼンをまとめると、“UIデザイナーの選択の連続がユーザー体験（UX）をさまざまに彩る”、“使う人の立場、状況を踏まえ、デザインはシンプルに”、“プロトタイプデザインをくり返すことで、品質の凸凹をなくす”ということだ。

●徹底的な分析とプロトタイピング、そしてユーザーテストの実施とくり返し（坪田）

プレゼンのトリを務めるのは、ディー・エヌ・エーのUX部門の部長であり、先日リリースされた無料通話アプリ“comm（コム）”のプロダクトマネージャーを務める坪田朋氏。まず、坪田氏は自身がUXについてこだわりを持っていることを話し、ディー・エヌ・エーとしても、クリエイティブグループをUXデザイン部に名称変更していることなど、それだけUXを重要視していることを説明した。そんなUXラブを唱える坪田氏は、プロダクトオーナーという立ち位置でMobageのスマートフォン版のリニューアルにおいてScrum（スクラム）開発を初導入。そして現在は、commを手掛けているとのこと。

さて、このプレゼンにおけるテーマだが、“UXデザインとは何か？”、そして“スクラム開発の手法”のふたつだ。まず、UXデザインについて、「UI（ユーザーインターフェース）は比較的説明しやすい、わかりやすい言葉だけど、UXについてはけっこう議論になるというか、UXの定義について話し合うとなかなか着地しません。ですから、自分なりに言語化するとUXはひとつの定義では表せないと思っています」と坪田氏。一応、UXとはシステムの利用を通じて人々が持つ体験（経験）だとメンバーにはしているそうだ。それを踏まえて、UXデザイナーとは、“イケてるプロダクト作りを目指し、ユーザーの立場を中心に考え、方法論などを定義する”立場だと説明した。また、“イケてないUIが生まれる理由”についても言及。その理由は、(1)ユーザーニーズが不理解、(2)市場の勉強不足、(3)コミュニケーション不足、(4)チューニング不足であると坪田氏。そのような理由からイケてないUIが生まれないよう、ディー・エヌ・デーでは、リサーチ→要件定義、UI開発→テスト、リサーチ→リリースのくり返しを行っているという。

リサーチについては、定量調査（アンケートなどで取得したデータを数値化し分析）、定性調査（アイトラッカーという分析ツールを使い、人の目線の動きなどを調べる）、競合調査（ターゲットユーザー、プロモーション/マーケティング、デザイン、設計、グラフィック）などを徹底的に実施。そして調査後のUI開発については、テストとリサーチなどの積み重ねだという。

つぎに要件定義。commにおいて、友だち数を飛躍的に向上させるために、まず友だちを増やす方法を箇条書きで書きだす。その後、ペーパープロト（紙をベースにUIデザインを描く）を行い、さらに実機でのモック作成（ペーパープロトを実機に付ける）で、実際に使いやすいのかを検証。違和感を覚えたら何度も作り直したり、迷ったりしたら機能を落とすこともあるとか。そこから生まれた何パターンの中からいいものを実際にグラフィック化し、リリーステスト（アイトラッカー）でテキストやアイコンの直感性を再確認。そのサイクルをくり返して、より良い品質へと高めていくとのことだ。さらに、リリース後も、A/Bテストなどを行っているようだ。なお、ここまでの話で坪田氏がUI設計に重要だと考えているのは、“徹底的な分析”、“プロトタイピング”、“ユーザーテストの実施とくり返し”につきるようだ。

つぎに、冒頭に出てきたScrum（スクラム）開発について。スクラムとは、アジャイル開発手法のひとつで、スピード感と品質が求められる現場にとってはメリットの多いのだと坪田氏は説明。具体的に何がいいのかというと、(1)優先度、目的が可視化、(2)役割が明確化、(3)コミュニケーションコスト減が挙げられた。スクラムでは、ストーリー、ミーティング、役割というフレームワークになるそうだ。

最後に坪田氏は、Scrum開発によって“コンセプトと優先度を明文化することで、自走するチーム作り”、“スペシャリストどうしのコミュニケーション”、“意思決定の早さ”が生まれるとし、さらに“チームの座席を近くに置く”、“会議は座らず立って行う”ことで、より早く回っていくと説明。その上で、サービスデザインはエンジニア、クリエーターの領域であり、UI設計はリサーチとテストが超重要であり、リリース後の効果分析は徹底的に行うなどの秘訣を語った。

また、プレゼン終了後には、酒井氏、橋本氏、坪田氏に、CROOZの石川氏を加えた同メンバーで、“SNS×UI/UX”と題したパネルディスカッション、テックヒルズの会場に足を運んだ開発者による名刺交換会なども行われ、4回目を迎えて同イベントは、大いに賑わっていた。