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

imanishi

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

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

なぜ「揃える」のか

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

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

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

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

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

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

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

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

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

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

求人応募してみる!


imanishi

投稿者 imanishi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをえたりしながら、心地よく使えるデザインを考えるのが好き。