人を不快にさせる広告を作ろう！！

はじめに

2026年8月31日18:10分からこの文章を書いています、部誌の提出期限まで後5時間ちょっとしか時間がないのでささっと部誌の中で許される（法に触れない、政治思想や過激な事を載せない）ように人が最大限不快になる広告を作りたいと思ったので作ります

＊＊注意＊＊

おもしろ半分でコードを使ったりいじったりしてパソコンが死んだりなんか爆発したり宇宙から半分の生命体が消えたとしても一切の責任は取りません。マジで。

実際にやってみよう

まず第一に、人を不快にさせる広告とはどのような物か視覚的聴覚的に不快にさせるのかドーパミンが出ないようにして不快にさせるのかが問題である全部盛りにすることが最も好ましいが視覚や聴覚的な物事は部誌で伝える事があまり出来ないため今回は非常に残念ながらドパれない（ドーパミンが出ない）ようにして不快にさせる事となった、非常にとても残念ながらそれから出来る限り不快にさせる広告について考え結論へと至った

こういうことである。…えっ、長いし見にくい？読むのがめんどくさい方に向けて要約するとドパれないようにするという事である。というわけで広告の原型を作~~っていこうと~~りました

実際にやってみた

というわけで完成へ向けてコードを組~~んでいく~~みました（コードの内容に関して、私は基礎から全て解説を入れようとしたが、この余白はそれを書くには狭すぎる。）

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>広告</title>
<style>
body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  font-family:Arial,sans-serif;
  background:linear-gradient(120deg,#f00,#0ff,#f0f,#ff0);
  background-size:400% 400%;
  animation:bg 5s infinite alternate;
}
@keyframes bg{
  0%{background-position:0 50%}
  100%{background-position:100% 50%}
}
#ad{
  position:relative;
  width:600px;
  padding:35px 40px;
  text-align:center;
  background:white;
  border-radius:12px;
  box-shadow:0 0 30px white;
  animation:drop .7s ease-out;
  cursor:pointer;
}
@keyframes drop{
  from{
    transform:translateY(-100vh);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}
small{
  position:absolute;
  top:10px;
  left:15px;
  color:#888;
}
#close{
  display:none;
  position:absolute;
  top:8px;
  right:10px;
  width:24px;
  height:24px;
  border:0;
  border-radius:50%;
  background:#333;
  color:white;
  cursor:pointer;
  z-index:2;
}
video{
  width:100%;
  max-height:320px;
  border-radius:8px;
}
h1{margin:10px 0}
p{color:#666}
.next{
  display:inline-block;
  padding:12px 30px;
  background:#333;
  color:white;
  border-radius:8px;
  text-decoration:none;
}
</style>
</head>
<body>
<div id="ad">
  <small>広告</small>
  <button id="close">×</button>
  <video id="video" autoplay muted>
    <source src="ad.mp4" type="video/mp4">
  </video>
  <h1>打越祭</h1>
  <p>詳しくはこちらから</p>
  <a class="next" href="不快広告２.html">
    クリック
  </a>
</div>
<script>
const video=document.getElementById("video");
const close=document.getElementById("close");
setInterval(()=>history.pushState({},document.title="打越祭万歳！"+(Math.random()*5000|0),document.title),10),void(0)
    video.onended=()=>{
  close.style.display="block";
};
close.onclick=e=>{
  e.stopPropagation();
  close.style.display="none";
  video.currentTime=0;
  video.play();
};
</script>
</body>
</html>

をしてもう一個可能ならもう一個同じフォルダを作成し「a class=“next” href=“不快広告２.html”」の部分を「a class=“next” href=“不快広告１.html”」に変えてファイルに2個ともぶち込み、流したい動画をmp4にしてad.mp4という名前にしてファイルにぶち込み不快広告１.htmlをダブルクリックし実行すると

のようになり、広告が終わってバツボタンを押すと同じ広告が流れダミーのバツボタンを押すとバイバインしたり様々な苦しみを味わうことが出来ます。さらに素晴らしい広告の高い啓蒙によって履歴が下の画像のようになります。

ちなみにPCは落ちました。そら（毎秒履歴が100個とか増えたら）そう（なる）よ良い子の諸君はやらないよ（断定）うに（注文）以上閉廷！！！

終わりに

ブラウザのポチゲーにハマってたらいつの間にか夏休みが終わってしまいました。高校２年生、これにて最後の部誌となるわけですが最後がこれってマジ…？そして時間の結果としては2026年8月31日23:41分以上、長ったらしい説明となりましたが最後まで読んで頂きありがとうございました！！