A Day In The Life

とあるプログラマの備忘録

右揃えを効果的に使おう1

ホームページでも普段使ってるソフトでもいいのですが、ラベルもテキストボックスもすべて左揃えに配置された

↓こんな画面をよく見かけませんか?
ラベルが左揃えになっている画面
ラベル"home page"のせいで他の項目に無駄なスペースができてますね。

なんとなーく違和感がありますね。
スペースができる
この違和感は距離がはなれることによって二つの項目の関連性が薄くなってしまうから起こるんです。

これは離れれば離れるほど顕著に感じます。

極端にスペースを空けた例

ここまで離れると"name"とテキストボックスに関係があるのかわからなくなりますね。
そこで↓のようにラベルを右揃えにしてやると、
ラベルを右揃えに変えた画面
お、なんかラベルとテキストボックスにまとまりが出てわかりやすくなった気がしますね〜。
関連のあるものは近くによせるこれが画面レイアウトの基本です。
ちなみに近くにあるものは関連があるように見えるというのはゲシュタルト近接の要因てのが関係してるみたいです。
普段あまり使わない右揃えですけど以外に便利ですね。