1.  > 
  2.  > 
  3.  > 
  4. UIデザインでのコントラストの使い方
  • このエントリーをはてなブックマークに追加
BIZ TECH 公式ブログ

UIデザインでのコントラストの使い方

元記事: How to use contrast in UI Design
原著者: Wojciech Zieliński
この記事は原著者の許諾を得て翻訳・掲載しています。

コントラストは違いを強調し、ユーザーの注意を惹きつけます。コントラストは価値や特徴、そして優先順位などさまざまなことを伝えるために使われる、デザインの重要な要素なのです。適切にコントラストが使われると、使われたことを感じさせません。

コントラストはさまざまなデザインの分野で使わるが、使いこなせるようになるのは難し過ぎるように見えるーHelga B.

コントラストはどこにでもあります

コントラストは色だけの話だとよく勘違いされていますが、そうではありません。いくつか例を挙げて説明しましょう。

クローズとオープン

横いっぱいに広がった写真のセクションが文字のセクションにシンプルで、クリーン、オープンな雰囲気を与えています。

Ueno: Soho sublease by ueno.

フルとエンプティ

左側のセクションにはさまざまな要素が詰まっていますが、右側のセクションでは余白を多く取っています。

対照と非対称

コンテンツが対照的に配置されているのに対して、全体は左に大きな余白が空いていて非対称になっています。これにより前のページに戻れるということも強調されています。

avsc. 4 by me

ビッグとスモール

大きなタイマーに比べて小さいUI要素(文字盤など)が使われています。これにより視覚的楽しさを与え、注意を惹きつけています。

Training-concept by Renat Muratshin 🚀

塗りつぶしと背景なし

簡単に優先順位を表現できます。

セリフとサンセリフ

1種類のフォントだけを必要はありません。

Article Cards Alternate by Oliur

整列と不揃い

しっかりと整列した文字に対し、背景ではいろいろなモノが散らばっています。

Famous : Pixar by ueno.

フラットとテクスチャー

白くシンプルな背景の左側と写真とグラデーションがミックスした右側のコントラストが印象的です。

Invision theme redesign by Divan Raj

選択肢は無限大です

今回挙げたのはコントラストのほんの一部の例です。もしまだ見たければもっとあります。

今回挙げなかった他の例

  • レタースペースありとレタースペースなし
  • 四角と丸
  • 塗りつぶしと透過
  • ラフとスムーズ
  • 横と縦
  • 古いと新しい
  • 未知と既知
  • 線と点線
  • 克明と明瞭

コントラストはグラフィックデザインが基礎にしている土台です。コントラストが使われているのは色や大きさだけではないのです。それがわかれば、無限にコントラストを創ることができるでしょう。

www.dribbble.com/acreno

ノンプログラマーの方、現場のビジネスマンの方に有益なソフトウェア・技術情報をお届けしています。 記事リクエストはbiztech@attracie.comにお寄せください。