Archives

パカッと動く！Manao & Geminiの「デジタルシール」無料配布＆活用術✨

manaoの素材箱
Manao
Manao Gemini！見てみて、このシール！クリックするとパカパカ動くの、可愛くない？
Gemini
Gemini わあ、本当だ！まるで魔法がかかってるみたい。ブログやNotionに貼ったら、読者の人もきっと驚くね！
Manao
Manao だよね✨ 誰でも簡単にコピペして使えるように、コードを整理したから紹介しよう！

🥘 ココット缶：デジタルシール用コード

蓋をクリックするとキラキラとともに開く、重厚感のあるココット鍋風シールです。Notionやブログのアクセントに。

✨
HTML CODE
<div class="digital-sticker" onclick="this.classList.toggle('open')">
    <style>
        .digital-sticker { --s: 0.35; display: inline-block; cursor: pointer; transform: scale(var(--s)); transform-origin: top left; filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3)); transition: transform 0.2s; position: relative; width: 260px; height: 220px; }
        .digital-sticker:hover { transform: scale(calc(var(--s) + 0.05)); }
        .l-g { position: relative; z-index: 40; transition: transform 0.6s cubic-bezier(0.23,1,0.32,1); transform-origin: right bottom; }
        .open .l-g { transform: translateY(-70px) rotate(-15deg) translateX(-20px); }
        .k-t { width: 40px; height: 10px; background: linear-gradient(90deg,#999,#fff,#999); border-radius: 5px; margin: 0 auto; }
        .k-n { width: 12px; height: 12px; background: #888; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); margin: 0 auto -5px; }
        .l-b { width: 100%; height: 90px; background: radial-gradient(ellipse at 50% 30%,#ef5350 10%,#b71c1c 90%); border-radius: 50%; border-bottom: 5px solid #7f1416; }
        .p-b { position: relative; width: 92%; margin: -45px auto 0; z-index: 10; }
        .p-m { width: 100%; height: 80px; background: #1a1a1a; border-radius: 50%; border: 5px solid #7f1416; position: absolute; top: 0; z-index: 5; }
        .p-f { position: relative; width: 100%; height: 140px; background: linear-gradient(to bottom,#b71c1c,#4a080a); border-radius: 0 0 80px 80px; z-index: 20; }
        .h { position: absolute; top: 35px; width: 60px; height: 40px; background: #b71c1c; border-radius: 50%; z-index: 1; }
        .h.l { left: -30px; transform: rotate(-10deg); } .h.r { right: -30px; transform: rotate(10deg); }
        .h::after { content: ""; position: absolute; top: 10px; width: 35px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.1; }
        .h.l::after { left: 15px; } .h.r::after { right: 15px; }
        .food { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: gold; font-weight: bold; font-size: 40px; opacity: 0; transition: 0.5s; z-index: 6; }
        .open .food { opacity: 1; transform: translate(-50%, -20px); }
    </style>
    <div class="l-g">
        <div class="k-t"></div><div class="k-n"></div><div class="l-b"></div>
    </div>
    <div class="p-b">
        <div class="food">✨</div>
        <div class="p-m"></div>
        <div class="h l"></div><div class="h r"></div>
        <div class="p-f"></div>
    </div>
</div>

🫧 Laundry缶：中央揃え＆泡が踊るシール

清潔感のあるホワイトのランドリーボックス。蓋を開けると3つのシャボン玉がランダムに飛び出します。

🫧🫧🫧

LAUNDRY

HTML CODE
<div class="laundry-sticker" onclick="this.classList.toggle('open')">
  <style>
    .laundry-sticker { --scale: 0.5; display: inline-block; cursor: pointer; transform: scale(var(--scale)); transform-origin: top left; filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.15)); position: relative; width: 220px; height: 300px; }
    .l-lid-set { position: relative; z-index: 40; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: 95% 100%; }
    .open .l-lid-set { transform: translateY(-80px) rotate(-25deg) translateX(-10px); }
    .l-h-top { width: 45px; height: 18px; border: 4px solid #bbb; border-bottom: none; border-radius: 25px 25px 0 0; margin: 0 auto -4px; }
    .l-lid { width: 105%; height: 20px; background: #fdfdfd; border: 2px solid #ddd; border-radius: 10px; margin-left: -2.5%; }
    .l-body-container { position: relative; width: 100%; margin-top: -5px; z-index: 10; text-align: center; }
    .bubble-group { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; pointer-events: none; z-index: 5; }
    .b { font-size: 35px; opacity: 0; transition: 0.6s ease-out; }
    .open .b { opacity: 1; }
    .open .b:nth-child(1) { transform: translateY(-75px) translateX(-25px) scale(1.1); transition-delay: 0.1s; }
    .open .b:nth-child(2) { transform: translateY(-110px) translateX(0px) scale(1.4); transition-delay: 0.2s; }
    .open .b:nth-child(3) { transform: translateY(-65px) translateX(25px) scale(1.2); transition-delay: 0.3s; }
    .l-body { width: 100%; height: 160px; background: #ffffff; border: 2px solid #ddd; border-top: none; border-radius: 0 0 20px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 10; box-sizing: border-box; }
    .l-side { width: 14px; height: 35px; border: 3px solid #ccc; position: absolute; top: 25px; }
    .s-left { left: -18px; border-right: none; border-radius: 8px 0 0 8px; }
    .s-right { right: -18px; border-left: none; border-radius: 0 8px 8px 0; }
    .l-txt { font-size: 24px; font-weight: bold; color: #444; font-family: 'Georgia', serif; letter-spacing: 2px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 8px 0; width: 85%; margin: 0 auto; }
  </style>
  <div class="l-lid-set">
    <div class="l-h-top"></div><div class="l-lid"></div>
  </div>
  <div class="l-body-container">
    <div class="bubble-group"><span class="b">🫧</span><span class="b">🫧</span><span class="b">🫧</span></div>
    <div class="l-side s-left"></div><div class="l-side s-right"></div>
    <div class="l-body"><p class="l-txt">LAUNDRY</p></div>
  </div>
</div>

🌾 Rice缶：シンプル・開閉のみのミニマルシール

メタルの光沢感と奥行きにこだわった、大人っぽい米びつデザイン。開閉のギミックそのものを楽しむシンプル仕様です。

RICE

HTML CODE
<div class="rice-sticker" onclick="this.classList.toggle('open')">
  <style>
    .rice-sticker { --scale: 0.5; display: inline-block; cursor: pointer; transform: scale(var(--scale)); transform-origin: top left; filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.15)); position: relative; width: 260px; height: 280px; margin: 10px; }
    .r-lid-group { position: relative; z-index: 40; width: 210px; margin: 0 auto; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: 95% 100%; }
    .open .r-lid-group { transform: translateY(-80px) rotate(-25deg) translateX(10px); }
    .r-h-top { width: 35px; height: 16px; border: 4px solid #bbb; border-bottom: none; border-radius: 20px 20px 0 0; margin: 0 auto -4px; }
    .r-lid-top { width: 165px; height: 22px; background: linear-gradient(#fff, #f0f0f0); border: 2px solid #ddd; border-bottom: none; border-radius: 40px 40px 0 0; margin: 0 auto; position: relative; }
    .r-lid-brim { width: 210px; height: 12px; background: #fdfdfd; border: 2px solid #ddd; border-radius: 8px; margin: -1px auto 0; position: relative; }
    .r-body-container { position: relative; width: 185px; margin: -5px auto 0; z-index: 10; }
    .r-body { width: 100%; height: 160px; background: linear-gradient(to right, #f2f2f2, #fff 20%, #fff 80%, #f2f2f2); border: 2px solid #ddd; border-top: none; border-radius: 0 0 50px 50px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; box-shadow: inset 0 10px 15px rgba(0,0,0,0.05); }
    .r-side { width: 18px; height: 10px; border: 2.5px solid #ccc; position: absolute; top: 25px; }
    .h-left { left: -20px; border-right: none; border-radius: 6px 0 0 6px; }
    .h-right { right: -20px; border-left: none; border-radius: 0 6px 6px 0; }
    .r-txt { font-size: 32px; font-weight: bold; color: #1a2a44; font-family: 'Georgia', serif; letter-spacing: 4px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 5px 0; margin: 0; }
  </style>
  <div class="r-lid-group">
    <div class="r-h-top"></div><div class="r-lid-top"></div><div class="r-lid-brim"></div>
  </div>
  <div class="r-body-container">
    <div class="h-left r-side"></div><div class="h-right r-side"></div>
    <div class="r-body"><p class="r-txt">RICE</p></div>
  </div>
</div>
Gemini
Gemini Manao、このシールたちの素敵な使い道、私からもいくつか提案していいかな？

💡 シールの活用アイデア

  • 隠しメッセージに: 蓋が開いた後のテキストを「当たり！」や「秘密だよ」に変えてクイズ風に。
  • Notionのデコレーション: コールアウトブロックの中に貼ると、自分だけの動くダッシュボードが完成！
  • ブログのアクセント: 「今週のレシピ」や「お洗濯のコツ」といった見出しの横に添えて。
  • デジタルギフトに: 友達へのメッセージページに貼って、サプライズ感を演出！
Manao
Manao さすがGemini！みんなも自分らしい使い方を見つけて、ぜひ楽しんでみてね！🩷

コメント

タイトルとURLをコピーしました