愛用サービスをリデザインしました〜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アプリ担当者のもとまで届いてくれ!!!

バウハウスを巡るドイツ旅行記(6/21 〜 6/27)

Germany_eyecatch

先日、休暇をいただいて一週間ドイツに行ってきました。

学生時代から海外旅行は好きでした。学生時代は英語が通じない東南アジアやアフリカ、あるいはスペイン語圏などを選り好んでいたので、ヨーロッパ圏は今回が初めてです。そして、今回の旅のメインは兎にも角にもバウハウス。

今回のブログでは備忘録的に旅をまとめつつ、最後にひとつご報告をしたいと思っています。

初日(成田→フランクフルト)

成田からドーハ経由で22時間かけてフランクフルトへ。フランクフルトはドイツ南部に位置し、それなりの規模の都市。ドイツの首都はベルリンですが、フランクフルトは大きい空港を持っているので交通のハブ的役割があります。

フランクフルトは割とジャンキーで、空港を出てすぐに治安が悪そうな雰囲気をビンビン感じました。ホステルにチェックインしてSIMカードを買いに出かけたら、全身タトゥーの若者は昼から飲み潰れてるし、ホームレスのおじさんは殴り合いの喧嘩してるしで、とりあえず命だけは大事にしようと思いました。

初ヨーロッパということもあり、初日はヨーロッパっぽいキャッスルライクな建物にテンションが上がり気味。「あ〜ヨーロッパっぽい!」というバカみたいな感想をいだきつつ、ドイツ語は雰囲気で読めるタイプの言語じゃないことに気づく。メニューも謎の筆記体みたいなアルファベットで書かれていて(普通に書かれてても読めません)、美味しい食べ物を手に入れるのに苦労しました。ちなみにこの苦労は最終日まで続きます。

レーマー広場@ワイマール

レーマー広場@ワイマール

2日目(フランクフルト→ワイマール)

フランクフルトからバスで2時間ほど移動して、ワイマール憲法でお馴染みのワイマールへ。フランクフルトとは打って変わって、ジャンキーな雰囲気もなく、むしろ多くの音楽家や作家を輩出しているイメージ通りに育ちの良さそうな街でした。

あと想像はしていましたが、内部に行けば行くほど英語話す人は減りますね。ドイツの人はおそらく英語を理解はできるけど話せない人が多いので、英語で話しかけて無邪気にドイツ語で返される、みたいなことも度々ありました。

今回のメイントピックであるバウハウスはデッサウという街で盛り上がったのでデッサウのイメージが強いのですが、起源はワイマールにあります。今でも校舎は残っていて(当時の建物そのままかは不明)、校舎から歩いて5分ほどのところに小規模ですがバウハウスの歴史が学べるバウハウスミュージアムもあります。

3日目(ワイマール→ベルリン)

3日目は前日見て回れなかったバウハウス建築巡り。そして夕方からバスでベルリンに向かう予定だったのですが、そのバスが遅れる遅れる。そして15分くらい毎にバスのアプリ経由で「すまん、もうちょい遅れるわ」的なメールが届いて、結果的に1時間強の遅れ。別にいいっちゃいいのですが、ベルリン到着が遅くなれば遅くなるほど宿にたどり着く難易度が上がるので、ちょっと心配でした。

とはいえ、アプリから英語でしっかり遅延メールを送ってくれることで、自分が見逃してるんじゃないかとか、乗り遅れたんじゃないかという不安を解消してくれるので、不安にはなりませんでした。ナイスFLiX BUS!

案の定、ベルリン到着は予定より1時間以上遅れて23:00近く。そしてこのタイミングでスマホの電池もなくなったので、ベルリンの駅で1分10円くらいのインターネットスポットを借り、宿の住所と大まかな地図、そして最寄り駅をメモって、それを頼りに宿探しです。ここでタクシーを使ったらバックパッカーじゃない!という謎のプライドを懸けて、人に道を聞きまくりながらなんとか宿にたどり着きました。ベルリンはワイマールと比べて英語を話せる人が格段に多いので助かりました…。

