WebサイトをワンクリックでグレースケールにできるChrome拡張機能「(un)clrd」

スポンサーリンク

Webデザイナーさん向けのChrome拡張機能「(un)clrd」。

Chromeにインストールすれば、クリックひとつでWebサイトをグレースケール化するというだけの、単純明快な機能を持つ拡張機能で、色味をなくすことによって明度を尺度としたデザインの構造設計をチェックすることができます。

(un)clrd
(un)clrd – The world wide web in black and white!

サイバーエージェントの公式クリエイターズブログ「1 pixel」で、新卒デザイナーさんの書いた記事が昨日話題になっていて、そういえばこういう拡張機能あるけど紹介してなかったなーと。乗っかり商法っぽいですけど気にしない。

美大とかデザイン系学校出身の人なんでしょうかね? 非常にわかりやすくまとまっているので、ぜひ一度目を通してみてください。これで新卒とか恐ろしいわー。

(un)clrd

「アンカラード」とでも読んだらいいのかな? ちといまいち読み方が正しいのかどうかわかりませんが、Webデザインを仕事にしている人にとってはとても便利。

Webサイトの全ての要素をグレースケール化してくれます。たとえFlashであろうと、たとえYouTubeなどのHTML5ビデオだろうと、「(un)clrd」のボタンをワンクリックしてしまえば、常時グレースケール。色のない(わけじゃないけど)世界ですよ。

ワンクリックして「(un)clrd」を起動すれば、あとはどのタブを見ても、ページを遷移してもすべてグレースケール化されるので、いちいちクリックする必要がありません。
ふたたび元のカラーに戻すには、再度「(un)clrd」のボタンをクリックすればいいだけ。とてもお手軽です。

モバデビをグレースケール化

モバデビをグレースケール化してみたのがこちら。
というか、先日グレーをベースに明度で構成を組んじゃったので、グレースケール化してもあんまり印象が変わらないですね。。

うちをグレースケール化してパッと見えてくるものはやっぱりリンクカラーでしょうか。カラーの時は#0066ffと少し明るめの青色ですが、グレースケールにするとほぼ地のテキストカラーと見栄えが変わりません。アクセシビリティ的にいかがなものか? っていうところですかね。ホバー時にアンダーラインが出るようにはなっていますが、もう少しリンクだということをわかりやすくしておいたほうがいいのかもしれません。

Webデザインの良し悪しは明度だけで語れるもんじゃありませんが、こういう便利なツールを使いつつ、デザインの各検証を進めていくといいんじゃないかなと思います。

ChromeだけでなくFirefoxのエクステンションも配布されているので、Firefoxをメインに使う人もどうぞ。

「Google Chrome」新着記事

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

全角英数を強制的に半角英数に変換するChrome拡張機能「goodbye “Zenkaku“ – さよなら全角英数」

Avatar for ホシナ カズキ

ホシナ カズキ

「Responsive Web Design Tester」が手軽にモバイル表示をチェックできすぎる件

Avatar for ホシナ カズキ

ホシナ カズキ

Google Chromeに厳選して入れている拡張機能とアプリまとめ (2015年版)

Avatar for ホシナ カズキ

ホシナ カズキ

Google検索結果にシェア数を追加するChrome拡張「BUZZ RANKER」

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく