月曜日で夜から雪という予報だったため予定していたほどの人数が集まらなかったのではないかということでした。

毎回勉強会に出ると新たな気づきを得られる、今回のSwapSkillsでも重大な気付きがあったので自分の意見も含めてまとめておきたいと思います。

言葉の定義

まずはじめに言葉の定義、これは登壇者の對馬さん然り、来場者然り一定の認識を持って話をし聞かないと全く論点がずれてしまうので、ここでも明確に定義しておく。

コモディティ化とは

品質が均一化することを指す、価格で比較するしかない状態になること。

プラットフォームとは

OSやハードウェアなどの基礎部分を指す

ユーザーエクスペリエンス（UX）とは

アプリケーションを入手するまでの経緯やアプリケーションを入手し使用した後のことまでを含めた体験。

コモディティ化するプラットフォームとは

作り手

簡単に真似できてしまう、似たような製品が簡単にできてしまう。

使い手

違いが理解し難い、機能では違いを判断できない。

アプリケーションのコモディティ化

Unity 4.0

• どのプラットフォームでも動くアプリを作ることができる
• アセットを利用すると誰でも同じ機能を実装することがしやすくなる

コモディティ化するWebサービス

パブリック・クラウド

• AWSは10分で登録1年間無料で使える
• Apptio社はパブリック・クラウドのkakaku.com

クラウドを利用することで環境の準備コストが低下、大企業などでしかできなかったような大規模なインフラを低価格で実現ができるようになってきた。

オープンソースのモジュールが抱負

• PHP,Perl,Ruby,Python
• 特定の環境下（パブリック・クラウドなど）で動けば良い

オープンソースの文化が根付いているWebでは特に機能をモジュール化して配布している例が多く、機能を真似ることがしやすい。

新しいサービスを開始しても短期間で真似できてしまうことがあり、ユーザーにとってみると差別化要因が特にない場合は価格勝負になってしまうことがある。

UXタイムスパン

製品のUXには購入前と購入後や、使用前、使用後と言ったタイムスパンが存在している。また、UXは日常のループを起こしていてその中でスピンアウトする非日常のUXも存在している。

• Apple製品の例
• ポケモンの例
• ディズニーランドの例

日常的なUX

AppleStoreの仕掛け

購入前のUX

AppleStoreでは製品を置く感覚が二人並べるようになっている。これは製品を見ているお客と店員が対面式に話をするのではなく横並びになって同じ視点からものを見たり説明したりできるように設計されているらしい。

また、ただ販売するだけでなく、お客様の問題を解決するという指針の元接客をしているらしい。

機種変更や買い増しなどを考えている場合は、機種間のフラグメンテーションが少ないので新しく買った機種でアプリが動かないなどのエラーが少ない安心感も購入前のUXとして考えられる。

購入後のUX

開封すること自体がワクワクする作りになっていたり、マニュアルが必要ないほど次に何をするかがわかりやすくできている。

開封すること自体がイベントとして成り立つので開封の儀（Unboxing）の動画がUPされたりレポートされることもある。

ポケモンの例

日常的に行われているゲームのUXのループと非日常的なゲームを題材とした映画という日常的なUXと非日常的なUXを提供している。

日常的なUX

ポケモンのゲームをする、そのゲームのことを学校の話をするなど。

非日常的なUX

ゲームを題材とした映画を見に行く。映画館に行くと特別なポケモンがゲット出来るという事も。そこからまた日常のUXへのループに戻っていく。

ディズニーランドの例

入園料を払えば閉園までずっといられる乗り物に別途お金がかかることもないので長時間滞在をする。

１日では回り切られないのでリピートすることでより満足度を揚げることができる。また、期間限定のイベントや隠れミッキーなど毎回来るたびに違う体験ができる。

非日常を提供している

ディズニーランドは入園すると園内の景色のみに集中できるようになっていて、外の建物などが見られない配慮がされている。この事から日常的なループから抜け出し非日常的な環境に身をおける空間を提供している。

コモディティ化に対応する戦略について

ここからは話題が変わりコモディティかに対応するにはどうしたら良いかの話。

ユーザー視点

ユーザーは違いがわからないものにお金を払いたくないという心理が働くらしい。そこでまず導入してもらうのに初期費用ゼロというような価格帯の勝負が始まってくる。

デファクトかニッチか：製品のスタンスについて

コモディティ化すると価格はゼロに近くになり、機能で差別化できない場合は価格競争が起こる。

デファクトを狙う

価格競争では収益が上がらないのでシェアNo.1にならないといけない。シェアNo.1になった所で収益化しないのでNo.1にしかできない方法を考える必要がある。またNo.2以下には当然真似できない方法で収益化する必要がある。

タオバオの例

中国EC市場の8割超、中国物流の半分近くがタオバオで決済されたものだと言われている。シェアがダントツトップなので2位以下が真似できないような施策が施されている。

• 出店手数料0、決済手数料0
• 収入源は広告と融資
• 中国にあるあらゆる商品が集まっている→埋もれてしまうので出店者は広告を出す
• 売上げランキングの上から順に人気のある企業（個人）に融資することができてタオバオの決済から融資金額に対する返済金が支払われる

ニッチ狙い

違いがわかるものに特化する。固定ファンが確実にいる所で勝負する。クラウドファンディングなどで資金を集めることがしやすい。

