Google UXデザイン：レイアウト（ホワイトスペース）

Last updated at 2023-03-04Posted at 2022-12-14

はじめに

わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

これまでの振り返り

スペースという言葉は何を意味するのでしょうか。さて、スペースは私たちがよく知っているものです。私たちは携帯電話のホームスクリーンを見るとき、それぞれのアプリのアイコンの間にスペースがあります。

UXデザインでは、これをホワイトスペース（もしくはネガティブスペース）と呼びます。ホワイトスペースとは、デザインにおける要素と要素の間の隙間のことです。

では、なぜホワイトスペースが重要なのでしょうか？

ホワイトスペースを使うことで　デザインの中の焦点となる部分を強調する ことができます。これは、ユーザーが取るべきアクションに焦点を当てるのに役立ちます。

例えば、Google検索のホームページを考えてみましょう。検索バーとGoogleのロゴは、白いスペースで囲まれています。空白を使うことで、ユーザーが取るべき行動「検索」が明確に伝わります。

ホワイトスペースを使うことで　アイテムをグループ化する とができることです。

この近接のグラフィックを見てみよう。

ホワイトスペースを使うことで　読みやすさに役立ちます 。要素間に余白があると、各要素に集中しやすくなります。

この例を見てください。

左: 大きなフォントと大きな画像を使っているため、余白が少なく、互いに近くに集まっています。このウェブサイトは、私たちの目が要素の間をジャンプしているため、かなり読みにくくなっています。
右:　内容は同じですが、空白部分が多くなっています。このデザインでは、フォントが小さく、画像も小さくなっています。これにより、視線は各要素を見ることができ、ウェブサイトを読みやすくしています。

ホワイトスペースを使うことで　ユーザーに視覚的な休息を与えます 。

ホワイトスペースは、ユーザーが圧倒されたり、気が散ってしまったりするのを防ぐのに役立ちます。つまり、ユーザーがコンテンツをスキャンする際に視覚的な休憩を与えることができます。

空白のスペースについて注意することがあります。空白が少なすぎると、エラーが発生する可能性が高くなります。

例えば、ボタンとボタンの間に十分なスペースがないと、間違ってボタンを押してしまうユーザーもいるかもしれません。

モックアップには、さまざまな方法でホワイトスペースを作ることができます。

行間（Line spacing） :2つの文章の間にある縦のスペースのことです。本を読むとき、段落の文と文の間にマイナスのスペースがあると、文字が重ならず、内容を読みやすくなります。デザインも同じです。
パディング（Padding） :コンテンツの周囲や、境界線とデザイン要素の間にある負のスペースのことです。パディングは、ユーザーがデザインの別の要素に目を向ける前に、オブジェクトが存在するためのスペースを提供します。上図では、パディングがデザインに対称性をもたらし、要素が密集するのを防いでいます。
マージン（Margin） :デザインの枠の外側にあるスペースのことです。余白は、デザインの行間に色付けをするためのものだと考えればよいでしょう。上図では、デザインの端が余白に囲まれているのがわかります。

UXデザイナーとして最初の仕事に就いたとき、クライアントや部門を越えたチームメイトにホワイトスペースの重要性について教育するのを手伝わなければならないかもしれません。

企業は、コンテンツが多ければ多いほど良いと考えていることが多いのです。デザインに余白を使うことで製品が使いやすくなり、うまくいけばより良いビジネス結果につながることを、そうした関係者に理解してもらうことが重要です。

例えば、サインアップボタンが余白を利用して明確に強調されていれば、より多くのユーザーがそれをクリックする可能性が高くなり、ビジネスにとって勝利となるのです。