しっくりくるデザイン・50のルール「コントラスト」編

こんにちは！ためしてねっとのシゲです。

「ドキュメントデザイン」で最も重要な50のルールをまとめた「Color CRAYON-TIP Method」より、

今回は、「Contrast（コントラスト）」について解説です。

コントラストとは？

コントラスト（contrast）は、一般にはある注目物体とそれ以外の背景とが区別できるような視覚的な特徴の差をいうが、特に画像においては最も暗い部分と、最も明るい部分の輝度の差のことをいう。実世界の視覚においては、同じ視野内での色または輝度の差のことである。 Wikipediaより

比較した時の「差」のことですね。

Contrast（コントラスト）

◆その1：カラー

明瞭さと視覚的な興味を引くには対照的な色使いがベター。

対照的な色使いとは？

▼下図色相環で、正面の位置にある色を『補色』 ▼正面の色の隣近辺の色を『反対色』このふたつ（補色と反対色）に沿った色使いが「対照的な色使い」になります。

しかし！補色・反対色の関係にある色同士があまりにもくっついている状態になっていると目がチカチカし、どぎつい色合いになるので注意です。

■■どうでしょう？

そこで補色・反対色には、間にクッションとなる色を挟んだ方が見やすくなります。

クッションとなる色は無彩色の色（白・灰・黒）やトーン（濃淡）の違う色を利用するといいですよ。

■■■どうでしょう？
■■■どうでしょう？

◆その2：サイズ

ドキュメントの中で最も重要なテキストは、サイズをできるだけ大きくして太字にします。

こんな感じ♪

重要なメッセージは
大きく太く！

その他は小さく！その他は小さく！その他は小さく！
その他は小さく！その他は小さく！その他は小さく！
その他は小さく！その他は小さく！その他は小さく！
その他は小さく！その他は小さく！その他は小さく！

これで、大小のメリハリ（コントラスト）がつきますね。

◆その3：フォント

フォントは1種類に固定せず、異なるfont-familyを使いましょう。セリフ部分のフォントを変えるだけでも大きく違った印象を与えます。

フォントとは、「書体・文字」のこと。

▼マンガのセリフなどは、漢字がゴシック体（四角っぽい書体）で、その他が明朝体（細くとがった感じの書体）で構成されています。出典：漫画の好きなセリフ

◆その4：強調表示

ドキュメントを強調表示する場合は、どんなに多くても全体の10％以下、もしくは2度か3度まででにとどめて下さい。例えば、全てのテキストを太字にしても、効果が薄いのは明白です。

すべてがデカデカでは駄目ですね（笑）

◆その5：テキストを重ねる位置

テキストを画像の上部に配置したり、透かしを入れて配置する場合は、背景との干渉や視覚的なノイズを軽減するため、ハッキリ対比するように配置しましょう。

これは、「その1：カラー」の色相環を参考にするとうまくいきます。
赤っぽい写真と水色系の文字を実際に写真のうえに配置するとよくわかります。
重ねる位置は、色が混同しない所がベスト。
下の写真だと、トマトのへたの部分などは×ということになります。コントラストの５つのルール。色の濃淡や無彩色（白・灰・黒）をバランスよく使うことがしっくりくるデザインの鍵ということですね。