Automatically translated.View original post

I made a like button animation for Mixi2!

2024/12/18 Edited to

... Read more「いいねボタン フリー素材」や「ボタンスイッチイラスト」を探していると、静止画はあっても“押したときの気持ちよさ”まで揃っている素材って意外と少ないんですよね。私も最初はフリー素材で済ませようと思ったんですが、結局mixi2のいいねボタンアニメーションっぽい動きを参考にして自作しました。 フリー素材でよくある悩みは、(1) 形式がPNGだけで拡大すると粗い、(2) 色変更がしづらい、(3) 状態(通常/ホバー/押下/選択済み)が揃っていない、の3つ。なので、探すならまず「SVG形式」かどうかを確認するのがおすすめです。SVGならCSSで色を変えられるし、LPでも解像度を気にせず使えます。 次に「ボタンスイッチイラスト」系を使う場合は、見た目が可愛い反面、UIとしての意味(ON/OFF、選択済み)が伝わりにくいことがあります。いいねボタンなら、最低限「未いいね」と「いいね済み」で形か色が変わるようにしておくと迷いにくいです。私は未選択は線だけ、選択済みは塗り(+少しだけ拡大)にするとクリック率が安定しました。 マテリアルデザイン風の“押した感”を出すコツは、動きを盛りすぎないこと。具体的には、拡大は1.05〜1.15倍くらい、時間は150〜250msくらいが扱いやすい印象です。さらに「押下→戻る」をただ直線で戻すより、イージング(例:ease-out)を使うと一気にそれっぽくなります。加えて、ハートや親指などのアイコンの周りに小さな波紋(リップル)や粒を短時間だけ出すと、mixi2のいいねボタンアニメーションみたいな気持ちよさが出ます。 実装目線だと、(1) クリックの連打対策(アニメ中は連続発火しないようにする)、(2) reduced motion対応(動きを減らしたいユーザー向けにアニメを弱める)、(3) タップ領域を44px以上にする、あたりも意外と大事でした。素材を探して終わりではなく、最終的にLPやWeb制作の文脈で“使えるボタン”に整えるところまでやると完成度が上がります。 もしフリー素材を使うなら、まずSVGでベースを決めて、状態差分(通常/ホバー/押下/選択済み)だけ自分で用意するのが現実的。逆に、世界観を揃えたいなら最初から自作して、mixi2のいいねボタンアニメーションのように「短く・気持ちよく・迷わせない」動きを目指すのが近道でした。

Related posts

A title card for a tutorial on making a cartoon mini-me with AI, featuring two cartoon characters with curly dark hair and light brown skin, one sitting and one lying down.
Step 1 of the tutorial, titled "MAKING THE PROMPT," provides a detailed AI prompt for creating a cartoon mini-me, with a tip to add a picture for reference, and a cartoon character.
Step 2 of the tutorial, titled "PICK ONE/ CREATE A SHEET," instructs users to select their favorite cartoon version and use Sora AI to generate an animation sheet with various expressions.
Create Your Mini Me ✨🫶🏽
[PLEASE READ PICS IN FULL] I finallyyy put together a step-by-step post on how I created my own cartoon mini me 🥹🎨 it took me a lil minute to make (perfectionist behavior lol) but I really hope it’s useful if you’ve been wanting to make one too 🫶🏾💻 I have sooo many versions of her omg 😭 still
areiiana

areiiana

1195 likes

Minecraft animation
#emergingcreator I know no one watches the movie or cares but I like it still so here’s a animation of it #minecraft #minecraftmovie #animation #music
Shykdude13

Shykdude13

23 likes

Canva Hack - Make Your Own Animation!
Canva Tutorial - How To Make A Custom Animation Using Canva! #canvatutorial #canvahacks #canvatips #businesstipsforwomen #womeninbusiness
Inuri

Inuri

40 likes

Popipo Animation Meme 🫧
Just uploading my vids rn idk #miku #capcut #ddcore #art #animationmeme
ℚ𝕚𝕦 💙

ℚ𝕚𝕦 💙

86 likes

