余白を生かす

About

拡張機能：余白を生かす（The Silent Ruler）
「Webサイトは、情報の集まりではなく、呼吸する空間である。」

普段、私たちが無意識に通り過ぎているWebページの「余白」。この拡張機能は、その何もないはずの空間を「見る」「感じる」「生かす」という3つのアプローチで可視化し、Web空間の美学を体験するためのツールです。

デザイナーや開発者の方はもちろん、Webデザインの美しさを深く味わいたいすべての方へ。

🎨 3つのモードで体験する「余白」の姿
この拡張機能には、目的に合わせて自由に組み合わせられる3つのモードが搭載されています。

1. 余白を「見る」：墨消しモード
情報のノイズを取り除き、Webページの「骨格」を露わにします。

情報の抽象化：テキストや画像をすべてブロックで塗りつぶし、レイアウトの構造だけを浮き彫りにします。

深さの可視化：要素の重なり（階層）が深いほど色が濃くなるため、ページがどのような層で構成されているかが一目で分かります。

2. 余白を「感じる」：計測モード
空間の距離を正確に捉え、設計者の意図を数値で確認します。

直感的なルーラー：マウスを動かすだけで、上下左右の余白（px）を赤いラインと数値でリアルタイムに表示します。

デザインのデバッグ：余白のバランスや一貫性を確認する、実用的なツールとしても活用できます。

3. 余白を「生かす」：体験モード（おすすめ！）
静止したWebページを「生きている空間」へと変貌させます。

鼓動するサウンド：マウスの動きに合わせ、心臓の拍動音が鳴り響きます。情報の密度が高い場所では鼓動が速まり、ゆったりとした場所では静かに波打ちます。

生命の躍動：マウス下の要素が心臓のように拍動し、あなたの歩いた軌跡には赤い波紋が広がります。

🛠 シンプルな操作と安心の設計
かんたん操作：アイコンをクリックして、使いたいモードにチェックを入れるだけ。複数のモードを重ねて使用することも可能です。

サイトごとに記憶：お気に入りのサイトは「見るモード」、作業中のサイトは「計測モード」など、ドメインごとに設定を保存できます。

軽快な動作：最新のブラウザ技術（Manifest V3）に対応。Web Audio APIやCSS3アニメーションにより、PCに負荷をかけず滑らかに動作します。

🌟 こんなあなたに
Webデザイナー・開発者：余白の設計を直感的に、かつ数値で確認したい。

デザインを学ぶ学生：一流のサイトがどのように空間を贅沢に使っているかを学びたい。

ネットサーフィンに新しさを求める方：情報の海から一歩引いて、デジタル空間の「静寂」を楽しみたい。

さあ、この拡張機能をオンにして、いつものWebサイトに隠された「沈黙の設計図」を探しに行きましょう。