Mochimochi
Bird

ROLE
Web Design / Coding / Character
TOOLS
Figma / VS Code / Illustrator
PERIOD
40 Hour
Mochimochi Bird メインビジュアル

オリジナルキャラクター「もちもちバード」の世界観を表現する特設サイト。
愛らしいキャラクターの魅力を直感的に伝えるため、ポップな配色を採用し、
ユーザーがサイトを訪れた瞬間に親しみやすさを感じ取れるようデザインの軸としています。

※現在製作中のサイトです。
01 / CONCEPT LAYER

愛らしさを
際立たせる配色。

キャラクターの色をベースにし、個性的なほっぺカラーをアクセントに据えることで、デザインとキャラクターが一体となったポップな世界観を表現しています。

02 / UI DESIGN LAYER

触りたくなる
UIアニメーション。

CSSアニメーションなどを駆使し、キャラクターが生き生きと動くようなホバーアクションを実装。ユーザーが思わずアクションを起こしたくなるような、親しみやすさを強調したインタラクションにこだわりました。

03 / RESPONSIVE LAYER

スマホでも
最適な体験を。

モバイル端末でもキャラクターの表情やコンテンツが最適に表示されるよう、レスポンシブデザインを調整。どのデバイスからでも可愛い世界観を楽しめます。

キャラクターデザインと配色の画像 インタラクションアニメーションの画像 レスポンシブデザインの画像