OUYA

設置型ゲーム機、アンドロイドを使った端末。クラウドファンディングのキックスターターで約7億円を調達。設置型ゲームユーザー層を惹きつけた。

ドラゴンクエストX

日本語のみのWii専用MMORPG。課金ユーザーは40万人。前作の販売本数は426万本にもかかわらず、一人あたりの売上は毎年約2万円。固定ファンが存在している所で販売本数に関係なく売上を出すことができている。

まごラブ

特定年齢層に特化したWebサービス。

破壊的イノベーションとUXの変化

ヘンリー・フォード
:「顧客の要望だけを聞いていたら、もっと早い馬が欲しい」と答えただろう。

スティーブ・ジョブズ
:「ベルは、電話を発明した時に市場調査などしたか？」

違った価値を生み出すときには必ずしも顧客の声に答えているだけではいけない。

パネルディスカッションと質疑応答

ここからはパネルディスカッションと質疑応答から気になったものをピックアップします。

コモディティ化してしまったサービスをどのようにPRする場合はどうしたら良いか

• 差別化する。
• ニッチなところを見出し狙う。
• 破壊的イノベーションを起こす。

この3点がポイントになるとのことです。この時の質問は「コモディティ化」ということを「競合が増えてきた」というニュアンスでおっしゃっていた気がします。

競合との違いを出して、その中にニッチなポイントを強めてシェアを出し、その他のところができないことをするという事でしょうか。

イノベーションを生み出すことが大切。では具体的には？

マイクロソフトの例
:スピンアウトして成功した人を再度取り込んでイノベーションを起こす。

マイクロソフトの場合は内部でイノベーションを起こせるほどの失敗がしづらい環境なのだと思います。イノベーションには失敗がつきものであり、正しく失敗を繰り返すことがイノベーションを起こすきっかけとなるということのようで、スピンアウトして成功した人を取り込むというのはその成功事例を収穫するという事のようです。

コモディティ化しないITは存在するか

真似できないモノは存在しない。特にWebはオープンにしてしまいやすいので真似しやすい。

既存の収益構造を破壊してしまうと後発でも勝てる可能性がある。破壊的イノベーションを意図的に起こすことはできる。

まとめ

見えない敵と戦い続ける必要がある

全体的にコモディティ化とUXという概念的な話で成功事例を上げて説明してくださったのはわかり易かったと思う。

今回の一番大きな気付きは、Webサービスやアプリケーションにおいてサービスの基盤がニッチ層なのかという見極めは極めてもちろん重要になるのだが、参入しやすいニッチであれば競合が出てくる可能性を当然のように視野にいれて、常に見えない敵と戦いをするつもりでいなければならない。

当然のことながらそれではどうあっても戦い切れないので、サービス事業を行なっている場合に最も重要なのは『自分たちのユーザーにとって何が最適なのかをきちんと考えて、真摯に向かい合い、問題を定義し、解決し、使い勝手を探求し続ける』以外に他はないと思う。

UXデザインをするにあたり重要な思想はこれ以外にはおそらく存在しないと思う。

まだまだタッチディスプレイ自体に多くの課題があるなかでじっくり見ればみるほど様々な課題が浮かび上がって着ます。

今回も二子玉川ライズという複合施設のタッチディスプレイ式インフォメーションボードを見てみます。

慌てて撮ったから写真が雑ですが、ライズのタッチディスプレイは縦型です。

上半分に周辺情報や電車の運行案内や広告などを表示して、下半分はフロアガイドなどの検索に使われているようです。

クアアイナを探してみる

今回はアイカタがどうしても行きたかった クアアイナに行こうとして検索を試みました。

どこからはじめたらいいかわからない

ライズという施設は７つの建物からなっていてその中のどこかに クアアイナがあるはずなのですが、ショップを50音で調べられないようなので、TOPページでどこから調べるかどこを最初にタッチするべきかがすでに不明でした。

アイカタが ドックウッドプラザというところにあるという事を事前に調べていたので、ドックウッドプラザをタッチ。

何階にあるかわからない

しかし、アイカタも何階にあるかはわからなかったので、レストラン＆カフェと書いてあるところを総当りです。

写真は7Fの地図の右下にクアアイナを見つけたところ。

いろいろわからない

この写真をみていると、いろいろわかりにくいことに気が付きます。

ショップ一覧

まず、左上に ショップ一覧の表示がありますが、これは案内図のことを指しているようなのですが、表示されているのは地図なので一覧というのとは少し違う気がします。

7Fの下のスライダーっぽいもの

何が起こるのかわかりません。実際に触っていないのでなんともいえないですがこの規模の地図を拡大するのでしょうか。

どの建物なのかわからない

結構致命的に感じたのが、そもそもドックウッドプラザがどの建物なのかがわからなかったのは残念な感じでした。それほど広くないのとすぐ近くに案内板があったので迷うことはないですが。

結局、複数の場所に点在する情報から行く場所がわかるというのは従来のインフォメーションボードと変わりないというよりも、むしろ操作をする分、情報へのアクセシビリティとして劣っている感じがしてしまいます。

タッチディスプレイの案内板の致命的な弱点

これまで見てきたタッチディスプレイのインフォメーションボードとしての役割ですが、今のところまだ不十分な案内板といわざるをえません。

