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アプリ担当者のもとまで届いてくれ!!!

映画とデザインに共通する「意識されないこと」の重要性

http://inspacewetrust.org/en/

本記事はクリエイターのためのUXメディア「UX MILK」に寄稿したものです。
http://uxmilk.jp/51612


デザインに関わる仕事をしていると、奇抜で目を引き、ユーザーの世界を変えるくらいに強いインパクトを与えるクリエイティブに憧れることがあります。一方でデザインを「課題解決」と解釈すると、必ずしも目立つことが正解ではありません。

今回は「映画」と「Webサイト」という2つのメディアに共通する「意識されないこと」の重要性について、考えていこうと思います。

没入しているユーザーは「考えない」

突然ですが、僕は映画が好きです。映画マニアというわけではないのですが、週末に時間があれば家にこもって映画を観ています。

最近映画を観ている中で、ひとつ気付いたことがありました。それは「役者の演技が上手なことを特別に意識することはなくても、下手な場合は演技していることに気がついて(意識して)しまう」ということです。これについては共感してもらえる人も多いのではないでしょうか。

例えば映画の中で「演技をしている感」に気付いてしまうと、視聴者は作品の世界に引き込まれず、物語に共感することはできません。「あ~この人頑張って怒ってるな」そんなことを思ってしまったら興ざめですね。

逆に良い役者の場合、役者は「演技」によって、スクリーンの中で物語の一部となり、視聴者は作品の世界観に引き込まれます。

そうすると、視聴者はストーリーの中で主人公に共感し、喜怒哀楽の感情を抱くのです。それが映画というメディアと視聴者の関係だと思っています。そして、この「意識されないこと」の価値を知ったとき、それはWebサイトのデザインにおいても同じことであると気が付きました。

Webサイトにおいて「意識されない」ということ

ユーザーは優れたデザインのWebサイトを操作しているときに、スムーズに目的を達成できる気持ちよさを感じることはあっても、わざわざ「良い導線設計だな」とか「このインタラクションはユーザーの行動を導きやすいな」と感じることはないでしょう(ユーザー自身がデザイナーなら話は別ですが)。

ユーザーがデザインのことを意識するのは、逆に使いづらさを感じたり、ゴールに辿り着けず迷ってしまったときではないでしょうか。

ユーザーが目的を達成できない、あるいは操作に迷うことは、しばしば良くないデザインの例として挙げられます。目的のページに遷移できなかったり、想定したインタラクションが起こらなかったりした場合、ユーザーは考え、違和感を抱きます。そしてフラストレーションを感じ、最終的には離脱してしまう。これはWebサイトというメディアにおいて、最悪のシナリオのひとつでしょう。

逆にユーザーがWebサイトの中で、スムーズに目的を達成させることができる場合は優れたデザインであると言えます。つまり優れたデザインの中では、ユーザーはゴールに到達するまでの操作を迷わず、デザインについては何も考えないということです。

このようにWebサイトの利用を通してユーザーの「没入感」を生み出し、特に意識されないデザインも優れたデザインのひとつと言えます。

没入感を生み出す2つの鍵

ユーザーを迷わせ、違和感を与えてしまうデザインと、ユーザーをスムーズにゴールに導くことができるデザインの違いはどこにあるのでしょう。

今回は「文脈」と「インタラクション」という2つの観点で紐解いていきます。

文脈 : ユーザーの感情に沿うデザイン

ユーザーには、サイトに訪れるまでの文脈(ストーリー)があり、そこにはもちろん利用目的、そしてユーザーの感情があります。

ウキウキでサイトを訪れてお目当てのコンテンツを閲覧する人、やりたくない手続きのためにしょうがなくWebサイトから手続きをしている人。ウェブサービスが溢れ、スマートフォンやPC、スマートウォッチなど、さまざまなデバイスが普及したことで、ユーザーの流入経路や閲覧シチュエーション、利用デバイス、感情なども多岐に渡ります。

その文脈に沿うことができなければ、ユーザーの期待とWebサイトがすれ違い、利用中のフラストレーションに繋がってしまうでしょう。

