UX

愛用サービスをリデザインしました〜radikoアプリ編〜

radiko_renewal.kv.001

Webサイトやアプリを使っていて「使いづらい」と思ったら職業柄「なんで?」ってことを考えちゃうんですけど、今回たまたまそれらしい答えがすぐにイメージできたので、勢いでデザインしました。このポストでは、今回特に気になった課題とそれぞれの解決策についてまとめようと思います。

radikoアプリをデザインした経緯

radikojp-premium

インターネットでラジオが聴けるサービス「radiko」。2016年10月から提供が始まったタイムフリー機能で過去1週間分のラジオを聴けたり、課金すればエリアフリー機能で日本全国のラジオが聴けたりと、ラジオ好きには必須のアプリです。そしてぼくもradikoを愛用しているラジオ好きのひとりだったりします。普段はPCからWebで利用することが多いのですが、先週末に自宅でアプリから利用しようとした際に使いづらさを感じてしまったので、今回「もしradikoをリニューアルするなら…」ということを考えながら、勝手にデザインしてみました。あわよくばradikoアプリ担当者のもとまで届いてくれ!!!

3つの課題と解決策

radiko_renewal.001

今回は実際に利用しようとした際に違和感やストレスを感じた、以下の3つのポイントを解消できるようデザインしました。

1.検索

まず違和感を抱いたのは、検索のUIとフローの設計です。この点については、実は前々から使いづらさを感じていたポイントでした。現状の検索について、図解するとこんな感じです。

radiko_renewal.003

見て分かるように、検索は全体を横断するグローバルの機能として実装されています。そしてここで厄介なのは、モード(今回は便宜上「ライブ」「タイムフリー」「エリアフリー」のことを「モード」と呼びます)を切り替えた際に検索UI(虫めがねアイコン)の色が変わり、あたかもそれぞれのモードの検索のように見えてしまうことです。

ぼくは好きなアーティストがレギュラーを務めるラジオをタイムフリーで聴くことがよくあるのですが、この場合「タイムフリーにモード切り替え」→「アーティスト名で検索する」という流れで番組を検索します。しかし検索結果では「これから放送」(=ライブ)と「今すぐ聴ける」(=タイムフリー)がタブで切り分けられて表示されるため、ほぼ毎回遠回りする流れになっていました。自分自身この遠回りを何度も繰り返していたため、今回は検索の位置付けを以下のように変更しました。

radiko_renewal.004

「ライブ」利用時と「タイムフリー」利用時、「エリアフリー」利用時では、検索の条件もニーズも変わってきます。上図のように検索のUI、そして検索対象を変更することで、ユーザーの状況に合わせた最適な検索条件を提示することができます。例えば今回は「ライブ」の状態をデザインしたわけですが、この場合は地域や放送日で検索する必要はありません。状況に合わせた検索条件を提示できる構造をつくることで、自分自身が感じていたようなストレスは未然に防ぐことがきると考えました。

2.プレイヤー

これは単純な話ですが、再生中に操作したいUI(再生/停止/ボリューム調整)が上部固定で遠く、アクセスしづらい状態にあります。また再生中のモードや番組についても把握しづらいため変更しました。再生中に操作したいUIについてはアクセスしやすく、また再生中の番組情報で表示すべきはラジオ局よりモードと番組名であると考えてデザインしました。

radiko_renewal.005

3.メニュー

一番の改修ポイントでした。メニューを開いた瞬間、メニューの中身が精査されておらず、詰め込まれている印象を受けました。このようなメニューは典型的な失敗メニューだと思っています。

radiko_renewal.006

とりあえず情報を置いておくには便利な気がしてしまいますが、明確にプライオリティを判断して的確に配置してあげないと情報は死んでしまいます。普段開かないメニューの中にはあまり見たことがない情報・機能がたくさんあったのですが、(あくまでも自分の分かる範囲でになりますが)中身を整理して、タブバーに表示するもの、いずれかのモードのコンテンツエリアに配置するもの、削除するものに分類して整理しました。

