デザインで感情体験を設計した実験

マットの上では、反応する前に一呼吸おくことを何度も練習している。 息を長く吐いて、詰まったところをゆるめて、それから次の動きに入る。

でも、マットを降りた日常ではどうだろう。 ムカッとした瞬間に、そのまま言い返してしまったり、頭の中で同じ場面を何度も再生してしまったり。呼吸のことなんて、すっかり忘れている。

そんな「マットの外の一呼吸」をつくれないかと思って、ひとつWebアプリをつくってみたので紹介したい。

ANGER PAUSE

ムカつくね。 今日は、ここに置いていっていい。

無料で使えて、登録もいらない。数十秒あれば体験できる。

▶ ANGER PAUSE を開く

ANGER PAUSE

怒りを感じた時に、
一度立ち止まり、
感情を整理するためのシンプルなWebアプリです。

特徴

• シンプルな1ページ構成
• 感情を落ち着かせるためのインタラクション
• ブラウザだけで動作（インストール不要）

---

これは「怒りをなくす」アプリではない

まず伝えておきたいのは、これは怒りを消したり、無理やり前向きにさせたりするためのアプリではない、ということ。

怒っている人に「落ち着いて」「気にしないで」と言うのは、たいてい逆効果だと思う。まだ熱があるうちに正論を渡されても、受け取れない。ヨガでも、硬いところを無理に伸ばそうとすると、身体はかえって縮こまる。

だからこのアプリは、真逆のことをする。 最初に「それはムカつくね」と、まず受け止める。そこから少しずつ、身体・視線・時間を自分のほうへ戻していく。そして最後に、**「今日は決めなくていい」**と伝えて終わる。

コンセプトを一言でいうと、怒りを否定せず、安全に一旦置いていける場所。 怒りをなくすためではなく、怒りの中で自分を見失わないための場所。

体験の流れは、こんなふうに設計した。

怒りを受け止める → 吐き出す → 身体へ戻る → 呼吸する → 今日は決めない

これはそのまま、練習の流れにも似ている気がする。まず今の自分の状態を認めて、呼吸で外に出して、身体に戻って、答えを急がない。

---

体験の中身 —— 5つの場所を通り抜ける

アプリはスクロールで進んでいく縦一本の構成で、6つのセクションからできている。ページを下へ進むごとに、背景の色が「暗い赤黒 → 中間のグレー → 青みのある淡い色」へと少しずつ明るくなっていく。スクロールすること自体が「少しだけ熱が下がったかも」という体感になるように組んだ。

01. HERO —— まず受け止める

最初の画面は、いちばん暗い。黒に近い赤紫のグラデーションの上に、「ANGER / PAUSE.」の大きな英字と、こんな言葉が置いてある。

ムカつくね。 誰かにわかってもらえなくてもいい。 正しく説明できなくてもいい。 今日は、ここに置いていっていい。

ここで「何があった？」に進むか、「言葉にしたくない」で気持ちを飛ばして先へ行くか、どちらでも選べる。言葉にできないほど疲れている日もあるので、逃げ道は最初から用意しておいた。

02. WRITE —— 書いて、燃やして、手放す

いちばん力を入れたのがこの画面。誰にも見せないテキストエリアに、今頭の中にあることをそのまま書く。きれいな言葉じゃなくていい。

書いている最中、入力した単語が背景にぼんやりと大きな英字タイポグラフィとして浮かび上がる。頭の中でぐるぐるしている言葉が、少しだけ目に見える形になる感じ。

そして「今日はここに置く」を押すと —— 書いた文字が炎に包まれて、燃えて消える。

最初は単純に文字を薄くして消すつもりだったけれど、作っているうちに「置いていく」よりも「燃やして手放す」ほうがこの体験に合うと思って、キャンバスで炎のアニメーションを組み直した。テキストの枠がじわっと赤く熱を帯び、下から炎の塊が立ちのぼり、文字がぼやけて溶けていき、最後に画面が暗く沈む。そのあと、静かにこの一文が浮かぶ。

Released. 言葉と一緒に、怒りを手放した。もう、持ち続けなくていい。

派手な効果音も、紙吹雪も、「よくできました」もない。ただ、静かに消える。それでいいと思った。

大事なのは、書いた言葉はどこにも保存されないこと。 ブラウザにも、サーバーにも、何も残さない。画面を閉じれば、そこに書いたことは本当に消える。安心して吐き出せる場所にしたかったので、ここは技術的にも徹底した(後述)。

03. CHOOSE —— ひとつだけ選ぶ

背景がぐっと明るくなって、選択肢が並ぶ。

