BE@RBRICK SERIES 26

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

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

目的

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

施策概要

  • Webサイトリニューアル

依頼主

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

公開

2013年7月

プロジェクト期間

約3ヶ月(2013年3月〜2013年5月)

対応デバイス

PC, タブレット

Role

役割・主に担当したこと

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

Challenge

挑戦したこと

  • ベアブリックの魅力や楽しさを伝える世界観をつくること。
  • メディコム・トイ社から当時の所属先にサイトリニューアルのコンペティション参加依頼をいただきました。当初は担当ではありませんでしたが、デザイン提案をしたいと思いコンペティションへの参加を申し出ました。

迫力のあるビジュアルで世界観を表現

SERIES 26ではマンガに関連するベアブリックが存在しており、マンガとの関連性が高いと考えました。いくつかのアイデアスケッチから検討した結果、アメリカンコミックとストリートアート風のアナログ感を組み合わせた表現で世界観をつくることに決めました。

インパクトを重視して、ページ全体を縦長に使うという大胆なレイアウトで構成しています。

さらに力強さを増すためにトップページ用のタイトルロゴを制作。トップページ全体を1枚のポスターのようにデザインすることで迫力が生まれ、アメリカンコミック風の楽しさが強調されると考えました。

楽しさを表現する動きの工夫

統一した世界観を表現するために、マウスカーソルを合わせたときや商品を選んだときのアニメーションにも工夫があります。次の動画では、ロールオーバーや商品詳細のモーダルウィンドウの動きを紹介します。

世界観をつくるUIデザイン

ベアブリックを選んだときのモーダルウィンドウ画面では、マンガ的な表現になるように「吹き出し」の形で表現しました。

チェックボックスやNEXT・PREVボタン、BUY NOWボタンなどのUIデザインもアナログ感が伝わるように表現しています。

ローディングアニメーション

サイトを開いたときのローディングアニメーションの設計を担当しました。いくつか考えた案の中から、世界観に合ったうえで、なるべく表示速度に影響が少ない表現方法を模索しました。

最終的には、SERIES 26のキーカラーであるオレンジのインクを塗って、ロゴが浮かび上がるというアニメーションに決まりました。次の画像は、アニメーションの流れを伝えるために作成した資料です。

  • BE@RBRICK™ & © 2001-2013 MEDICOM TOY CORPORATION
  • House Ampersand & House logo © House Industries
  • © カラー
  • © YOSHIMOTO KOGYO
  • TM & © 2013 SHOT LLC
  • © Disney
  • © FRIENDS