人は目に入ってきた光で刺激を受け、それを脳に伝え記憶や経験と結びつけることで色や形など様々な情報に変換しています。
それらの情報は感情を変化させたり、体調をよくすることもあれば悪くすることもあります。その中でも色は、温度や質感を与えたり感情を変化させる情報です。
そこであえて色という情報をなくすことで、それ意外の情報がわかりやすくなります。

モノクロでバランスをみるというプロセスを

色がなくなりモノクロになると、光の強さとものの形がわかりやすくなります。
光が強くなれば白く軽く、弱くなれば黒く重く感じます。
ものの形が変わると、そのものだけではなく周りの空間の面積も変わりり、黒い面積が増えると重く感じそれに伴いバランスも変わってきます。
ものをデザインしていく上でモノクロにしてバランスを見るというのは実はかなり重要なプロセスなのです。

ウェブデザインでもやってみよう

ウェブサイトやアプリのデザインでも同じことです。(やっと本題ですね前置き長すぎた)つくったモックアップをモノクロにするのはもちろん、すでに稼働している運営サイトもにして確認し改善につなげることができます。
そこで便利なのがブラウザ拡張機能「(un)clrd」

(un)clrd

(un)clrd

はてブ数

http://www.unclrd.com/

(un)clrd

FirefoxとChromeの拡張機能として公開されています。インストールするとアイコンがつくられるので、それをクリックすれば途端にモノクロになります。

いろんなサイトで試してみる

Adobe Color CC

Adobeのカラースキーマツールです。青や赤ってかなり重たい色なんですよね。

Adobe Color CC
Adobe Color CC(モノクロ)

Apple

元々色が少なく大きく変わらない。青文字のテキストリンク以外、クリックできる領域(グローバルナビやボタン、画像リンク)にはモノクロでも影響がほとんどない。

apple.com
apple.com(モノクロ)

このブログ

上の見出し(緑背景のところ)とボタンの背景色と文字色のコントラストが弱い。下の無駄空間もなんとかしたいところ。

アンギス
アンギス(モノクロ)

今村さんのとこ

重たくなりがちな広告や大きめサムネイルを右側に寄せてます。一時期左側カラムに広告を置くのが流行ったりしたけど、左上のロゴとのバランスを考えるとやっぱりこの配置が見やすいですね。

今村さんとこ
今村さんとこ(モノクロ)

ホホさんのとこ

アイコンの主張がすごい。でもその上下にもレクタングルな画像を配置してバランスを取ってますね。

ホホさんとこ
ホホさんとこ(モノクロ)

でこいさんのとこ

ブログはとくにサムネイル画像とそのサイズによっては重たくなってしまいがち。ヘッダーの領域を大きく重くすると、メインカラムが重たくなりすぎるのを抑えられる。しかしXperiaはカラーバリエーションが多くてもバランスが素晴らしいですね。商品画像をつくる際は適当に並び替えたりせず、公式が使ってる並びを参考にするのは重要です。

でこいさんとこ

でこいさんとこ(モノクロ)

まとめ的な

大きな画像を使えばインパクトを与えられるけど、バランスが難しいですね。特にブログ記事のアイキャッチ画像なんかはどんどん更新されますし、書きかけの記事のアイキャッチ画像がトップに表示された時のバランスを検証するのは骨が折れる作業です。
トップのインパクトを重視するあまりにバランスが不安定にならないように気をつけたいですね。

でこいさんとこのXperiaの画像のように、なんとなく並べてるようにみえて「この並びが一番キレイにみえる」なんてのも、モノクロにすることでわかりやすくなります。
撮った写真やバナーを確認する時にも活かせられるのでこのプロセスは省かずにやりましょう(o´∀`o)

(un)clrdの拡張機能ってCSSを追記してるだけという簡単な処理。
JavaScriptのライブラリとしてボタン1つで切り替えられるようなものをつくって、クライアントに確認してもらう時に使えば便利な気がするんですよね。つくってみようかなぁ。