夏は怪談の季節です！
私はよく、怪談や人怖、心霊のYouTubeなどを見ています。特に「好井まさおの怪談を浴びる会」（YouTube）が好きです。
春には怪談を浴びる会の劇場版イベント、夏休み中には、タケトのゾゾッとTOWN（YouTube）という公開収録イベント、来月にはオカルト会議というイベントへ……今年は怪談づくしの年にしています👻
私は、ホラー映画などの驚かせてくるものよりも、「そこにいるようでいない」「見えないけれど気配だけがある」。そんな怪談や心霊が好きです。
怪談を見ているうちに、怪談師が恐怖を演出する技術は、私たちが普段実装しているアニメーションの技法と、とてもよく似ているなと感じました。
怪談には「視線」「気配」「違和感」などさまざまな演出があります。
今回はその中でも、怪談師の「速度」と「間」に注目します。怪談師の話術を動きに置き換えてみると、さまざまな共通点があります。
怪談とアニメーションの共通点
怪談師が恐怖を演出する技術は、アニメーションの設計（インタラクションデザイン）にも通じています。
怪談師の「話す速度」「間（ま）」「現れ方と消え方」、そして「静止しているようで静止していない微細な揺らぎ」。これらが計算されているからこそ、怪談に引き込まれ、恐怖はさらに増していきます。
これは、ウェブの実装に置き換えるなら animation-timing-function や delay、フェード、ループアニメーションを設計するアプローチと重なります。
イージング
怪談師は、言葉を等速では話しません。
「すっ」と入ってゆっくり止まることもあれば、あえて不自然に一定の速度で淡々と語り続けることもあります。
この「速度の演技」は、私たちがアニメーションを実装するときのイージングの選び方そのものです。
怪談師が話すスピードや「間」を巧みに変えて観客を惹きつけるように、アニメーションも速度変化の付け方ひとつで「心地よさ」にも「不気味さ」にも変化します。
普段は心地のよいアニメーションやインタラクションを意識していますが、少しタイミングをずらしたりするだけで、不気味なアニメーションに変わります。
非対称なフェード
消えるときは一瞬、現れるときはゆっくり。
この非対称な時間の設計が、「今、消えた……？」という驚きと、「気づいたら、そこにいた」という静かな侵食感を生み出します。
普段のUIデザインでよく使われる、同じ時間をかけて行ったり来たりする「対称なフェードイン・フェードアウト」とは異なり、時間差をつけることで「消えた」ことと「現れた」ことの印象を変えられます。
フルスクリーンメニューなどでは、閉じるときは早く、開くときは閉じるときよりもアニメーションを見せるように、ほんの少しだけ時間を使います。ただし、ストレスのない速度で表示することを意識しています。
少しストレスを与えることで、不気味さや静かな侵食感を生むこともできます。
完全には静止しないループ
opacity をわずかに揺らすだけで、その要素は「生きている」ように見えます。
UIではオンラインインジケータの点滅として安心を伝える技法が、文脈を変えるだけで「呼吸する何か」になります。
完全に止まっているものには「物体」という印象がありますが、ほんのわずかに動き続けることで、そこに「意思」や「生命」のようなものを感じさせることができます。
遅延（delay）が生む「間」
アクションと反応のあいだに一拍の遅延を入れると、原因と結果が切り離され、そこに違和感が生まれます。
私たちが目指す心地よいUIの世界では、1ミリ秒でも速く反応する「サクサク感」です。
怪談ではその「ワンテンポ遅れてやってくる反応」こそが、恐怖を膨らませる最大のスパイスになります🧂
同じ delay が、片方では「もっさりしたストレス」になり、片方では「ゾクッとする技法」になる。この表裏一体さが実に面白いところです。
違うのは向きだけ
イージング・非対称なフェード・ループ・遅延といったアニメーションは共通で、違うのは向きだけです。
普段はユーザーを安心させる「心地よいUI」を意識して実装していますが、この向きを反対にするだけで、あえて不安や違和感を演出する「ホラー表現」を作ることができます。
animation-timing-function は「速度の演技指導」
同じ動き（台本）であっても、animation-timing-function（間の取り方）を変えるだけで、怪異の表情や感じ取り方がガラリと変わります。
それぞれの動きについて、怪談での演出にあわせて役割を整理してみました。
ease-out（速→遅）——「出現」と「意思の宿り」
すっと現れて、最後にじわっと止まる動きです。
終盤で減速する動きは「そこに到着した・留まる」という意思を感じさせます。無機質な要素に命や人格を吹き込みたいときにピッタリです。
ease-in（遅→速）—— じわじわ迫る「接近の二段構え」
動き出しが遅いため、最初は「……ん？ 動いてる？」と油断させ、後半で「うわ、来た！」と一気に加速します。
普段のUIでは、例えばモーダルを閉じる時などに使うことがありますが、ホラー演出に転用すると、じわじわ圧迫感を高めて迫ってくる怪異を作ることができます。
ease-in-out（遅→速→遅）——「浮遊」と「呼吸」
動き始めと終わりが滑らかなので、永遠にループさせても視覚的なストレスが少ない動きです。
ゆらゆら揺れる振り子や、暗闇でゆっくり呼吸するように明滅する光、フワフワと漂う幽霊の表現には相性が良いと感じています。
linear —— 感情を一切持たない「機械的な怪異」
普段はローディング表示などで使いますが、スピードの変化がない動きには「意思」や「人間味」を感じにくくなります。
だからこそ、何の感情も目的も感じ取れないまま、一定の速度で近づいてくる人影は、大声で襲いかかってくるゾンビよりもずっと気味が悪く感じます。
steps(n) —— カクカク動く「デジタルの怪異」
文字がバグるグリッチなどで、使うことができますが、ホラーな演出にも効果的です。
本来は滑らかに動くはずの物体がコマ送りのように動くと、普段とは異なる動きとして認識し、不気味さを感じさせます。
animation-timing-function のまとめ
- 「アナログな怪異」は滑らかに、「デジタルの怪異」はカクカク動かす
- 本来滑らかな動きに「補間」を許さないことで、不穏な違和感を生み出す
animation-timing-function一つで、心地よさも不気味さも自在につくれる
まさに怪談師が「間」ひとつで会場の空気を一変させるように、普段の心地よいアニメーションもスピードの緩急を少しずらすだけで、一気にゾクッとする不気味な演出へと変化します。
animation-timing-function や delay は「体験」に合わせて適切に使う
普段のUI実装では、1ミリ秒でも速く心地よく反応することがユーザーにとって「いい体験」です。
例えばフォーム送信ボタンを押した後に「送信しました」が少し遅れて表示されると、ユーザーは「もっさり感」や違和感を覚えます。
ですが、この「ワンテンポ遅れてやってくる反応」こそが、恐怖を際立たせる「演出」になります👻
普通のウェブサイト
「送信する」をクリック → 少し遅れて「送信しました」
ホラー演出
「ごめんください」をクリック → 一拍置いて……「ーー…はい」
このように、animation-timing-function や delay の使い所をコントロールし、ユーザーが求める体験に合わせて適切に届ける実装が大切です。
怪談や心霊は「怖い」と分かっているから成立する
お化け屋敷は、「ここはお化け屋敷です」と分かっているから成立します。
怖い演出を楽しめるのは、そこへ入る前に「これから怖い体験が始まる」と分かっているからです。予告のない恐怖や不快感は、ユーザーにとってはただのストレスになってしまいます。
普段の実務で使う一般的なウェブサイトやUIでこうした演出をそのまま入れてしまうと、当然ユーザーの体験を損ねてしまいます。こうした演出が生きるのは、イベントサイトやキャンペーンページ、作品としてのウェブコンテンツなど、世界観やエンタメ体験を共有できている前提や空気感があってこそです。
私は怪談や心霊スポットの映像が好きですが、そうした演出を好まない人もいます。
だからこそ、実サイトでこういった演出を使うときは、prefers-reduced-motion に対応し、演出を抑えられるようにしておくことも大切です。
@media (prefers-reduced-motion: reduce) {
.obake {
animation: none;
}
}実は私自身、以前この prefers-reduced-motion の実装で苦い経験をしたことがあります。
以前担当した実装で、JS側で prefers-reduced-motion を設定したところ、特定のデバイスで表示がかなり重くなる問題が発生しました。
当時は、公開直前だったこともあり、原因を特定しきれないまま、最終的にはこの設定を削除することで問題が解消しました。アクセシビリティを考えると、原因を特定し、パフォーマンスを考慮しつつ実装すべき点でした。
アクセシビリティのための設定であっても、環境によっては思わぬ挙動につながることがあります。
この経験もあり、prefers-reduced-motion を使用するときは、設定するだけで終わりにせず、実際の環境で表示やパフォーマンスまで確認することの大切さを実感しました。
「どう動かすか」だけではなく、「どんな体験を期待している人に届けるか」まで含めて設計することが大切です。
さいごに
今回は、怪談師が恐怖を演出する技術を、アニメーションの視点から考えてみました。
怪談の「間」や「気配」は、animation-timing-function や delay、フェード、ループといった、普段私たちがアニメーションで使っている技法と重なります。
自分の好きなことをフロントエンドと掛け合わせて考えてみると、新しい発見があってとても楽しかったです👻
次回は、今回考えた「間」や「不気味さ」を、実際にCSSでどう表現できるのかを紹介します。