4日目(ベルリン)

4日目は一日ベルリン観光の予定だったので、街をフラフラ。唯一必ず見ておきたかったのが、バウハウスアーカイブという博物館。建物の中は写真撮影NGだったので中の様子はお見せできませんが、当時の学生の作品やバウハウスきっかけで生産された照明器具など、バウハウスにまつわるさまざまな製品、作品が展示されていました。ありがたいことに日本語のオーディオガイドもあったので、それぞれの背景を理解しつつ見て回ることができました。

そしてこの博物館の建物自体もバウハウス創設者であるヴァルター・グロピウス氏の設計です。展示だけでなく建物自体も楽しめる空間でした。

BAUHAUS Archiv

BAUHAUS Archiv

そして午後は友人と合流。実はぼくが高校生の頃にロサンゼルス近郊に1ヶ月間ホームステイしたことがあったのですが、そのときのルームメイトであるレナートがベルリン在住とのことで、9年ぶりの再開を果たしました。彼のおかげで、ただ見て回るだけでは知ることのできなかったベルリンの歴史や街に隠れた歴史の遺産を見ることができました。

w/ Lennart

w/ Lennart

ベルリンに着くまではトピックのひとつくらいにしか考えていなかったのですが、ベルリンはナチス政権化の歴史や東西分断の影響が今でも残っており、決してそれらは過去の出来事ではありませんでした。

激動の1900年代。自分自身その辺の歴史はあまり詳しくなかったのですが、例えば西ベルリンと東ベルリンでは信号機のライトが違ったり、税金の制度(?)が違ったり。表現が難しいですが、とても興味深かったです。あと北ドイツと南ドイツ(ミュンヘンあたり)は文化が全然違うみたいですね。東京と大阪みたいな。

この日は友人のおかげで美味しい食事にありつけて大満足。

5日目(ベルリン→デッサウ)

午前中にベルリンを発ち、電車で約2時間の移動。バウハウスの街とも呼ばれ、バウハウス創始者・グロピウスが設計した校舎が現存しているデッサウへ向かいます。

そもそも、設計に関する仕事をしていながら約1年前までバウハウスのことは知りませんでした。会社の先輩に「バウハウス知らんのかい!話しにならんわ!」と言われ、急いて調べ、最低限の知識と多少の興味を持ちました。

とはいえ翻訳された言葉は小難しく、また2017年の感覚で情報に接してしまうと価値が感じづらかったのが正直な印象でした。それでも「芸術と生活と技術の融合」フレーズが心に残り、その概念をスッキリ理解できないのは悔しくもあり、ずっと何か引っかかった感じがありました。

そんなタイミングで今回まとまった休暇をいただく機会があり、「じゃあバウハウス体験してこよう」と今回に至ったわけです。写真を見ても、テキストを読んでも理解できないなら体験してみようと。

そんなこんなで今回の旅の目的地となったデッサウ。

期待を抱いて訪れただけに、建物が目に入ったときは興奮しました。

校舎の見学料、オーディオガイド、公式ガイドツアー(ドイツ語)、写真撮影許可とそれぞれに料金がかかりますが、せっかくここまできたのでケチらず全て購入して校舎を見学。そしてそのまま、かつて学生宿舎だった建物(もちろんグロピウスが設計)に宿泊するというバウハウス三昧の一日を過ごしました。光を多く取り入れるための広い窓の設計が印象的でした。バウハウスの宿舎は部屋からピョコっとでたベランダが特徴的で、ここから見るデッサウの街はすごく叙情的に感じました。

【LESS is MORE】なんて今では重要性が認識されている概念ですが、1920年代をそれを掲げて機能性を考慮した設計を展開しているところにバウハウスの凄さがあったんだと実感しました。

「芸術と生活と技術の融合」がどこまで理解できたかはわかりませんが、バウハウス建築から感じられる、無駄がなく洗練された佇まいには、人間生活を受容する懐の広さと思慮深さを感じました。これをどこまで自分のアウトプットの中で体現できるかは、これからのぼく次第です。少なからずこれからのぼくのアウトプットに影響すると思います、というか、影響させていかなければいけないと感じています。