How To Make Your AI Action Figure Move Using Canva
Canva Tutorial - How To Animate & Turn Your Images Into Videos Using Canva AI 🤯 Will You Try This Canva Hack On The Ai Avatar Action Figure Trend? #canvatutorial #canvadesign #canvaforbeginners #canvaforbusinessowners #canvahacks
Inuri

Inuri

607 likes

TADC FANS WYA
CAN WE TALK ABOUT THE NEW EPISODE?!? #tadc #digitalcircus #outfitsinspiredby #cartoons
𖤓☾lily☾𖤓

𖤓☾lily☾𖤓

7052 likes

Free 2D animation software recommendations. What software do you like to use? . . . #animation #animator #witchesoftiktok #arttips #arttipsandtricks
Figisisters

Figisisters

7 likes

Canva Canva! Animated Text
Canva Tutorial - How To Create Text With Motion Animation Using Canva! 😎 Once You Are Done With Your Canva Design, Export It As A GIF Or MP4 To Use On Social Media! #canvatips #canvahacks #canvatutorial #canvaforbusiness #canvatutorials
Inuri

Inuri

55 likes

Game Animation | Running & Jumping in Unity | Part 2 | No Plugins | Step-by-Ste
Welcome to Part 2 of the Simple Animation for Unity Games series! 🚀 In this tutorial, we’ll take our animated character from Part 1 and bring them to life with realistic running and jumping animations — all done inside Unity, with no plugins or paid tools needed! 💪
Yml4r’

Yml4r’

0 likes

Retro Characters who got Forced design changes: #tiktokretrocontest #animationrewind #cartoonfightclub #cartoonnetwork #nickelodeon
AnimationRewind

AnimationRewind

419 likes

Want to learn animation, try out these FREE animation software options . . . #animation #animator #animatorsoftiktok #artistsoftiktok #arttoker
Figisisters

Figisisters

30 likes

2D Animation
Say hello to Cleo! This is the prep-work for a new animation I am creating for my demo-reel! I can’t wait to build her rig in ToonBoom Harmony and watch her come to life! #HelloLemon8 #animationart #conceptart #letschat #Lemon8Diary
lily

lily

0 likes

The WORST Cartoon Pregnancies: #TikTokSceneStealerContest #animationrewind #cartoonfightclub #cartoonnetwork #nickelodeon
AnimationRewind

AnimationRewind

192 likes

A tablet screen displays a creative application's 'Actions' menu, with 'Animation Assist' highlighted and toggled on. A hand holding a stylus points to the screen, illustrating the initial step to create an animation. Colorful lines frame the image.
A tablet screen shows a creative application's animation interface with instructions. Steps include adding frames, drawing on each, and saving as a GIF or MP4. A hand with a stylus interacts with the screen, framed by colorful lines.
A tablet screen displays a simple yellow drawing on a canvas within a creative application, with the animation toolbar visible. Text highlights the ease of creating animations and a positive review. A hand with a stylus is near the screen.
✨How To Create An Animation In Procreate✨
App: Procreate Creating an animation is actually not that hard, I think it sounds more intimidating than it is. I promise you, you can do it! + not to mention that after this November we will have a whole app from Procreate called Procreate Dreams dedicated to only animation creation! So you mig
Lauren 🪩🩷🌈

Lauren 🪩🩷🌈

363 likes

i havent made an animation meme like this in so long this was so fun!!!!!! (snuffy most goated song) #fyp #animation #animationmeme #snuffy
opal :3

opal :3

3 likes

Making a 2D animated dance emote!
I’ve been streaming the process of making myself new emotes on twitch!!! I usually animate in Live2D or TVPaint but I’m trying out animating in clip studio this time around 💫 #animation #cat #art #animated #twitchstreamer
hemmi 💫

hemmi 💫

8 likes

Want to write for animation? Then you need these resources! . . . Let me know your favorite resources in the comments! . . . #screenwriting #screenwritersoftiktok #animation #animatorsoftiktok
Figisisters

Figisisters

13 likes

Which is real? Mandela Effect Moments: #tiktokherovillaincontest #cartoonfightclub #animationrewind #disney #cartoonnetwork
AnimationRewind

AnimationRewind

48 likes

