情報構造を意識したデザインの「揃える」

こんにちは、Gaji-Labo UIデザイナーの今西です。

前回私が投稿した記事で「揃える」が頻出したので、デザインで「揃える」ことの意味を考えてみます。

なぜ「揃える」のか

「揃える」は、デザイン原則に沿ったデザインをつくる作業の動きでもあります。
デザインでは単純に要素を「揃える」動きをするのではなく、意味や意図を持って要素を揃えることが重要です。

ヒトは並んでいるものを見る時、それらがなぜ並んでいるのか、意味を読み取ろうとします。ただ揃えただけで意味のないものでは、逆に並べたものの情報構造がわかりづらくなり、見るヒトに混乱を与えます。

情報のセクションや情報レイヤーが整理された状態でデザインを提供することで、わかりやすく情報を伝えます。
テキストは見出し・本文・箇条書きにどういった強弱やインデントなどをつけるのか、イメージを置くときはどういった位置関係で置くのか、などで情報の構造を表現します。この表現もひとつのセクションやページなどの一つの画面・空間で表現を一定の形で揃えることが必要です。揃えることで、情報のリズムを作り、情報の構造レイヤーやパターンを見せます。

情報の構造レイヤーやパターンを作ることは紙でもデジタルでもUIデザインでも同じことで、デザインにより情報の階層構造をビジュアルを表現することでわかりやすく伝えることができます。

階層構造を持って要素や情報を提供するために、デザインにおいて「揃える」のです。

構造を理解することから始まる

デザインで「揃える」ためには、そもそもの情報構造を理解することが不可欠ということになります。

Gaji-LaboのUIデザインでは、 機能モデリング を通してオブジェクトの構造や関係性を理解し、ワイヤーフレームを組んでいきます。
ワイヤーフレームも情報構造を踏まえて要素を揃えた状態で作っていくとデザインの情報設計ができていきます。ワイヤーフレームからはUIデサインの開発実装にもつながってくるので、ワイヤーフレーム時点でも情報構造を揃えたものを作っていくと良いと考えています。

「揃える」ことで情報が伝わりやすいようにデザインし、「揃える」ために情報を理解する。情報への理解と情報と情報構造を「揃える」作業のサイクルを回して、デザインを作っていきます。
わかりやすいデザインをつくっていくために、情報の構造とビジュアル表現の一致することを続けていきたいと思います。