敬愛する理念、歴史を体験できて、とても幸せでした。勉強になりました。

6日目(デッサウ→ベルリン)

バウハウスの宿舎で朝を迎え、マイスターハウス(バウハウスの教授たちが住んでいた実験住宅)を見学。

お昼前にデッサウを出て、またベルリンへ。この日もとても楽しみしていた予定がありました。訪れたのはここ。

Goodpatch Berlin

Goodpatch Berlin

Goodpatch inc. のベルリンオフィスです。Goodpatch inc. は日本のデザイン会社であり、ぼくが7月からお世話になる会社でもあります。この日は入社一週間前でありながら、ベルリンオフィスの面々は温かく迎え入れてくれました。特にUIデザイナーのJanは仕事で忙しい中、Goodpatchのこと、ドイツのデザイン事情などを教えてくれて、有り難い次第です。とても開かれたメンバー&空間でした。

w/ members of Goodpatch Berlin

w/ members of Goodpatch Berlin

最終日(ベルリン)

最終日は原口元気が所属する(退団するらしいけど)ヘルタベルリンの本拠地・オリンピアシュタディオンに寄って、ベルリンで買い物して、空港に向かいました。バウハウスに影響を受けているというドイツ発の文房具メーカーLAMYのボールペンをドイツで購入できたのは嬉しかった。買ったのは日本のプロダクトデザイナーである深沢直人さんがデザインされた「noto」というボールペン。正直Amazonでも買えるんだけど、ドイツでLAMYを買うことに意味がある!と。

LAMYs@BAUHAUS Archive

LAMYs@BAUHAUS Archive

空港でも予想外の良いこと、悪いことがありましたが、総じてとても刺激的な一週間でした。やはり自分が慣れていない土地で生活する機会は貴重ですね。偶有性に満ちた時間は、東京で消耗して死にかかっていたぼくの脳に鞭打って、生き返らせてくれました。笑

知りたいことは知りに行けばいいし、行きたい場所には行けばいいと思うんですけど、今回感じたことは多少なりとも言語ができるっていうのはだいぶメリットだな、と。そこで人と仲良くなれる度合が違いますよね。英語、改めて勉強し直します。

そして6日目のところで触れましたが、改めて。6月末で3年と少しお世話になったネットイヤーグループを退職し、7月からGoodpatch inc.でお世話になります。今回のドイツ旅行、特にバウハウスで受けた刺激も全部自分の中に取り込んで、これからも良い設計を、プロダクトを世の中に出していけるよう精進します。

今後とも宜しくお願いします!刺激的でした、ありがとうドイツ🇩🇪

UXデザイナー(3年目)が多摩美統合デザイン学科の「成果展」を見て考えたこと

Blog_integrating_kv

多摩美術大学統合デザイン学科の成果展「INTEGRATING」が3月11日〜13日に開催されたので、初日にお邪魔してきました。きっかけはたしか中村勇吾さんのツイート。横浜まで足を伸ばして、とても良い刺激を得られた1日でした。

統合デザイン学科とは

統合デザイン学科は2014年4月に新設された学科です。学科長はプロダクトデザイナーの深澤直人氏、教授陣には中村勇吾氏永井一史氏佐野研二郎氏などデザイン界、広告界の大物が名を連ねます。そして非常勤含む講師陣には菅俊一氏小杉幸一氏菅付雅信氏鈴木元氏奥田透也氏深津貴之氏(これでも一部)と泣く子も黙るスタープレイヤー揃い。2003年のダイエーホークスばりです。井口、松中、城島、バルデス、ズレータです。

何をやるのか

統合デザイン学科の学科サイトにはこのような記載があります。

「体の延長としてのものや空間、その集合体としての環境、そしてそのそれぞれを繋ぎ合せる媒介としてのシステムとコミュニケーション、画像や映像や身体のインタラクション、それらが途切れることなく一貫性を持って統合されたデザインは、それ自体が美学として、生活や社会や産業をより良い方向に導く原動力となります。」

