HPを制作するときに、
一番大切で、そして一番むずかしい部分があると感じています。
それが、余白です。
余白があるサイトと、ないサイト。
見比べてみると、ユーザーの体験はまったく違います。
極端な話、余白が足りないだけで「なんとなく読みたくない」と感じて、そのまま離脱されてしまうこともあります。
ここで、少し恥ずかしい昔話をします。
ECサイトの店長をしていた頃のことです。
当時の僕は、トップページのFV（ファーストビュー）に全力を注いでいました。
余白の重要性を「分かったつもり」ではいたのに、心の中ではこう思っていました。
あれもこれも売りたい。
とりあえずバナーをたくさん作って、スライドさせればいいだろう。
結果として、トップページには画像がぎゅうぎゅうに詰め込まれ、完全に渋滞していました。
今振り返ると、それは大きな間違いだったと断言できます。
なぜなら、ユーザーの目線にまったく寄り添えていなかったからです。
お客様は「どこを見ればいいのか」「何を買えばいいのか」が分からないまま、そっとページを閉じていたはずです。
今は、AIを使えば誰でも簡単にHPを作れる時代になりました。
だからこそ、毎日のようにいろいろなサイトを見ていると、
「情報が詰まっている息苦しさ」に気づいていない人が、意外と多いのではないか──そんな感覚を覚えることがあります。
昔の僕が運営していたネットショップのように。
なので、今日のテーマは余白です。
この記事が、誰かが自分のデザインを見直すときの小さなヒントになればうれしいです。
余白がないWebデザインは、ユーザーにとってストレスでしかない
僕は最近、余白を「きれいに見せるための空間」だと思わなくなりました。
余白は、ユーザーの頭の中を散らかさないための仕切りです。
もっと言うと、判断のための呼吸みたいなものです。
盆栽は、枝や葉そのものだけじゃなくて、枝と枝の間の空間が形を決めます。
バンクシーの作品も、描かれた絵だけでなく、何も描かれていない壁の広さがメッセージの一部になっている。
Webの余白もそれと似ていて、「置いたもの」だけでなく「置かなかったところ」も体験の一部になります。
余白がない画面を開くと、まず目が迷います。
どれが見出しで、どれが説明で、どれがボタンなのか。
作り手は全部分かっているけど、ユーザーは初見です。
初見の人に「整理」をやらせた瞬間、ストレスが始まります。
だから、余白がないデザインのデメリットで最初に思い浮かぶのは、やっぱりユーザー離脱です。
内容が悪い前に、「読む前に疲れる」から離脱する。
そして怖いのは、その離脱が『静か』なことです。
怒りのクレームも来ない。
そっと閉じられるだけ。
視覚デザインの世界では、要素が多すぎて散らかった画面は「visual clutter（視覚的なごちゃつき）」と言われます。
こうしたごちゃつきは、情報を探しにくくし、認識しづらくし、判断にかかる負担を増やすことが分かっています。
UXのガイドラインでも、「無意味な装飾や要素を減らし、グルーピングして見せる」ことが推奨されています。
僕が言いたいのは、余白はセンス以前の話だ、ということです。
見た目がオシャレかどうかの前に、迷わせない。
これがないと、ユーザーは内容に入る前に離れていきます。
足す前に削る。FVは「主役を1つ」にするところから
EC時代の僕は、ずっと足し算で戦っていました。
商品数はだいたい1000点くらい。
どれもこれもおすすめしたいし、紹介しないと売れない気がしていました。
だからFVの下に、バナーをどんどん増やしました。
キャンペーン、ランキング、新着、クーポン、季節の特集。
スライドさせれば「全部見せられる」と思っていたんです(浅い)。
でも実際は、逆でした。
ユーザーは自分に関係ない商品を並べられても、選べません。
「結局、何がいいの？」になって、そのまま離脱する。
自分が作ったページなのに、そういう瞬間を何度も見ました。
あとからサイトを研究して気づいたのは、いいサイトほど削っていることです。
情報を詰め込まず、まず「何が言いたいか」を伝えて、次に進ませている。
余白で視線の通り道を作っている。
人はページを読む前に、だいたいの順番で流し見します。
PCのような横長画面で、要素がシンプルなときは、視線がZの形で動くと言われます。
左上→右上→左下→右下。
だからFVでは、主役とCTAをその流れに沿って置くだけで、迷いが減ることがあります。
もちろんスマホは縦スクロールが中心なので別物です。
それでも「最初の一画面で順番を見せる」という考え方は共通だと感じています。
サイト研究を進めるなかで、
余白と文字だけで成立しているサイトを見たときは衝撃でした。
「これで足りるのか？」と不安になるくらい削っているのに、ちゃんと伝わる。
むしろ気持ちよくスクロールしてしまう。
僕は、ああいうサイトを作ってみたいと素直に思いました。
そして、最近の自分の思想にもつながります。
以前noteに書いた「未完成、という許可」でも触れましたが、
僕は6割くらいの完成度のほうがユーザーに優しい場合があると思っています。
エビデンスはないです。
これは僕の体感。
でも、詰め込んで息苦しくなるより、削って呼吸を作った方が読まれる場面がある。
この感覚は、たぶん外れていない気がしています。
完璧より、ちょっと物足りないくらいのFVの方が、「続きを読もうかな」に繋がることがあるはずです。
スマホで見ると、一気に迷う。気づけない人が多い理由
ここで、一個だけズレの話をします。
前にミーティングでページ説明を聞いたとき、みんなPC画面で説明していました。
でもスマホで見せている人は、ゼロ。
たぶん悪気はないです。
ただ、その時点で「息苦しさ」に気づきにくい。
スマホで見ている人が多いなら、本当はスマホで確認しないといけない。
PCだと読めるのに、スマホだと急に迷うページってあります。
画面が小さいぶん、要素が密集して、主役が増えてしまうからです。
僕はこれを、言葉で説得するより、体感で見た方が早いと思いました。
なので、スマホで試すための小さなチェックを3つ用意しました。
1つ目は5秒テスト。
スマホでFVを5秒見て閉じて、「何のページか」「次にどこを押すか」を聞いてみる。
答えがバラバラなら、その時点で余白と順番にズレがあるサインです。
2つ目は15秒タスク。
「料金を知りたいならどこを押す？」「見積もりを頼むなら？」とタスクを1つだけ出して、
15秒以内にたどり着けるかを試してみる。
3つ目は親指チェック。
片手持ちの状態で、親指だけで迷わず押せるかを試す。
押したいボタンが遠かったり、ボタンが密集して押しにくかったりしたら、それは余白の問題でもあります。
これは、正しい・間違いを決めたいわけではありません。
PCで伝わっていることが、スマホでも同じように伝わっているかを一緒に確かめるための小さなテストです。
この3つをやると、PCではスムーズに説明できていたページが、
スマホでは急にぎこちなくなることがあります。
「どこだっけ？」が出た瞬間、焦ったようにスライドして探しだす。
その静かな違和感こそが、余白の正体だと思っています。
余白は好みではなく、ユーザーにとっての判断コストの問題です。
その感覚があるので、自分はCSSを書くときも、まずスマホを前提にしています。
教科書どおりにPC版から作るのではなく、
スマホ幅をベースにスタイルを決めて、
最後にPC用の調整を下の方に足していく。
ほんの小さな違いですが、
「スマホでどう見えるか」を先に決めておく方が、
ユーザーに届く情報の順番がぶれにくいと感じています。
FVの余白ストレス診断。5つだけ
最後に、FVを見るときのチェック項目を置いておきます。
全部直す必要はありません。
むしろ、一つだけでいいです。
- 情報が多すぎて、主役が分からない
- 親指でボタンが押しにくい
- 視線の流れが迷う、順番が不明
- 要素間が詰まりすぎて、窮屈
- スクロールが止まらず、見たい箇所を通り過ぎる
僕ならまず、CTAを一つにするところから始めます。
次に、見出しとボタンの距離を少しだけ離します。
これだけでも、画面の呼吸は変わります。
余白はサボりではなく、ユーザーへの思いやり
EC時代、僕は足し算でがんばっていました。
でも、そのがんばりは、ユーザーに「整理」を押しつけていただけでした。
いま僕が思うのは、シンプルです。
余白がないWebデザインは、ユーザーにとってストレスでしかない。
余白は飾りではなく、ユーザーの呼吸を守るための設計です。
完璧に整えなくてもいい。
むしろ、6割でいったん出して、あとから直す。
そのくらいの距離感が、作る側にも、見る側にもやさしいことがあります。
もしあなたが「自分のFV、なんか息苦しいな」と感じたら、
それはセンスがないからじゃないです。
情報ががんばりすぎているだけです。
今日の15分で、ひとつだけ削ってみてください。
画面の呼吸が変わったら、それはあなたの勝ちです。
そしてたぶん、見るユーザーも少し楽になります。
詰め込みすぎていた私にも出来たので、
この記事を読んだあなたなら、もっと簡単にできるはずです。
一緒に頑張りましょう。
今日のまとめ一行
余白は『空き』ではなく、情報を削って区切ることでユーザーの判断コストとストレスを減らすための設計です。
今日できる一歩（15分）
自分のサイトのFVをスマホで開いて、余白ストレス診断5項目のうち「これは効きそう」と思うものを1つだけ選ぶ。
その1項目だけを直して、ビフォー／アフターのスクショをアトリログとして残す。
次に読む一記事
動かすためではなく、心を動かすために。Webデザインに必要な「間」の感覚
「心を動かすサイト」について書いてみました。
ブログ案内
のりてらブログでは、「作る」「学ぶ」「楽しむ」をテーマに、Webづくりや暮らしの中の小さな実験をログとして残しています。
今回の余白の話も、アトリログを通して少しずつ検証していくつもりです。
気になった方は、ほかの記事もゆっくり覗いてもらえたらうれしいです。
コメント