プレスキット テンプレート付き プレスルームセクション9選

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

• 01 プレスヒーロー
• 02 プレスリリース一覧
• 03 メディアキット
• 04 掲載メディア
• 05 数字ハイライト
• 06 メディア問い合わせ
• 07 創業者の言葉
• 08 沿革タイムライン
• 09 プレスフッター

9つは人気順ではなく、記者・投資家がプレスルームを読み進める順番に並べました。まず第一印象を与え(ヒーロー)、最新情報を確認させ(プレスリリース一覧)、取材に使う資料を渡し(メディアキット)、すでに掲載された実績を見せ(掲載メディア)、規模を数字で裏付け(数字ハイライト)、担当者へすぐ連絡させ(問い合わせ)、ブランドの声を届け(創業者の言葉)、これまでの歩みを示した上で(沿革タイムライン)、次の情報を受け取らせます(フッター)。担当者の顔・メディアロゴの位置は、実際の画像ではなくすべてこのサイト共通の$subject-ink・$subject-blue・$subject-creamトークンだけで描いた図形のプレースホルダーです。ファイルだけ差し替えれば、レイアウトはそのまま残ります。

01プレスヒーロー

背景でぼかした円3つがtranslate+scaleでずっと漂う間、図形のワードマーク・見出し・サブ見出し・CTAボタン2つが1画面に収まります。右の「プレスリリース購読」ボタンはクリックのたびにaria-pressedが実際に切り替わり、アイコンが塗りつぶされます。

.ph__orb--1 { animation: ph-float-a 2s ease-in-out infinite; }
@keyframes ph-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate($sp-10, -$sp-8) scale(1.5); }
}
.ph__sub-btn[aria-pressed="true"] {
  background: rgba(255, 247, 230, .12);
  border-color: $subject-cream;
}
.ph__sub-btn[aria-pressed="true"] .ph__sub-ic {
  opacity: 1;
  color: $color;
  transform: scale(1.15);
}

02プレスリリース一覧

分類チップ(すべて・製品・パートナーシップ・受賞)をクリックすると、その分類ではない行がmax-height+opacity遷移で実際に折りたたまれます。各行左側のアクセントバーは常に順番に明るくなるスキャン動作を繰り返します(装飾)。

var root = document.querySelector('.rl');
var chips = root.querySelectorAll('.rl__chip');
var rows = root.querySelectorAll('.rl__row');
chips.forEach(function (chip) {
  chip.addEventListener('click', function () {
    root.classList.remove('is-demo');
    chips.forEach(function (c) { c.setAttribute('aria-pressed', 'false'); });
    chip.setAttribute('aria-pressed', 'true');
    var cat = chip.getAttribute('data-cat');
    rows.forEach(function (row) {
      var show = cat === 'all' || row.getAttribute('data-cat') === cat;
      row.classList.toggle('is-hidden', !show);
    });
  });
});

03メディアキット

チェックボックス3つ(ロゴパック・ブランドガイド・製品スクリーンショット)を選ぶと「選択したファイルを受け取る」ボタンが実際に有効化され(disabled解除)、ラベルに個数が付きます。クリックすると選んだ行にSVGチェックがstroke-dashoffsetで描かれます。

function 갱신() {
  var 켜짐 = Array.prototype.filter.call(checks, function (c) { return c.checked; });
  btn.disabled = 켜짐.length === 0;
  btn.lastChild.textContent = 켜짐.length ? ' 선택한 파일 받기 (' + 켜짐.length + ')' : ' 선택한 파일 받기';
}
checks.forEach(function (c) { c.addEventListener('change', 갱신); });

btn.addEventListener('click', function () {
  var 켜짐 = Array.prototype.filter.call(checks, function (c) { return c.checked; });
  켜짐.forEach(function (c) { c.closest('.mk__row').classList.add('is-done'); });
  status.textContent = '파일 ' + 켜짐.length + '개를 받았습니다.';
});

04掲載メディア