Webサイトはユーザーの利用シチュエーションやデバイスなどの条件、状況をイメージしてデザインされることで、はじめてユーザーの文脈に沿うことができます。またそれは機能・コンテンツ設計、構造設計、画面設計、UI設計、ビジュアルデザインなど複数のレイヤーにおいて共通の認識を持ってデザインされなければ、ユーザーにとって価値のある体験(UX)を提供することは難しくなります。

ステークホルダー間でユーザーの感情や利用文脈を共有するために、カスタマージャーニーマップやペルソナというフレームワークがありますが、これらを上手く活用してユーザーの文脈に沿ったアウトプットをすることが重要といえます。

インタラクション : ユーザーとの自然な対話

「文脈」に沿ったUI設計が重要だと前述しましたが、UIデザインの中でも、ユーザーがWebサイトの世界に没入するためにはインタラクションが重要な役割を占めています。

インタラクションとは、ユーザーとWebサイトの「対話」です。Webサイト上での「対話」としての普遍的なルールと、それを踏まえた上でWebサイトの世界観を体現するような細やかな「対話」を設計することで、UIを通してユーザーをWebサイトの世界に引き込むことに繋がります。

例えば、ローディングバーもその役割を担っているインタラクションのひとつです。ユーザーが要求したアクションに対してシステムが瞬時にリアクションできない場合に、「現在〇%読み込んでいます」というステータスを伝えることで、ユーザーを安心させ、混乱を防いでいます。

もしローディングバーがなかったらどうでしょう。システムの故障やデバイスの不具合など、色んなことを心配してしまいますよね。

さらに、ここでローディング中であることを知らせるだけでなく、ユーザーを飽きさせない工夫や世界観を表現することで、よりユーザーのストレスを軽減し、Webサイトの世界に引き込むこともできます。

今年のカンヌ、デジタルクラフト部門でシルバーライオンズを受賞したWebサイト「In Space We Trust」のローディングバーには「PLEASE WAIT AND TURN ON SOUND(サウンドをオンにして、少々お待ちください)」と書かれており、ローディング完了後にサウンド込みで体験を楽しんでもらう準備を促しています。

また、ローディング画面では宇宙飛行士がカーソルに付いてくるのですが、カーソル移動の速度にあえて合わせずゆったりとしていることで、宇宙空間を感じさせてくれるインタラクションとなっています。

このようにインタラクションの中でユーザーのストレスを軽減するだけでなく、Webサイトの世界に引き込むための仕掛けができると、ユーザーはWebサイトの操作にグッと集中できます。

まとめ

ユーザーが余計なことを考えずに目的を達成できるWebサイトをデザインするために

  • ユーザーの利用文脈に沿った体験を設計すべし!
    利用文脈はチームで共有し、全体で一貫したデザインをしましょう。
  • ユーザーとWebサイトの自然な対話を設計すべし!
    一般的なルールと細部へのこだわり、ユーザーの違和感を生まない工夫が鍵となります。

Webサイトという異世界にのめり込んでもらうためにはユーザーの文脈に沿って、自然な対話をデザインすることが重要だと言えます。ユーザーの利用文脈を汲み取ること、そしてさりげない細部のインタラクションを妥協せずに作りこむことが、ユーザーをサイト利用に没入させることに繋がります。

ユーザーがデジタルデバイスを使って、さまざまなサービスの申し込みや処理を行うことが増えている昨今、使いやすさのひとつの考え方として「意識されていないか」という点もデザインする際にチェックされてみてはいかがでしょう。

リリスクの縦型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」をユーザー体験、インタラクションデザインの領域と絡めて考えることができたのは良かったです。自分が好きな異なる領域で何かが繋がる瞬間がとても気持ちいい。

UX Sketch Vol.8レポート ~目的によるデザインプロセスの違い~

UXsketch_repo_160323a

2月26日に「UX Sketch vol.8 2015年ベストアプリチームから学ぶ!デザインコンセプト設計2」に参加してきました。記憶が鮮明なうちにレポートを書こうと思っていたのですが、年度末を言い訳に約1ヵ月以上遅れてのレポートとなってしまいました。例によって全てのセッションをまとめることはできないのですが、一番印象に残った株式会社エウレカ亀谷長翔さんのお話をまとめつつ、思考の整理をしていきたいなと思います。

