UIデザインで基本のデザイン原則が大事なわけ


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

今日は、基本のデザイン原則とUIデザインの関係について書きたいと思います。
デジタルと紙を問わずデザインをつくる上で大事なことですが、UIデザインでも重要なルールでもあるのでUIデザイン観点から改めてデザイン原則に触れます。

デザイン原則とUIデザイン

UIデザインでも基本の原則は、日常的に行うデザインの動きです。

  • 近接(グルーピングする、近づける/遠ざける)
  • 整列(揃える、色・タイポグラフィ・スペーシングの統一)
  • 反復(繰り返す、パターン化する)
  • 対比(優先度をつける、強弱をつける、目立たせる)

UIデザインをつくる際は、画面でのレイアウトとコンポーネントなど、大きいレベルでも小さいレベルでも原則に沿って配置や調整を行います。

例えば、ECサイトの商品のカードコンポーネントを作成する場合は…

  1. 商品のカードに含める情報をまとめる(近接
  2. 優先度の高い、商品名や商品画像を目立つ位置に配置(この時はざっくり対比
  3. サブ情報を優先度の高い情報よりすこし弱めに変化を付けて配置(対比
  4. テキストの位置を揃える(整列
  5. 商品カードのアクション(CTA)ボタンを配置(対比整列
    アクション(CTA)ボタンは繰り返し使うことも意識(反復
  6. コンポーネントの商品のカードが一通り完成したら、一覧で並ぶパターンを作成し、カードの並ぶパターンを考える(反復整列

ような流れで作ります。

大きなレベルでは商品の情報をカードのコンポーネントに格納してまとめ、小さいレベルでは優先度で強弱をつけた情報を整えていきます。

情報をどう見せるべきか、基本に立ち返る

UIデザインは、情報設計としてユーザーに必要な情報をどう見せるかが大事です。

情報をどう見せるかというところがキモになってくるだけに、プロダクトの機能や要件や扱う情報の理解が必須になります。資料百遍で読める資料は読み込み、この情報はこのあたりか?とデザイン妄想したり、ざっくり作って試してみたりと情報をどう見せるのが適切か考えます。
(最近、弊社ではOOUIのモデル作成を通してプロダクトについてのスタディを実践しています。)

わかりやすく情報を見せるためには、基本の原則に沿いながら明確に情報を整えてUIをデザインしていきます。
基本の原則通りの手法で進めるのが、完結でわかりやすいUIデザインの近道であったりするのです。

Gaji-LaboはUIデザインでプロダクトを向上させます

「開発主導でつくられた現在のデザインに問題を感じているが、インハウスデザイナーがいない」
「インハウスデザイナーはいるが、メインプロジェクトにかかりきりで別件の改善に手が付けられない」
「独立した使い捨てのデザインではなく、既存のシステムとの連携もしっかり考えられるUIデザイナーを探している」

UIデザインに関わるお悩みごとをお持ちでしたら、まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

UIデザインの相談をする!

投稿者 Imanishi Emi

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