first toonsquid animation ever
#toonsquid #bfdi #minecraft #animation
💙🔷️axel💜🌙💫

💙🔷️axel💜🌙💫

14 likes

Animation👍
#ibispaint #fyp #foryoupage
🍀Clover Leaf🍀

🍀Clover Leaf🍀

3 likes

Jax & Pomni Singing in my head
#theamazingdigitalcircus #animation #tadc #memes #oc
Cheetah_Man2004

Cheetah_Man2004

81 likes

An iPad Pro M4 displays its home screen with various app icons, introducing favorite animation and video editing apps, including free and Android alternatives. A pink stylus rests beside the device on a pink textured background.
An iPad Pro M4 shows the Adobe Fresco app interface with an animation project featuring a landscape and character. The image highlights Adobe Fresco for animation, with a pink stylus nearby on a pink background.
An iPad Pro M4 displays the CapCut app interface, showing a video editing project. The image highlights video editing apps like VLLO, CapCut, and KineMaster, with a pink stylus beside the device on a pink background.
my favorite apps for animation and video editing!
here are some of my favorite animation and video editing apps for the iPad. I’ve included a mix of free options and Android alternatives, so you can find something that fits your needs. I personally like to edit all my video content using CapCut. I use Adobe Fresco to make little animations, that c
studiocherii

studiocherii

70 likes

2D Cartoon Characters that look Bad in 3D: #TikTokSceneStealerContest #animationrewind #cartoonfightclub #cartoonnetwork #nickelodeon
AnimationRewind

AnimationRewind

170 likes

Amy rose Beauregarde blueberry inflation 🫐
Cameron hazbin anime swordsman

Cameron hazbin anime swordsman

6 likes

A cartoon character with glasses points to a whiteboard that reads 'Words R Good' under the title 'Animation Terms Every Animator Should Know!'. The text below says, 'So you're not a deer in the headlights when someone says "exposure sheet" (Like me)'.
This image defines '12 Principles of Animation' with an illustration of a circle transforming into squashed and stretched shapes. It also defines 'Keyframe' as a drawing that sets the start or end of motion.
This image defines 'In-between (Tween)' with an illustration of frames between keyframes. It also explains 'On Ones, Twos, Threes' for drawing hold times and 'Exposure Sheet (X-sheet)' as a frame breakdown.
Animation terms every animator should know
What terms would you add to the list? . . . . #animation #arttips #arttipsandtricks #animatorsoftiktok
Figisisters

Figisisters

17 likes

It’s a blessing and a curse . . . . . #animator #animation #animatorsoftiktok #arttoker #arttok
Figisisters

Figisisters

4 likes

Animation
Trying my hand 👋at using some animation in #blender . To those in my Blender Community are there other ways you use to do your Blender animation? #blender3danimation #b3d #mei360games #BlenderCommunity
Lauren5280

Lauren5280

1 like

A cartoon illustration of a woman with long dark hair, a nose ring, and an earring, holding a phone with a Powerpuff Girls case. Red hearts float around her, and text reads "How to make a cartoon using ChatGPT."
How to make a cartoon using ChatGPT 💕
#chatgpt #cartoon #roomtour #baddieart #aiportraits
5⭐️Brat

5⭐️Brat

75 likes

YT channels for character designers . . . Which channels would you add to the list? . . . #arttiktok #arttips #arttipsandtricks #animation #characterdesign
Figisisters

Figisisters

3 likes

How To Make An Animation Series With AI
How To Make An Animation Series With AI (Complete Guide) #ai #animation #business 🛑 STOP BUYING COURSES & Learn How To Build AI Tools, Grow Your Business and Master Trading Get A Free Training Call 🎁 ➡️ Stackmode.net (For Educational Purposes Only)
CEO Turbo

CEO Turbo

3 likes

little animation!!
The_weird_squad_lol

The_weird_squad_lol

1 like

🚨REPOST🚨 this edit made me kick my feet&giggle
#zootopia #animation #demitrakalogeras #kalogeras #repost
Demitra kalogeras

Demitra kalogeras

352 likes

Craziest Cartoon Endings: #tiktokhottakescontest #cartoonfightclub #animationrewind #cartoonnetwork #nickelodeon
AnimationRewind