いま、できそうなのはどれ？ 大きく変えなくていい。ひとつだけ選べばいい。

「30秒、息を吐く」「肩を下げる」「水を飲む」「別の部屋へ行く」「5分だけ歩く」「今日は返事をしない」「何もしない」。

どれも、今すぐできる小さなこと。「何もしない」も、ちゃんとひとつの選択肢として並べてある。大きく人生を変えなくていい。今できることを、ひとつだけ。

04. BREATHE —— 身体に戻る

「30秒、息を吐く」を選ぶと、呼吸ガイドが開く。円がゆっくり膨らんで縮んで、それに合わせて呼吸する。

吸う。1・2・3・4。 吐く。1・2・3・4・5・6。

吐く息のほうを長くしているのは、そのほうが緊張がほどけるから。ヨガをやっている人ならおなじみの、副交感神経を優位にする呼吸。これを3セット。終わると「ここまでできたら、十分」と出る。

05〜06. NOT TODAY / END —— 今日は決めない

最後は、いちばん明るい余白の画面。

言い返すか。許すか。距離を置くか。続けるか。終わらせるか。 いま、決めなくていい。

怒っているときに出した結論は、たいてい後で後悔する。だから、答えを出させない。

この気持ちは、明日も同じ強さとは限らない。 だから、いまは保留にする。 あなたは、ここに戻ってきていい。

そう伝えて、また最初に戻れるようにして終わる。

---

デザインコンセプト

色 —— HEAT → HOLD → AIR

このアプリの背骨になっているのが、感情の温度を色で表現するという発想。3つの段階に分けて考えた。

段階	感情	色の役割
HEAT	怒り・圧・詰まり	黒に近い赤紫
HOLD	書いて置く・保留する	鉛色、煙のようなグレー
AIR	呼吸・距離・余白	青みのある淡いグレー

そこから11色のカラートークンを決めた。色を決めるうえで、自分の中でいくつかルールを設けている。

• アクセントの赤は、1画面に1か所まで。 「行動のきっかけ」の色なので、多用すると効かなくなる。
• 背景は「暗い → 中間 → 明るい」の順に。 スクロールで気持ちも少しずつ変わっていく。
• #FFFFFF と #000000 は使わない。 純粋な白と黒は冷たくて緊張する。少しだけ温度のある黒(#171518)と白(#F4F2ED)を使う。
• 赤は「怒りの色」ではなく、「まだここにある熱の色」として使う。 敵ではなく、ただの熱。

この最後の一つが、実は色選びで一番大事にした考え方かもしれない。

文字 —— 3つの書体に役割を持たせる

書体は3つ使い分けている。それぞれに役割を持たせた。

書体	役割
Roboto Condensed	英字。感情が内側に押し込められた緊張感
Zen Old Mincho	日本語見出し。怒りを静かに受け取る椅子
Zen Kaku Gothic New	本文・UI。淡々と読ませる

英字は怒りそのもの。日本語は、その怒りを追い出さずに座らせる椅子。

英字は幅を詰めた（condensed な）書体を使うことで、詰まった・張り詰めた感じを出している。日本語の見出しには明朝体を選んで、その張り詰めた感情を静かに受け止める余白をつくる。この「詰まっている英字 → 余白のある明朝」という対比が、そのまま HEAT → AIR の流れになっている。

---

技術仕様 —— シンプルに、保守しやすく

ここからは作り方の話。フロントエンドの勉強中でもあるので、少し細かく書いておきたい。

普段の仕事でも心がけているけれど、このアプリも素の HTML / CSS / JavaScript だけでつくった。フレームワークもビルドツールも使っていない。ファイルは3つだけ。

anger-pause/
├── index.html   ← 構造
├── style.css    ← 変数・リセット・レイアウト
└── main.js      ← 炎アニメ・選択肢・呼吸カウント

シンプルなものを、シンプルなまま。あとから自分で読み返して直せることを優先した。

カラートークンは CSS変数で一元管理

色は全部 :root の CSS変数にまとめてある。デザインの段階で決めたトークンを、そのままコードに落とし込む。

:root {
  /* HEAT — 怒りの残熱 */
  --color-ink:       #171518;  /* 最も深い背景 */
  --color-heat:      #4A1F2B;  /* Hero の背景 */
  --color-accent:    #C85B52;  /* 行動のきっかけ。1画面に1か所まで */

  /* NEUTRAL — つなぎ・中間 */
  --color-smoke:     #35363A;  /* テキストエリア周辺 */
  --color-stone:     #717277;  /* 補足・非アクティブ */

  /* AIR — 静けさ・余白 */
  --color-air:       #B8C4C8;  /* 呼吸ガイドの背景 */
  --color-paper:     #F4F2ED;  /* 着地点の背景 */
}

