NFT サービス 「PLAYBACK 9」のデザイン
design

NFT サービス 「PLAYBACK 9」のデザイン

はじめに

2021年11月30日、DeNAはPLAYBACK 9 をリリースしました。
PLAYBACK 9 は、試合の名シーンを球団公式のデジタルムービーとして購入し、コレクションできるサービスです。
各シーンは、販売期間や発行上限数の制限を定めることで希少性を担保しており、購入するとお客様だけのシリアルコードがシーンに記録されます。(発行上限数を上回る購入申込があった場合は、抽選により購入者を決定します)
また、ブロックチェーン技術によってお客様による各シーンの保有が証明されます。
PLAYBACK 9 で新しいトレーディングカードの世界を体験していただけます。

この記事では、

  • コンセプト、サービス名、キャッチコピー
  • ロゴ、キービジュアル
  • UI/UXデザイン

について、制作の背景やプロセスをお話ししたいと思います。


サービスの提供価値

サービスを立ち上げるに当たって、はじめに行ったことは「インセプションデッキ」を作ることでした。「インセプションデッキ」とは、提供価値、ターゲットユーザー、やることとやらないことの線引きなどを決めていくものです。
デザイナーを含め全ての開発メンバーが参加し、全員の意識を揃えていきます。

プロジェクトが始まった時、メンバー内ではユーザーや体験価値のイメージに違いがありましたが、ディスカッションを重ねていくと徐々にゴールが明確になっていきました。その中でも特に議論したのは、既存のトレーディングカードとの差別化です。

プロ野球選手をモチーフにしたデジタルトレーディングカードのサービスは既に存在しています。PLAYBACK 9 は、動画による「シーン」を提供することで、選手の動きや表情、球場の空気感などを映し出し、野球ファンの皆様に何度でも試合の興奮や感動を体験してもらうことができます。
そして、シーンの発行数には限りがあり、当選した方だけが自分のものにする喜びを味わうことができます。

インセプションデッキで明確にした体験価値を、私たちデザイン本部のメンバーが、それぞれの得意分野を活かし、サービス名やキャッチコピー、ロゴ、ビジュアル、UIにデザインしていきました(田村)

サービスイメージを言語化

02_statement.jpeg

サービスイメージを言語化する上で、幼い頃、父親に球場へ連れて行ってもらったことを思い出しました。
球場内、満員の観客席で一丸となって応援している人たち、固唾を飲んで選手たちのプレーを見ている様子など、当時体験したことを元に言葉を考えました。

サービスの肝でもある、試合のプレーシーンがいつでも手軽に見れることや、NFTとして価値がつくこと。自分が体験したことを思い出し気付いた「あの頃の名シーン」をキーワードに、再生する「PLAYBACK」という言葉と、野球のチームメンバー数である「9」を組み合わせサービス名を作成しました。

また、サービスコンセプトの「集めるNFT」を一言で表現するために、野球を「かち(価値)」と読ませキャッチコピーを考案しています。

そして、球場内の熱さや、ファンが野球に対する想いなどのストーリーを考え、ステートメントに落とし込みました。(伊藤)

logo_1.jpeg

メインターゲットは野球好きの20代〜50代男性なので、クールな印象になるよう力強くガッチリとしたフォントを選定しデザインしました。
何度でも繰り返し見たくなるプレーシーンを「もう一度再生する」アイコンと、野球ボールを組み合わせ「9」をシンボライズしています。

pb9_04_logo_2.jpeg

また、このデザインに決まるまで、2021新卒デザイナーの2人(松本、山本)も案を出し、ブラッシュアップを重ね提案しました。(田中)

コンセプトをビジュアルで表現する

pb9_05_visual_1.jpeg

野球のサービスとわかることは前提として、NFTを利用したサービスなので、王道なベースボールトーンのデザインではなく新しさやクールさ、そして、コンセプトの「集めたくなる、野球(かち)がある。」を体現することが重要でした。

キービジュアルは野球モチーフのボール、ベース、ストライプなどを、幾何学的なシェイプで形成し、NFTのデジタル感を表現しています。
コピーに合わせエモーショナルな印象になるよう、プレーシーンなどを切り取り、「あの時の、あのプレー」を連想させるような構成でレイアウトしました。
また、真ん中の円は、野球ボールの縫い目をモチーフに、シーンを巻き戻す様子を意味しています。

pb9_06_visual.jpeg

