エンジニアが作るダサいUIを卒業するためのデザイン4原則

デザイン知識のないエンジニアの方でも、これから紹介するデザイン4原則を意識すれば、いわゆるダサいUIからは卒業できるはずです。

Anycloudでも社内研修や、エンジニアの基礎知識の1つとしてデザイン4原則は教えたいと考えるほど、重要な知識になっているので初めて聞いたという方はぜひ読んでみてください！

デザイン4原則とは

4原則は、近接、整列、反復、コントラストの4つからなります。
デザイン4原則を適用するだけで、下のとても退屈なメニュー一覧を、2枚目の画像のように改善することができます。
この記事では、4原則を使用してどのように以下の改善を行ったかを見ていきましょう！

デザイン4原則で改善する前のUI

デザイン4原則で改善したUI

※ 改善前のUIが酷すぎるというご指摘はおやめください。

近接

近接の原則は、関連する項目をまとめてグループ化することです。
関連する項目を物理的に近づけることで、1個のまとまったグループに見えるようになります。
逆に関連しない情報は、距離を離すことで関連しないことを伝えることができます。

下のNG例では、画像と商品名と説明文が散らばっていて、それぞれの関連性が分かりません。
しかし、改善例のように情報を近づけることで、関連する項目をグループ化することができています。

NG例

近接で改善した例

整列

整列の原則は、要素をルールに沿って配置することで、視覚的なつながりを持たせることです。

下のNG例では、商品が何の意図もなく配置されています。
整列を利用した例では、中央に揃えるというルールに沿って、商品を配置することでNG例より要素間のつながりが強くなって、見やすくなっていると思います。

NG例

整列で改善した例

反復

反復の原則は、デザイン上の何かの特徴をプロダクト全体をとおして繰り返すことです。
反復を利用することで、一貫性を持たせることができます。また、ページの視覚的な面白さを加えることが可能です。

下のNG例では、近接と整列はできていますが、よく見ると各商品情報の順番に一貫性がありません。
改善例のように、反復を利用して画像、商品名、説明文の順番、余白も統一することで一貫性が生まれ、より見やすくなります。

NG例

反復で改善した例

1列だとまだ全体の一体感に欠けるので、3列で反復してみると、かなり全体の一体感が増して、見やすくなりました。

中央揃えは退屈（整列）

整列に話が戻りますが、現状はテキストが全体的に中央揃えになっています。

中央揃えは正当な整列方法ではありますが、下の赤線のように縁の線がソフトなため、線の強さが弱くなりがちです。

下の画像は、テキストを左揃えにした例です。
中央揃えよりも線がかなり強くなって、よりすっきりしていると思います。

中央揃えは初心者の方が使用してしまいがちですが、意外と玄人向けの整列方法になっています。中央揃えが持つ効果を、明確に意図的に使用できるとき以外は、他の整列方法を使用することをおすすめします。

コントラスト

コントラストの原則は、要素に強弱を付けることで、情報の階層構造を明らかにすることです。
要素に強弱を付けることで、ページ上の道案内となり、焦点を作り出します。
また、読者の目をページに引き込む効果もあり、ページにおもしろみを加えられます。

下の画像では、タイトルのサイズを大きくかつ太字にしました。
また、各商品名と説明文の文字サイズ、色を変更することでコントラストを付けています。
これによって、最初にタイトルが目に入り、商品を見るときには、画像 → 商品名 → 説明文の順番に目線が流れるはずです。

コントラストは文字の大きさ、太さ、色、形、余白などで実現可能です。
タイトルに色を付けると、少し面白みが増しました。
（ちょっと、タイトルが目立ちすぎてるかも）

まとめ

• 近接
  • 関連する項目をまとめてグループ化する
• 整列
  • 要素をルールに沿って配置することで、視覚的なつながりを持たせる
  • 中央揃えには注意が必要
• 反復
  • デザイン上の何かの特徴をプロダクト全体をとおして繰り返す
• コントラスト
  • 要素に強弱を付けることで、情報の階層構造を明らかにする

すべて共通して言えることは、情報の組織化や一体化、視覚的なおもしろさを出すことです。
本当に4原則を意識してUIを組むだけでも、ダサいUIからは脱することができるので、ぜひ実践してみてください！