Skip to main content

グラフィックデザインとページレイアウトでコントラストを使用する方法

WEBデザイン基礎講座 色のバランスと選び方 (六月 2026)

WEBデザイン基礎講座 色のバランスと選び方 (六月 2026)
Anonim

コントラストはデザインの原則の1つです。コントラストは、2つの要素が異なる場合に発生します。差が大きいほどコントラストが大きくなります。コントラストを操作するための鍵は、違いが明らかであることを確認することです。コントラストを作成する4つの一般的な方法は、サイズ、値、色、およびタイプの違いを使用することです。

コントラストはページに興味を持ち、重要なことを強調したり、読者の目を向ける手段を提供します。コントラストのないページでは、読者はまずどこを見ているか、何が重要かを知らない。コントラストはページをより面白くするので、読者はページ上のものに注意を払う傾向があります。見出しや小見出しを目立たせることで、読みやすさを向上させます。コントラストは、他の要素を中心にするために、ページ上に小さくて軽い要素を後退させることで重要なことを示します。

しかし、コントラストは過ぎる可能性があります。慎重に選択する。すべてが他のすべてと非常に対照的であれば、競合する要素に終わります。もう一度、読者はどこを最初に見てもわからないでしょう。

サイズ

大小の画像や大小の種類など、同じ種類の大きな要素や小さな要素は、コントラストを作成するためのサイズの最も明白な用途です。デザインの別の要素とホワイトスペースまたはピースの物理的なサイズを対照することも別の方法です。

相互に2つの要素の相対的明度または暗さは、値のコントラストを作り出す可能性があります。灰色の色調や色合い、単色の色合いなど、値が離れていればコントラストも大きくなります。

コントラストを作成するには、調和のとれた色、相補色、反対色を使用します。色の値にも注意してください。たとえば、各色の値に十分な相違がない場合、色を調和させる(カラーホイール上で互いに隣接している)色がぼやけて見えることがあります。

タイプ

タイプコントラストは、サイズ、値、および色を使用して、対照的なタイポグラフィ処理を作成することができます。

  • 追加 大胆な または イタリック体 コントラストを作成する
  • 小型タイプと大型タイプをミックス
  • serifとサンセリフのタイプを組み合わせてタイプコントラストを作成する
  • テキストの部分を対照的な色または異なる値に設定する
  • タイプアラインメントの変更により、ヘッドラインの極端なカーニングなどのタイプ間隔と同様にコントラストが作成されます

明らかに対照的な要素

コントラストを作成する他の方法には、テクスチャ、形状、アライメント、方向、動きの使用が含まれます。重要な点は、大きな違いを使うことです。ほとんど目立たないフォントサイズの変更や値に近すぎる色は、強調または関心を与える試みよりもミスのように見えます。

コントラスト要素を使用するいくつかの方法:

  • ワイドまたは不規則な形状の写真を使用して、背の高いスキニー列のテキストのレイアウトに視覚的な関心を追加する
  • 1つの画像が動きを示す一連の静止画像は、コントラストのある画像に目を引く
  • テキストを左に揃えますが、隣接する列で右揃えに設定します
  • 典型的には、レイアウトは、2つ以上のコントラスト要素の組み合わせを使用することができる。