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

imanishi

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

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

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

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

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

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

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

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

ような流れで作ります。

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

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

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

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

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

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!


imanishi

投稿者 imanishi

UIデザイナー。制作会社にてプロモーションサイトや広告制作、受託開発でサービスのUIデザインづくりを経験。 ユーザーにとって心地よい使い心地のデザインを考えるのが好き。