【イヤシロチWEB研究録 #03】情報の棘を抜く「葉の減衰モーション」 〜自然界のしなやかさをUI（イージング）に実装する〜

■ 1. はじめに（情報の暴風雨とデジタルの棘）

現代のインターネット空間は、
まさに「情報の暴風雨」です。

スクロールするたびに、

文字や画像が下から上へ
「パッ！パッ！」と

直線的かつ暴風のような
スピードで現れます。

この「不自然に急停止する動き」は、
人間の脳に微細な衝突（ノイズ）を与え続け、

無意識のうちに
交感神経を逆撫でしています。

自然界に目を向けると、
強風や激しい雨が降っても、

森の木々が折れることは滅多にありません。

なぜなら「葉っぱ」が風を受け流し、
しなり、雨粒を分散させることで、

エネルギーを「減衰」させているからです。

今回はこの「葉の減衰効果」を
WEB上のアニメーション（モーション）に翻訳し、

情報という強風を

「心地よいそよ風」に変える実験を行います。

■ 2. 減衰モーションの理論（仮説）

物が動いて止まるまでの速度変化を、
WEBデザイン用語で「イージング（Easing）」と呼びます。

一般的なWEBサイトは
「Linear（一定速度）」や、

短い秒数での
「Ease-out（急ブレーキ）」が使われます。

これは壁にボールを叩きつけるような動きです。

イヤシロチWEBでは、

これを「風を受けた枝葉のしなり」
に置き換えます。

情報が現れるとき、

一度フワッと
風の方向にしなり（行き過ぎて）、

そこからゆっくりと
元の定位置に戻ってピタッと止まる。

この「わずかなオーバーシュートと、
しなやかな減速曲線」が、

視覚に入る情報の「角（カド）」を取り、

脳へのショックを中和（アーシング）
してくれるはずです。

■ 3. デジタルへの翻訳（369イージングと雨粒のディレイ）

色、余白と同じく、

動きの速度（秒数）や
曲線のパラメータにも

ニコラ・テスラの369の法則
を組み込みます。

■ 4. 実際の体感と考察（一般的な動きとの比較）

色（インディゴとテラコッタ）と
間（108px）は完全に固定したまま、

要素が出現する「動き」だけを
切り替えて比較しました。

「一般的な動き（0.3秒・直線的）」は、

やはり情報が目に
「突き刺さってくる」感覚があり、

せっかくのイヤシロチカラーが
活ききりません。

一方、「葉の減衰モーション」に
切り替えた瞬間、

文字がまるで水面から浮かび上がるように、

あるいは風に揺れる暖簾（のれん）を
くぐるように現れました。

どんなに強いメッセージ
（例：ボタンのテキスト等）であっても、

この「葉のイージング」という
フィルターを通すことで、

押し付けがましさが完全に消え、

優しく手渡されたような感覚に変化するのを
確認できました。

■ 5. おわりに

「どう見せるか」ではなく、
「どう受け流させるか」。

WEBデザインにおいて

「情報を減衰させる」という
一見ネガティブなアプローチこそが、

これからの過刺激時代における

最高のホスピタリティ（イヤシロチ）
になると確信しました。

この気づきに「ありがとう」の言葉を添えて、
本日の実験記録とします。

次回は、
この空間の「重心」を整える、

グラウンディング（アーシング）の
レイアウトについて考察します。

第4回はこちら 👇