BE@RBRICK SERIES 26

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

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

目的

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

施策概要

  • Webサイトリニューアル

依頼主

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

公開

2013年7月

プロジェクト期間

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

対応デバイス

PC, タブレット

プロデュース

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

My role

私の役割・主に担当したこと

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

Challenge

挑戦したこと

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

Detail

成果物・制作工程

Private Project

このプロジェクトは非公開もしくは公開を限定している情報があります。ログインするとより詳細な内容や他の非公開実績もご覧いただけます。

限定情報や非公開実績をご覧になりたい場合は、大変お手数ですがログイン情報希望フォームからご連絡ください。ログインIDパスワードをお知らせいたします。

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

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

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

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

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

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

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

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

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

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

Other Project

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

Sync.

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

  • Brand site

Work Information

Public

8

Private

6

Total

14

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

非公開実績をご覧になりたい場合は、大変お手数ですがログイン情報希望フォームからご連絡ください。ログインIDパスワードをお知らせいたします。