デザインして思ったこと

思考トレーニングとしてのリデザイン

まず今回のリデザインは画面内のデザインのみならず、構造や機能もゴリっと見直しました。プロダクトのあり方を考えるときに、情報設計は戦略とクリエイティブの橋渡しになる重要なパートだと思っています。ぼく自身がIA(Information Architect)からキャリアをスタートしたので構造的な視点に偏っているとも思いますが、今回は思考の壁打ちができたよい機会でした。

プロダクトとしての理想と現実

改めてメニューや全体のデザインなどを見て「なぜ?」を考えていくと、非合理的なポイントが多いことに気が付きました。これはあくまでも推測ですが、かなり複雑な社内事情があるのではないかと思います。興味本位で運営会社である株式会社radikoの会社情報を見てみると…

radiko.jp

サービスの仕組みを考えると仕方ないことだとは思いますが、多くのステークホルダーが見えます。今回はそんなことは無視して好き勝手にデザインしてしまいましたが、実際のご担当者の方は四苦八苦されたことだろうと思います。とはいえ、そこを調整・説得・協力してこその良いサービス体験だと思っているので、今後のリニューアルでは何とか乗り越えてプロダクトのよりよい姿に近づけてもらえたらと思います。radikoは愛用サービスなので、今後の展開を楽しみにしています!

改めて、radikoアプリ担当者のもとまで届いてくれ!!!

ライゾマ齋藤精一氏が登壇したデジタルクリエイティブイノベーションコース(無料体験講座)で考えたこと

DigitalCreativeInnovation.001

宣伝会議がこの春に開催する「デジタルクリエイティブイノベーションコース」の無料体験講座に行ってきました。今回の講師は本講座の講師を務められるライゾマティクス齋藤精一さん。実はWorld IA Dayと開催日がかぶっていたのですが、あちらはYoutubeに全編アーカイブされるとのことなので(圧倒的感謝!)、今回は表参道の宣伝会議オフィスへ。

今回の内容は昨年開催された同講座の内容の振り返りと、齋藤さんが考える現代の広告のあり方やデジタルが絡む広告表現について。僕(UXデザイナー)は広告屋さんではありませんが、デジタルのものづくりに携わる人間として好奇心を刺激されたり、あるいは新たな視点に気づいたりと、頭と心を使える良い機会になりました。以下に印象に残ったポイントを簡単にまとめます。

テクノロジーが道具になる

近年プロジェクションマッピングやVR、ARなどわかりやすく画期的な技術がピックアップされることが多くあります。しかし当然ながらコミュニケーションにおいて重要なことは新しい技術を用いることではなく、技術を機能的に行うことです。齋藤さんは同じくライゾマティクスのアートディレクターである木村浩康さんのお仕事を例に、そんなお話をしてくれました。例えばデータビジュアライズにしても、膨大なデータ をきれいにビジュアライズすることはあくまでもプロセスの一部でしかなくて、それを使ってどのようなサービスなりプロダクトなりに繋げていくかが重要である、と。

これはおそらく広い分野で共通していることで、いわゆる「手段の目的化」をやめよう、ということでしょうか。そしてテクノロジーがわかりやすく目立っている時代だからこそ「手段の目的化」タイプのプロジェクトが技術面で賞賛されることもあり、逆に本質がわかりづらくなっているのかもしれません。

ぼくの主戦場である「デジタルのオウンドメディア」という狭い領域に限っても、とりあえずAI、とりあえずチャットボット、といった「技術」ありきのプロジェクト(ブリーフ)は少なくありません。本質はそこではなく、当然ながら「課題を解決するためにどの技術を使うか」なので、仮にクライアントから新しい技術を用いることを求められても、仮に提案するとしても地に足をつけてロジカルに考えることを意識していたりします。

クライアントは経営者になるべき

