webディレクターの阿呆な研究

モバイルフロンティアとお弁当づくりから考える、モバイルUXデザイン #MobileFrontier

モバイル「フロンティア」
フロンティアとは、「北米大陸における、開拓地と未開拓地の境界」のこと。モバイルが登場したことにより、UXデザインは新たな未開拓地にふみこんでいる―。モバイルフロンティアの著者Rachel Hinmanは、開拓時代の凄まじい西漸を例とし、皆が開拓にふみだせるよう、この書籍のタイトルをつけたのだろう。

6/1(土)にモバイルUXデザインワークショップ:「モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド」出版記念イベントに行ってきた。覚書と、モバイルUXに現場で関わって思ったことをまとめてみようと思う。

詳細はこちら

「モバイルフロンティア」読書感想文 ~テクマクマヤコン、テクマクマヤコン、素敵なモバイルUXデザイナーになーれ!

自分、そして周囲の人たちもふくめ、PCサイトを設計してた人がスマホサイトを設計すると、必ず出会う違和感があると思う。

「PCサイトをデザインするようにUI考えたら、スマホサイトが情報ぎゅうぎゅうで使いづらい・・・
「デザインをPCサイトと同じ感覚でやったら、派手になりすぎて見づらい!
「PCサイトでだしているあれもこれもださなきゃいけないんだけど、整理しきれない!
逆もまた、しかりである。

詳細はこちら

スマホデザイン会議~UI/UX最前線~ #sdkaigi がステキすぎて鼻血が止まらない

表題のとおり。第六回 スマホデザイン会議 #sdkaigi に参加してまいりました。
テーマは「~UI/UX最前線~」。大好物であります。
大好物すぎて帰宅したとたん何故か鼻血が噴出し、只今鼻にティッシュをつめながらブログ書くはめになりました。変な病気じゃありませんように。

アートの世界観をデジタルで実現する手法

~蜷川実花監修カメラアプリ cameran 大城哲也氏~

まず登壇されたのは、大城哲也氏。リクルートホールディングスメディアテクノロジーラボ所属だそう。
メディアテクノロジーラボとは、リクルートで新規事業を開発する組織。アイディアプレゼンしてゴーサイン翌日からプロデューサー!作って出すくらいスピーディーな部署だそう。

なぜこのアプリを作ったか

カメラを作った背景:
迅速にグローバルでたくさんのユーザーにつかわれるアプリを作る
(広告費ゼロで)
カメラアプリを選んだ理由
・情報が多すぎて処理できない!という世の中の「不」
・ビジュアル化で処理できやすくしたい!
・カメラアプリって、かっこいいけどにたフィルターは多い
・まんいちヒットしてもすぐ似たようなアプリがでてくる
・開発のコード×東京のセンスで、唯一無二のカメラアプリをつくれないか?

コンセプトからUIのすすめかた

UIは紆余曲折。ゴールを明確にしよう!と考えた。ゴール=迅速にグローバルでたくさんのユーザーにつかわれるアプリを作る
(広告費ゼロで)=ソーシャルとパブのみで素早く満足と拡散を生む
発射台のチェック:コンセプトはツイートしやすい?
価値の瞬間:ツイートしたり、記事をかいたりしたくなるUX?
記者さんが何の変哲もないパソコンとったときにプロダクトは何をしないといけない?
女子大生が大学でDLして、お互いの顔をとったときにどうなってほしい?
チェックフロー
・コラージュアプリにする:ニナミカさんぽいけど、記者がコラージュするのはさすがに時間かかる。。満足できない。女子大生にだけささる
・画期的なUI:使い方がわからない。価値にたどりつけない。もったいない。
・GOになったUIは、シンプル、クリア、しかも3タップ以内に価値にたどりつけるように!
ダウンロードは迅速にできる?かどうかを確認

詳細設計(フィルター)のつくりかた

・どんな色が蜷川さんか、数値で表す?例:どくろが何個?
・どんなモチーフ?
・どんなテキスト?
・極彩色フィルタって、アプリでは無理じゃね?
→とりあえず何回かやってみよう!
・イケてる構図をニナミカさんと一緒に考えて蜷川さんらしさを考えた
■バスる人気の被写体
・ジャニーズ
・内田選手
とか
■拡散の様子
蜷川さんのツイートでいっきに広がった
8000ツイート
twitterのトレンドワードに
初日3万件ダウンロード
グローバルでのパブ
アジア核国でストア一位獲得
三日で50万ダウンロード 10日で100万ダウンロード