デザイン初期では、メインビジュアルのラフデザインもいくつか作成しました。
プロジェクトオーナーとディスカッションし、ブラッシュアップを重ね現在のメインビジュアルとなりました。(田中)

モックアップ作成

pb9_06_mock.jpeg

ロゴとビジュアルのデザインが決まった後は、使用想定の媒体に落とし込み、イメージを具体化していきました。
そして、UI画面やシーン動画のモックアップを作成し、方向性が決まった後は、各チームへ展開し製品版の作成に進みます。(田中)

NFTを野球グッズの1つに

pb9_07_ui_1.jpeg

「NFT」はまだまだ新しい分野です。しかし、野球ファンの方々が選手のタオルやユニフォームなどの応援グッズを購入するような感覚で、PLAYBACK 9 のシーンを集めるサービスを目指したいと考えました。
具体的には、ボールなどのアイテムをモチーフとした野球ならではの表現や、カードを手に取っているようなイメージにするなど、デジタルの新しさもありつつ、アナログを感じさせる要素も加え「価値のあるデータ」となるようデザインしています。(田村)

pb9_08_ui_2.jpeg

シーンを選ぶSALEページでは、LEGENDARY、SUPER RARE、RARE、NORMALの4種類のシーンが並んでいます。

SALEページでは、単調に並べるのではなく、プレーの影響力によって表示サイズを変えています。グッズショップの店頭に大きく陳列しているようなイメージです。
サムネイルの表現も、背面にボールのCGや、影を付け立体的に見せることで、触れるような印象にデザインしています。

また、現在の購入申し込み数にゲージを表示することで、自分の好きなシーンの人気度を知ることができます。
ゲージが高くなるほどワクワク感が増したり、購入数を参考に人気のシーンを選ぶこともできます。(田村)

レア度に応じたシーン動画

pb9_09_movie_1.jpeg
pb9_10_movie_2.jpeg

各レア度に応じてグラフィックと演出を変更し、視覚的にも変化を付けています。
ラフデザインを元に、動画の構成やエフェクトイメージを言語化し、xpd社にモーショングラフィックスや編集を依頼しました。

ロゴにもモーションを加え、野球の躍動感や「あのプレーをもう一度見る」という意味を表現しています。(田中)

思い出のシーンを手に入れる

pb9_11_ui_3.jpeg

人気のシーンは抽選となります。当選したときに気持ちが高まるよう演出なども取り入れデザインしました。
当選はもちろんですが、落選時もSNSシェアできるようにボタンを付けています。当選したときの嬉しい気持ちや、落選して悔しい気持ちもシェアしていただけたら、サービスの活性化に繋がるのではないかと考えています。
PLAYBACK 9 を、ユーザー様同士でさらに盛り上げていただけると幸いです。(松本)

pb9_12_ui_4.jpeg
pb9_13_ui_5.jpeg

自分が集めたお気に入りのシーンを閲覧できるのがALBUMページです。
このページでは、アイテムを大切に保管しているイメージで、整然とケースの中に修めているようなデザインにしました。

思い入れのあるシーンはファンのみなさま人それぞれだと思います。そこで、ALBUMページではサービス側からシーンの序列を作らず、同じサイズに並べてコレクションする形を取りました。
集めたシーンを見るだけで、球場で熱くなったことや、テレビの前で声をあげたことを思い出したり、次に欲しいシーンを考えるなど、自分だけのオリジナルコレクションを作っていただけたら幸いです。(山本)


今後のPLAYBACK 9

今後はユーザー間でシーンを売買できる機能も充実させていく予定です。

2021年11月30日から2021年シーズンの販売を、順次行っていく予定です。
思い出のシーンの発売を楽しみにしていただけると幸いです。(田村)

※画面は開発中のものにつき、実際と異なる場合があります。また予告なく変更となる可能性があります。


Staff

VI

Art direction / Design : Hayato Tanaka
Copywriting : Ito Soichiro

UI/UX

Lead design : Ayaka Tamura
Design : Tatsuya Matsumoto, Fumiko Yamamoto, Kosuke Shinozaki
Technical direction : Akihiro Tokoro
Front-end development : Ryosuke Sakaki, Yukari Yamakawa, Erina Okamoto

MOVIE

Produce : Yuya Kaneko
Art direction / Design : Hayato Tanaka
Direction / PM : Yuki Iritani
Motion graphics / Edit : xpd Inc.