ライゾマティクスといえば最新技術を使って近未来的なプロジェクトを行っている印象がありますが、クライアントとの付き合い方についても、とても興味深いお話がありました。齋藤さん曰くクライアントには2つのタイプがあるといいます。1つは所属部署内で持っている権限の範囲内でできることをやる担当者タイプ。もう1つは経営者タイプ。つまり自分の決済で新しい潮流を作る姿勢で取り組む人のこと。

齋藤さんが経験されたという経営者的クライアントの案件


まだYouTubeもSNSもバイラルマーケティングも流行っていなかった頃に、クリエイティブを信頼して任せてくれた。とのこと。

これはクライアントワークをしているととても共感する話で、管轄部署の問題でできることが限られていたり、スムーズに進まなかったりは日常茶飯事です。そしてここまでリアルとデジタルが融け合っていて、ユーザーの購買行動、メディアとのタッチポイントが多岐に渡る時代に一つのWebサイトで解決できることは限られています。よくオムニチャネルという言葉が使われたり、経営層から改革を!みたいなことが叫ばれるのも同じ文脈で、やはり統合的に考えてユーザーとコミュニケーションを取ることが得策だと考えるのが妥当です。

ただエージェンシーサイドのぼくらはこういうことを愚痴っぽく言っているだけではダメで、積極的にクライアントと肩を組み、近い距離でクライアントが経営者になれるよう手助けしていくことも、プロジェクトを推進する上では重要な役割になってきていると感じています。

広告が機能を持つ

例えば相当の予算をかけてCMを打ったとして、それが肖像権等の関係で1クールで終わってしまう。これについては「これは本当に社会を良くしているか」という疑問を抱かれていたそうです。そこで考えたのが「広告の寿命をもっと長くできないか(=広告に機能を持たせる)」ということ。

広告やマーケティングが同時に社会を良くしていくことはいわゆるCSV(Creating Shared Value)に近い考え方なのかなと思いました。

齋藤さんが例として挙げてくださったのは銀座ソニービルの跡地にできる「ソニーパーク」。

2018年の夏にまた会いましょう。

2017年4月1日からこのビルの解体が始まります。50年もこの地でみんなと出会ってきたビルです。言葉にならない気持ちで一杯です。でも、戻ってきます。2018年の夏までお待ちください。Sonyプロダクトを展示していた建物から、思いきって、この土地を”Park”にします。想像してください、このビルの先に抜ける青空を。想像してください、この銀座で始まる、新しい創造性の聖地を。銀座のみんな、すこしの間だけ、さようなら。そして、50年間、ありがとう。時代が変わっても、テクノロジーが変わっても、ソニーはここにあります。

GINZA SONY PARK PROJECT

この「ソニーパーク」はデベロッパーではなく、ソニーが運営しているとのこと。これからはサステナブルで社会性を伴ったプロジェクトこそが世の中にインパクトを与えていくのでしょうか。会社の近くなので、ちらっと覗いたことはありますが、近いうちにガッツリ見てこようと思います。

これらを自分の仕事に置き換えると、UXは本来ユーザー中心の思考なので、ユーザーの役に立たないものを創るのは本意ではありません。そしてユーザーにとって利便性の高いUIを設計することは可能ですが、UXデザイナーとしてのミッションはむしろユーザーの生活(社会)を良くする仕組み、サービスをユーザー中心で組み立てることです。社会を良くするサービスを、ユーザー中心で設計されたUIを通して提供することが、UXデザイナーの本来の役割だと考えています。

もちろんビジネスとして成果を出すことは大前提ですが、ビジネス成果を出す仕組みの設計も含めた上流(サービスデザイン)から入り込むことでより価値のあるアウトプットができると改めて感じました。

クリエイティブは追うものか、追うものを作るものか

『流行りに合わせた広告なり、戦略なりを作るか。あるいは世の中はこう変わるべきというスタンスでものを作っていくか。ライゾマはテクノロジーを使って、人が追うもの、世の中を変えるものを意識的に作っている。』

これは本講義の最初におっしゃったことです。世の中に良い影響を与えることに妥協しない姿勢、超大事。

【書評】IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン

iauxpractice_cover

「IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン」をようやく読了。

iauxpractice_cover
そして読了後、本書についてさまざまな感想や書評を拝見した。
その中で何人か「教科書的一冊」という表現をしていたが、教科書」ではなく「参考書」としてとても有益な一冊なのではないか。

実務の手引きとしての参考書

本書はタイトルに「モバイル情報アーキテクチャとUXのデザイン」とあるように、「モバイル」という環境に絞って、デスクトップのデザインからの変遷やユーザー特性など「前提」を明示した上で、「実務」のレベルを向上させるための知恵や知見が散りばめられている。
IA/UXのデザインについて、手を取ってイチから教えてくれる教科書的書籍ではなく、あくまでも実務の手引としてアドバイスを求めるように読みたい参考書だ。

したがって、実務の経験がなくこれからIA/UXを学ぼうという読者には少し頭に入りづらい内容であるだろう。
※ amazonにある★1の書評はそういった読者層が手に取ったのではないかと推測。

IA/UXをイチから勉強したいのであれば「IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計/長谷川 敦士」や「UXデザインの教科書/安藤 昌也」が適しているかもしれない。

本書籍ではまずIA/UXデザインの基本的な捉え方や「モバイルファースト」の考え方について、多くの参考文献と筆者の経験を基に記述されている。そしてモバイルにおけるUXデザインについて、よく用いられるモバイル時代の方法論とよくある課題&解決策が、坂本さんの長年の経験、知見に基づいて実務的な視点でまとめられている。UXデザイン、UIデザイン、情報設計領域で実務を経験して壁にぶつかった人、難しさを痛感した人にこそ有益な内容になっているのではないか。

UX関連の書籍がアカデミックな内容が多い中、ここまで実践を想定した内容が網羅されている書籍は重宝される。

以下に気になった、気付きがあった点をいくつか簡単にまとめる。

気付き・発見

▼ モバイルファーストの考え方
モバイルファースト ≠ モバイルサイト、アプリを構築すること
モバイルファースト = ユーザーが本当に必要としていることにフォーカスして、モバイルサイトやアプリを設計すること。
→ ユーザーを知ること、ユーザーのニーズを掘り起こすことが肝となる。
→ UXデザインアプローチが有効。

▼モバイルでのデザインパターンの考え方
何がユーザーにとって必要な情報か、どうすれば伝わりやすいか、といった機能的なことが重要。
→ モバイル環境においては、デザインに求められるものを「情報」ではなく「機能」として捉えることが必要。
→ 機能 = 利用の対象
→ 「ビジュアルデザイン」も「インタラクションデザイン」も「構造設計」もすべてユーザーが目的を達成するための機能。
→ これらは総じてデザインシステムとも捉えられる。

▼定量的調査と定性的調査の組み合わせ
● 定量→定性
定量調査の結果から、被験者を選定して定性的調査を実施する場合
アクセスログやアンケート調査からカスタマージャーニーマップを作成する
→ カスタマージャーニーマップはあくまでも仮説なので、実際の定量データをプロセスに取り込むことで精度を上げることができる。

● 定性→定量
定性的調査で仮説を生成し、調査項目を決めて定量的調査を実施する場合
→ [所感] 定量的調査で見えてくる課題より定性的調査でユーザーのインサイトを深掘りした結果導かれる課題の方が、より本質に近い課題になるのでは。

まとめ

また最後にAppendixとして3名のインタビュー、コラムが掲載されているのだが、そのうちのひとつとしてTHE GUILDのUIデザイナー深津貴之さんのインタビューが掲載されている。モバイルアプリのUIデザインを多く手がけられている深津さんのデザインメソッドやインプット方法、そしてクライアントとの立ち回りまで、さまざまな角度からUIデザインのお話をされており、こちらも必読。

はじめに経験がない人の「教科書」としては難しいと書いたが、もし仮にモバイルのIA/UXデザインの全く経験がなかったとしても、本書を読んでおくことでありがちな問題に直面せずに済んだり、スムーズに乗り越えられたりするヒントにはなると思うので、実務の従事する人には一読いただくことをオススメしたい。