何よりも操作をしなければならないという点から、見るだけで情報を取得できる＝見ることしかできない方への情報提供が不可能となってしまいます。

この写真でわかりやすいのは車椅子の方は、おそらく建物名のところをタッチすることができません。

自動販売機や電車の券売機なども同様の問題を抱えていると思いますが、案内板の場合はタッチディスプレイを採用して置き換えることはできないでしょう。

案内板の未来：個人の端末へデータを用意する

最適解かはわかりませんが、やはり個人でよく使う端末へ落としこむことが一番利用しやすいのかもしれません。

無線LANからWebサイトへアクセス

案内板の近くに 無線LANのアクセスポイントを用意し接続してからブラウザを立ち上げると自動的に施設案内のWebサイトが表示される。

この方式であればすでに確立されている手法で、無線LANの搭載している端末が増えているためそれほど抵抗感はないかもしれません。

そして、個人の持っている端末のブラウザは使い慣れているもののはずです。

アプリとしてダウンロード

もちろん事前にアプリとしてダウンロードしてもらうのでも構わないでしょう。その際にはポイントカードとして使えるアプリであればより利用しやすいかもしれません。

おわりに

いくつかのタッチディスプレイ式案内板を見てきましたが、案内板のタッチディスプレイ化（置き換えという意味で）は難しいことなのかもしれません。

• 現在地・施設の動的表示で分かりやすい案内
• 更新性の高さ
• 情報量の多さ

このようなメリットがありつつも

• 専有してしまう
• 利用条件が限られてしまう
• 操作をしなくてはならない

というようなデメリットがあることも確かです。

公共的であることでメリットを生かせないというのはタッチディスプレイがパーソナルなデバイスであるからこそ生きてくるという証明なのかもしれないと感じました。

では、グランスタと八重洲案内タッチディスプレイの場合はどうでしょうか。

簡単に見てみましょう。

グランスタ・八重洲案内タッチディスプレイの場合

グランスタとグランスタから八重洲側に出てすぐのところにこのようなタッチディスプレイがあります。

八重洲の場合は真横にマップがあります。

この地図は「東京駅一番街」という通路のマップなのですが、なぜこのマップがこの位置にあって、すぐとなりにデジタルの案内板があるのかパッと見て意図がわかりにくい気がします。（そのうちデジタルの案内板のみになるのでしょうか）

こちらはGRANSTAにあるタッチディスプレイ案内板のクイック検索という画面です。

いち早く検索するためにという目的でこの画面が用意されているということが理解できます。同時に静止画の案内板のように単機能ではないという事も理解できます。

静止画の案内板にないメリット

それは凡例ををタッチするとその施設がある場所が明滅します。上の写真は「化粧室」をタッチした写真です。

現在地の左上にある化粧室が黄色い円で強調されていることがわかります。また右端など化粧室がある場所が黄色い円の点滅で強調表示されます。

静止画の案内版だと能動的に施設を探さなければなりませんが、凡例をタッチしてその場所が強調表示されることである程度受動的な情報に変換されるので、探すという行為が軽減されます。

これは動的なタッチディスプレイ案内板を利用した良い面と言えそうです。

大丸百貨店のiPadとの違い

複数人で利用する

こちらのタッチディスプレイ案内板は右側と左側で違うものが表示されています。どうやら複数人で操作ができるようです。

大丸百貨店のiPadと違って何人かの利用者を見ることがあります。主に家族の方やグループの方が利用しているようです。

これは多くのタッチディスプレイと静止したインフォメーションボードとの違いですが、パブリックな場所でタッチディスプレイを操作をするという行為について考えると、そのデバイスを専有使用することに抵抗感を感じます。

これはボクも実際に使ってみて他の人の目がある中で自分の思ったとおりに操作をするというのはそれなりに抵抗感を感じて気を使う気がします。

専有する抵抗感

静止画の案内板であればよっぽど真ん前に立たない限りは横から、後ろから、少し遠目からなど、複数人で不特定多数での使用が可能です。

その点がタッチディスプレイ案内板の利用喚起を抑えてしまう心理的なストレス要因の一つかもしれません。

大丸のiPad案内とグランスタ・八重洲タッチディスプレイとの違いは、画面の大きさから、多人数で利用すると心理的な抵抗感が少しだけ少なくなるので、複数人のグループの方が利用しているのかもしれません。

iPadの案内は完全に専有使用がわかりきっているが利用されていない雰囲気

専有使用することがストレスなのであれば、明らかに専有使用なiPadなら抵抗なく利用できるのではないかと考えることもできます。

このあたりは心理学の領域になってくるかもしれませんが、それがわかっていたとしても利用されていないというのは、前回の記事で述べた触らないとわからないというのとあわせて、やはり専有するということに抵抗感を感じる人が多いのかもしれません。

八重洲タッチディスプレイの方がiPadの店内案内よりもわかりやすい

大きく地図が表示されるので、現在地とどこに何があるという事を知りたいだけの場合には、静止画の案内板と変わりなく、利用者が操作をしなくてもある程度の要求に答えてくれます。

このことは操作をしていない状態と同じなので専有するストレスがありません。

周辺案内などの付加価値となる情報がない分、iPadの店内案内よりもできることがシンプルです。

付加価値を削った分、わかりやすく、利用するストレスを軽減することができて、利用頻度を上げる結果になっているかもしれません。

