【コピペOK】シェアボタン デザイン 9選 — 埋め込みウィジェット

自動再生 · タイルを押すとその項目へ · すべて1つのzip

• 01 ソーシャルシェアボタン列
• 02 動画埋め込み再生ボタンオーバーレイ
• 03 X投稿埋め込みカードのモック
• 04 口コミ埋め込みウィジェット
• 05 地図・位置埋め込みカード
• 06 ポッドキャストプレーヤー埋め込みウィジェット
• 07 GitHubリポジトリ統計カード
• 08 ニュースレター購読埋め込みウィジェット
• 09 ライブチャットバブルランチャー

9つは人気順ではなく、訪問者が記事を読む間に実際に出会う順で並べています。記事下部の共有列(01)から始まり、目を引く動画カード(02)、信頼を固めるX投稿(03)と口コミ(04)を経て、来店につながる位置カード(05)へと進みます。ポッドキャスト(06)とGitHub(07)でさらに見せたあと、離脱前にニュースレター(08)で引き留め、最後まで画面に残るチャットバブル(09)で締めます。

01ソーシャルシェアボタン列

ピンク・ミント・ライラック・スカイの4つの丸ボタンが順番にscaleでポップして現れます。記事下部の共有列や、商品詳細のSNSシェア欄で使います。

.btn { animation: pop $duration $easing infinite; }
.pink  { background: $subject-pink;  animation-delay: 0s; }
.mint  { background: $subject-mint;  animation-delay: .15s; }
.lilac { background: $subject-lilac; animation-delay: .3s; }
.sky   { background: $subject-sky;   animation-delay: .45s; }
@keyframes pop {
  0%, 40%, 100% { transform: scale(1); }
  15% { transform: scale(1.16); }
  25% { transform: scale(.94); }
}

リンクボタンはnavigator.clipboard.writeText()で実際にコピーを試み、いいねボタンはaria-pressedで押した状態を切り替えます。

02動画埋め込み再生ボタンオーバーレイ

暗いサムネイルの再生ボタン周りの白いリングが、レーダーのように広がって薄れます。本物のYouTube iframeは読み込まず、ロード前のプレースホルダーとして使うCSSカードです。

.ring {
  border: 2px solid rgba(255, 255, 255, .5);
  animation: ping $duration $easing infinite;
}
@keyframes ping {
  0% { opacity: .55; transform: scale(.8); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}

押すとアイコンが再生・一時停止に切り替わり、requestAnimationFrameで進行バーが実際に埋まります(本物の動画ファイルはありません)。

03X投稿埋め込みカードのモック

ハートアイコンが呼吸するようにscale・opacityを上下させ、押せることを示します。本物のXのAPIは一切呼ばないので、口コミページに貼るSNS反応のスクショの代わりに使えます。

.heart { animation: breathe $duration $easing infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.45); opacity: 1; }
}
.likeActive .heart { animation: bump 220ms $ease-pop; }

いいね・リポストを押すとカウントが実際に増減し、色が変わります — 画面の数字はこのカードの中だけで動く値です。

04口コミ埋め込みウィジェット

5つの星が左から順にバウンドしながら現れます。口コミ一覧ページのカード型レビューや、LPのお客様の声セクションで使います。

.star { animation: star $duration $easing infinite; }
@keyframes star {
  0% { transform: scale(0); opacity: 0; }
  12% { transform: scale(1.3); opacity: 1; }
  20%, 100% { transform: scale(1); opacity: 1; }
}

「役に立った」ボタンはaria-pressedで押した状態を残し、押すたびにカウントが実際に増えます。

05地図・位置埋め込みカード

地図上のピンが上から落ちるように現れ、軽くバウンドして収まります。店舗・オフィス紹介ページの位置カードや、お問い合わせページのアクセス案内で使います。

.pin { animation: drop $duration $easing infinite; }
@keyframes drop {
  0% { transform: translate(-50%, -220%); opacity: 0; }
  35% { transform: translate(-50%, -100%); opacity: 1; }
  46% { transform: translate(-50%, -108%); }
  56%, 100% { transform: translate(-50%, -100%); }
}

道順ボタンを押すとaria-expandedとともに距離・所要時間パネルが実際に開きます — 本物の地図タイルはなく、道路2本だけCSSで描いています。

06ポッドキャストプレーヤー埋め込みウィジェット

8本の波形バーがそれぞれ違うタイミングで上下し、本当に再生中のように見せます。ブログ記事内のポッドキャスト回カードや、サイドバーの最新エピソードウィジェットで使います。

