見出し画像

SHOWROOM「アニメーションギフト」デザイナー視点の開発話

リョウ ヒロノブ

簡単な自己紹介

はじめまして。フリーランスデザイナーのリョウヒロノブと申します。
体験デザインに興味を持って、モノづくりに取り組んでいます。
職務経歴や、モノづくりに対するこだわり、関心ごとなど、今後改めて投稿しようかと思っています。

概要

今年の２月から約10カ月間、SHOWROOMさんの「アニメーションギフト」新規開発プロジェクトに参加させていただきました。

リリース後のユーザーの方々の反応や、チームメンバーに恵まれたおかげで一手一手が成果に繋がり、手ごたえを感じたので、noteにてまとめさせていただくことにしました。池滝さん、ご承諾ありがとうございます！
ライブプラットフォームでの体験設計の考え方、チームワーク、ワークフローなどのご参考となれば幸いです。

参加理由

SHOWROOMのデザインプログラムマネージャーである坪田さんから、インタラクティブなアニメーションが得意ということでお誘いいただいたのがキッカケです。過去に一度、他プロジェクトでご一緒したことがあったのですが、その時のことを覚えていてくださったんですね。

開発話_差し込みイメージ_参加理由01

SHOWROOMが今まで築き上げてきたライバーを応援するギフティング機能を、「アニメーション表現によって可能性をどう広げるかを決める企画から実制作まで関わること」が、コミュニケーション設計の良い経験となるし、貢献できると確信したことも決め手の１つです。

初登場の紹介ツイートがこちら

今までのアニメーションギフトのご紹介

ユーザーの方々の実際のリアクション（Twitter）を交えてご紹介します。

第１弾：拍手、音符、ミラーボール

ミラーボールはルームのムードをガラッと変えることができる仕上がりにできたので、社内でも大好評でした。

第２弾：ハート、カッコイイ、かわいい

夏イベント：SHOWROOM浴衣祭り2020
このイベント期間限定アニメーションギフトは花火。
同時に、イベントの〆に１度だけ行われる「花火のフィナーレ演出」もアニメーションで実施しました。仮想空間上での夏の風物詩を楽しんでいただけたようで良かったです。

↑花火の演出とミラーボールが同時に流れているルームもあったようで、バッチリなスクリーンショットの盛り上がり感がすごいですね！
ちなみに、お祭り会場の背景も私が作らせていただきました。SHOWROOMならではの小ネタを仕込んでたりしました。

以下、開発にまつわる話。

私視点ですが、以下より開発の話です。

SHOWROOMは全体を見ると規模がかなり大きく、HOMEやルームで開発部署が分かれています。今回はルームの開発メンバーの皆さんとご一緒させていただきました。

１番密にやりとりしたのは社内PMの永井さん。
各工程でモノゴトを決める際に、全貌を把握している永井さんと一緒に進められ、とてもスムーズで有難かったです。

私が関わった工程

開発話_差し込みイメージ_工程01b

平行してエンジニアの皆さんは裏側の実装をされていましたが、下記は私が関わった箇所だけ記述しています。

０、オリエンテーション
最初の依頼内容は「アニメーションギフト作成」で週２～３日での対応だったのですが、現環境で最大限パフォーマンスを発揮するためには、仕様を一緒に決めていくことが不可欠だと思い、そこも含めてフルコミットさせていただくようにお願いしました。
まだ仕様を固める前に参加できてラッキーでした。

１、チームの皆でブレスト
チームの皆でブレストし、色々な方向性のアイデアを出し合いました。皆さんSHOWROOMを作り上げてきたメンツなので、特性を活かした面白いアイデアが色々出てきました。
これは是非とも採用したいね！という魅力的なアイデアを、PM永井さんが整理して、こういう仕様でまとめられないか、という仕様案を出しては、皆で色々な立場から意見を交わす。それを何度か行って実現可能な落し所へを着地させました。

２、現行の開発環境を調査・アニメーションの仕様固め
PM永井さん、エンジニアの方々（スマホ、PCのフロントエンド、ネットワークなど）と、現行の開発環境でできることや制約を調べていただきキャッチアップ。アニメーション表現が最大限のパフォーマンスを発揮するための仕様固めをしました。
アニメーションの書き出し形式、素材のデータサイズなどの限界を定めたり、この条件だったらこんな表現ができるぞ、など試作して提案。
「現実的」で且つ「魅力的なクオリティに仕上げられる」という手ごたえを皆で共有しました。

