アメリカンコミックの世界観でベアブリックの魅力を伝えるプロモーションサイト
株式会社メディコム・トイが販売する、クマ型ブロックタイプフィギュア「BE@RBRICK(ベアブリック)」。ベアブリックはシリーズごとにラインナップが変わり、Webサイトがリニューアルされます。シリーズ26では主にWebサイトのデザインとアニメーション設計を担当しました。
株式会社メディコム・トイ
2013年7月
約3ヶ月(2013年3月〜2013年5月)
PC, タブレット
役割・主に担当したこと
挑戦したこと
SERIES 26ではマンガに関連するベアブリックが存在しており、マンガとの関連性が高いと考えました。いくつかのアイデアスケッチから検討した結果、アメリカンコミックとストリートアート風のアナログ感を組み合わせた表現で世界観をつくることに決めました。
インパクトを重視して、ページ全体を縦長に使うという大胆なレイアウトで構成しています。
さらに力強さを増すためにトップページ用のタイトルロゴを制作。トップページ全体を1枚のポスターのようにデザインすることで迫力が生まれ、アメリカンコミック風の楽しさが強調されると考えました。
統一した世界観を表現するために、マウスカーソルを合わせたときや商品を選んだときのアニメーションにも工夫があります。次の動画では、ロールオーバーや商品詳細のモーダルウィンドウの動きを紹介します。
トップページのベアブリックにマウスカーソルを合わせると、背景色が点滅して色が付くようにアニメーションします。配色は、アメリカンコミック風の楽しさを演出するために彩度の強い色の組み合わせで設計しました。
当時一緒のチームだった実装担当のエンジニアから「ロールオーバー時に背景色を点滅させてはどうか」という提案がありました。新鮮さがあり世界観にも合っていたので、すぐに取り入れました。
ですが実際に点滅表示をさせてみたところ、マウスオーバー時にずっと点滅し続けるのは主張が強すぎるという課題がありました。
そこで「一瞬だけ点滅する表現ではどうか」といった相談をしながら、アイデアの練度を高めていきました。最終的な調整のうえ、ロールオーバー時に一瞬だけ点滅するアニメーションが完成しました。
実装担当のエンジニアがとても優秀なかたで、素晴らしい仕上がりに感謝しています。
ベアブリックを選んだときのモーダルウィンドウ画面では、マンガ的な表現になるように「吹き出し」の形で表現しました。
チェックボックスやNEXT・PREVボタン、BUY NOWボタンなどのUIデザインもアナログ感が伝わるように表現しています。
インクがかすれたような枠線や網点(ハーフトーン)の背景など、アナログ感が伝わる表現を意識して制作しました。細かい要素の1つ1つを作り込んでいくことで、全体の品質を高められると考えています。
サイトを開いたときのローディングアニメーションの設計を担当しました。いくつか考えた案の中から、世界観に合ったうえで、なるべく表示速度に影響が少ない表現方法を模索しました。
最終的には、SERIES 26のキーカラーであるオレンジのインクを塗って、ロゴが浮かび上がるというアニメーションに決まりました。次の画像は、アニメーションの流れを伝えるために作成した資料です。
動画マーケティングエージェンシーのコーポレートサイト
クラウド録画サービスのプロモーションサイト
eスポーツに特化したメディアサイト・ロゴデザイン
レコード音楽の世界観でベアブリックの魅力を伝えるプロモーションサイト
アメリカンコミックの世界観でベアブリックの魅力を伝えるプロモーションサイト
介護事業者に向けた職員育成のための動画研修サービスサイト
実験的なロゴデザイン
スマートフォン向け放送局のサービスサイト運用・ページ制作
タイポグラフィ作品
実験的グラフィック
ビットキャッシュの新規ユーザー向けプロモーションページ
アーティストのコラボレーション商品を販売するブランドサイト