おもしろかったのは、ビジネス的な「迅速にグローバルでたくさんのユーザーにつかわれるアプリを作る(広告費ゼロで)」という思惑が企画前提としてあったという点。

おもしろそうなwebサービスを作っている会社だと、たいてい自分や周囲の「こういう不都合を解決するサービスをつくりたい!」から発しているようにみえてたのです。だからこそ、UXが考えられ、面白いサービスが生まれるのかな・・・と。

逆にいえば、マネタイズ命な企業が新規事業として何かをはじめるにはそういう「不都合を解決する」という視点にはなりづらい面もあると思うのです。不都合解決より、ビジネスとして成立するか、集客できるか、バズるかをまず考えてしまう。結果的につまらない、二番煎じのような企画になっちゃうか、あとはそもそも見向きもされないとか。
「ユーザーの行動にイノベーション」をおこすUXのあるべき姿からみれば、「バズらせる」って目的って、まさに手段が目的化したようなお題目だと思うのです。この目的掲げた時点で死亡フラグ。

でも、このcameranはバズることを前提としたUX設計をし(記者とか女子大生を考慮したうえでのUI等)、しかもユーザーに楽しんでもらうことができました。これって稀有な成功例だと思うのです。また、その稀有な事例こそ、実は事業会社が新規事業に求めている姿ではないかと感じました。

MobileにおけるGrowthHackerとは?

GrowthHacker.jp 高橋雄介氏

お次の登壇は、GrowthHacker.jp 高橋雄介氏。
おはずかしながら、GrowthHackerって私はじめてききました。。
「グロースハッカー」とよむらしいです。

・結論:UX Experts=GrowthHackers
・グロースハッカーって何?いろんな人の定義
「グロースハッカーは新しいマーケティング副社長だ。」
「製品を素早く広めるためにはMBAじゃなくAPI」
「グロース(成長)のために何らかのハックを施すことによって、製品の成長率を上げる」
「グロースを駆動するのは 口コミ、製品使用の副作用、有料広告、反復使用」
「少人数チームで顧客開発やリーンスタートアップする際にはエンジニアも顧客や市場について考えなければならない」
・グロースハック
グロース(成長)にフォーカス
技術的なハックを用いる
製品のマーケティングや全社的な事業成長にかかわる
・グロースハッカーって?
素晴らしい製品体験を作り、製品がおのずと成長できるようにするエキスパート
グロースする製品を作る専門家
売れる製品を作る専門家
少人数で、広告費をかけず、定量定性的データを用い、繰り返し素早く改善していって、ユーザーが満足するようにする人。
・FBやtwitterなどですぐれた成果をのこしたグロースハッカーの方が、ノウハウを共有していった。シリコンバレーの文化。

きけばきくほど、グロースハックって、UXUI改善テストしまくってるDeNAの事例や、リクルートライフスタイルの事例を思い出さずにはいられませんでした。
実はグロースハック的な手法は有名ECサービスでは当たり前のように実施されている施策なのですが、他方、参加者の方々での実施率が低いことにも驚きました。また、自社でも「ABテストって大事かもね」と思いつつ、あまりできてないという状況もあります。理由はたぶん、「何をしていいかわからない」から。もしくは「手が回らないから」。

・グロースハックの6ステップ
トラッキングする
理解する(データから製品を使うユーザーについて)
優先順位をつける 自分たちのKPIに直結する課題に
デザインする 作文する(昨日、UX UI 文章)
実装する
計測する(戦略を調整しつつ123に戻る)

上記を見て、何をすべきかは頭ではわかるかもしれません。でも、どうやればトラッキングできるのか、どうやればユーザーの動向を理解できるのか、優先順位はどうつけるのか、何をなおしたらいいのか、どう計測すればいいのか・・・そんな疑問を目の前にしたら、高い壁のように感じるのも無理はないのかも。

ABテストについては、個人的には小川卓さんの「Google アナリティクスの新機能「ウェブテスト」でサクッとA/Bテストにトライ」が一番わかりやすかったです。おススメ!
ちなみにそういうグロースハックの成果はさまざまなサービスで顕著にでているとのことでした。