亀谷さんはエウレカが展開するカップル向けサービス「Couples」のデザイナー。「Couples」は2015年7月時点で、DL数が250万人を突破したそうな。亀谷さんがお話されたのは、アプリのデザインにおける「深さ」と「順序」について。設計の対象がWebサイトになることが多い自分とは、異なる視点や考え方だと感じることがあったセッションだったので、とても印象深く聴くことができました。以下、簡単に内容と所感をまとめます。

デザインで重要な「深さ」と「順序」

話した人 : 亀谷長翔(エウレカ)
・コンセプト設計は「深さ」と「順序」を考えて取り組むことが重要。
UXの6つの階層
■ 深さについて
・UXは複数の要素で成り立つ階層思考である。
・UXには6つの階層があると捉えている。(ユーザニーズ、ゴール~機能性、使い勝手~情報設計~UI~コンテンツ~ビジュアルデザイン)
■ 順序について
・サービスの成長フェーズごとに注力すべきポイントを明確にして、取り組むことが大事。
・「Couples」の場合は①リリース前、②リリース初期、③リリースしてしばらくしてから、の3つのフェーズで注力してデザインするレイヤーを変える。

フェーズごとの注力ポイントの違い

①リリース前(ユーザニーズ、ゴール~機能、使い勝手)

・まずはユーザニーズの深掘りが重要。
・企画とデザインの連携が不足していたため、直前でデザインを大幅に直すこととなった。
・ペルソナの情報粒度で重要なのは、デザイン作成時に抱いている仮説を検証するだけの情報を持たせること。

②リリース初期(情報設計~UI)

・ユーザの定着を目的とし、ユーザの声を拾う。
→ FAQの内容を精査、UIの改修に繋げる。
・ターゲット層が普段使っているサービスを徹底チェック、UIデザイン、使い心地レベルをこれらのレベルまで揃える。
→ 若年層のユーザは使い慣れているLINEやTwitter,Instagramと比較する。

③リリースしてしばらくしてから (コンテンツ~ビジュアルデザイン)

・定量的な数字を見ながらアジャストしていく。
・コンテンツの精査とブランディングを進めていく時期。
→ チュートリアル = 重要なすべきサービスを強化 = ブランディング
→ コンテンツの整理 = 情報の精査 = ブランディング

まとめ

・複数階層(上図)において、ユーザのニーズを満たしていくことが大事。
・サービスの成長フェーズごとに注力するポイントを絞ってデザインする。
・UXは最初から固めすぎず、サービスを運営しながら向上させていけば良い。

所感

・情報設計がサービスリリース後でいいというのは、アプリ(サービス)とWebサイトの大きな違いだなと感じました。その成果物が何を目的としているか、どういう役割を果たしているかでそこも変わってくるんですよね。例えば、「企業情報の提供」を目的とした大手企業のWebサイトのケースだと、当然ながら情報設計はリリース前にがっつり詰めておかなければならないわけです。ビジュアルデザインやUI改善はリリース後のユーザの反応を見ながら調整、改修していくというのは一緒かもしれません。

・記事の冒頭に掲載している6つの階層の図は、亀谷さんがスライドで見せてくださったものを、ぼくが記事用に作り直したものですが、ジェシー・ジェームス・ギャレット氏の「5段階モデル」とほぼ同じなんですよね。唯一の違いは記事の図でいう「内容(コンテンツ)」(亀谷さんの図ではContent & Terminology)があるという点です。JJG氏がこれを提唱されたのが2000年(間違っていたらすみません)。亀谷さんも恐らく「5段階モデル」はご存じでしょうし、参考にされたのだと思いますが、15年間UXの考え方がほぼ変わっていないのは凄いというか、本当にそうなのかという疑問も生まれました。こういう考えるネタとか、気づきがもらえたのはいい機会でした。

勉強会を終えて

こういう類の勉強会って何かを「教えてもらいに行こう」っていう姿勢で行くと、何も得られないケースが多いですよね。アプリとWebサイトのデザインの考え方の違いもそうですし、「5段階モデル」もそうですが、自分が何か経験して自分なりの考えを持って行くことで、新たな気づきが得られたり、考えをブラッシュアップできたりするんですよね 。勉強会提供側には少し失礼になってしまうかもしれませんが、「考えるためのネタ探し」くらいが自分にとってはちょうどいいのかもしれない。なんてことも考えられた機会でした。