.wave span { animation: bar #{$duration * 3} ease-out infinite alternate; }
.wave.is-paused span { animation-play-state: paused; }
@keyframes bar {
  from { transform: scaleY(.3); }
  to { transform: scaleY(1); }
}

再生ボタンを押すと波形が実際に止まり、また動き出します — animation-play-state一行で再生状態とアニメーションを結び付けています。

07GitHubリポジトリ統計カード

星アイコンが押してほしいと言うように左右に小さく揺れます。本物のGitHub APIは呼ばないので、OSSプロジェクト紹介記事のリポジトリカードや、ポートフォリオのコードリンクに使えます。

.icStar { animation: wiggle $duration $easing infinite; transform-origin: 50% 90%; }
@keyframes wiggle {
  0%   { transform: rotate(0) scale(1); }
  20%  { transform: rotate(-16deg) scale(1.15); }
  40%  { transform: rotate(12deg) scale(1.05); }
  60%  { transform: rotate(-10deg) scale(1.15); }
  100% { transform: rotate(0) scale(1); }
}

Starを実際に押すとカウントが増減し、星の色が塗りつぶされます。

08ニュースレター購読埋め込みウィジェット

封筒アイコンが浮かんでは沈むことを繰り返します。記事下部の購読誘導カードや、サイドバーのニュースレター登録フォームで使います。

.icon { animation: float $duration $easing infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .icon { animation: none; }
}

送信時に正規表現でメール形式を実際に検証し、通過すると紙飛行機のアイコンに変わり、完了メッセージが出ます。

09ライブチャットバブルランチャー

ランチャー周りの白いリングがレーダーのように広がり、バッジの数字が呼吸するように大きくなったり小さくなったりします。サイト右下固定のお問い合わせボタンや、決済ページのリアルタイム相談窓口で使います。

.ring { animation: ping $duration $easing infinite; }
.badge { animation: bounce $duration $ease-pop infinite; }
@keyframes ping {
  0% { opacity: .5; transform: scale(.85); }
  70%, 100% { opacity: 0; transform: scale(1.25); }
}

実際に押すとチャットパネルが開き、.focus({ preventScroll: true })のおかげで入力欄にフォーカスが移ってもページは強制スクロールされません。

落とし穴 — 320pxはどこで画面を超えるか

X投稿カード(03)と口コミカード(04)は最初、カード幅280pxで余白も広めに取っていました。블로그설정.jsonのスマホ幅320pxでPlaywright実測すると、document.body.scrollHeightが200pxの予算を14px・2pxそれぞれ超えていました — document.documentElementだけを測るとこの超過を見逃します(ステージCSSがoverflow: hiddenを掛けてスクロールバー自体が出ないためです)。カード幅を256pxに縮め、余白をトークン1段ずつ($sp-4→$sp-3、$sp-3→$sp-2)下げると、ちょうど200pxに収まりました。地図カード(05)は地図エリアの高さを120pxから88pxに縮めた分がより大きく効きました。border-radiusは$r-*トークンのみ、gap・padding・marginのpx値は4pxの倍数のみと決められているため、再生アイコンを1〜2pxずらすmargin-leftもすべてtransform: translateX()に置き換える必要がありました。9つのzipを開くときのパスワードはxc2tmqdqで、小文字と数字だけなので表示のとおりそのまま貼り付けられます。

アクセシビリティ

9つ全部がprefers-reduced-motion: reduceでループアニメーションを止め、静止した形に落ち着きます — 再生リング(02)とチャットバブルのリング(09)はopacity: 0に固定し、リングが止まったまま浮いて残ることはありません。ボタンにはaria-label・aria-pressed・aria-expandedを付け、いいねが押されたか、パネルが開いたかをスクリーンリーダーが読み取れます。チャットバブルの入力欄フォーカスは常に{ preventScroll: true }付きで、画面が突然動くことはありません。この設定をどこで切り替えるかはMDNのprefers-reduced-motionドキュメントにまとまっています。

FAQ

このカードで本物のYouTube・X・地図が開きますか?

いいえ。9つ全部が本物のAPI・iframeを呼ばないCSS・バニラJSのモックです。動画カード(02)は押すと進行バーが埋まるだけで、X風カード(03)のいいね・リポスト数もこのカードの中だけで動きます。本物の埋め込みが必要なときは、各サービスの公式embedコードを同じ場所に入れ、このCSSはロード前のプレースホルダーとして使えます。ほかの埋め込みパターンはサイト内検索で「埋め込み」で探せます。

色や文言を自社ブランドに合わせて変えられますか?

変えられます。ほとんどのデモはSCSS先頭の$duration・$easing・$colorの3変数を変えるだけで、アニメーションの色がまとめて変わります。テキスト(会社名・住所・口コミ文言)はindex.html内の文字列を直接書き換えれば済み、React版は各コンポーネントのprops(title・address・quoteなど)で同じことができます。

320px超えは自分でどう確認しますか?

開発者ツールでビューポートを320pxに狭め、コンソールでdocument.documentElement.scrollWidthとdocument.body.scrollWidthをそれぞれ調べてwindow.innerWidthと比べます。documentElementだけを測ると、この記事の落とし穴のようにoverflow: hiddenの裏に隠れた超過を見逃します。このサイトがデモをどう作り検証しているかは紹介ページにまとめています。