・例:FBにおけるエンゲージメント 写真投稿とタグの機能を磨き上げる=友達にタグづけされた使ってないユーザーがもどってくる・例:twitter:トップの15%がログイン→25%がログイン  グロースチームだけでデザインを改善

とかとか。
新規構築も楽しいけど、サイトを成長させる、グロースハック的な仕事、私は大好きです。
なんか、信長の野望(天翔記・将星録あたり)をやっているような気持になるのです。

最初は清州城近辺だけの織田家だけど、ちまちま商業値あげて金もうけて、その金で鉄砲買って、信長に少人数でも鉄砲もたせて斉藤家、今川家に攻め入るあのかんじ。
斉藤家の稲葉山城をとったら、岐阜城に改名→商業がっぽがっぽでさらに鉄砲しこたまかいためて、滝川一益や羽柴秀吉の鉄砲隊を編成した時の喜び。周囲が敵だらけになるけど、前線に信長筆頭に最強な奴らあつめて、奥地でひっそり二軍つくって内政だけさせてたら気づいたら金も米も上限までたまり、農業値商業値MAXになってる、とかね。。だけどそこに武田軍が牙剥いてくるので、そこへの配備もしていけてる一軍’を急きょ配備したりとか。増えていく織田家の家紋。もう幸せでしょ。
(あと島津あたりでやるのが好きです)

とまらないのでこのへんで割愛。

モバイルが切り拓くマルチデバイスエクスペリエンスの未来

楽天 脇坂義則氏/安藤幸央氏

ラストは脇坂義則氏と、安藤幸央氏。
4月末、「モバイルフロンティア」という翻訳本を出版されるそうです!

なぜモバイルなのか?

・契約者の5割がスマホ、出荷台数の7割がスマートフォン
・モバイルのトラフィック増加
・メディアの進化
・スマホ発のサービス LINE Pathなどなど

スマホの特徴

(1)いつでもどこでもネットに接続できる
→電車、お店、歩きながら、とか固定されない環境
利用状況は断片的
モバイルならではの体験を作ることにフォーカスする
デバイスの制約、環境の制約、人間の制約を考慮する
(2)注意散漫、行動がさえぎられることを前提に。
PCは固定されてる。スマホは画面せまいし、ネットワーク接続もうまくいかないことも。
人と話しながら、まわりをみながら、とか集中せずに使う人が多い
使ってるうちにバスにのる、とか、電話かかってくる・・・とか。マルチタスク→継続的注意力断片化
中断しても再開できるように。メニューを深くしない。すべてのコンテンツをみせない。不要なものはそぎとる。

(3)認知的負荷や機会費用を減らす
・認知的負荷を減らす
・機会費用:コンテキストが変われば、代替案を選ぶ費用も変わる

デバイスエコシステム

モバイルを含めたエコシステムが構築されている
・一貫性を保持する
各タッチポイントのUX(デザイン、コンテンツ、インタラクション)に一貫性をもたせること・状態の保持
クラウド スマホで行った処理をPCでも同期できるように

・デバイス間の移動
あるデバイスで利用しているコンテンツをほかのデバイスでも利用できること

UXのパターン

UX:クラウドとアプリを基本単位としてデザインする。スマホの画面は狭い&通信環境がよくない→マトリョーシカパターン(ドリルダウンしてみせてく)、HUB&SPOKEパターン、BENTO NOX 全部の情報を一度にみせらんないから隠す
・入力方法→タッチ入力、音声、画像、GPS いろんな状況で使いやすくしてあげるように。
UI:
・アニメーションの法則
ディズニーのアニメーションの12原則
例:iPhone 時計の針が秒針すすみすぎてちょっともどる動作
・良いアプリをたくさん自分で使い込む。たくさん探す。
・良いものが、なぜよいのか、自分の中で分析、分解する
・常用アプリが更新したら、どこが変わったか分析する
・必要なのは「意味のある」動きだけ。単一画面内での動き。
・コンテンツがオオ様。直接捜査。UIは本来なくていいもの。
・インターフェースは媒介物、人々のインタラクションを考慮
・指がふれて捜査する瞬間は画面がみえてないことを考慮
・使っている人を観察する 5人の仕様で85%の問題は解明
・情報の密度をおとす。注目すべきところを演出する。
・中断されることが前提。途中から始まること前提。
・iphoneとアンドロイドを同じにする必要なし 一人一台
・外にでて使う。ストレスフルな状況下でつかえる。速度重要。