ただこの場合は本質的にタッチディスプレイであることにメリットではないかもしれないです。

一つの挑戦的事例として今後について考えていく必要がある

当然のことですが、利用しやすさというのを最優先に考えて。

• 案内板にたいして求めているもの（Needs）
• 利用状況（Context）

といった部分から案内板としての本質的な目的にたいして考えるべきこと

• 利用方法（Interface）

地下街の人たちが案内板にたいしてなにを求めているのかも含めてその通路を利用する人たちが存在していることがどう影響するのかというのもひとつのポイントになるのかもしれません。

ボクの勤務経路に東京駅があります。東京駅には２つのタッチパネル式のインフォメションボードが設置されています。

一つは大丸百貨店店内案内。もう一つはグランスタとグランスタを出てすぐにある八重洲案内タッチディスプレイ

この２つはどちらも同じタッチパネルのディスプレイを使用した案内板として設置されています。

この２つの特徴的な案内版が以前からとても気になっていて、そのことから先日、気づきを得たので見ていきたいと思います。

まず、今回は大丸百貨店の店内案内について。

大丸百貨店の店内案内の場合

東京駅のグランスタを抜けて八重洲地下街へ抜ける途中に大丸百貨店があり、店内案内にiPadが置いてあります。

まずは店内案内がどのようなものかざっくりと。

メインコンテンツは２つ

お弁当ガイドとお菓子土産ガイドの２つがメインコンテンツです。

東京名店お弁当ガイド

大丸に入っている東京が誇る名店が作るお弁当の紹介です。

お菓子土産ガイド

定番の東京土産も大丸で購入できます。

その他の多彩なコンテンツ

その他は大丸のフロアマップ、ブランド検索、レストラン喫茶検索、サービスガイドや営業時間などの通常の案内と駅周辺や駅構内の周辺案内があります。

店内案内への要求

しかし、ボクの通るタイミングが悪いのか、残念ながらいつ行っても誰も利用していません。

むしろ、その脇にある普通のインフォメーションボードのほうが人がよく見ているような気がします。

２つデバイスの違い

この2つのデバイスの違いは何なのでしょうか。特徴を簡単に見てみます。

iPadの店内案内の特徴

iPadではインフォメーションボードでは知ることのできない店舗の詳しい情報を知ることができます。

そのほかにもレストランで食べられる美味しそうな写真。おみやげによさそうなお菓子の写真がiPadの大きな画面を有効に利用してたくさん掲載されています。

情報量の多さがiPadの店内案内の付加価値を高めていると言えそうです。

インフォメーションボードの特徴

インフォメーションボードではすべての階に何が入っているのかがひと目で把握できるような作りになっています。12階のレストランと13階のレストランの料理の写真が1店舗につき1点ずつ見ることができます。

情報量は少ないですが、どんなことを知ることができるか知りたいことがそこに乗っているかという判断はぱっと見てすぐに理解できるでしょう。

違いは操作できる・できない

この2つのデバイスが圧倒的に違うのは、iPadは操作することができて、インフォメーションボードは操作ができません。

つまり、操作しないと情報が手に入らないデバイスと何もしなくても知りたい情報が得られる端末、どちらが利用者にとってメリットが高いかという事になります。

何ができるのか（＝機能）をひと目で把握できるかできないか

インフォメーションボードはひと目で何ができるのか（＝機能）がひと目で把握できます。iPadはどうでしょうか。

1枚目の写真に戻って見ると、どんなことができるか壁に掲示されています。

これを見る限りではどんなことができるのかなんとなく把握できますが、自分の質問に答えてくれるかどうかはこれだけでは理解できません。

自分の知りたいことがわかるかどうかというのが分からない場合、iPadより明確なインフォメーションボードの方に自分の知りたいことが乗っていると判断した場合にはそちらを選ぶという傾向が多いように見受けられました。

逆にiPadは操作をしないと答えが得られないということがデメリットとして判断されているのかもしれません。

では、グランスタとグランスタを出てすぐにある八重洲案内タッチディスプレイではどうでしょうか。

次の記事ではそちらを見てみたいと思います。

同じようでいろいろ違う、UserExperienceとUserInterface、UXDesignとUIDesign。

テックヒルズ「UI,UXの衝撃」に参加して衝撃を受けたので、みなさんの話を参考に「UXとUI、UXDesignとUIDesign」について自分なりにまとめてみました。

「写真が語るUXとUIの違い」について

NHN Japanの橋本さんは「写真が語るUXとUIの違い」のシリアルの写真を独自の観点からUXとUIの違いについて話されました。この話はUXについて非常にわかりやすくまさに衝撃を受けました。

以下は、橋本さんのお話とあわせてシリアルでUXとUIの違いを表現した「The Difference Between UX and UI: Subtleties Explained in Cereal」から一部を引用させていただきました。

こちらはプロダクト（機能リストなどとも呼ぶ）、全体を構成する一覧です。

バラバラだとどうすることも出来ません。

「お腹を満たす」という目的に対してこれらのプロダクトを使用して組み上げます。

カップにシリアルとミルクを入れてスプーンをつかって食べることでお腹を満たすという目的は達成されます。

この「お腹を満たす」時の「シリアル」の「食感」や「ミルク」の「味」、「スプーン」や「カップ」の「手触り感」などから感じることがユーザーの主観的な体験＝UXです。

「UX」は構成される素材によって変わる

