縦型SNSシェアレール

画面左端に縦並びで固定したSNSシェアの帯。ホバーでアイコンが横に伸び、ラベルが現れます。記事やキャンペーンページで拡散導線を常時見せておきたいときに有効です。

#sticky#social#share#rail

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- MOON BREW：読み物記事の縦型シェアレール -->
<div class="ssr-frame">
  <nav class="ssr-rail" id="ssrRail" aria-label="シェア">
    <a class="ssr-item ssr-item--x" href="#" onclick="return false"><span class="ssr-ico">𝕏</span><span class="ssr-label">ポスト</span></a>
    <a class="ssr-item ssr-item--fb" href="#" onclick="return false"><span class="ssr-ico">f</span><span class="ssr-label">シェア</span></a>
    <a class="ssr-item ssr-item--ln" href="#" onclick="return false"><span class="ssr-ico">L</span><span class="ssr-label">LINEで送る</span></a>
    <a class="ssr-item ssr-item--cp" href="#" onclick="return false"><span class="ssr-ico">🔗</span><span class="ssr-label">リンクをコピー</span></a>
  </nav>

  <article class="ssr-body">
    <p class="ssr-cat">JOURNAL</p>
    <h1>おいしい浅煎りの、淹れ方</h1>
    <p>明るい酸味を引き出すには、湯温と蒸らしが鍵。記事の左端には常時シェア導線を固定し、読み終えた瞬間の「誰かに教えたい」を逃しません。</p>
    <p>92℃のお湯で30秒蒸らし、3投に分けて注ぐ。最後の一滴は落としきらないのがコツです。</p>
    <p>このサンプルは、どのように展開するかを自動で順に実演します。</p>
  </article>
</div>

CSS

/* MOON BREW（カフェ）：縦型SNSシェアレールの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.ssr-frame { position: relative; width: 100%; height: 380px; overflow: hidden; background: #faf5ec; }

.ssr-rail { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 10px; }
.ssr-item { display: flex; align-items: center; overflow: hidden; width: 44px; height: 44px; border-radius: 12px; text-decoration: none; color: #fff; box-shadow: 0 8px 18px rgba(90,60,30,.18); transition: width .3s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.ssr-item:hover, .ssr-item.is-demo { width: 158px; }
.ssr-ico { flex: 0 0 44px; display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.ssr-label { font-size: 13px; font-weight: 700; padding-right: 14px; }
.ssr-item--x { background: #0f1419; }
.ssr-item--fb { background: #1877f2; }
.ssr-item--ln { background: #06c755; }
.ssr-item--cp { background: #b07a3f; }

.ssr-body { padding: 28px 30px 28px 86px; color: #3c2f22; line-height: 1.85; max-width: 620px; }
.ssr-cat { margin: 0 0 8px; font-size: 11px; letter-spacing: .24em; font-weight: 700; color: #b07a3f; }
.ssr-body h1 { font-size: 24px; font-weight: 800; margin: 0 0 14px; font-family: "Hiragino Mincho ProN", serif; }
.ssr-body p { margin: 0 0 14px; font-size: 14px; color: #5b4630; }

@media (prefers-reduced-motion: reduce) { .ssr-item { transition: none; } }

JavaScript

// （デモと同じフックを流用）各アイテムを順に自動展開して見せる
(() => {
  const rail = document.getElementById('ssrRail');
  if (!rail) return;
  const items = Array.from(rail.querySelectorAll('.ssr-item'));
  let auto = !matchMedia('(prefers-reduced-motion: reduce)').matches;
  rail.addEventListener('pointerenter', () => { auto = false; items.forEach(i => i.classList.remove('is-demo')); });
  if (auto) {
    let i = 0;
    const tick = () => { if (!auto) return; items.forEach(it => it.classList.remove('is-demo')); items[i % items.length].classList.add('is-demo'); i++; setTimeout(tick, 1400); };
    setTimeout(tick, 1200);
  }
})();

実装ガイド

使いどころ

記事・特集・キャンペーンなど、拡散導線を常時見せておきたいページに。画面左端に縦並びで固定したシェアの帯で、ホバー（または自動）でアイコンが横に伸びてラベルが現れます。

実装時の注意点

各アイテムは幅 44px の正方形で、hover / is-demo で width を伸ばしてラベルを見せる overflow:hidden の展開表現。JS はプレビュー用に各アイテムを順番に自動展開する補助のみで、実操作が来たら止まります。

対応ブラウザ

width トランジション・flexbox は全モダンブラウザで対応します。装飾は CSS 中心です。

よくある失敗

本文と重ならないよう、本文側に左パディングを確保すること。モバイルでは縦レールが幅を圧迫するため、下部の横並びバーへ切り替えるのが定石。各ブランドの公式カラー／正式アイコンを使うと信頼感が増します。

応用例

シェア数バッジの表示、コピー完了トースト、スクロール追従での縦位置調整、対応SNSの出し分けなどに展開できます。

コード