地味で地道なUI/UX論

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

綾塚祐二 2015年05月17日 07時00分

  • このエントリーをはてなブックマークに追加
  • 印刷

近接

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

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


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

整列

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

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


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

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

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

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

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


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

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

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

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


図5 : 中央を揃えた整列

線を図示されると判るが、なしではやや判りづらい

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

  • このエントリーをはてなブックマークに追加

関連ホワイトペーパー

SpecialPR

連載

CIO
月刊 Windows 10移行の心・技・体
ITアナリストが知る日本企業の「ITの盲点」
シェアリングエコノミーの衝撃
デジタル“失敗学”
コンサルティング現場のカラクリ
Rethink Internet:インターネット再考
インシデントをもたらすヒューマンエラー
トランザクションの今昔物語
エリック松永のデジタルIQ道場
研究現場から見たAI
Fintechの正体
米ZDNet編集長Larryの独り言
大木豊成「仕事で使うアップルのトリセツ」
山本雅史「ハードから読み解くITトレンド放談」
田中克己「展望2020年のIT企業」
松岡功「一言もの申す」
松岡功「今週の明言」
内山悟志「IT部門はどこに向かうのか」
林 雅之「デジタル未来からの手紙」
谷川耕一「エンプラITならこれは知っとけ」
大河原克行「エンプラ徒然」
内製化とユーザー体験の関係
「プロジェクトマネジメント」の解き方
ITは「ひみつ道具」の夢を見る
セキュリティ
セキュリティインシデント対応の現場
エンドポイントセキュリティの4つの「基礎」
企業セキュリティの歩き方
サイバーセキュリティ未来考
ネットワークセキュリティの要諦
セキュリティの論点
スペシャル
エンタープライズAIの隆盛
インシュアテックで変わる保険業界
顧客は勝手に育たない--MAツール導入の心得
「ひとり情シス」の本当のところ
ざっくり解決!SNS担当者お悩み相談室
生産性向上に効くビジネスITツール最前線
ざっくりわかるSNSマーケティング入門
課題解決のためのUI/UX
誰もが開発者になる時代 ~業務システム開発の現場を行く~
「Windows 10」法人導入の手引き
ソフトウェア開発パラダイムの進化
エンタープライズトレンド
10の事情
座談会@ZDNet
Dr.津田のクラウドトップガン対談
Gartner Symposium
IBM World of Watson
de:code
Sapphire Now
VMworld
Microsoft WPC
Microsoft Connect()
HPE Discover
Oracle OpenWorld
Dell Technologies World
AWS re:Invent
AWS Summit
PTC LiveWorx
吉田行男「より賢く活用するためのOSS最新動向」
古賀政純「Dockerがもたらすビジネス変革」
中国ビジネス四方山話
ベトナムでビジネス
日本株展望
企業決算
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]