こうしておくと、色を調整したくなったときに一箇所直すだけで全体に反映される。デザイナーとコーダーを兼ねているので、この「デザイントークンをそのままコードにする」流れは特に気持ちがいい。

スクロールで色が変わる仕組みは、JSを一切使わない

背景の色温度が変わっていく演出は、JavaScript を使っていない。各セクションに背景色を指定して、min-height: 100svh で画面いっぱいに広げているだけ。あとはスクロールすれば、自然に色が切り替わっていく。

section {
  min-height: 100svh;      /* モバイルのアドレスバー対策で svh */
  display: flex;
  align-items: center;
}

.s-hero    { background: linear-gradient(160deg, #171518 55%, #4A1F2B 100%); }
.s-write   { background: #35363A; }
.s-choices { background: #D9D9D5; }
.s-breath  { background: #B8C4C8; }
.s-decide  { background: #F4F2ED; }

CSSでできることはCSSでやる。JSに頼らない分、動きも軽いし、壊れにくい。100vh ではなく 100svh（small viewport height）を使ったのは、スマホでアドレスバーの分だけ画面がずれるのを防ぐため。地味だけど、体験には効いてくる。

「保存しない」を、技術で保証する

「書いた言葉は保存されない」というのは、コピーの上での約束であると同時に、実装としてもそうなっている。

localStorage にも sessionStorage にも、何も書き込まない。サーバーにも送らない（そもそもバックエンドがない、GitHub Pages に置いた静的サイト）。炎のアニメーションが終わると、テキストエリアの中身は value = '' で消える。ページをリロードすれば、当然すべて消える。

安心して吐き出せる場所であるために、「消える」を演出だけで終わらせず、実装レベルで担保する。ここは譲らなかったところ。

炎のアニメーション —— Canvasと時間管理

一番手強かったのが、文字が燃えて消える演出。<canvas> に 2D で描いている。

炎は、大きな「炎の塊(blob)」と、上にたなびく「煙(wisp)」の2種類の粒子を、たくさん生成して動かしている。それぞれ radial gradient（放射状グラデーション）で描いて、globalCompositeOperation = 'screen' で重ねると、光が重なって燃えているように見える。色は hsla() で指定して、時間とともに少しずつ色相をずらしている。

そして全体は、一本のタイムラインで管理している。「いつ枠が熱を帯びるか」「いつ炎が立ちのぼるか」「いつ文字が消えるか」「いつ暗転するか」を、開始からの経過時間(ミリ秒)で切り替える。

const T = {
  HEAT_FULL: 2400,   // 枠が完全に熱を帯びる
  BLOB_START: 2000,  // 炎が立ちのぼりはじめる
  TEXT_FADE: 4500,   // 文字が消えはじめる
  WISP_START: 7500,  // 煙が残る
  CURTAIN: 12000,    // 暗転
  TOTAL: 14000,      // 全体で14秒
};

requestAnimationFrame で毎フレーム経過時間を見て、この時刻表に沿って各演出を出し入れしている。約14秒という長さは、短すぎると手放した気がしないし、長すぎると間延びする。この長さを見つけるのに、何度も自分で押しては確認した。

呼吸ガイドは setInterval でカウント

呼吸のカウントは、1秒ごとの setInterval。「吸う4カウント → 吐く6カウント」を1セットとして、3セット数えたら止まる。円は transform: scale() で膨らませたり縮めたりして、呼吸のリズムを目で追えるようにしている。ここも特別なライブラリは使っていない。

---

つくってみて思ったこと

このアプリをつくる前、コンセプトとコピーとカラー、タイポの設計をぜんぶ先に決めてから、コードを書きはじめた。デザイナーとコーダーを両方やっていると、「先に世界観を固めてから実装する」という順番が、自分にはしっくりくる。

技術的には難しいことはしていない。素のHTML/CSS/JSと、少しのCanvas。でも、色の一段階の明るさ、書体の選び方、炎が消える14秒の長さ —— そういう細部の積み重ねが、「怒りを置いていけた」という感覚をつくるんだと思う。

これは、怒りをなくすためのアプリではない。 怒りの中でも、自分を見失わないための、ほんの数十秒の余白。

マットの上で一呼吸おくように、マットの外でも一呼吸おけますように。 よかったら、ムカッとした日に使ってみてください。

▶ ANGER PAUSE を開く

技術：HTML / CSS / JavaScript ｜ 無料・登録不要・データは保存されません