どうもこんにちは、JBです。

アプリに限らず、見やすいデザインを作るために「余白」ってヤツの存在は非常に大きいですよね。

ところが、意外と「画面領域が小さくなるー」とか「スカスカしない？」とか言われることが未だにあります。

今回は、「余白を入れるとそれどころじゃないくらい見やすくなるんだぜ」ということや、「使いこなせば色々出来るんだぜ」ということを主張したいと思います。

余白とは？

名前に「余」とかついているから、余計なものだと思われているのでしょうか。
辞書によると、

字や絵などが書いてある紙面で、何も記されないで白く残っている部分。
余白とは – コトバンク

だそうです。
残っているんじゃない。残しているんだ！
「何となく空いている」のと「意味があって空けている」のは大違いです。
余白というかレイアウトの話かしら？と思うところもありますが、ここら辺をきちんと考えておくと、ある程度見やすいものが出来ますよ！
（ちなみにこの記事で言う「余白」は、「白い部分」ではなく、「文字・アイコン・記号・画像などのコンテンツが入っていない部分」です。）

それでは行ってみましょう！

余白パワー：クッションで情報の干渉を防ぐ

試しに余白あり／なしのアプリ画面を（架空のものです）。極端な例ですが…。

左の方が圧倒的に見やすいと思います。右は色々要素が入れられるけれど…窮屈で見にくいですよね。

この画面、こんな感じで情報が入っています。
クッション=余白がないと、情報同士が近距離で主張し合うことになるので、お互が干渉して見にくくなります。いわゆるニアミスってヤツですね。

区切り線や囲みがあればいいんじゃない？と思いがちですが、そうすると、内容と区切り線・囲み線までもが干渉し合ってもっとカオスになります。

文字は特にクッションが必要

文字は一目見て内容を把握できるものではありません。遠目から見ると、同じ様なサイズのものがズラズラ並んでいるだけですし…。

おそらくパッと見だと、見やすさは「文字のブロックのあり方」で判断されます。
このときクッションが無いと、目が休まる場所が無く「見にくい」印象まっしぐらです。
余白を使って目を休ませてやってください。

グリッドデザインの画像とかなら余白がなくてもいいかも

反対に、画像は一目で大体のことが認識できます。
その特性を利用して「画像をタイル状に敷き詰める」など、余白なしでもキレイに仕上がる例もあります。

適度なクッションで目を休ませてあげよう

余白が無いと、コントラストが続きっぱなしになります。目が休まらない上に、無用な干渉も生まれたりして「情報認識」の妨げになってしまいますよ！
しっかりと余白を作って「クッション」を入れてあげてください。

ちなみに、画面外と画面内も立派なコントラストを生みます。文字やアイコンなんかは、画面の端っこギリギリまで入れることも避けた方がいいです（画像はそうでもないです）。
最低1文字分はあけた方がいいですね！

余白パワー：情報を明確にする

白く残っている部分に情報などあるのかね？と思うことなかれです。

間隔で区切りを表す

余白があると、「さっきのかたまりとは違うぜ」と主張することが出来ます。
余白の広さで区切りのレベルも変わります。広ければ広いほど、別物感が出ますよね。情報設計に合わせて、区切り具合を変えてあげてください。

間隔で所属を表す

「区切り」と大体同じですが、余白を使って、内容がどっちに属しているか？などを表すことが出来ます。例えば下の図の「Wild Animals」部分。
左側は写真に対する情報っぽいですよね。右側は、下の文章の題名みたいに見えるのではなかろうかと。

差はどちら側に余白を多く与えているかというだけです。もちろん、余白を少なくとっている方に属しているように見えます！

インデントで階層を表す

Wordとかでもありますよね、インデント。階層を1段階下にしたい時とかに使うと思います。そうすると左にできるじゃないですか、余白が！

情報が入れ子になっている時は、余白を使って階層を明示してあげると構造がグンと分かりやすくなります。アプリのデザインとかでも同じです。

ただし、中途半端な余白だと「ちょっとズレてんじゃないの」と思われてしまうこともあるので、やる時は潔くガツンとやってください。

導線を操作する

例えば何かの入力フォームで、下の三つの様なボタンがあった場合、

余白がないと「送信」とかっぽですが、右に余白があると「前へ」、左に余白があると「次へ」みたいな感じがしますよね。

文字や色、アイコンなどで示すと同時に、余白の取り方でも導線を操作できます！

後は、視線の誘導を自然に行うために「横の余白より縦の余白を多くとる」というのも導線操作ですね！

余白パワー：印象を操作する

「余白が多いと高級感が出る」という話はよく出ますよね。

実際、余白が少ないと「ぎっしり、賑やか、庶民的」な印象に。
余白をとると、「すっきり、余裕がある」感じになります。

「情報がたくさんあるよ！」という感じのものは余白を最低限にとどめることが多いのでは。スーパーのチラシとか、ニュースサイトとかの例がありますね！

逆にシンプルで質がいい雰囲気にしたいものは、余白をたっぷりとってますよね。

余白を操る際の注意点

余白の必要性をひしひしと感じたところで、実際に使うときに気をつけたいことです。

同じセグメントの余白は規則に合わせる

例えば、繰り返し部分の余白が下図の様に不規則だと、「突然どうした」という違和感と、「何か意味があるのだろうか」という疑問でザワザワします。

ザワザワさせないためにも、セグメントごとの余白はきちんと規則を作りましょう。

実際は「コンテンツの量によって可変します…」とかで、完全に余白の分量を揃えるのは難しいと思います。でも「全部可変」ということもなかなかないと思うのでね…。合わせられるところはきちんと合わせる！

ぜひレギュレーション作っておいて当てはめてみてください。ごちゃつきにくくなるはずです！

内容と余白レベルの関係を意識する

先ほどの「余白パワー：情報を明確にする」で触れた様に、余白のレベルによって意味の帯び方が違ってきます。

「ココとココは別の内容だからガツンと40px離す」「ココは同じレベルの内容の繰り返しだから、それぞれ10pxのパディングを入れるくらい」の様に、余白の意味と内容をすりあわせて設定しましょう。

内容構成と余白設定がチグハグだと、見る側は大混乱ですよ。
いや、小混乱程度かも知れないですけど、違和感を覚えてしまう可能性があります。

余白をケチらない

「あった方がいいらしいけど、やっぱりスカスカに見えるんじゃ…」とか思って中途半端にすると、あまり効果がありません。
また、余白のルールが変わる部分でちょっとしか差を付けなかった場合、ズレてるように見えることもあります。

恐れずにガッツリ余白を作ってください。大丈夫、変だったら戻せばいいんだから！

まとめ

いかがだったでしょうか？

アプリの画面寄りに説明してしまいましたが、資料作成や諸々にも応用できることなので…思い出したときにでも実践してみてください！
もちろん、もっとデザイン性の高いものを作る場合などはこの限りではないので、あまりとらわれなくてもいいですよ！

デザイン苦手なんだけど見やすいものを作りたいなーという方は、ちょっと意識すると断然違いますのでぜひ！

それではー！