BE@RBRICK SERIES 29

レコード音楽の世界観でベアブリックの魅力を伝えるプロモーションサイト

株式会社メディコム・トイが販売する、クマ型ブロックタイプフィギュア「BE@RBRICK(ベアブリック)」。ベアブリックはシリーズごとにラインナップが変わり、Webサイトがリニューアルされます。シリーズ29のサイトリニューアルでは、アートディレクションやデザイン、アニメーション設計などを担当しました。

目的

  • BE@RBRICK SERIES 29の魅力や楽しさを伝えること
  • ブランドイメージの向上
  • 販売促進

施策概要

  • Webサイトリニューアル

依頼主

株式会社メディコム・トイ

公開

2014年12月

プロジェクト期間

約2ヶ月(2014年10月〜2014年12月)

対応デバイス

PC, スマートフォン, タブレット

プロデュース

コロニーインタラクティブ(同社在籍時のプロジェクト)

Role

役割・主に担当したこと

  • 情報収集・リサーチ
  • Web戦略立案
  • アートディレクション
  • デザイン
  • アニメーション設計
  • アニメーションサンプル制作
  • テクニカルディレクション

Challenge

挑戦したこと

  • わかりやすさや使いやすさを考慮しつつも、ユーザーに楽しさを感じていただくためのグラフィックやアニメーションを設計しました。
  • After Effectsでアニメーションのサンプルを制作して、Webサイトで表現したいアニメーションを具体的に伝えられるように意識しました。
  • ディテールを追求するため、レコードショップに行ってターンテーブルの形状やレコードの回転速度を調べました。

楽しさを伝える世界観の設計

ベアブリックのオリジナルのクマには、それぞれにストーリーがあります。シリーズの代表であるBASICのクマのストーリーを読み、BASICの特徴である「スピード」や「レーシングマシン」というキーワードからアイデアをふくらませました。

さらにシリーズ29では音楽関連のベアブリックが複数存在するため、音楽に関する要素も取り入れたいと考えました。

「スピード感」と「音楽」をコンセプトの軸として、ターンテーブルのイラストを含めた全てのUI(ユーザーインターフェース)やレコード盤面をデザインし、ベアブリックが切り替わるアニメーションサンプルを制作しました。

各ベアブリックのキャラクターイラストや写真はご提供いただいた素材です。

楽しさとわかりやすさの両立

楽しさを優先してデザインしていますが、わかりやすさも重要です。

わかりやすくするための工夫として、例えばボタンのデザインでは配色を「蛍光シアンと黒」に統一しており、押せるボタンとして認識しやすいように全体を設計しました。

レコード盤面のデザイン

それぞれのベアブリックに合わせたレコード盤面をデザインしました。ベアブリックごとの特徴やバックグラウンドストーリーを調べ、世界観に合う表現を目指しました。

リサーチとアイデアスケッチ

情報収集やリサーチを経てデザインの方向性が定まったのち、デザインに取りかかる前にターンテーブルがどういうものかを知る必要がありました。

実際に4軒のレコードショップに行き、ジャケットデザインを手に取って見てみたり、音楽機材やレコードが再生されているターンテーブルを観察しました。実際のレコードの回転速度を確かめるためにレコードが再生されている様子を撮影し、アニメーション制作の参考にしています。

Webサイト上でのアニメーション調整時、まずは実物のレコードと同等の速度でレコード盤面を回転させてみました。そうすると、思ったよりもスピードが速く、レコード盤面のイラストや文字情報が見えにくくなってしまうことに気付きました。

そのため実物のレコード回転速度を忠実に再現するのではなく、Webサイトで表示したときに見やすくてレコードらしさが感じられる回転速度になるように、フロントエンドエンジニアに協力をいただいて調整を重ねています。

動画は許可をいただいたうえで撮影しています。

アニメーションサンプル

アニメーションが重要なサイトデザインのため、依頼主へリニューアル提案をするにあたり、静止画のデザイン案に加えて「動画のアニメーションサンプル」も制作しました。

アニメーションサンプルの制作ツールはAdobe After Effectsを使用しています。

コーディングの精度を高める取り組み

コーディング(実装)の精度は、サイトの完成度に大きく影響する重要なプロセスだと考えています。

本案件ではビジュアルデザインやアニメーション設計を私が担当し、実装を別のエンジニアに担当していただきました。

コーディングにおいて元のデザインの再現度を高めるために、デザインデータの各要素の配置座標やフォント指定などを記載したコーディング指示書を作成しました。

指示書をエンジニアに共有して実装時の調査負担をなるべく減らすことで、実装を進めていただきやすい環境づくりに努めました。次の画像はコーディング指示書の一例です。

  • © 2001-2014 MEDICOM TOY CORPORATION
  • © 清野とおる
  • © NED・じゃぴぽ・81PRO
  • © GIRLS und PANZER Projekt
  • © ゆでたまご
  • © Sex Pistols Residuals. Under license by Live Nation Merchandise
  • TM & © 2014 Grateful Dead Productions

Work

SHIBUYA GAME

eスポーツに特化したメディアサイト・ロゴデザイン

  • Logo
  • Media site
  • Visual identity

BE@RBRICK SERIES 29

レコード音楽の世界観でベアブリックの魅力を伝えるプロモーションサイト

  • Brand site
  • Graphic
  • Promotion site

BE@RBRICK SERIES 26

アメリカンコミックの世界観でベアブリックの魅力を伝えるプロモーションサイト

  • Brand site
  • Graphic
  • Promotion site

マナビタ!

介護事業者に向けた職員育成のための動画研修サービスサイト

  • Service site

NOTTV

スマートフォン向け放送局のサービスサイト運用・ページ制作

  • Graphic
  • Service site

Typography Archive

タイポグラフィ作品のアーカイブ

  • Graphic

BitCash Promotion

ビットキャッシュの新規利用者を対象としたプロモーションページ

  • Graphic
  • Promotion site

WATCHLAND GALLERY

フランクミュラーの正規認定中古時計を販売するECサイト

  • EC site

Sync.

アーティストのコラボレーション商品を販売するブランドサイト

  • Brand site

About Work

Public

9

Limited

5

Total

14

一般公開可能な実績のみを掲載しています。非公開実績を見るためにはログインが必要です。ログイン後は非公開実績のほか、公開実績の詳細な内容もご覧いただけます。

非公開実績をご覧になりたい場合は、お手数ですがお問い合わせくださいログインIDパスワードをお知らせいたします。