このシリアルをミルクに長く浸すと柔らかい食感になります。

ジャムを入れる、砂糖を多く入れるなど食べて感じることが変わっても「お腹を満たす」という目的は達成できます。

シリアルではなくこれが和食だったらどうでしょうか。

という話をされて出てきた画像が朝食的な印象を受ける和食でした。

UX Design ≠ UI Design

木の箸を選ぶ、漆の器、陶器の皿など器や使うものを選んでも、最終的な目的の「腹を満たす」は実現できるが主観的な体験が違います。

UX：感受であり体験＝シリアルをスプーンで食べた時の食感、お味噌汁が入った漆の器を持った時の感触やお腹が満たされた時などの「目的を達成した感想」のこと

UI：感受を生み出す入り口＝シリアルの形状・材質、ミルクの量、コメ、器の形状・材質、箸の材質など「具体的に人が触れる部分」のこと

UX Design：感受である体験をデザインする＝お味噌汁を食べるときの器の口当たりや手に持ったときの感触や目的を達成した時に「どう感じてもらうか」をデザインする

UI Design：UX Designに基づいて体験を得られるような素材を選び口当たりなどの形状、味噌の濃さ箸の材質やどのように使われるかどのように使うと使いやすいのかわかりやすいのかという「直接触れる部分」をデザインする

おわりに

UXとUIについては混同してしまうことが多く、自分自身ではこれまでUXという言葉を聞いてもあまりピンと来ていませんでした。今回の勉強会に参加したことで今までしっくり来ていなかったことがふっと腑に落ちる感じがして、とてもすっきりした気分になりました。

UXとはUIやIA、マーケティング、プランニングなど様々な分野を横断的に必要としそれらを包括するもの

という自分なりの定義付けができました。それと同時にUXという言葉には様々な定義づけができるのでUXという言葉に惑わされないようにしなければいけないと思います。

これまでボクが作り出したかったのはUXであり、ユーザーの主観的経験として「便利」と感じさせたり「楽しい」と思うような、サービスやアプリを作りたいという想いを改めて再確認できました。

最後になりますが、テックヒルズ「UI,UXの衝撃」という勉強会を主催してくださったCROOZ社の皆様には感謝申し上げたいと思います。有難う御座いました。

スライドシェアにUPしてくださっているので詳細はこちらで。

アジャイル開発におけるUXについて

坪田さんは

• UX Design部のマネジメント
• comm.のプロダクトオーナー
• mobage Platform UI/UX担当

をされています。（commの一番えらい人ってこと？）

クリエイティブグループ→UX Design部に名称を変更した→UXをリードしていこうという意図だそうです。

UXとはどのようなものかという事を定量的に定義した上で、開発のなかでUXDesign部でやっていることを事例にUXデザインについて非常にわかりやすく説明してくださいました。

UX Design

UXの話をすると着地しないことが多い。これは人によって解釈が異なり多くの概念を包括した用語である。

UXとは『システムを利用して人々が持つ体験（経験）』

• UXタイムスパン
• UXのハニカム構造（UX）７つの要素

UXについては以下の書籍が参考になる。

誰のためのデザイン？

UXのためのストーリーテリング

UX デザイナーとは

ユーザーの立場を中心に考えながら様々な方法ロンを組み合わせて課題・要求を解決する。

いけてないUIができる原因

• ユーザーニーズの不理解
• 市場の勉強不足
• コミュニケーション不足
• チューニング不足

UX Designの手法

リサーチ
　↓
要件定義
　↓
開発
　↓
テスト・リサーチ
　↓
リリース
　↓
リサーチに戻る

これら全てに責任をもつのがUX Designer

リサーチの手法

• 定量調査
• 定性調査
• 競合調査

定量調査

アンケートを通じて数値化し分析する

• キャッチコピー
• サービス/機能名
• コア機能のニーズ
• イラスト・キャラクター

定性調査

ユーザーテスト＠アイトラッカー

競合サービス・ペルソナユーザーからにヒアリング

被験者にたいして『commを起動して◯さんと無料通話してください』というような課題をだしその動向を調べる。

競合調査

他のアプリは何が刺さっているのかを調査する。

• ターゲットユーザー
• プロモーション・マーケティング
• デザイン
  • 設計

要件定義 / UI開発

課題を言語化する（ストーリー化）→ワイヤーをいきなり作ってしまうと視野が狭くなってしまう
　↓
問題を解決するための方法をリストアップ
　↓
ペーパープロトタイピングを行う（UI設計）
　↓
モック作成（実機検証）
・モックレベルを実機に当てはめて検証する
・手書きのものでも実機の実寸サイズで作成して触ってみる
・違和感を感じたら何度でも作りなおす
・迷ったら落とす

GUIに起こす

様々なパターンのGUIを作成する。色、パーツなども含めてのビジュアル、グラフィックを作成。

リリーステスト

さらにアイトラッカーでテスト！

• GUIまで実装したものをユーザーテストを実施する
• テキスト・アイコンなどの検証する

ようやくリリース/リリース後のリサーチ

リリーステストを経てようやくリリース。その後のリサーチを行います。

A/Bテスト

• 一定のユーザーにのみ公開
• 半々で出し分けしてテスト
• 特定のセグメントにのみ公開

というような実装のレベルで実験的な要素を含んだリサーチを行うなど。

