僭越ながら、この手の記事も需要があるのではないかと思い、下記記事を転載しました。
デザインをそれっぽく見せる４つのルール | Takashi178.me
たいていの場合はこれで良いんじゃないかなーくらいのスタンスで、 デザインをする時に意識していることをまとめてみました。 この４つのポイントを意識して作るだけで、それっぽいデザインの完成です。
目次
- ラインを揃える
- 余白をデザインする
- 情報の重要度を考える
- 視覚的なノイズを減らす
1.ラインを揃える
１つめのポイントは、きちんとガイドを引いて、ラインを揃えることです。
要素の位置やサイズがバラバラで、ラインが不揃いになってしまうと、 「それっぽく見えないデザイン」になってしまいます。
後述しますが、この「揃える」というのは要素の位置やサイズに限った話ではなく、 要素の色にしても、余白にしても、基本的には何でも揃えておいた方が良いです。
デザインにきちんとルールがあり、一定のパターンで統一されていると、 理解しやすく、操作しやすいデザインに繋がります。
ルールに例外が多いと、その度に認知負荷がかかるので、 コンテンツを理解する妨げになってしまいます。
意図的に目を引きたい場合を除いて、なるべくノイズを増やさないことが重要です。
2.余白をデザインする
「1.ラインを揃える」にも繋がる話なのですが、見た目を揃える上で、 コンテンツだけではなく余白もデザインする必要があります。
コンテンツ自体のサイズや位置だけ揃えていても、余白の扱いがおざなりでは、 画面全体で見たときに不揃いな印象を与えてしまいます。
前述したラインの話と同じく、余白のデザインもなるべく例外を作らずに揃えることが大事です。 ただし、情報の階層によって必要な余白のサイズは変わります。
例えば、「ある投稿に対するコメント一覧」の間の余白は、 階層の深いところなので余白も小さくなります（TOP>投稿>投稿に対するコメント)
それに対して、「投稿と投稿」の間の余白は、子要素をたくさん持つ大きな塊なので、 投稿に対するコメント一覧の間の余白よりも広くとるべきです。（TOP>投稿)
大きくコンテンツが変わるときは余白も大きく、 関連するコンテンツが並ぶときは余白も小さくなります。
3.情報の重要度を考える
「それっぽくないデザイン」は、情報の重要度を無視してしまっていることが多いように思います。
情報の重要度によって、大事なものは大きく扱い、そうでないものは小さく扱います。
（例えば、重要なものは「太字にする・サイズを大きくする・余白を広めにとる、色をつける」等。
逆に、重要でないものは「色を薄く・サイズを小さく」等）
それは情報をわかりやすくする意味もあるのですが、
同時に見た目にメリハリがつき、自然とそれっぽいデザインに近づくことができます。
例えば、上の画像の「ユーザー名、ユーザーID、コメント内容」の部分や、
投稿日付・時間の部分も「情報の重要度」に基づいてデザインをしています。
細かい話ですが、投稿時間というものは投稿に関する情報なので、
ヘッダーにある投稿タイトル「ミャーと鳴いている...」の側に置いても良かったのですが、
このアプリにおいて投稿の「日付・時間」はタイトルと並べて最初に見せるほど重要な情報でしょうか？
そう考えた時に、
今回の架空のアプリの場合は「日付は気になった時に探せば見つかるくらいの扱いで良い」と決めて、
画面下部に控えめに表示する事にしました。
そのように情報の重要度が要素の位置やサイズ・色など、見た目のデザインに影響を与えます。
4.視覚的なノイズを減らす
不要な装飾によって「それっぽくないデザイン」になることもあります。
たまに見かけるのは情報の区切り方での装飾過多です。
大抵1画面には様々な情報が混在しているものであり、
それらは余白をとるか、背景色を変えるか、線や影をつける等して境界をつくります。
そのときに、いくつも組み合わせて使ってしまうと、
視覚的なノイズとなってしまう上に、表示スペースも余計に使ってしまいます。
例えば、要素を枠で囲むことで境目が明示されているのに、
更に上下に区切り線まで引いてあるだとか、
枠の中にまた枠があって二重に区切られてしまっているだとか。
かといって、逆に区切りが無いのも情報が分かりにくく、
見た目にもメリハリが無いので良くありません。
なるべく必要最低限の要素で見やすく分かりやすくする必要があります。
以上の４つのルールを意識してデザインをしてもらえると、
デザインをそれっぽく見せられるかと思います。
何か気になることがありましたらお気軽にコメントください。