深夜３時、目が死んだ状態で画面を見ても内容わかりますか？UIテストするツールを作ってみた

画面をずっと見てると目が疲れてだんだん内容理解するのに時間かかるようになるじゃないですか。
スクロールしてても読めてなかったり、途中で理解できなくなっていることに気づいて戻ったり。
Xを見てて認知負荷が高いの作らないで～って嘆きが流れてきたので、大量のコードに慣れてしまった人でもお手軽に負荷をかけて、ユーザーの負担を軽減出来たらいいなと思いました。
世の中万全な状態でアプリとか触ってくれる人ばかりじゃないので、自分の疲労状態を再現して視覚が終わっててもなんとなくわかるかテストできるといいんじゃないかなと思いました。

クソネミ状態のときの自分の視界をだいたい再現しています。視界のかすみ＋ブレですね。
バイブコーディングでさっと作成してもらいました。

• blur 1〜3px で変動
• 数秒おきに 8Hz・振幅4px の振動バースト
• body に CSS で適用しているだけ

スタイリッシュなFigmaのページは全く問題なく理解できますね。
でも世の中のページは全部こうなってるわけじゃないですよね。

情報量が多いページ、余白が少ないページ、文字が小さいページ。クソネミ状態で開いた瞬間に「寝るか」ってなるやつ。

自分はエンジニアじゃありませんが、仕事の専門領域の文書なら読み方は染みついているので目が死んでても時間はいつもよりかかりますが理解できます。
それと同じでエンジニアの方々もコードやページを毎日何時間も見てると、多少ごちゃごちゃしてても読めてしまうと思うんですよね。
でもそれって自分が慣れてるからわかるだけで、普通の人には難しいUIになってる可能性がある。
1ページごとの情報量とかは皆さんこだわっていると思うのでそっち方面には手を出しませんが、見る人間のコンディションはこっちのこだわり関係ないですよね。
このスクリプトをコンソールに貼り付けると再現できるので試してみてください。

      
let t = 0, blurT = 0, animFrame, burstTimer, bursting = false, burstEnd = 0, active = false;

function loop(now) {
 blurT += 0.03142;
 const blur = 2 + Math.sin(blurT);
 document.body.style.filter = `blur(${blur.toFixed(2)}px) drop-shadow(5px 0px 2px rgba(0,0,0,0.3))`;
 if (bursting) {
   t += 0.8378;
   document.body.style.transform = `translateX(${Math.sin(t) * 4}px)`;
   if (now >= burstEnd) {
     bursting = false; t = 0;
     document.body.style.transform = 'translateX(0px)';
     burstTimer = setTimeout(startBurst, 2000 + Math.random() * 2000);
   }
 }
 animFrame = requestAnimationFrame(loop);
}

function startBurst() {
 bursting = true;
 burstEnd = performance.now() + 500 + Math.random() * 500;
}

function fatigueOn() {
 if (active) return;
 active = true;
 btn.textContent = 'Fatigue OFF';
 btn.style.background = '#ff5050';
 startBurst();
 requestAnimationFrame(loop);
}

function fatigueOff() {
 active = false; bursting = false; t = 0; blurT = 0;
 cancelAnimationFrame(animFrame);
 clearTimeout(burstTimer);
 document.body.style.filter = 'none';
 document.body.style.transform = 'translateX(0px)';
 btn.textContent = 'Fatigue ON';
 btn.style.background = '#6c6eff';
}

// ボタンを生成
const btn = document.createElement('button');
btn.textContent = 'Fatigue ON';
Object.assign(btn.style, {
 position: 'fixed', bottom: '24px', right: '24px', zIndex: '999999',
 background: '#6c6eff', color: '#fff', border: 'none',
 padding: '12px 20px', borderRadius: '8px',
 fontSize: '14px', fontWeight: '700', cursor: 'pointer',
 boxShadow: '0 4px 16px rgba(0,0,0,0.4)', fontFamily: 'sans-serif'
});
btn.onclick = () => active ? fatigueOff() : fatigueOn();
document.documentElement.appendChild(btn);

    

右下にボタンが出るのでそれを押すだけです。自分が作ったページで試してみてください。

今後やりたいこと

• 要素同士が衝突したときに「ここ余白足りない」と検出してレポートする機能
• AIがどこが問題か画面上に直接マーキングする機能
• Chrome拡張として配布してどのサイトでもワンクリックで使えるようにする
• 疲労のレベルを段階的に上げてより過酷な状態でテストする機能

需要ありそうですか？使ってみたいと思ったらいいね押してもらえると作る気力が出ます。