みなさんはじめまして。
jinjerでプロダクトデザイナーをしている野口です。
タイトルにもある通り、前職ではWeb広告代理店で5年間ウェブデザイナーをしていました。
皆さんが日常的に目にする「あの広告」、YouTubeのスキップしたくなるバナーや、ニュースサイトの横に出てくるやつ──、あれをたくさん作っていました笑。
今回は、コテコテな広告を5年間作り続けていた私がプロダクトデザイナーになって
最初に直面した課題である「余白」について書いてみようと思います！
「余白、調整してくれる？」
この言葉、プロダクトデザインに関わり始めたとき、
レビューで頻繁にご指摘いただいたものです。
「え、そんなに変じゃないと思うけど･･･」と思いつつも、直してみたら
「確かに･･･こっちの方が見やすいな」とそんなことを繰り返して
「･･･私の感覚ズレているんだ😨」と焦りを感じました。
左：レビュー1回目、右：レビュー2回目です。
薄い赤が入っているところはdesignsystemで定められている箇所で、それ以外の部分をデザイナーが都度調整します。2回目のレビューまでにいろいろ修正したので、余白以外にも違うところがありますが、情報同士の関係性や可読性・操作性の確保、窮屈に感じないかなどを考慮して調整しました。
ほんの数ピクセルの差ですがこれが使いやすさ、見やすさに通じてきます。
「余白に正解はない」だからこそ、感覚が大事
デザインにおいて「余白」は、単なるスペースではなく情報の伝わり方や印象を左右する大切な要素です。でも、○○px空ければ正解という決まりはなく、「この余白は気持ちいい」「これだとちょっと息苦しいな」など、感覚的な心地よさを頼りに調整されることが多いと思います。
その感覚は、情報の優先順位や文脈によっても変わるし、
だからこそ、数値よりも「見てどう感じるか」が、超重要だと思っています。
広告出身ならでは？デザインの“癖”
「余白の感覚ズレているってデザイナーとして結構致命的だよな･･･」
「私、センスない？」とぐるぐる考えていたとき──、
「広告デザイン出身者は、余白狭いデザインになりがち」とマネージャーが教えてくれました。
広告はユーザーにクリックさせることが1つのゴール「一瞬で目を引いて、行動を起こさせる」が最重要。限られたスペースに、キャッチコピー・商品画像・CTAなど多くの要素を詰め込みデザインします。
しかし、プロダクトUIは「ユーザーが迷わず使えるか」が重要です。
広告のように情報が詰め込まれたデザインだと使いにくいですよね。
目的が違えば、当然デザインのセオリーも変わる！
この言葉がきっかけで、
「私の感覚は広告デザイン側に傾いているけど、ズレているわけではないのでは？」
「感覚が傾いているなら直せば良い！」と、
ちょっと前向きになれました！笑
余白の感覚を「プロダクトデザイナー仕様」にアップデートするためにやったこと
広告出身の自分にとって、プロダクトデザインの「余白」の感覚は最初こそギャップがありましたが、
次のようなアプローチで少しずつ感覚を更新していきました。
1. 綺麗だと思うUIの余白を測る
デザインチームのメンバーが作成してくれたデザインや、「いいな」と思ったプロダクトのUIの余白を実際に測ってみるようにしました。左右や上下の間隔、カード内のパディングなどを測って数値で見ていくうちに自分の“感覚の基準”が整ってきました。
2. デザインレビューで言語化してもらう
レビューで「余白が詰まりすぎかも」とご指摘いただいたときは、どこがどう違和感なのかを丁寧に言語化してもらいました。目的に基づいた余白の使い方を説明してもらうことですごく納得できて、徐々に余白に関するフィードバックも減らすことができました。
3. 一度手を止め、時間をおいて見直す
デザインした画面をずっと見ていると、
「あれ、なんか微妙かも？」となることがあるのですが、そんなときは少し時間をおくことで、客観的な視点で判断しやすくなります。
まとめ
最後まで読んでいただきありがとうございました！
異なるジャンルに飛び込んで「自分ダメかも･･･」と思った人がいたら、それは新しい成長のきっかけですよ！と伝えたいです😌
私もこれからプロダクトデザイナーとしてバクソクで成長していくので、ジンジャープロダクトの進化を楽しみにしていただけたらと思います。
Discussion