図形で描いたメディアマーク8個(実際のロゴではありません)をつないだトラックがtranslateX(-50%)で途切れなく流れます。カーソルを乗せるか隣のボタンを押すと、その場で流れが止まります。

// トラック自体には gap を使わない — 項目ごとに margin-right で間隔を取る
.mb__track { display: flex; width: max-content; animation: mb-scroll 14s linear infinite; }
.mb__logo { flex: 0 0 auto; margin-right: $sp-6; }
@keyframes mb-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

05数字ハイライト

カード3枚の大きな数字が、ページを開いた瞬間にrequestAnimationFrameで0から実際の目標値までeaseOut曲線で上がって止まります(1.2秒)。カード上のアクセントバーは常に順番にスキャン動作を繰り返します。

var 시작 = performance.now();
var 길이 = 1200;
function easeOut(t) { return 1 - Math.pow(1 - t, 3); }
function tick(now) {
  var t = Math.min(1, (now - 시작) / 길이);
  var e = easeOut(t);
  nums.forEach(function (el) {
    var target = Number(el.getAttribute('data-target'));
    el.textContent = Math.round(target * e).toLocaleString('ko-KR');
  });
  if (t < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

06メディア問い合わせ

担当者名・肩書きの下のメールボタンを押すと、実際にnavigator.clipboard.writeText()が実行されます。ボタンにはSVGチェックがstroke-dashoffsetで描かれてから、1.6秒後に元のラベルへ戻ります。

btn.addEventListener('click', function () {
  root.classList.remove('is-demo');
  var email = btn.getAttribute('data-email');
  var 복사 = function () {
    btn.classList.add('is-copied');
    hint.textContent = '이메일 주소를 복사했습니다.';
    clearTimeout(타이머);
    타이머 = setTimeout(function () { btn.classList.remove('is-copied'); }, 1600);
  };
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(email).then(복사, 복사);
  }
});

07創業者の言葉

創業者の引用文2つがドット2個で切り替わります。ドットをクリックするとその引用文へopacityで実際にクロスフェード転換し、大きな引用符の装飾がrotate+scaleで常に揺れます。

.fq__mark {
  position: absolute;
  top: $sp-1; left: 50%;
  transform: translateX(-50%);
  font: 800 56px/1 Georgia, serif;
  color: rgba(47, 109, 246, .32);
  animation: fq-wobble 2s $easing infinite;
}
@keyframes fq-wobble {
  0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
  50%      { transform: translateX(-50%) rotate(-10deg) scale(1.35); }
}
.fq__dot.is-active { background: $color; transform: scale(1.3); }

08沿革タイムライン

横線上の沿革4地点(創立・シリーズA・海外進出・100万ユーザー)をクリックすると、その地点まで進捗バーがscaleXで実際に埋まり、上の説明文がその時点の内容に変わります。

stops.forEach(function (btn) {
  btn.addEventListener('click', function () {
    root.classList.remove('is-demo');
    var i = Number(btn.getAttribute('data-i'));
    root.setAttribute('data-active', String(i));
    root.querySelector('.mt__fill').style.transform = 'scaleX(' + ((i + 1) / 4) + ')';
    stops.forEach(function (s) { s.removeAttribute('aria-current'); });
    btn.setAttribute('aria-current', 'step');
    desc.textContent = 설명[i];
  });
});

09プレスフッター

メールアドレスを入れて購読ボタンを押すと、実際に正規表現で形式を検証します。通過するとSVGチェックがopacityで現れ、失敗すると入力欄がtranslateXで左右に短く揺れます。

form.addEventListener('submit', function (e) {
  e.preventDefault();
  var ok = /^\S+@\S+\.\S+$/.test(input.value);
  if (ok) {
    form.classList.add('is-done');
    status.textContent = '구독 완료 — 확인 메일을 보냈습니다.';
  } else {
    input.classList.remove('is-shake');
    void input.offsetWidth;
    input.classList.add('is-shake');
    status.textContent = '올바른 이메일을 입력해 주세요.';
  }
});

どこで壊れるか — 落とし穴

9つを作る中で実際に2度つまずきました。ひとつ目はメディア問い合わせ(06)です。最初はカード背景を不透明なクリーム色で塗っていましたが、背景に置いたドリフト円がz-index:-1のため、その不透明な背景の裏に完全に隠れてしまいました。見た目には何の問題もなさそうでしたが、実際に動くピクセルはほとんどなく、アニメーションと呼ぶには物足りない状態でした。カード背景をなくし、円が舞台の色の上に直接見えるようにしたことで解決しました。

ふたつ目はプレスリリース一覧(02)とメディアキット(03)のレスポンシブでした。どちらもmax-heightで行を折りたたんだり開いたりしますが、box-sizingを指定しないとpaddingが指定した高さの上にそのまま加算され、実際のレンダー高さが大きくなります。幅320pxの画面ではこの差が積み重なり、気づかないうちに縦スクロールが発生していました。両方にbox-sizing: border-boxを加え、狭い画面用のパディングを減らして解決しました。

掲載メディア(04)のようにtranslateX(-50%)で無限スクロールするトラックにも、よくある落とし穴があります。項目同士の間隔をgapで取ると、2周目(2N個目)の継ぎ目だけgap ÷ 2分足りなくなり、一周するたびにわずかに跳ねます。このテンプレートは最初からmargin-rightで間隔を取ってこの問題を避けていて、7a6mw6ktで開くzipの中のコードも同じ方式のままです。上の二つの落とし穴を含めて、9つは表のとおり正確に動く最新の状態です。

アクセシビリティ

9つ全部がprefers-reduced-motion: reduceで装飾的な遷移とアニメーションを止めますが、状態そのものは残ります — 沿革の進捗バーは埋まったまま、フィルターした一覧は折りたたまれたまま固定され、数字ハイライトのカウントアップは情報なのでそのまま続きます。メディアキット(03)のチェックボックスはネイティブのinput[type="checkbox"]なので、Tab・Spaceキーでそのまま操作できます。メディア問い合わせ(06)とプレスフッター(09)の結果文はrole="status"(aria-live)なので、スクリーンリーダーがコピー・送信の結果をすぐに読み上げます。沿革タイムライン(08)はaria-current="step"で今見ている地点を伝え、創業者の言葉(07)のドットボタンはrole="group"とaria-selectedで状態を伝えます。クリップボードコピー(06)はMDN Clipboard APIの仕様に沿っていて、対応していない環境ではtextareaフォールバックに切り替わります。

他の静的テンプレート素材はテンプレートカテゴリーに、このサイトが何を配っているかは紹介ページにまとめています。

FAQ

このテンプレートに実際の写真やロゴを使ってもいいですか？

はい、それが目的です。9つとも顔写真・ロゴの場所は図形のプレースホルダーなので、実際の画像やロゴに差し替えるだけで使えます。図形自体はdemo-tokens.scssの$subject-ink・$subject-blueの値を使っていて、舞台の背景色(イエロー・オレンジなど)は完全に別のトークンなので混ざる心配はありません。

React版はCSS版と動きが違いますか？

動作は同じです。選んだチップ・チェックボックスの状態・アクティブな引用文のような値はuseStateで持ち、変数3つ(duration・easing・color)はpropsで受け取ってCSS変数(--duration・--easing・--color)に渡します。数字ハイライト(05)のカウントアップはuseEffectの中で同じrequestAnimationFrameの処理をそのまま使います。

メディアキットのダウンロードは実際にファイルを受け取れますか？

チェックボックスの選択とボタンの有効化、完了表示はすべて実際の状態変化です。ただしデモ自体には接続された実ファイルがないため、クリックしても本当のダウンロードは始まりません。実際に使うときは各ファイル行に本物のhrefをつなぐだけで、チェック・カウントのロジックはそのまま再利用できます。