もうこの要素だけとっても。スマホ担当者はモバイルフロンティアという本は、絶対必読!と思いました。
PCだけ担当していると、「駅のホームでスマホで検索し、家のPCで商品を買う」のカスタマージャーニーマップの後半しか見えないもの。
一つのサービスの中でPCはPCの、スマホはスマホの役割がちゃんとある。用途や利用状況が違うんだから、同じである必要性はまったくないんです。でも、サービス提供者側はそれを考えずに「PCと同じものの実装」を短絡的に考える人も多いなあと思います。

スマホというコンテキストでは何が必要か?
この点において、網羅された書籍がでるのは自分のためにもうれしいし、今後私と同じようにUXUI改善をしていくメンバーへの情報共有(入口)としても、非常に待望できる一冊になるのではないかと思います!
発売日がいまから楽しみで仕方ありません☆むふふ!


※引用元 How Apple Has Changed The World In Just 7 Years

このセッションでは最後に、「間違いなくモバイルの時代」と述べられていました。
2005年にはおごそかで写真をとることがあまり考えられなった場所。でも、2013年には人々はスマホで写真を撮り、その写真が拡散されていく・・・それを証明した写真がこの一枚なのかもしれません。スマホによって、人々の行動がかわり、文化そのものが変容しているのです。

そんなモバイルの時代にたちあえたことが、おもしろくっておもしろくって仕方ありません!
さあ、考えることはたくさんあるぞ!まずは鼻血をどうとめるか・・・・

リクルートライフスタイルのUXデザイン #RLSUX にいってきた(1)

久々にUX系セミナーのまとめです。
参加したのは「リクルートライフスタイルのUXデザイン」というセミナー。
弊社と同じくデータドリブンな会社のリクルートライフスタイルさんが、どんな風にUXUIデザインを進めるのかが気になっていたので、セミナー知ったときにはるんるん気分でした。

ちなみに。私と同様の人が多かったようで、この勉強会たいそうな人気!参加者50人に104人が応募されていました。しかも私は申し込みが最後から2番目・・・という状態だったので半ば諦めてたのですが。運良く抽選にあたり参加することができました。ありがたやありがたや。なむなむ。

詳細はこちら

サービス運営の現場から考えた、HTML5時代のwebデザイン #html5j

9月8日(土)に実施された、HTML5 conference 2012をのぞきみしました@UST。
その中で、特に気になってたのがこもりまさあき氏による「HTML5時代のwebデザイン」のセッション。

私は一般的なUIについてはあれこれいえるものの。HTML5の側面からwebサービスのディレクションを考えるとなると、まだまだ浅学なのです。うう、お恥ずかしい!

多様化するデバイスを前に、HTML5を使った最適なコンテンツは何か、という点について語るにはまだまだお恥ずかしいレベル感です。というわけで、自分の勉強のためにまとめました。

詳細はこちら

DeNA Creative Seminar Vol.2 #denacrt でスマホUX/UIについて考えた

7/23(月)DeNA Creative Seminar Vol.2 に参加してきました。

「スマートフォンのUI/UXをテーマとして、フロントエンドエンジニア、UI/UXデザイナーなど、スマートフォンアプリやWebサービスのフロントエンドに関わる方々を対象とした勉強会」の第二回です。

特に私はECの中の人という関係上、やっぱりビッダーズのUI/UXがきになるところ。(ビッダーズのUI/UXは、シンプルでいいと思う)しかも天上の空間、ヒカリエに入れる!しかも豪華社員食堂のごはんもいただける!わくわくしないはずがありません。

というわけで本日のメニューはこちら。
セッション1:ブラウザレンダリングについて
NHN Japan 吉田徹生氏
セッション2:ソーシャルコマースサイトの企画と実装
DeNA 鈴木哲之氏
セッション3:スマートフォンにおけるUI/UX改善とscrum開発
DeNA 坪田朋氏

詳細はこちら

UXについて考えたくて「観察」ワークショップに参加してきた!

制作するwebサイトの精度をあげるには、よい「問い」が必要だ。

