とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

デザイン/UI設計・情報整理の基本。デザインを構成する要素を差別化して視覚的階層を意識して作ろう

デザイン/UI設計・情報整理の基本。デザインを構成する要素を差別化して視覚的階層を意識して作ろう

デザインは整形して
見た目をきれいにすることではなく、
本質は問題解決、情報設計、情報整理です。

 

今回は「情報整理」に
フォーカスをあてた記事を紹介します。

 

Webサイトの実装にあたっての
デザイン作業を細分化すると
「UI設計」というフェーズがあります。


UIを構成する要素、
つまり「構成要素」を整理して
適切に配置するのが「UI設計」

構成要素というのは、
UIに限ったものではなく、
サイト単位やコンテンツのメニューや
コーナー単位でも使用されますが、
今回はいちUIの構成要素として
話を進めていきます。

 

デザインでありがちな問題点

  • デザイン、UIがいまいちしっくりこない
  • どこかアンバランス
  • 使いにくい
  • 見づらい

 

こういった問題をかかえている場合、
構成要素の「階層」がおかしいことが
ほとんどです。
情報整理が適切でないパターンです。

 

階層というのは、
構成要素同士の主従関係のことで、
主従関係が差別化されていないと、
上記に挙げた問題につながりやすいです。

 

差別化とは、
視覚的に差をしっかりとつけよう(視覚的階層化)
ということです。

 

では視覚的階層とはどのようなことなのか。
簡単です。記事のUIを例にします。

 

タイトルタイトル
テキストテキストテキストテキスト


これだと、タイトルとテキストの
階層が同じレベルになっています。
これを視覚的階層化すると、
下記のようになります。

 

タイトルタイトル
テキストテキストテキストテキスト

 

はい、これで視覚的階層化されました。
タイトルとテキスト本文が
見た目上、差別化されていますね。

 

これは単純な例になりますが、
デザイン/UI設計する場合は、
この視覚的階層化を適切にすることで
見栄えや使い勝手に影響が強く出ます。

 

さきほど例にあげたのは
フォントサイズを大きくしたり、
boldにしただけですが、
視覚的階層化は以下の基本原理で
作ることができます。

大きさ(英: Size)、色使い(英: Color)対照(英: Contrast)、近さ(英: Proximity)、並び方(英: Alignment)、反復(英: Repetition)がデザインの基本原理となります。これらの基本を押さえておくことで、階層を作成するときに応用を効かすことができます。
(引用:http://photoshopvip.net/70872

 

より具体的な例や解説は以下のサイトで紹介されています。 photoshopvip.net

そのほか参考になる記事も貼っておきます。

デザイナー必見 視覚的階層の6つの原則 - 99designs

Webデザインにおける視覚的階層の重要性 - Qiita