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

投稿:Corrine

ノンデザイナー必見!UIデザインにおけるカラーパレット作りのコツ。.png

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


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

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

「余白」のしごと

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

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

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

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

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

文字においての余白

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

表現のための余白

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

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

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

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

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

まとめ

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

Contact

ミニアプリの導入をお考えですか?

お問い合わせする
デザイン ミニアプリ知識

Corrine

広報・PR担当として活動中。 ベラルーシと日本のハーフであり3ヶ国語喋れるが、ほとんど大阪で育った。 記事のリリースやインタビューなど、メディアへ発信する仕事がメインで、日々日本語を強化中。

関連の記事

【後編】DXを加速させる「LINEミニアプリ」の真価をLINE社員に迫る!

「ミニスタ特別編」ではLINEミニアプリ事業を担当する武藤ウォーレン道夫にインタビューしました。前編に続き、後編ではLINEミニアプリの価値について迫ります。

投稿:Corrine

DXを加速させる「LINEミニアプリ」の真価をLINE社員に迫る!

企業のコロナ禍でDXが進み、顧客との接点が多様化する中で「LINEミニアプリ」はどのような価値を発揮するのか。LINE株式会社でLINEミニアプリ事業を担当する武藤ウォーレン道夫さんにお話を伺いました。

投稿:Daniel

LINEでリピート客を促進!そのコツと活用事例とは?

LINEで集客することは、電話やメールと比べて手間がかからない他、メッセージが開封される可能性も高く、多くの企業が活用している集客方法だ。メリットの多いLINE集客だが、リピーター顧客をも獲得することが容易になるということはご存知だろうか?

投稿:Daniel

ミニアプリを試してみる