デザインする上で知っておきたい、「余白」のこと

こんにちは、デザイナーのアリです。

突然ですが、みなさまはデザインワークの際、「余白」についてどの程度意識できていますか？ 余白の扱いというのは難しく経験が必要なものだと思っていますが、意識するかしないかでもデザインする上でのアプローチは変わってくるものだと思います。
※ミニアプリとは既存のウェブサイトやアプリ内で起動する小さなアプリケーション。

「余白」のしごと

デザインは余白が９割！と言われるほど実はデザインをする上で大切な要素。「余白」は会話でいうところの「間」みたいなもので、テンポやスピードをコントロールすることで会話の聞き取りやすさや聞き手側が感じる世界観に大きく左右します。

あれもこれも訴求したいし目立たせたい、と様々な要素をとにかく大きく、無駄なシャドーをつけたり、やたらとカラフルにしてしまっている方も多いと思いますが、人間は同時に処理できる情報量が限られているため適切な情報量を渡してあげるためにも、余白は上手に使うべきだと思います。

コンテンツにおいての余白

情報のグルーピングと優先度を整理する際、余白が重要なポイントとなってきます。前述した通り、人間は多くの情報を一度に沢山見せられると混乱するため、ユーザーに伝えたい内容をしっかり伝えるためにも、情報の優先度付けはデザインで処理するのも手です。

それではミニアプリでよく使用される一覧カードで比較してみましょう。 左のカードは中身が詰まっている分、情報量が多く含まれていますが、ここではあくまで記事の詳細ページへの導線という役割をもたせたいと思います。 ですので、右では目を引くアイキャッチとタイトルだけを見せて、詳細ページに飛ぶかどうか、をすばやく判断させるための構造に修正しました。文章量を減らした分、タイトル部分の余白を追加したため、ユーザーも一目で興味がある内容か否かを判断できます。 続いて、もう少し噛み砕いて見てみましょう

文字においての余白

便宜上余白という言葉を使っていますが、文字間と行間の話です。 文章が読みにくい、目立たせたいといった理由でとりあえず文字を大きくしようとする方も結構いらっしゃるのではないでしょうか。 もちろんフォントを大きくするだけで解決する場合もありますが、必ずしもそうではありません。 こちらはみなさまおなじみのフォント、ヒラギノ角ゴシックを打ち込んだものです。 この文章の文字サイズだけ大きくしてみます。 文字自体が大きくなったので視認性は上がりますが、読みやすくなったわけではありません。 そこで、字間と行間の余白調整をしてみます。CSSでいうletter-spacingとline-heightですね。 だいぶ読みやすく感じませんか？
比較してみるとこんな感じ↓ フォントサイズを単純に大きくしなくても余白で読みづらさを改善することはできるので、サイズを大きくする前にぜひ試してみてください。

表現のための余白

余白は全体的な世界観を表現する際にも意識すべき要素です。余白を広めに取ればスタイリッシュにできますし、余白をせまくすればカチッとした雰囲気にもできます。

余白を広めに取ったパターン

情報もかなり絞っているので一目で世界観を感じ取ってもらいたい、といったときに有効です。潔い分スタイリッシュにもなりますね。デメリットは、一画面での情報量が少ないので必然的に伝えられることも少なくなることですね。

要素を増やして余白を狭めにしたパターン

ファーストビューで見れる情報量を増やしているので、雰囲気は最低限担保しつつ何をやっているのかを明確に認識してもらう場合に有用です。デメリットは、情報量が多く全体的にメリハリが弱くなるため、印象も弱くなりがちなことです。
コンセプトを反映する上で適切な余白を置いてあげることによって、何を伝えたいのかを明確にしておくことができます。

まとめ

「余白」に関して、僕のようなデザイナー歴で語るにはとても壮大なテーマですが、デザインする上で意識していることをまとめてみました。余白一つを意識するだけでユーザーの印象も大きく変わってくるため、今後ミニアプリを構築する際には是非「余白」をより意識してみてはいかがでしょうか。