余白を生かす

Webページの余白を見る・感じる・生かす拡張機能

拡張機能：余白を生かす（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サイトに隠された「沈黙の設計図」を探しに行きましょう。