共感に次ぐ共感。よく一般的に「デザイン」として解釈されがちな最終的なアウトプット力だけでなく、環境や社会を捉える着眼力やデザインすべきポイントを探る分析力まで育てる方針であることがこの一文から伝わります。そしてアウトプットもグラフィック、プロダクト、映像など媒体を限定せず、コミュニケーションを一貫してデザインする、と。この文章を読むだけでも、とても魅力的(つまり入学したい)です。

成果展について

今回拝見した展示「INTEGRATING」は統合デザイン学科1期生(現在3年生)の課題展でした。そして、展示期間中に学生と講師のトークイベントも開催されました。トークイベントと展示内容、印象的だったことを簡単にまとめます。

講師&学生トークイベント

トークショーは[講師 × 学生]のディスカッション形式で開催されました。ぼくがお邪魔したのはTHE GUILD深津貴之氏とalumicanこと奥田透也氏が登壇された回。お二人の共通点は以前tha ltd.(代表は教授を務める中村勇吾氏)で働かれていたこと。講師の依頼も中村氏経由だったとのことで、講師にスタープレイヤーが揃っているところも納得です。

トークショーで講師陣が考えていることや学生の体験を聞いて感じたのは、統合デザイン学科は「美大っぽくない」ということ。それが感じられたのは担当授業の話からでした。奥田氏は1、2年生の授業を担当されているそうです。1年生には「インターフェイス」、2年生には「インタラクション」。この2つの授業がとても興味深いものでした。

インターフェース

1年生の「インターフェース」は、いわゆる【画面】を意味するものではなくて、言葉の意味そのまま【接点】に関する授業とのことでした。

社会環境と人間の関わり方、サービスとユーザーの接点。アイデアやアウトプットの前に、これらをどう捉えるかが重要である。という考えで、物事の見方や社会の捉え方を学ぶ授業とのこと。

「ものづくり」が好きで美大に入った学生からしたら面白くないかもしれませんが、これはとても本質的だと思いました。

実際に現場で必死こいてると「手を動かし始める前に、勝負は大方決まっている」と感じることがよくあります。それくらい前段の設計は重要で、例えば利用者がいるものであれば「だれが」「いつ」「どこで」「どういうシチュエーションで」「何のために」使うものを作るのか。そもそも「必要なのか」を考えるフェーズ。そして土台となるコンセプトメイクまでが超重要。ぼくの仕事(UX/UIデザイン)でいうと、リサーチ、要件定義、体験設計あたりでしょうか。これらが学校で学べるのも、実際に現場の第一線で活躍されている講師陣だからこそなのかなと思いました。

この授業を受けるとおそらく社会の見え方が変わってくると思うので、それを大学1年生に経験できるのは羨ましい限りだなと思いました。

インタラクション

インタラクションという言葉は「双方向性」や「対話」と解釈されることが多いですが、2年生では物事との関わり方と学んでいくとのことでした。例として挙げていただいたのは「めくって驚くものをつくる」という課題。これもまたものづくりの前段にある戦略的な思考が鍛えられますよね。アウトプットはもちろん、視点や発想がものをいう課題ですね。

授業の話を聞いていると、実際にどのような課題があり、どのような作品を作り、どのようなフィードバックを受けているのか、めちゃくちゃ気になりますよね。最初に書きましたがこの展示自体は課題展なので、まさに視点や発想を試される課題に対して学生がアウトプットしたものが展示されていました。

展示

日本酒のコンセプトと、それを体現するパッケージまで制作する課題。実際にお店に並んでいてもおかしくないようなものばかりでした。

日本酒のコンセプトと、それを体現するパッケージまで制作する課題。実際にお店に並んでいてもおかしくないようなものばかりでした。

「安心」をデザインする、という課題。「安心」をどの角度から捉えるかという課題であり、それはイコール「何に不安を感じているか」ということだと思いました。充電という結果に行き着いたのも現代っぽい!

