デザインの4大原則を理解して魅力的なUIを作ろう

Writer： otsubo　更新日：2024/05/15

こんにちは、デジナーレ福岡オフィスの大坪です。

フロントエンドのポジションは、しばしばデザイナーとの連携する必要がありますが、デザインの専門用語や原則の理解が不足していると、うまくコミュニケーションが取れなかったり、デザインカンプを元に開発を進めていく際にも、意図してデザインされたものが理解できなかったりします。

デザインの知識を持つことは、エンジニアにとって重要なスキルの1つです。デザインの基本原則を理解することで、デザイナーとのコミュニケーションがスムーズになり、ユーザーに優れたUIを提供できるようになります。

本記事では、デザインの基礎中の基礎である「4大原則」について解説します。

 

４大原則とは？

デザインには、視覚的な魅力と分かりやすさを生み出すための基本ルールがあります。これが「4大原則」です。

1. 近接(Proximity)
2. 整列(Alignment)
3. 反復(Repetition)
4. コントラスト(Contrast)

これから紹介する４つの原則はどれか一つだけでも欠けると見栄えの悪いデザインが仕上がります。これらの知識を入れるだけで、何が「良い」デザインで何が「悪い」デザインなのかというのが少し見えてくるのではないでしょうか？

ここでは、以下のようなウェブサイトのセクションを参考に紹介していこうと思います。

 

近接

関連する要素同士を近くに配置し、グループ化すること。

デザインされた要素同士の距離が近ければ近いほど、要素間の関連性が強く、離れていると要素間に関連性が無いとユーザーに伝わります。また、グループ化することで可読性が上がりますので、要素をどの順番で見てほしいか、どこで見終わるか、見終わった後にどこに視線が行くかを考える必要があります。

逆に、関連のない要素が近すぎると、誤って関係があると認識されてしまう可能性がありますので、適切な間隔を設けましょう。

このサンプルは見やすいでしょうか？一見コンテンツが並んでいてきれいに見えますが、余白が気になりますね。特に各カードの間隔が広いため、均等な余白サイズでもまとまりがないように感じてしまいます。

これを改善するためにはカード間の間隔や、小タイトルに対する説明文の行間を狭めたり、タイトルとカードの余白に差をつけ、タイトルからカードまでをグループとして捉えることでより一体感が生まれます。

そうすることで視覚的に見やすくなるだけでなく、伝えたい情報がグループ化されているので意味も理解されやすくなります。

 

 

整列

コンテンツに規則性を持たせて一体感を作ること。このサンプルを見てください。このセクションはいずれも小タイトルに対して説明文が書かれていますが、左揃え、中央揃え、右揃えが混在しています(多少大袈裟かもしれませんが)。同じような構成ではありますが、統一感が感じられません。
そして、揃えが混在している以外にも他に何か違和感は感じましたか？

ガイドラインを引いてみると、よりその違和感が明瞭になるはずです。

 

 

タイトル、イメージ、小タイトル、そして説明文にガイドラインを引いてみました。よくみると小タイトルの水平のベースラインが少しずれているのに気づきませんか？垂直のベースラインもそれぞれわずかにずれいていますね。列や行が複数ある場合、水平・垂直のベースラインが揃っている必要があります。

また、この例のようにテキストや画像などを配置する際、根拠なく配置してはいけません。意味があって整列させるのは構いませんが、左揃え、中央揃え、右揃えをむやみに混在させると視点をどこに誘導させたいのか、どこから見ればいいのかが分からなくなってしまいます。逆に整列させることで視点を自由に誘導させることも可能になっていきます。どう整列させればいいか分からない場合は、基本的に左揃えにさせればいいかと思いますが、左揃えにしなくていいパターンもあります。
こちらのテーブルをご覧ください。

テーブルに数値が並んでいる時、左揃えにしてしまうと数字が非常に見ずらくなってしまいます。またこれが金額だった場合、桁を読み間違えたりしてしまいます。特に数値は右から左に桁が増えていくので、左揃えにしてしまうのは適切ではありませんね。

この場合は右揃えにしましょう。

 

 

反復

同じ属性を持つ要素を繰り返して一貫性を持たせること。

まずはこちらのサンプルをご覧ください。このセクションのタイトルは同じカテゴリーの内容をまとめたものになるのですが、どれもデザインがバラバラで統一感がありません。

この場合は４つのパターンの中から１つにデザインを絞る必要があります。他にも例えばウェブサイト上での掲示板のスレッドや投稿などは、あらかじめ決まった情報表示させます。それらで使用するフォントのサイズ、フォントの種類、スタイル、配色、などを統一させ意図的に反復させることで、ユーザーは一貫性のあるデザインパターンを認識しやすくなります。
それに加えてページ全体での配色なども指定することで、より共通性があるように見え、多少要素を変更させても一貫性のある見え方になります。

その一方で、異なる意味を持つ要素に同じデザインを反復させると、かえってその違いが分かりにくくなってしまいます。このような場合は、コントラストをつけるなどして区別する必要があります。

 

 

コントラスト

強弱を要素に付け、要素の差を意識的に付けること。

こちらのサンプルを見てみましょう。メインタイトル、小タイトル、説明文が並んでいますが、どの要素に最初に目がいくでしょうか?

 

まずカードに目が行き、そしてその中の内容に視線が移ると思います。タイトルはその後ではないでしょうか？
それぞれの要素の大きさや、フォントのウェイトがほとんど変わらず同じ抑揚で書かれているので、どの要素に注目すべきかがすぐには分かりにくいかと思います。

ですので、重要な要素には目立つように大きなサイズ、濃い色、太字のフォントを使用するなどしてコントラストを強調しましょう。一方で、補助的な情報は控えめにすることが視線の誘導に効果的です。ただし、コントラストを過度に強調しすぎると、逆に不自然に目立ってしまい、違和感を与える可能性もあります。適度なコントラストを心がけることが重要です。

コントラストはサイズや色の調節だけではなく、情報の優先度に応じて文字の大きさや、色の濃度を変えることで、視覚的に重要な情報を際立たせることができます。これにより意図的に情報の伝達を効果的に行うことが可能となります。

 

まとめ

 

今は全く知らなくてもこの４つの原則を理解し、意識して活用することで、バランスの取れた見栄えの良いデザインを作ることができます。普段からこれらの原則がどう活用されているのかを観察していくことで、デザインが何を一番伝えようとしているのか、どうしてその配置にしたのか作り手の意図を読み取る力も養われていくことでしょう。
エンジニアであってもデザインの基礎的な知識を身に付けることは重要です。それによってデザイナーとのコミュニケーションがスムーズになり、要件を正しく理解して適切に実装できるようになります。
もちろん、この知識はデザイン以外の分野、例えば画像やテキストを用いた資料作成や普段の業務でもきっと役に立つはずです！

このブログがあなたの意識を変えるきっかけに慣れれば幸いです。

ここまでお読みくださりありがとうございました！