UI設計で重要なこと

• 徹底的に分析
• プロトタイピング
• ユーザーテストの実施と繰り返し

分析とプロトタイピング、テストという繰り返しがUIの設計に大きな影響を与える。

Scrum開発

Scrumとは

アジャイル開発の一つ

現場に求められていることは「スピード」「スピード」「スピード」

でも、結局『数字は？』と数字を求められる。

スピード×結果＝Scrum

• 優先度・目的の可視化
• 役割の明確化
• コミュニケーションコストの低減

Scrum FrameWork

• ストーリー
• MTG
• 役割

ストーリー

• 目的を明文化する
• 解決のためのストーリーをリストアップ優先度を決める（プロダクトバックログ）
• ストーリーに一つづつ以下を決める（スプリントバックログ）
  • ゴール（目的共有）
  • タスク分解
  • 見積り
  • 担当決め

目的を明文化しゴールを定めてタスク分解をすると見積りができて担当を決めれば、開発メンバーは開発に専念できる。

MTG

２週間を１スプリントと定めて、第１週月曜日にプランニングMTG、毎日朝会とスタンドアップMTG、最終金曜日にレビューと振り返りを行うことにしている。

毎日スタンドアップMTGを行うことでコミュニケーションロスを少なくする。

役割

プロダクトオーナー、UXデザイナー、チームに分けそれぞれの役割で

• ストーリーの決定（全体統括・プロダクトマネジメント）
• ストーリーの設計（全体設計・UI/仕様の決定）
• ストーリーの分解（部分設計、開発、テスト）

という役割分担をする。

ディレクションはシステム化すればいい。

ディレクションを行う担当者は各種折衝に作業時間の大半を奪われてしまい作業をとる時間がなくなってしまう。

コンセプトは『優先順位を明文化することで自走するチームを作る』

Scrumという体制を整えることによってディレクションをシステム化する。

• ガントチャート→朝回
• MTG→スタンドアップMTG
• タスク管理ツール→タスクボード
• パワポのワイヤー→ホワイトボード
• エライ人との調整→レビュー

専門性

広く浅く知っている一人がすべてをコントロールするのではなく、各スペシャリストが「決定し、作り、改善し、説得する」

専門性の高いメンバーにより部分的に分けることで見積り、仕様考慮もれを防ぎ巻き戻りを防止する。

まとめ

• サービスデザインはエンジニア/クリエイターの領域になってくる
• UI設計はリサーチ・テストが大事超大事
• リリース後の効果分析は徹底的に

Scrumという手法は初めて知ったのですが、非常に理にかなっていて各作業単位に集中できて実に効率的な仕事の仕方かなと想いました。

UXの視点からの開発プロセスについて、LINEの場合とcomm.の場合の違いが聞けたのは非常に勉強になりました。

テックヒルズというCROOZ社主催の勉強会レポートの続きです。

UI/UXについて〜LINEの場合〜

橋本さんはNHN JapanのUIデザインのマネジメントをされています。

UIとUXについては前回の記事でレポートした酒井氏と似た考え方で、

『UX』とは「User Experience」＝「ユーザーの主観的な体験 」
『UI』とは「User Interface」＝「ユーザーの主観的な体験を支える接点」

という考え方はほぼ同じという事をおっしゃていましたのでUI、UXについては割愛、LINEでのデザインや開発プロセスについて非常に興味深かったのでそちらをメインにレポート。

NHN UX デザインプロセス

1. Simple
2. Quick & Fast
3. 意匠

常にシンプルにデザインしろと言われる。

1. Simple

なぜUIにシンプルさが必要なのか。

ネットの歴史は1997-2005-2012（現在）黎明期とターニングポイントがあり現在にいたっていると考えているそうです。

1997：インターネット黎明期

• 情報流通は一方通行

Yahoo!などのインデックス型のポータルサイトの台頭をメインに情報を配信することが簡単になったとは言え、インターネットは一方通行の情報であった。

2005-2012：ターニングポイントから現在

• ブログメディアの台頭と不特定多数の出現
• 情報流通の変化→ユーザー自身が供給側に回る。

非専門家による情報ニーズにたいしてわかりやすいシンプルなインターフェースが必要になってきた。Googleなどの単機能なインターフェイスなど。

Simple Visual Design

ラインのバナーの例

• DesignA→キャラクターを使ったバナー
• DesignB→コピーのみのバナー

DesignBの方が圧倒的に多かった。ビジュアルをシンプルにするとクリック率が上がる。

デザイナーとしてはかなりの冒険だったらしい。

Quick & Fast

Plan→Design→Develop

• メリット　：工数が読みやすく進行に有利
• デメリット：プロジェクトのロールバックに弱い

LINEの場合

• UXチーム
• UIチーム
• Devチーム

この３つのチームに分かれており、UXチームはリサーチとフィードバーックをして、UIチームがプロトタイプの作成をする。再度UXチームに戻してリサーチを繰り返す。

プロトタイプがある一定の質をクリアしたらDevチームに回して開発を行い、そちらでもリサーチとフィードバックを繰り返す。

８の字（メビウスリング？）のように繰り返し行われ、起点がどこにあっても回すことができ起点を１箇所に定めない（プランを待たない）ようなスタイルにすることでボトルネックにならないようにしているそうだ。

つまり、