３、ギフトやイベントの企画を練る
１で出たアイデアや２で固めた仕様の基に、最終的に採用するアニメーションギフト案をPM永井さんと練りました。ユーザーの傾向を把握し、もっと楽しんでもらうためのビジョンをしっかり持っていて、タッグを組んだ感覚で進められてとてもやりやすく楽しかったです。
最初にカラオケにまつわるアニメーションギフトをリリースしたのも、永井さんが全体の傾向を見て１番効果的な所はこれだな、と読めていたからですね。

４、アニメーション作成
作ったものをエンジニアさんに実機環境に組み込んでもらい、そこで更に微調整します。あとはエンジニアの皆さんが実際にユーザーに届けるための実装をします。←この実装が一番大変だったりします。

５、ドキュメント作成
エンジニア向けの仕様書と、運用フェーズに向けたもの。

工程おわり。

良いチームメンバーに恵まれた話

開発部マネージャーの池滝さんもこの記事で仰っていますが、チームの皆さん本当にSHOWROOMが好きで、ライバーの配信を楽しみにしていて、もっと良くしようと積極的な姿勢の人ばかりで、素晴らしいなと思います。
参加し始めはコロナの緊急事態宣言直前で、皆と顔合わせができました。双方人柄が把握できたのも良かったです（以降はフルリモートでしたが、必要な時には関わる人と相談ができ、とても快適でした）。
それぞれの得意な視点からのアイデアを出してもらえる、言い合える空気。
PM永井さんの「良くするためのビジョン」が明確で、向かう方向が一致できスムーズに最終成果まで作れました。

ユーザー体験の可能性を広げるために考えたこと

１、デザインの基本から考えます。

私がモノづくりで一番大事だと考えることは普遍的で、「作ったモノが、利用する人にとってどれだけプラスな存在になるか？」ということです。
体験価値の軸を見出し、その体験にプラスとなる機能を付与し、効果的でないものは除外する。いわゆる体験デザインですね。

SHOWROOMの体験価値とは？
SHOWROOM株式会社が掲げているミッション「努力がフェアに報われる世界を創る」の達成に繋がる一手であることも重要です。
ライバーと視聴者が仮想空間で同じ時間を一緒に過ごす価値ってなんだろう。お互いが楽しくかけがえのない時間と体験と感じるには？
それには２つの要素が重要だということに至りました。

１つ目は「今この瞬間に感じたこと」を互いに伝えあえること。

開発話_差し込みイメージ_伝え合う01

ライバーが何かを頑張ったり楽しんでいる姿、その場の皆を楽しませようとしてくれている姿勢。そこから伝わってくるものに共感し、同じように感じる人がいることに心の繋がりを感じ、違く感じる人がいることで新しい発見もある。ライバーの魅力が色んな角度から見えてくるし、その人自身を応援したくなる。

２つ目は「この場の空気感」にどっぷり浸れること。

開発話_差し込みイメージ_空間に浸る01

仮想空間が、ライバーのモードに合った雰囲気や空気感に変化し皆が包まれれば、高揚感を体感でき１つ目の要素と相乗効果を発揮する。

これらを、ユーザーが使うアニメーションギフトで叶えるなら、どういうものが最適だろう。

２、新しいモノを作る時、正解は誰の中にもない。

これは私が色々な会社で経験してきて実感しているのですが、トップや責任者でも、最終的なアウトプットイメージを持っていません。まだ無いものを具現化する前は皆そうです。

開発話_差し込みイメージ_当事者意識01

だからこそ開発現場の皆でどこに向かうのかを一致させ、そこに向かって当事者意識をもって開拓していく。しっかり目途を立て確信できるまでアウトプットする。

おわりに

チーム開発において、各役割の責任とリスペクトを大事にしつつ、役職の壁に囚われずに良くするためのアイデアを気兼ねなく出し合う。モチベーションを高め合いゴールに向かうことができると、こんなに楽しくモノづくりができるんだ！という１つの事例として紹介させていただきました。

あー、楽しかったな。

この記事が気に入ったらサポートをしてみませんか？