最後まで読んでいただいた方、ありがとうございました!

公式レポはこちら http://mtl.recruit.co.jp/ux-sketch-vol-8/

やっぱりあの界隈に愛されていた!Tumblrで運営されているアーティストサイト6選!

LUCKY TAPES

以前書いたレスポンシブ記事から、8ヵ月の時を経て、アーティストサイト記事第二弾をお送りします。

今回のテーマは「Tumblr」です。今や、jindoやWixなど簡単にサイトを制作できるサービスがあるので、高校生バンドでもウェブサイトを持っていることは珍しくありません。そして、それらのサービスの中で、僕が一番好きなサービスがTumblrなのです。理由は「デザインの自由があり、(広告もなく)シンプルで見やすい」それだけです。

また、名の売れているアーティストの多くは独自ドメインを持っているのに対し、tumblr.comから漂う、そのインディー感(?)も良いですよね。

今回はTumblrで運営されているアーティストサイトを7組ピックアップし、webサイトとしてどういう機能を果たしているか、チェックしていきます!

Lucky Kilimanjaro

Lucky Kilimanjaro
http://lucky-kilimanjaro.tumblr.com/
ニュースは記事として更新し、グロナビに「HOME」「ABOUT」「LIVE」というシンプルな構成。音源への導線もあるといいんじゃないかな。

LUCKY TAPES

LUCKY TAPES
http://luckytapes.tumblr.com/
グロナビに「SoundCloud」「Bandcamp」が入っているのも、”らしい”ですね。すごくシンプルで、見せたい情報、コンテンツへの導線もばっちり、お手本のようなサイト構成だと思います。

どついたるねん

どついたるねん
http://dotsuitarunen.tumblr.com/
味のある雑さ。メインビジュアルのアーティスト写真が印象的で、どんなバンドか一目で分かりますね!

吉田ヨウヘイgroup

吉田ヨウヘイgroup
http://yoshidayoheigroup.tumblr.com/
トップページが写真だけっていうのも、もったいない気がしますね。ただ、2ndアルバム特設ページ はシンプルでCOOL!3rdアルバム特設ページも凝ったデザインになっていますね。作品に対するこだわりが感じられます!

MARQUEE BEACH CLUB

MARQUEE BEACH CLUB
http://marqueebeachclub.tumblr.com/
各情報ページへのナビゲーションがポスト的に並んでいるのは分かりづらいかなぁ。「Live Schedule」や「Photo Club」を別サイトとして作っているのが新鮮でした。

トリプルファイヤー

トリプルファイヤーweb
http://triplefirefirefire.tumblr.com/
背景、ロゴもオリジナルで統一されていて、トリプルファイヤーらしさが漂う空間ですね!

溢れ出るインディー感