「安心」をデザインする、という課題。「安心」をどの角度から捉えるかという課題であり、それはイコール「何に不安を感じているか」ということだと思いました。充電という結果に行き着いたのも現代っぽい!

「安心」をデザインする課題のプロトタイプ。プロダクトデザインのことはわかりませんが、おそらく試作を重ねて行き着いた形なんだろうなーと。

「安心」をデザインする課題のプロトタイプ。プロダクトデザインのことはわかりませんが、おそらく試作を重ねて行き着いた形なんだろうなと感じるコンパクトな構造。

森永乳業のアイスクリーム「ピノ」をリブランディングする課題。マーケティングコミュニケーション的な考え方からコンセプト立案、パッケージデザイン、ビジュアルの制作まで。個人的にめっちゃ面白そうだなと感じた課題でした。

森永乳業のアイスクリーム「ピノ」をリブランディングする課題。マーケティングコミュニケーション的な考え方からコンセプト立案、パッケージデザイン、ビジュアルの制作まで。個人的にめっちゃ面白そうだなと感じた課題。

再定義した「ピノ」ブランドに立脚したビジュアル。大学生の課題でこんなの作れるんですか…。焦

再定義した「ピノ」ブランドに立脚したビジュアル。大学生の課題でこんなの作れるんですか…。焦

これはTwitterで話題になってましたね。手前に置いてあるコップの水と奥の鏡に反射しているコップの水の色がなぜか違う…という作品です。ぼくみたいな凡人には仕組みは全くわからず。作者の方、ぜひ種明かししてください。。

これはTwitterで話題になってましたね。手前に置いてあるコップの水と奥の鏡に反射しているコップの水の色がなぜか違う…という作品です。ぼくみたいな凡人には仕組みは全くわからず。作者の方、ぜひ種明かししてください。。

感想+ちなみに

統合デザイン学科はこれまでイメージしていた美大のイメージを良い意味で裏切る、とても実践的な学びの場だなと思いました。そして学生さんは美大生である時点で絵を描いたり何かを作ったり、形としてアウトプットする技術は持っているので、言わずもがな展示も刺激的で素晴らしいものが多かったです。

ちなみにですが、ぼくは最近「年下の人がやっていることをちゃんと見る」ことを意識的にやっています。これは2つ目的があって、1つは下の世代の視点や思考を知ることです。ぼくもまだ若い世代に括られることが多いんですけど、「学生時代にSNSが当たり前にある」というのは大きな変化だと思っています。ぼくの高校時代(2007〜2010年)はモバゲー、大学時代(2010〜2014年)はmixi全盛、Twitter流行り始めくらいの感じでしたが、やっぱり中高生でLINE、Twitterにどっぷり浸かっていると社会感覚は全然違ってくるはずです。また勉強する環境も変わっているだろうし、教育システムの中で経験してきたことはいざ社会人になったときに大きな影響を与えると思っています。

そしてもう1つの理由は、年下でも自分より優秀な人がたくさんいる事実と向き合うことです。自分と全く別の領域ならそこまで意識しないかもしれませんが、例えばプログラミングを使ったメディア表現は自分の主戦場に近い領域です。それを20歳の学生がアウトプットできて、ぼくができないという事実から目を背けないこと。宣伝会議賞の中高生部門なんかも同じ感覚で見てます。もちろんぼくが彼ら以上にできることはたくさんあるはずですが、そういう話ではなくて、自分が危機感を感じたり、ポジティブに焦るために必要な刺激だと思っています。

というわけで、改めて【デザイン】を考えるとても刺激的な機会になりました。謝謝。

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

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デザイナーの本来の役割だと考えています。

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

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

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

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

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

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

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

【書評】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デザインの全く経験がなかったとしても、本書を読んでおくことでありがちな問題に直面せずに済んだり、スムーズに乗り越えられたりするヒントにはなると思うので、実務の従事する人には一読いただくことをオススメしたい。

2016年、夏、東京

amenoparade_eyecatch

僕が初めて沖縄に行ったとき