UIチーム：こんなプロトタイプを作った
　↓
UXチーム：リサーチ・フィードバック
　↓
UIチーム：フィードバックを受けて改良
　↓
UXチームとUIチームのやり取りを繰り返してDevチームへ

というようなUIチームの発想からでもリサーチ・フィードバックを行い、いついかなるときでも改善が行われるという状況がつくられている。

意匠

普段使うのものは、使い勝手の他に、材質や形、手触りといった感覚でものを選ぶ。

UIコンポーネントのライブラリ化は効率を高めるが質も均一になってしまう。

UIデザイナーは意匠を追求していってUIのデザインとしてUXを高めることが必要。

ノイズとプロトタイプ

ノイズを取り除く

LINEはコミュニケーションの流れを遮らないように不要なものを取り除く
→鉋（かんな）をかける、ノイズをとる（UIデザイナーがやらなければならない）

プロトタイプデザイン

ノイズを除去するにはプロトタイプデザインを重ねないといけない。実際に問題点やノイズに気がつくためには何度もプロトタイプを作ることでしかわからない。

つまり、見た目や使い勝手に磨きをかける＝鉋をかける。

• UIデザイナーの選択がUXに多くの影響を与える
• 使う側の立場にたってデザインはシンプルにする
• プロトタイプを繰り返して品質の凸凹をなくし洗練する

まとめ

LINEでは一般的であるウォーターフロー型の開発手法をやめて、どこからでも問題定義と解決手法に対するアプローチを投げかけることができる環境づくりをして改善スパンのスピードを早めるように努力していると感じた。

組織として各部署が目標にたいして自分たちが行うべきことを理解して仕事に集中している。仕事をする上で自分がやるべきことに集中できる。

UIとUXの関係性を理解するように努めて良いアプリを開発・改善し続けるという姿勢を感じた。

テックヒルズとは

旬な話題をテーマに業種、職種の垣根を超えて見識を高めていこうという勉強会です。

今回のテーマは「UI,UXの衝撃」と題されまして

• 開発者のためのUX：酒井洋平氏（UX TOKYO）
• UI/UXについて〜LINEの場合〜：橋本健吾氏（NHN Japan）
• アジャイル開発における UX：坪田朋氏（ディー・エヌ・エー）

のお三方のお話とパネルディスカッションを聞いて来ました。

開発者のためのUX：酒井洋平氏（UX TOKYO）

「UX Tokyo」とは、実務でUXをやっている人の情報交換コミュニティです。

今回は『「UI/UX」ってなんか変な感じがしない？』というところからUIとUXの違いについて解釈が様々あるなかから個人的な見解として一つの考え方を示してくださいました。

「UI/UX」ってなんで一緒に書かれているのか不思議じゃない？

『UX』とは「User Experience」＝「ユーザーの主観的な体験 」

『UI』とは「User Interface」＝「ユーザーの主観的な体験を支える接点」

つまり、

UIはUXを得るための入り口として存在し、UIは経験を支える接点としての存在であり、UXはユーザー個人の主観に基づくことから感情や感覚的な人に属するものとして存在する。

このことから『個人的な意見』として述べられたのは

ユーザーの主観的な経験はあくまでもユーザー個々に属するものとして存在する。つまり、ユーザーの感情をデザインすることは不可能。このことからUXに対しては『ある主観的経験が想起されることを企図した設計をする（はできる）ことがUXデザインと定義できる

UXの概念としては様々な意見があるのであくまでも個人としての意見の一つというふうに強調されていました。

UXの概念として議論され「UX白書」で一定の定義付けをされています。

UX＝ユーザーにとっての価値

俺の宇宙はまだまだ遠い

「俺の宇宙はまだまだ遠い」という漫画を題材に「ユーザーにとっての価値」についてわかりやすく例えてくださいました。

主人公が「絵本コーナーのゆとりのなさ」に気がついたことから端を発する「絵本の価値」を浮かび上がらせることで、売り場を作り上げるというお話でした。具体的な内容は本を買って読んでみてください。（ささ、上のAmazonのリンクから”ぽちっと”ｗ）

まとめ：UXのデザイン

あるUXの価値には具体的な目標があり、マーケティング、プランニング、デザイン、QA（Quality Assurance）、カスタマーサポートの分野を横断的に必要とする活動になる。

実際に「絵本の価値」を浮かび上がらせるために行われた行為は

• 計測
• 気づき
• ベンチマーキングと観察
• プロトタイピング
• ストーリーテリング

といった内容でした。

これらのことから『UXデザイン』は『UIだけでは成り立たず、データ分析と観察、ストーリーテリング、仮説・検証などを通じて、ユーザーの主観的経験を想起するように設計する』ことを指すということ。

参考書籍

サイトサーチアナリティクス アクセス解析とUXによるウェブサイトの分析・改善手法

ユーザエクスペリエンスのためのストーリーテリング -よりよいデザインを生み出すストーリーの作り方と伝え方

自己管理がへたくそなボクが、まず最初にはじめたのは自分が何にどのくらい時間を使っているかを調べること。

タイムトラッキングを始めてまだ数ヶ月ですが、トラッキングに便利なツール「toggl」をご紹介します。

タイムトラッキングツール「toggl」

「toggl」はタイムトラッキングツールです。

自分が作業をはじめるときに「作業名」を入力してスタートボタンを押します。

