レイアウトも情報--UI/UXを設計する情報デザインの基礎

綾塚祐二
2015-05-17 07:00:00
  • このエントリーをはてなブックマークに追加

近接

 関連の強いもの、意味的に近いものは近づける、そうでないものは離す、というのが「近接」の原則である。図1のようにほぼ均等に見える間隔で要素が並んでいると、見る人(ユーザー)の意識が向くのは全体か、1つ1つの要素になる。これに「近いものは近くに、そうでないものは離す」という変更を加えたのが図2である。

 グループが3つ、見えてくる。要素間の間隔の違いがレイアウト上の構造を生み、構造が「グループ」という意味を見る人の脳裏にもたらすのである。


図2 : 「近接」の原則を適用。3つのグループからなることがひと目でわかる

整列

 「整列」の原則の目的は、レイアウト上に「線」を生じさせることである。ここで線とは、実際に線として描かれていなくとも、実質的に線として知覚される構造である。図3aは、図1をとりあえず二列に整列させてみた状態である。

 それぞれの列の左側がそろって、線が見えるだろうか。その線を普通の線として描いてみると図3bのようになる。


図3a:整列の原則を適用。グループは無視して整列だけさせてみた例

図3b:線を明示するとこのようになる

 このような線は、要素間の(やや緩やかな)関連性と、流れを示す。視覚的な引っ掛かりを減らし、すっきりとした、整えられている、などの印象を与える効果もある。

 線を複数作ることで、階層構造などを表現することもできる。図4では線が各階層を示し、要素は属する階層の線に整列されている。

 これで各グループに2種類の要素があることが判る。インデント、字下げによる表現とも呼べるが、線に注目すると、その効果がわかりやすい。さらに線を増やして多段の構造を表現したりすることもできるが、複雑さが増しすぎると1つひとつの線が見えづらくなり、効果が薄れてしまう。無駄に線を増やさないほうがよい。


図4:整列による階層構造の表現。どの線に合っているかが、要素の所属する階層を示している

どの線に合っているかが、要素の所属する階層を示している

 ちなみにここまでの例では、左揃えによる比較的はっきり見える線を使っていたが、中央ぞろえによる「弱い線」を使うこともできる(図5)。整えられている感じはでるが線がはっきりとは見えないため、不安定になりやすい。また、階層構造を表すのには向いていない。

 しかし、バランスがよく「画面全体」などに対しても中央は「見える」ので、うまく使えば効果的である。


図5 : 中央を揃えた整列

線を図示されると判るが、なしではやや判りづらい
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]