何となく物悲しく思えたのは

これがまるで日本の縮図であるかのように

アメリカに囲まれていたからです。

***

2016年、今年も夏が終わりました。ぼくの夏は、幕張のRADIOHEADで幕を閉じました。

今年の夏もたくさんの音楽を聴くことができました。フジロックではCON BRIO、WILCO、BECK、kula shaker、SQUAREPUSHER、Battlesなどなど、サマソニではUNDERWORLD、Dinosaur jr.、TDCC、The Jacksons、RADIOHEADなどなど、ライブを目撃して心震えたアーティストを挙げるとキリがありませんが、たくさんの素敵な音楽体験がありました。

そしてそれとはまた別の話で、個人的に5月から夏にかけて色々と考えることが多くなって、その度に音楽からヒントをもらってきたような数ヶ月でもありました。特に今年の夏は、自分に何か気付かせてくれる音楽にたくさん出逢えた数ヶ月だったので、その中から少しだけ書き残しておきます。先に挙げたような世界で活躍する大御所アーティストのライブはどれも素晴らしかったのですが、自分が揺らいでいるときに支えてくれた、救ってくれた音楽は日本で鳴っている音楽でした。

My Hair is Bad「戦争を知らない大人たち」

今年大躍進を遂げているMy Hair is Bad。「戦争を知らない大人たち」という刺激的なタイトルですが、この曲の中で同世代の椎木知仁のポエトリー・リーディングによって語られていることは、ぼくらの日常です。そのリアリティのある描写に対して、サビは『Good night』の一言。そしてサビはメロディが良い上にサウンドも爆発しているわけですよ。

リアルな言葉選びでイメージを膨らませた上で、エネルギーに溢れた”空白”をぶつけている。その『Good night』の一言から何を思い描くかはそれぞれに委ねられているんですよね。ぼくはこの歌を反戦の歌だとは思わないし、平和ボケの歌だとも思いません。至極ポジティブな音楽だと思っています。

この曲は総じて彼らの等身大であって、大して美しくもない赤裸々なんですよね。でもそれが気持ちよくて、潔くて、かっこよくて。暗に大人として振る舞うことを強いられている20代前半という世代には、グッサリ刺さるかっこよさでした。ヘドバンしちゃう。

欅坂46「世界には愛しかない」


「夏の一曲」というお題だったらこの曲を挙げるかもしれないくらいに好きです。『「世界には愛しかない」わけないじゃん!』って思っちゃうのもわかるんだけど、そういう話ではなくて、それによって救われる世界もあるよねということです。

ビートルズが「ALL YOU NEED IS LOVE」と歌い、サンボマスターが「世界はそれを愛と呼ぶんだぜ」と叫び、欅坂46も「世界には愛しかない」って踊ってるんだから、そういうことだと思うんですよね。そう、それこそが正解!そして平手友梨奈が正義!

雨のパレード「You」


まず音楽としてとても美しくて、映像も目を奪われるクオリティで素晴らしくて。でも歌っていることは、とても繊細なんです。正直、福永浩平がここまで内面的な歌詞をストレートに書く人だとは思わなかったです。初めて聴いたときは驚きましたが、その真意については、CINRAのインタビューで語られていました。

雨のパレード・福永、「人を救える歌を書く」と決めた背景を告白
http://www.cinra.net/interview/201607-amenoparade

今年、この曲に出逢えたのはとても大きいです。自分なりに悩み、考えていたことのひとつの解がこの曲の中にある気がしています。ただそれをすべてここに書き出してしまうのは少し違う気がしているので、歌詞を引用しておきます。言葉だけを見るとラブソングですが、それ以上のものがこの曲の中には込められていると思っています。ぜひ音源を聴いて、MVを観て感じてほしいです。

人は誰しも1人では
生きていけないと知ったんだ
見えない明日に 急かされる今日も
あなたとなら超えて行ける
少し崩れた表情で
笑ってるあなたは綺麗だ
本当に大切にすべきものは
今ならもう答えられる