リリスクの縦型MVの没入感の正体をUX視点で考察してみた

RUNandRUN

HIPHOPアイドルlyrical school(以下リリスク)が公開した「RUN and RUN」、iPhoneで観ると「スマホがジャックされてる!」と感じる、凝ったクリエイティブ、仕組みになっている今作。キーワードになっている「没入感」の正体をUXの観点で考察しました。

リリスクのMVが「革新的!」と大人気!

先日リリスクが縦型のMVを公開しました。iPhoneのUIを模したクリエイティブで、実際にスマホ(iPhone)で観ると面白い体験ができると各所でバズっております。実際にスマホ(できればiPhone)で観てもらうのが一番なのですが、簡単に説明すると「スマホがジャックされてる!」「MVなのに、操作したくなっちゃう!」という、トリックアート的なMVです。

ちなみに安室奈美恵みたいなインタラクティブ案件でありません。

そして、そのスマホ最適化MVというアイデアと視聴体験(没入感)についてさまざまな考察が飛び交っていますが、システムとユーザーとの間で起こる体験を設計する仕事をしている立場として自分の考えを書き残しておきます。

スマホ最適化縦型MV自体は前例があります

先日シンガーソングライター秦基博が公開した「聖なる夜の贈り物」のMVも縦型で、今回のリリスクのようにスマホにぴったりハマるMVでした。
ですが、あんまりバズらなかったですよね。。なので、「縦型だから流行った」わけではなくて、むしろ「秦基博のMVにはなくて、リリスクのMVにはあったもの」こそが今回の没入感を生み出した正体であり、バズった要因であると考えています。

没入感の正体は何か

没入感の正体の前に、今回のMVがなぜこんなにバズったのか、革新的だと言われているのかについて、音楽ライターの柴那典さんの考察がとても面白く、納得感もあったので、こちらもぜひご一読ください。
日々の音色とことば 「lyrical school「RUN and RUN」の縦型MVは何が革新的だったのか」

今回の本題である没入感の仕組みについてですが、「RUN and RUN」MVを観た直後にぼくがツイートした内容に言いたいことが概ねまとまっていたので、こちらに引用しておきます。

整理すると

没入感の正体 = スマホ利用のコンテクストに沿った映像展開

面白さの正体 = 混同とメタの行き来、それから展開のテンポの良さ

ではないか、というのがぼくの考えです。

前例は本当にないか?

革新的だったと言われる今回のリリスクのMVですが、上記のツイートが没入感、面白さの正体だと仮定すると、考え方自体は既に存在していたと思うんですよね。

その同様の考え方のもと作られたと思われるMVが「SOUR ‘映し鏡'(Mirror)」です。

ぼくの上司から教えてもらったPVですが、Macの画面上でストーリーが展開されるMVです。自分はWindowsユーザーなのと、現在公開されているMVは拡大しても画面にぴったりハマらない&画質が悪いので、今回のリリスクのMVのような没入感は生まれないのですが、もしこれらの条件が揃ったのであれば、リリカルのMVと同様の体験が生まれたのではないか、という点で類似性を感じました。
もし、それでも今回の「RUN and RUN」の方が没入感が高いのであれば、その理由は「マウス操作とタッチ操作の違い」に尽きると思います。

マウスは道具です。もちろん、そのインタラクション性によって身体の延長のような感覚になっていますが、やはり実際の「身体」を使って操作しているスマホ「身体の延長」であるマウスを使って操作しているPCとでは、前者の方が対象への没入体験のリアリティが増すのかなと想像しています。

このあたりのUX的な話は名著「融けるデザイン」で書かれているので、興味がある方はぜひご一読ください。

後記

今回はリリスクの「RUN and RUN」をユーザー体験、インタラクションデザインの領域と絡めて考えることができたのは良かったです。自分が好きな異なる領域で何かが繋がる瞬間がとても気持ちいい。