作業が終了したら作業時間をカウントアップしているボタンを押して終了。

というこれだけのシンプルなツールです。

細かい設定も可能

細かい設定をするには作業名のところをクリックして詳細画面を表示します。

入力できる項目は

• プロジェクト
• 開始時間
• 終了時間
• 年月日
• タグ

の4つの項目です。後から設定をすることも可能なのでその時つけ忘れてしまっても大丈夫です。

作業レポートを見る

TogglでトラッキングしたデータはWebサイトから確認することが可能です。

「レポート」をクリックするとグラフでレポートを表示してくれます。

レポートは日付の範囲指定はもちろんのこと、プロジェクト毎やタグ単位でも抽出することが可能です。

日報や月次の作業の報告などにも使える

うっかりつけ忘れてしまってもあとから修正できるし、グラフィカルなレポートや、タグを付けて細かい抽出などにも対応してくれます。

ボクはこのtoggleで業務日報のような日々の報告書の作成や、3ヶ月に1度行われる面談の報告書作成に利用しています。

togglで快適なタイムマネジメントを！

togglのタイムトラッキングはWindowsとMacのデスクトップアプリ、iPhoneとAndroidのアプリ、Webサイトからも利用できます。

アカウントは無料のアカウントと有料のPro版があります。

無料アカウントの場合でも、一人で最低限のタイムトラッキングをするならここまでしてくれていいのかしら？というほど機能がしっかり使えます。

タイムマネジメントすることで無駄を減らし少しでもお子さんと一緒にいる時間を増やしたい方は「toggl」を使ってみてはいかがですか。

以上、上手に時間管理してこなつさんと遊ぶ時間を増やしたい！！！ましゃ（@masyacintosh）がお送りいたしました。

結婚前に一眼デジカメを購入し、一眼とコンデジやiPhoneで撮った写真や動画含めて、気が付けば160GBを超えてしまいました。

気がつけば160GBオーバー

とうとう写真が1万枚を超え、HDDの容量とか以前にそろそろ管理が大変なことになってきたのでiPhotoをつかってがっつり管理しちゃおうと思います。

現在の写真の状況はこちらです。

結婚前-こなつさん誕生まで

• 2006/05/07〜2010/07/25
• 3,574枚、ビデオ2本 13.5GB

こなつさん誕生後

• 2010/07/30〜2012/11/05（未整理含む）
• 8,900枚、ビデオ417本 149GB

この圧倒的な差、、、驚きです。

全体では

• 12,476枚、ビデオ419本 163GB

やたら枚数が多かったのでイベントやらキーワードをつけるなど、整理するのにかなり時間がかかりました。。

こんなことにならないように、まだ写真の枚数が少ないうちから整理することをおすすめします。

それでは、まずはiPhotoの基本を抑えましょう

iPhotoって？

iPhotoはMacがOSXになってから登場した、写真の「整理」「共有」「編集」「印刷」が手軽に行えるアプリケーションです。今となればiLifeというスイートのなかの一つとしてもお馴染みですね。

4つのライブラリ

iPhotoは

• イベント
• 写真
• 人々
• 撮影地

の4つのライブラリが基準になります。

イベント

デフォルト設定では日付ごとにイベントが自動で分割されます。
環境設定の一般メニューから「1週間1イベント」「2時間の間隔が空いたら」「8時間の間隔が空いたら」とイベントを自動分割するタイミングを変更できます。

イベントは「日付」「タイトル」「手動」で写真を設定したイベントごとで並べ替えることができます。

ボクは基本的にこのライブラリは自動的に分割されるためそのままして手は入れません。

写真

写真はイベントに似ていますが、並べ替えの基準を「マイレート：降順」という風にしてお気に入りとして星をつけた写真の順番に並べたり、写真のタイトルや設定したキーワードごと、といった写真に設定した情報単位で並べ替えることができます。

人々

人々はiPhotoの顔認識システムで抽出された人ごとに写真を閲覧できます。

顔を顔として認識しなかったり、顔じゃないものを認識したりもありますが、キーワードをつけるのと同時に一人ひとりの顔を設定するのがジミに楽しいです。

人々に設定している写真が増えると精度も上がるようですが、なかなかうまくいかなくて思いもよらない人がぜんぜん違う人と認識されると意外な共通点を発見したりできます。

またFacebookと連動しているので、iPhotoからFacebookへアップロードした場合には自動的にタグ付けされます。

撮影地

iPhoneやGPS付きのカメラなどで撮影した場合その撮影地がピンとして表示されます。

大体どこらあたりをうろうろとしているのかがよくわかりますw。

GPS付きじゃなくても撮影地の設定ができる

GPS付きじゃないカメラでもiPhoneなどのGPS付きカメラで撮影地情報入りの写真を撮影して、同じ場所に撮影地情報がない写真を設定するという風にあとで撮影地の設定ができます。

過去に撮影した写真なども撮影地を割り当てることができます。

まずはiPhotoを使ってみよう

Macをお使いの方はすでに使っている方も多いかもしれませんが、これからMacを使おうと思っている方でiPhotoに興味を持たれた方はこの4つのライブラリを理解するだけでお手軽に写真が整理できてしまいます。

次は少し突っ込んで「写真」ライブラリの中での「イベント」の扱いについてをやってみたいと思います。

iPhoto
カテゴリ: 写真
価格: ￥1,300