■クリエイティブ部メンバー

• 長津：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在
• 須田：UIデザイナー／ゲーム・ドラムに日々没頭
• 古川：PdM／クリエイティブ部マネージャー
• 飯野：PdM／カドベヤのお兄ちゃん、ゲーム・アニメ・SEOがすき
• 山口：Webディレクター／カドベヤ新メンバー、Apexにハマり中

🔳　今週のピックアップ【ドラゴンボール40周年記念サイト】 

UIデザイナーの須田によるデザインコーナーvol.38。

今週の須田的ベストデザインは「愛とリスペクトが詰まったドラゴンボール40周年記念サイト」。

引用元：https://dragon-ball-official.com/specials/dragonball40th/?nolangsuggestion=1

須田(UID)：

今回紹介するのは、『ドラゴンボール40周年記念サイト』です。

このLPは結構細かいギミックが施されてますね。

長津(COO)：

40周年ってすごいな。そんなに長く愛されてるコンテンツ、他にある？

飯野(PdM)： 

ないですよね～。しかも今の新しい悟空は髪の色が赤くて小さいんですよ。

時系列めちゃくちゃで、小さい頃からスーパーサイヤ人になってるのでびっくりしました(笑)

須田(UID)： 

そうそう。今回のアニメはかなりチャレンジングな設定なんですよね。

長津(COO)： 

でもLP全体に「愛」があふれてる感じがするよね。

ステッカーみたいなオブジェクトは、全部ベクターで描き起こしてるっぽいよね。

飯野(PdM)：

海王星とか漫画で出てくるモチーフが散りばめられてる感じで遊び心がありますよね！

須田(UID)：

このLPでは、PCサイトで見るとセクションごとにキャラクターが少しずつ登場するのがかわいいですし、スマホファーストでありながらPCでも余白の使い方に工夫がありますね。

長津(COO)：

PCだと大きい画面で余白をうまく活かしてるってことか。

須田(UID)：

そうなんです。長津さんがさっき言った通り、背景のオブジェクトは原作コミックのシーンをステッカー風にベクター化してるんですよ。

ベクター特有のシャープな仕上がりではありつつ、漫画独特の質感でデジタル感も損なっていないのがすごいです！

飯野(PdM)：

個人的に気になったのは斜めレイアウトですね。

PCでもスマホでもセクションの区切りが斜めになっていてかなりチャレンジングな感じ。

須田(UID)：

漫画のコマ割りって水平垂直だけじゃなくて斜めのカットも多いので、漫画に合わせてサイト全体のトーンを斜めで統一している可能性がありそう。

長津(COO)：

たしかに漫画の斜めコマと親和性があるな。

須田(UID)：

あとはデザイナーの「斜めでやります！」という確固たる意志かもしれません（笑）

須田(UID)：

あとおもしろかった機能が、「+1」ボタン（いいねボタン）をクリックする推しキャラシステムです(笑)

長津(COO)：

キャラクターごとにクリックできるのか、楽しそう（笑）

須田(UID)：

たくさん推すと特典がでてきます！

長津(COO)：

クリックしたくなる仕掛けがあるとユーザーの滞在時間も増えるよな。

須田(UID)：

最後に、マンガをリスペクトしていていいなと思った点が『カラーデザイン』ですね。

LPでは、有彩色をうまく織り交ぜて原作の白黒とカラーのバランスを上手く保ってるんです。

飯野(PdM)： 

あと『ドラゴンボールへの思いを語ろう』っていう最後のセクションで、元気玉の「心のモーション」がちゃんとリンクしてて、あれ良かったなぁ…！

長津(COO)：

おお、元気玉で集まる思いとユーザーの投稿を結びつけてるわけか。素晴らしい！

長津(COO)： 

細かいけど、ボタンがキャラに被ってるとこがあって、昔だったらNGだった気がするけど今回はOKだったのが懐の広さを感じたね。

須田(UID)：

他のビッグネームIPだったら絶対にNGですよね(笑)

長津(COO)：

ディズニーとかだったら絶対ダメだよな。

須田(UID)：

そうなんですよ。でも、ドラゴンボールの場合は愛を持って作られていることが伝われば、比較的柔軟なレギュレーションになっているのかも。

長津(COO)：

結局、愛があるかどうかだよな。語りすぎました！

今日はここまで！次回も新しいトピックでお会いしましょう！

〆