AnimationRewind

137 likes

Come Watch Zootopia 2 With Us !!! 🥳🐰🦊🐍💙🍿✨ @Walt Disney Animation Studios @Cinemark #foryou #funny #like #movietheater #zootopia2 🤪
Fer and Mau ✨

Fer and Mau ✨

14 likes

An image of Kobe Bryant dunking, overlaid with his player details: Shooting Guard, 6'6" height, 205 lbs weight, and 6'11" wingspan, indicating a specific build in a basketball game.
The MPX BUILDER screen in a basketball game, showing the build is inspired by Dwyane Wade, Eddie Jones, and Brandon Miller. The archetype is identified as a '2-Way Mid-Paint Creator'.
A screenshot from the MPX BUILDER displaying attribute ratings for Finishing (Close Shot 75, Driving Layup 80, Driving Dunk 91, Standing Dunk 41, Post Control 70) and Shooting (Mid-Range Shot 88, Three-Point Shot 78, Free Throw 80), along with badge tiers.
03’ Kobe Bryant build on 2k26
#2k26 #nba2k #bestbuild #whymani0 #kobebryant
WICKED

WICKED

157 likes

TADC fan animation voice over! XD
Sorry, my posts have been very dry lately since I've been busy with school. But I promise to try to be more active and entertaining for both my YouTube and Lemon8 audience! ^^ #funny #fancomic #voiceover #fyp
VolkNyx

VolkNyx

56 likes

Do you know why all of Gazelle’s dance partners are tigers? #zootopia #zootopia2 #cartoon #funnyvideos #fyp
inves.film

inves.film

826 likes

First animation on this account I gotta get used i
#gettoknowme #animation #animationmeme #alightmotionedit #dandysworld
🍌☆┆𝙉𝙪𝙜𝙜𝙞𝙚1!┆☆🍓

🍌☆┆𝙉𝙪𝙜𝙜𝙞𝙚1!┆☆🍓

40 likes

Little Dancing Denki!
Song - Move Yo Body (sped up) by Bryansanon : #myheroacademia #mha #bakusquad #anime #animation
Fan0fthearts

Fan0fthearts

1758 likes

How I make my custom ringtone😍 @ClipTone #cliptone #fyp
Fathia Kadir

Fathia Kadir

284 likes

Ennemie - Coldplay (Minecraft Animation) PT1
Ennemie - Coldplay (Minecraft Animation)
Micah 6743

Micah 6743

0 likes

#tiktokmomentscontest Animatrd Series that had Spinoffs: #animationrewind #cartoonnetwork #cartoonfightclub #nickelodeon
AnimationRewind

AnimationRewind

55 likes

Animation I made
Codename:redux Reviewer

Codename:redux Reviewer

0 likes

I didn’t finish this animation trend☹️
#animation #gacha #edit
•~𝐇𝐈GHYARR~•

•~𝐇𝐈GHYARR~•

15 likes

How to create a vtuber model: separating all moving parts specifically for a bounce eve blink. Find the rest of the tutorial in live2d playlist and YouTube! All the rigging portions will be there! Hope this helps #howtobeavtuber #howtocreateavtuber #animationtutorial #blinkanimation #liv
Vela 🕯• Youtuber

Vela 🕯• Youtuber

5 likes

ANIMATION I MADE YAYAY
#Gacha #Gachalife #Gachalife2 #animation #Bounceit
💙 ~ ! Ria Mia ! ~ 💙

💙 ~ ! Ria Mia ! ~ 💙

16 likes

Number 1 Hero Vs Number 5 Hero!
#mha #myheroultrarumble #myheroacademia
Tazmaniantez

Tazmaniantez

0 likes

Quick animation I made!
I posted this to tiktok as well! Go check it out! its in my bio! #animation #animated #art #artist #capcut
☆Van_Goon☆

☆Van_Goon☆

24 likes

Animations you should watch if…
What are some of your favorite animations to watch and why . . . . . #animation #animator #animatorsoftiktok #animated #artistsoftiktok
Figisisters

Figisisters

1328 likes

See more