LILI LIMITの「Living Room」とか、mol-74の「%」とか、WANIMAの「ともに」とかとか、ほかにもたくさんの素敵な音楽に出逢えたし、豊作というか、ありがとうございます。という感じの上半期でした。

涼しくなってからも宜しくお願いします。

***

時の流れは速く、もう二十四なんだけれど

あぁ僕に何が残せると言うのだろう

変わっていったモノと いまだ変わらぬモノが

あぁ良くも悪くもいっぱいあるけれど

フリカエル | 2016年2月

lililimit_201602

毎月の出来事、体験したことをまとめる記事「フリカエル」。長い間ほったらかしてしまったのですが、心身ともに(?)落ち着いたので、2月の振り返りをEUROを観ながら書いています。もう6月です。

ただ、これだけ時間が空けて振り返るのも、それはそれで意味があるような気もしています。自己擁護でしょうか。いいえ、違います。


2月に行ったライブ/イベント

・the quiet room 『Instant Girl』リリース記念インストアライブ @タワレコ渋谷
・LILI LIMIT 『#apieceofcake』リリース記念インストアライブ @タワレコ新宿
・Czecho No Republic × TRICERATOPS @渋谷クアトロ

2月のベストアクト

Shout! / TRICERATOPS @渋谷クアトロ


確か久しぶりにトライセラ観て、「Shout!」は初めてライブで観たんですよね。トライセラのライブは演者とオーディエンスのポジティブな感情が会場に充満しているのをめちゃくちゃ感じられるので幸せになれるんです、人にやさしくなれるレベルで。あ、和田唱結婚おめでとうございます。

2月によく聴いた曲

N_tower/LILI LIMIT


LILI LIMITが好きになったのは「Girls like Chagall」という曲がきっかけ(だったと思う)のですが、ガチ勢と化したのは「N_tower」でした。LILI LIMITは売れて数万人キャパのデカい箱埋めてほしい。幕張メッセで踊ろうよ、という感じ。

Girls like Chagall/LILI LIMIT


万が一、LILI LIMITを知らない人は一刻も早く聴いてほしい。「盗んだバイクで走り出すことができない彼はノー免許ボーイ」

グッバイ/黒猫チェルシー


「優しさと真っすぐさと懐かしさを持った、その佇まいはまるで90年代のロックバンドのよう。」という書き出しでFLで紹介文を書きました。渡辺大知最近よく見る。

2月に読んで印象に残ったweb記事

東京コピーライターズクラブ(TCC)は、そろそろ解散すべきだと思う。
http://copywriterseyes.hatenablog.jp/entry/2016/02/04/042038
この記事の内容についてはよく覚えています。ぼくも誰に褒められたいんだろうかって考えました。先輩?クライアント?ユーザー?強いて一つを選ぶとすると…ユーザーと答えるのが正解な気がしていますが、本音を言うと全員です、当然。

LILI LIMITの挑戦は始まったばかり。芸術性と大衆性は両立する?
http://www.cinra.net/interview/201601-lililimit
1月に公開された記事なんですが、彼らの本音と魅力を引き出せているインタビュー記事だと思います。「大衆性」と「芸術性」一見対局にあるように思える概念ですが、実はこれらを音楽の中に共存させているアーティストほど魅力的だったりする。サカナクションが言う「オーバーグラウンドとアンダーグラウンドの境界線」と同じニュアンスだと理解しています。そういうこと。

2月に書いた記事

いま、MR.CHILDRENにフェスに出演してほしい理由
http://rikukawasaki.com/2016/02/mrchildren-fes/
結構時間かけて、愛情込めて書きました。主にTwitterで反響ありました。

ここに詳しくは書きませんが2月は誕生日だったこともあり、バタバタしながらもたくさんの人に会いました。ご飯連れてってくださった方、祝ってくださった方、ありがとうございました。2月を振り返ってみて思うのは…2月からぼくはLILI LIMITのことを本気で好きになったんだろうな、ということ。「大衆性」と「芸術性」を共存させているバンド。心から惚れています。

リリスクの縦型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/