カラーだけではない、ウェブデザインにおける4つのコントラストの使い方
Post on:2010年9月27日
sponsors
コントラストはカラーだけではありません。
ユーザーに伝えたい重要なエレメントを適切に目立たせる4つのコントラストを紹介します。
Fully Understanding Contrast in Design
[ad#ad-2]
下記は各ポイントを意訳したものです。
通常、コントラストがテーマに扱われる時は初心者向けのものが多いでしょう。例えば書籍では、『ブラックとホワイトがコントラストをもっており、レッドとオレンジはそうではありません』と書いてあります。初心者向けの本では、コントラストはカラーのことだけが触れられており、サイズやシェイプについては触れられていないでしょう。
アマチュアのデザイナーとプロのデザイナーを区別する最も容易な方法は、コントラストの使い方をみることです。サイズを使って重要性をもった構造をつくったり、シェイプとカラーはユーザーに明瞭性を与えます。
ここでは良いユーザエクスペリエンスのために、コントラストを使った大きいサイズのタイポグラフィ、面白いシェイプ、明瞭な境界など、詳細にコントラストを見てます。
コントラストとは
コントラストとは、オブジェクを他のオブジェクトや背景から見分けをつけるためのビジュアルにおける相違と定義することができます。英語そのままの意味では、「お互いが異なっているように見えるもの」と記されています。
デザイナー、特にウェブデザイナーにはこのコントラストは基本であり、非常に重要なものです。ウェブデザイナーは常に重要性をもった階層をつくり、ユーザーを特定のエリアにひきつけ、明確で簡明なメッセージを伝えようとします。ここで、デザインの異なるエレメント間の関係をつくることは、あなたができる最も重要なことです。
あなたは今まで意識してそれをしてきたことでしょう、そうではない人もいるかもしれませんが。
コントラストの分かりやすい例としては、黒と白、大と小、早いと遅い、厚いと薄いなどがあります。反対というのは、コントラストが何であるかを理解するのに最も簡単な方法です。しかし、コントラストをデザインの仕事にとりいれる場合は、それは決して黒と白といった単純なものではありません。例えば、ある見出しとある見出し、「カートに追加する」と「チェックアウト」ボタンなど反対ではないことを比較することがあります。
これはより高いレベルのコントラストを使いはじめるときです。異なるタイプのコントラストとそれがどのようにウェブデザインで使われるのかいくつかの例を見てみましょう。
1. カラーのコントラスト
コントラストの中で最も普通で、すべての始まりとなるのがカラーのコントラストです。これは二つの異なるカラーをつかうもので、ブラックとホワイトであれば高いコントラストをもち、レッドとオレンジは類似しているので低いコントラストになります。
TekRocは非常に暗い背景の上に明るく活気に溢れたイメージをオーバーレイすることで、明白なカラーコントラストを使用しています。明るいオレンジとブルーは明らかに際立っており、ページを目にした人はそこに注目するでしょう。
GoWallaはカラーコントラストの素晴らしい使い方をしています。ページ上部のカラフルなボーダーは際立っており、淡色の背景と異なることでビジュアルの興味を引き起こしています。そして、ボタンのテキストに1pxのドロップシャドウを加えています。暗いオレンジはホワイトのテキストとオレンジの背景の間にコントラストをつくるのに助けとなっています。
Envatoは繊細なコントラストを使用しています。これは1pxのボーダーを使うことでさらに磨きがかったものとなっており、セクション間にコントラストをつくるため多数のボーダーが使用されています。セクション間はスペースや一つのボーダーで区切ることも可能でしょう、しかしここでは二つのボーダー（暗いのと明るいの）を使用することで極めて効果的に繊細なコントラストを作成しています。
2. サイズのコントラスト
コントラストの次の方法はサイズを使います。一般的に大きいものが小さいものより重要であることを示します。サイズのコントラストでは大きさが重要です。
MadeByWaterは重要なメッセージを伝えるために、極めて大きいタイポグラフィでサイズのコントラストを使用しています。
28Thiersはマティーニの大きい写真に興味をひきつけるため、小さめのさまざまな材料で囲み、サイズのコントラストを使用しています。これはページに関する最も重要なエレメントであるとデザイナーが判断し、そのようにデザインをおこなったことは明白です。
SlideScreenはさまざまな場所でサイズのコントラストを数多く使用しています。プロダクトの大きいスクリーンショットに加え、行動への呼びかけボタンを大きくしています。これはプロダクトに興味がわき、ビデオをみることやそれをダウンロードすることに導くものです。これらはページで最も重要なエレメントであり、それらを囲んでいる他のものより十分な大きさを確保しています。
[ad#ad-2]
3. シェイプのコントラスト
シェイプのコントラストはページで他のものと比較して形の相違によってコントラストをもうけます。基本的なものはボタンで、さらに角丸などを使って洗練したものにすることもできます。
Anebstarはシェイプのコントラストを使って、三つの重要なイメージを引き立たせています。なぜならウェブではたいていのものが矩形であり、そこに円を使用することは最も簡単な方法の一つです。
Carbonmadeは素晴らしいイラストをミックスさせた魅力的なサイトです。ここで注目すべきはシンプルなサインアップボタンです。サイズとカラーのコントラストだけでは、このにぎやかな背景から目立たせることはできなかったでしょう。ボタンの背後にフレンドリーなタコのイラストを加えることでシェイプのコントラストを加え、効果を高めています。
WireframePlusはサービスの価格を強調するために、シンプルながら極めて効果的なシェイプのコントラストを使っています。
4. ポジションのコントラスト
ポジションでコントラストをつくることは、異なる並びを使うことで、純粋にエレメントの階層を作る非常に巧妙な方法です。
Elliot Jay Stocksはエレメントの配置を定義するためにグリッドを使用したサイトです。このサイトを見ると、特定のエリアに注意をひきつけられるでしょう。グリッドに配置されたパラグラフの一つが左にはみ出しており、目は最初にそこを見てしまいます。ここ1年の間、このタイプの配置はでポジションのコントラストをつくるためにデザイナーを興奮させました。
SimpleBitsは一見、ポジションのコントラストをもっていないように見えるかもしれません。しかしながら、ページをスクロールし始めると分かります。若干の人がスタイリッシュな効果として固定された背景画像をつかうところ、このサイトではロゴとナビゲーションのみを固定表示にしています。これはポジションのコントラストの非スタンダードな素晴らしい例です。
SquaredEyeはポジションのコントラストの素晴らしい使用をしています。このアイデアを知るためにはページ全体を見る必要があります。ページのそれぞれのセクションに特別なポジションを使用しているのが分かるでしょう。これはセクション間に素晴らしいコントラストをつくり、ユーザーの気をちらせることなく非常に多くのビジュアル的な興味を生み出しています。
おわりに
コントラストには単に「明るいと暗い」だけでなく、多くのものがあります。確かに「明るいと暗い」はデザインで最も重要な法則の一つです。
あなたのデザインを次のレベルにもっていくには、すべてに丸いコーナーとドロップシャドウを用いることではありません。デザインを使ってメッセージを伝える最も良い効率的な方法を見つけだすことです。コントラストをとことん研究し、その多くの可能性を使用することが最も良い方法の一つでしょう。
sponsors