最初にTumblrにはインディー感がある的なことを言いましたが、まさかここまで溢れていたとは。今回は効率的に多くの若手バンドのHPに辿り着くために、大型サーキットイベントの出演者から探るという方法を取りました。そこでも偏りが出ないように、色んなジャンルのイベントを見たのですが、ここまで偏りましたね…。ロックバンドが多く出演するサーキットイベント「見放題」の出演者を調べてみても、Tumblrでサイトを持っていたのは、出演者全142アーティスト中、The Floor(http://the-floor-1214.tumblr.com/)、楽団 象のダンス(http://elephantdanceband.tumblr.com/)の2組のみ!

音楽性によって、選ぶwebサービスがここまで変わるのかと、とても驚きました。音楽性とも関連しそうな、デザイン感覚や美的センスが影響しているのでしょうか。ちなみに、ロック系イベントの出演者はwixやjindoを使っているアーティストが多いようでした。

番外編 : Taylor Swift

Taylor Swift
taylorswift.tumblr.com/
今回は国内アーティストに限って見ていたのですが、海外では大物アーティストがTumblrを利用しているケースも多いようです。その最たる例がテイラー!オフィシャルサイトは別にあるのですが、こちらはブログ的に活用しているようです。とはいえ、ちゃっかり楽曲ダウンロードの導線を固定で出しているあたり、抜け目ないですね。

まとめ

今回の調査でわかったことは

Tumblrはインディー界隈に愛されている!

ということでした。

あと一つ感じたこと。もともとシンプルなサービスなので、ありがちなごちゃごちゃ感はほとんどないのですが、サイト内のコンテンツを整理して、ナビゲーションやTOPページを上手く使いこなせているサイトは思ったより少なかったように感じました。今回挙げたサイトで気になるものを対象にユーザビリティのヒューリスティック評価したい。そして、バンドのもとに届けたい。

ちなみに、アーティストのTumblrの有効な活用法として、下記のような記事もありました。
http://goo.gl/Lj4D7u

今後webサイトの制作、リニューアルを考えているみなさん!Tumblrも候補の一つとして検討してみてはいかがでしょうか!

シンプルさとインディー感は保証します!

UXなまトーク vol.2に行ってきました!

UXnamatalk

UXnamatalk
8月6日(木)にCyber Agentで開催されたUXトークイベント「UXなまトーク vol.2」に行ってきました。
今回のテーマは「インタラクションデザイン」。登壇者はCA関連会社のUXデザイナー陣に加え、長谷川恭久さん、Goodpatch 村越さん、DMM.com井上さんと豪華な面々でした。

アニメーション等動きの具体的な制作現場の話から「そもそもインタラクションとは」という概念的な話、そして「デザインの組織論」と幅広い視点から見た「インタラクションデザイン」のお話を多く聴くことができた有意義な時間でした。

以下簡単に印象に残ったセッションと所感をまとめます。

インタラクションデザインの前の話

CyberAgent 大塚 敏章さん

・人間の赤ん坊は自分で動かした手が自分の意図したように動いている様を見て、それが自分の身体であることを認識する。道具が身体の延長となるのも同じ理論であり、それはデジタルも例外ではない。
・渡邊恵太さんの著書『融けるデザイン』から引用しつつ、「(インタラクションによって)フィードバックがあるから自己帰属感が生まれる。それが繰り返されることにより、ブランドが伝わる、世界観が伝わる。」
・インタラクションとは「新しい能力や世界を獲得できる手段」である。

<所感>

インタラクションによって新たな世界を獲得する、という話は最近話題の「Sketch Aquarium / お絵かき水族館 (teamLab)」(http://www.team-lab.net/all/products/aquarium.html)や先日Maker Faire Tokyoで展示されていた「召喚!らくがきモンスターズ(ココノヱ)」(https://9ye.jp/news/doomon_20150801)はまさにそれだなあと感じました。
デジモンやサマーウォーズの世界も近いんじゃないかとワクワクした話でした。
また動作を繰り返すことで、ユーザに学習させる、無意識に認識させることが即ちブランディングにも直結すること、そしてそれはインタラクションが持つ重要な役割の一つであるということがイメージしやすいセッションでした。

DMM.comラボ 井上 誠さん

・インタラクションはGUIの挙動ではない。対話である
・インタラクションデザインで為すべき重要なこと、意義は本来コミュニケーションを取ることが難しい人間 × 機械 という両者の間に、自然なコミュニケーションを生み出すこと。
→ それは行動文脈や文化背景に沿ったインタラクションこそが可能にすること。
・心地よい会話と心地よいインタラクションの構造は似ている。
→ 相手の状況を読み取る (ユーザの利用文脈を理解する)
→ 話に耳を傾け、うなづく (ユーザの行動を理解し、フィードバックを与える)
→ 次の話を引き出す (次の行動を促す)

<所感>

「インタラクションは対話」という考え方は普段ロボットを作っているDMM.comラボの方らしい考え方だと思いました。設計案件に入って、最近よく考えていた「ユーザに意識されないこと」についても、自然なコミュニケーションとしてインタラクションの一つの理想だという話が出たので、自分の中でも一つしっくりきたセッションでした。対話とインタラクションの対比の話も、インタラクションに止まらずUXという広義で捉えても同様のことが言えるのではないかと思いました。

インタラクションのこれから

SIROK 石山 貴広さん × 長谷川恭久さん

・インタラクションを画面のアニメーションや挙動に限ったインタラクションに限ってしまうと、今後自動化されてしまうのでは、という危惧はある。
→ とはいえ、ユーザにとって気持ちいい動きを実装するには、インタラクション自体についても、エンジニアとのコミュニケーションという意味でもまだまだ人間同士のコミュニケーションの存在は重要。
・コードとビジュアルの間、動きとコードの間を上手く埋めることができる人材が重宝される。海外ではパイプラインエンジニアと呼ばれる。
→ 間を埋めてくれる人材がいないから何でも屋になってしまう。
・今後さまざまなデバイスが出てくることを考えると、画面サイズや利用文脈、ユーザの習熟等を考慮したインタラクションを提供する必要ある。

<所感>

テクノロジーやツールの進化とともweb業界に限らず、色々と自動化されることが危惧されていますが、それと同時進行でアプリもデバイスもサービスも増えてくるので、それぞれに最適化した体験を提供する必要があり、そういう意味では人間の脳みそは今後も長らく必要とされるのではないかと感じました。ただ、AIの進化で人間のニーズや利用文脈などのユーザ理解まで機械的に行うことができる可能性もなくはないなとも思い、少し危機感を憶えたセッションでした。

インタラクションデザインの視点

Goodpatch 村越 悟さん

・村越さんのミッションは「チームの力を最大化」できるように組織をデザインすること。
・組織内の対話を多く持つことが重要。
→ コーヒーレビュー
→ 全社レビュー
→ ランチレビュー
・チームで作るプロダクトの品質はコミュニケーション量に比例する。
→ デザイン自体に文脈性が欠かせないので、その背景を共有できているかがカギになる。
・Goodpatchさんは全てのプロジェクトを土屋さん、村越さんがレビューしている。
→ FBの対応に困っているものは後で詳しく対応。
・偉大なプロダクトは偉大なチームから生まれる。

<所感>

全てのプロジェクトを土屋さん、村越さんがレビューしているという点と全社レビューというシステムには驚きました。設計にがっつり取り組むようになってレビューしてもらうことの難しさ(時間的、文脈的ハードルの高さ)を感じていたので、Goodpatchさんがここまでレビューの機会を持っているというのは驚きでした。しかし、逆に考えると、これだけ注力しなければチームとしてデザインの品質を上げることは難しい(個人の力量に委ねられてしまう)ということなのかと思いました。

レビューのシステム含め、自分の立場としては先輩方の知恵や経験を如何にしてアウトプットの品質向上に繋げるか、あるいは自分のスキル向上に繋げるかという点での取り組みが必要だと痛感しました。

まとめ

個人的な話になりますが、僕は最初にインタラクションという言葉を知ったのが英語だったのでインタラクション[INTER + ACTION] = 相互作用性( ≒ 対話)というイメージを持っていました。webから入ってインタラクションという言葉を知った人はアニメーションや特別な動きをイメージしていがちだという話も聴いたので、その点では偶然ながらも自分は変な障壁なく本質的にインタラクションを捉えることができるのかと感じました。しかしながら、UIとインタラクションの違いや、インタラクションこそが可能にすること、という点で今回驚きに近い学びがあり、特にCyberAgent 大塚 敏章さんのセッションはUXの構造をまた一つ知ることができたように感じ、一番印象に残っています。

どのスピーカーの方も、それぞれの立場で考えていること、取り組んでいることについて、お話してくださったので、これまでの自分にはない視点での話が多かったように感じました。そういった話を聴くと、今後モノゴトを考える際の視点が増えるので、有意義な機会だったと思います。

音みくじ~音楽愛とおみくじの文脈~

otomikuji_0215

hatumode
音楽業界におけるマーケティングといえば、アーティスト、レーベル、プロダクション、プロモーター等業界の中心にいる組織が、如何に売り上げを上げるか、あるいは売り出したいパッケージやアーティストの認知を上げるかということが目的、ゴールになることが多いように思います。ですが、今回紹介したいのは音楽メディアMUSIUMがKICK OFF VIVAで配布した音楽おみくじ「音みくじ」です。当日はこんな感じで盛り上がってました。
https://twitter.com/mikirodeo/status/554665849617788930

実は僕はMUSIUMの立ち上げ、運営にちょっとだけ絡ませてもらってるので、身内の宣伝するようで少し気が引けるんですが、それでもこの「音みくじ」はマーケティング的な側面でとても秀逸なアイデアだなぁと感心しましたし、まだ数字は見ていませんが成功事例だと思うので、僭越ながら如何に秀逸であったか書かせていただきます。

日本人の伝統的正月アイテム、おみくじの文脈

さっそくですが、核心に触れます。今回の音みくじについては、手相占いでもなく、未来予測でもなく、「おみくじ」であったことが何より重要だったと考えています。
人が物を買ったり、消費したり、手に取ったりする場合、全てに理由があります。それは個人の体験によるものもそうですし、社会的、文化的背景によるものも人の行動を促す理由となります。そして多くの場合、人はその理由を意識していません。深く考えて正当な根拠を羅列せずとも 人がアクションを起こすのにそれらは十分すぎる理由になるのです。それを文脈(context)と表し、マーケティングにおいてはコンテクストマーケティングと呼ばれる領域も存在します。

KICK OFF VIVAは1月12日 (月) に開催されました。新年初ライブだった人も多かったでしょうし、餅つきなんかも催されて新年のお祝いムードが漂う空間でした。「お正月といえば、おみくじ!」これが文脈です。おみくじの起源を知らなくても、神も仏も関与していなくても、正月になればおみくじを引く。日本人のDNAに存在するその「文脈」こそが、今回の音みくじが盛り上がった要因の一つと言えるでしょう。

人気の曲と絡めたメッセージ

個人的な話なんですが、僕は今年の正月に引いたおみくじにあった和歌が僕の現状とマッチしていたように感じたのでちょっくら調べてました。笑 音みくじでは運勢とその運勢をフォローするワンフレーズが書かれています。そのフレーズは来場者が好むようなアーティストの曲のと絡めたメッセージです。最近は特徴的でキャッチーな歌詞を書く人気バンドも多いので、例え凶であってもアーティストからのコミカルなメッセージみたいで嫌悪感はないんですよね。

さらに、自分のことを言われた、つまり「自分ゴト化」されたメッセージが自分が知らない曲であれば、その曲に対しても普段とは違ったアプローチや興味を持てると思います。押し付けることなく自発的な音楽の広がりや音楽愛を誘発する素敵なシステムだと思いますね。

ソーシャルでの拡散までフォローするハッシュタグ

音みくじには#音みくじ #MUSIUMというハッシュタグが記載されていました。現代感満載ですね。笑
このハッシュタグをつけてツイートしてね。ってことなんですけど、何か面白いことがあったらツイートしちゃう現代の中高生には受けますよね。さらに今回の音みくじは凶が多く含まれていたと聞いています。凶って普通のおみくじで考えたら本気で凹むと思うんですけど、友達と遊びに来たライブでのおみくじで凶が出たら「おいしい」んですよね。笑 そういうおいしいネタは中高生のツイート欲求に強く訴えます。

ユーザの特徴や行動パターンを的確に捉えて、それがハマっているマーケティングを見るのは気持ちいいですね。ハッシュタグをつけることでMUSIUM、音みくじのことを知った人も多いと思いますし、ハッシュタグも音みくじの成功要因だと思います。

まとめ

最後になりましたが、この音みくじの目的は音みくじのそれ自体と#MUSIUMを含めたSNS上での拡散によるMUSIUMの認知向上だと推測します。その中で、ライブ会場でのリアルの友達との体験の共有によってユーザを引きつけ、話題にしつつ、ソーシャルにおける拡散にまでユーザのニーズを満たす形で誘導できたことは素敵なクロスチャネルマーケティングと言えるでしょう。

そこまで設計された施策なのかどうかはわかりませんが、音楽メディアの認知向上を目的とした施策でユーザのニーズを自然に満たし、また音楽愛を深めることに貢献している音みくじは多くのマーケターが見習うべきマーケティング施策であると言えるでしょう。

音みくじの盛り上がりはこちらでご確認いただけます→