Blog スタッフブログ

WEB制作 デザイン

【WEBデザイン】世界観づくりが素晴らしい!キャラクターコラボ特設サイトデザインまとめ

こんにちは、Webデザイナーのそいです。

ここ数年で人気のあるキャラクターやアニメとアパレルブランド・商品などのコラボレーションをよく見かけるようになりました。

キャラクターとのコラボ企画は双方のファン層の心を掴むことはもちろん、これまでリーチできなかった新しい顧客を獲得できる、話題性を創りメディアでSNSで露出が多くなり認知度を向上できるといったメリットがあります。

今回はそんなキャラクターコラボにおける特設サイトを大調査!世界観づくりにウットリするサイトを厳選して紹介していきたいと思います。

アネッサ

まず一発目はアネッサとポケモンコラボの特設サイトです。

ここ数年前からコラボレーション企画としてポケモンパッケージが発売されているように感じます。ピカチュウが固定で、ほか2種類がその年によって変わっている気がします。

キービジュアルからワクワクさせてくれますね!

ポケモンのキャラクターに合わせた黄色・黄緑・水色の元気たっぷりな配色です。全部揃えたくなるかわいさですね。

バランスや世界観が素晴らしく、商品説明ももちろんですが見ごたえたっぷりのサイトでした。

アネッサ(ANESSA)×ポケモンコラボ

AIGLE

次にAIGLEとドラえもんコラボの商品サイトです。アウトドア向けのアパレル・グッズを販売されているイメージがあります。今回のコラボ企画ではレイングッズをメインに販売されているようです。

モバイルファーストで設計されており、ナチュラルなベージュをメインとしたシンプルなデザインに仕上げられていました。ブランドのイメージに合わせたサステナブルな印象にまとまっていました。

写真風のフレームはスワイプすると写真をめくっているような挙動になり、操作感も気持ちの良いサイトとなっているのが印象的でした。

AIGLEとドラえもん

PLAZA

次にPLAZAとたまごっちのコラボグッズの特設サイトです。

いつもながらPLAZAのサイトはキャラクターと商品の見せ方に感動しますね!

たまごっちたちが活躍するかわいいコスメグッズの紹介ページとなっています。たまごっちは年々たくさんシリーズが出されていますが、昔ながらのドットデザインも上手く取り入れられており全体的な雰囲気や色合いすべてがブランドイメージに沿ってデザインされていました。キャラクターもサイト全体も生き生きとしたデザインで心に残るサイトでした。

PLAZA BRAND NEW COSMETICS(たまごっちコラボ)

シュガーバターの木

次にシュガーバターの木とPEANUTS(スヌーピー)コラボ商品の特設サイトです。シュガーバターの木は大阪では阪急うめだ店にありますが、休みの日はいつ行っても行列していますね。

このコラボ商品が店頭に並んでいるのを見かけましたが、さらに売り場が盛り上がっていた印象があります。

シュガーバターの木のパッケージは水色が使われていますが、スヌーピーコラボではティファニーブルーに近いグリーンが使われていました。お菓子の包装袋にも使われている、チャーリーブラウンの服のジグザグ模様がサイトにも使われておりスヌーピーらしさが出ていますね。

また、それぞれのキャラクターがお菓子を持っていて書き下ろしイラストがオリジナリティーに溢れていて可愛らしいです。

ページの下にはシュガーバターの木の木のモチーフとスヌーピーが組み合わされたイラストがあしらわれており双方のブランド性が伝わる素晴らしいデザインでした。

PEANUTS × シュガーバターの木

niko and…

最後に毎度おなじみの「niko and…」とミスターメン リトルミスとのコラボグッズ特設サイトです。

キャラクターを見たらピンと来る方が多いのではないでしょうか?ニコアンドはモバイルファースト設計のページが多いのですが、今回は通常のレイアウトで構成されたサイトとなっていました。

ページ構成はかなりシンプルで、上の部分はインパクトのあるコミック風のコマ割りレイアウトでコラボ商品を紹介、下にキャンペーンやノベルティの紹介が掲載されています。

PLAZAと同様に、ニコアンドも商品の見せ方が本当に上手く、いつも心が引き込まれるページデザインで惚れ惚れしますね。

コマ割り部分は商品画像をクリックすると説明エリアが表示される設計で、UI的にもしっかりと構成されています。スクロールバーを下げると全商品が見れるので操作性もストレスフリーで素晴らしいですね!

ミスターメン リトルミス(MR.MEN LITTLE MISS )meets niko and…

まとめ

いかがでしょうか。今回はキャラクターとのコラボ商品特設サイトを5つ紹介しました。キャラクターと商品それぞれのブランド性とコラボ企画の商品の魅力を引き出すサイトの仕掛けづくりの勉強になりました。単純にキャラクターをあしらいとして添えるだけでなく、グッと引き込まれる世界観づくりや生き生きとした表現手法がコラボ商品サイトにおいて重要な2点だと思いました。

今回もご一読いただきありがとうございました。