3年半前、制作会社からECサイト運営会社に転職したものも、データから問いをたてる必要性にかられてだった。そして現在私はデータドリブンな世界 〜効果測定などで得られたデータをもとにアクションをおこしていく世界〜 の中にいる。

ただ一方で、データ中心で問いをたてることに限界も感じている。データ中心の問いをたてても、「PCとスマホでどう連携するのか」というような、媒体をこえたユーザーへの価値を生み出す「問い」がうみだしづらいなあ、と痛感したからだった。

データ中心の問いは、画面単位での改善点は見えてくるんだけど、ユーザーの行動を変えるアクションは見えづらい。あてずっぽうに問いをたてても精度は低い。
ゆえに、ユーザー目線からも「問い」をたてたくて、ユーザー中心デザインを学ぼうと考えた。

※UIやさんにできることの限界を感じ始めたのは「認めたくないものだな。自分の作ったUIの限界というものを。」という記事あたりがきっかけです。このときUX=ユーザー体験と認識しただけで、UX改善=イノベーションだとは理解していません。しかし、データドリブンに基づくUI改善に限界を感じたのは事実なので書いておきます

詳細はこちら

「UXデザイン体験ワークショップ -ユーザーの”これが欲しかった”を形にする-」に行ってきた!まとめ #pasona_ux

5/19(土)にパソナテックとNHN Japan主催の「UXデザイン体験ワークショップ ~ユーザーの”これが欲しかった”を形にする~」に参加してきました!

今回の私の目標は「人間の体験からうまれるインサイトをみつけて、サービス設計に活かす」でした。自社ECサイトのUX、UIを考えるのにあたり、データからなる定量的データに基づいてユーザーのニーズを探ることにはなれてるものの、実際に人間の体験から基づいた設計となると、考えられてるかどうか不安だったので・・・。。

このセミナー、参加人数50名のところ、申し込みはなんと200名もあったそう!抽選に当たったのはとてもラッキーでした。参加者はディレクターの他、デザイナーさん、コーダーさんなどwebサービスに関わる職種の方が満遍なくきていた印象です。
※UX=ユーザーエクスペリエンス。製品やサービスの使用・消費・所有などを通じて、人間が認知する体験のこと。

詳細はこちら

認めたくないものだな。自分の作ったUIの限界というものを。

webディレクターとして自分の作ったものに、あらためて限界を感じるようになった@azumi0812です。
きっかけは、棚橋弘季さんのブログ「巨大な豚に口紅を塗ることがUXをデザインすることではない。」という記事。
「巨大な豚に口紅を塗るデザインプロジェクトを疑おう」と。まさにそのとおりで、UXをデザインすることは単に既存のシステムの表面に口紅を塗るこ とではありません。フィーチャーフォンという枠組みのなかに留まり、AからBへの山を登るためにUIを改良することではないのです。
UXのデザイナーは、既存のシステムそのままにUIやタッチポイントを改善することがUXデザインではないことを理解しなくてはいけません。そうで はなく、真にユーザーの観点に立ち、まったく新しい体験価値を生み出すような新しいシステムそのものを生み出す発想を行なうことが真のUXデザインだと理 解し、自身のデザインワークを行なう必要があります。

「真にユーザーの観点に立ち、まったく新しい体験価値を生み出すような新しいシステムそのもの」まで考え抜き行動したか、と自問自答すると、答えはNO。巨大な豚に口紅をぬる、という最低レベルでこそないけど、巨大な豚を整形→そこそこ人間っぽくして口紅ぬっている感がしたのだ。

詳細はこちら

スマホでタップ数を減らすUI考えたら、「ありがた迷惑!使いづらい」とボロクソに叩かれた件

「どうしたら余計なタップを減らし、さくさく気持ちよく先へ進んでもらえるか」スマホ担当は日々そう考え、UIを設計していると思う。私も例にもれず、余計なタップをせず、どんどん先へ進んでもらえるようなUIを考えている。

しかし、タップ数を減らす遷移を考えところ「超使いづらい!」「ありがた迷惑だ!死ね!」とテスト対象者からボロクソに叩かれた。すっげーマジメに考えた私の精神力はもはや0。切ない。減らせばいいってもんでもないんだなと身をもって痛感した。こんな失敗をする人が少しでもへるように、ブログに書いておこうと思った。
Return Top