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

# はじめに

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

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

[google]: https://qiita.com/mapami/items/7a0d0a3d4661c50f8bec

https://www.coursera.org/professional-certificates/google-ux-design

<details><summary>これまでの振り返り</summary>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/c6fb45db-002e-1299-75e2-c0c2579f9f2b.jpeg" width="700">

</details>

# ホワイトスペースとは

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/b62ddce0-b069-c7a8-bc27-0874cc82651a.png" width="250">

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

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

### 理由①

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/d9dd737c-222a-a60c-2dcc-27f429b266c6.png" width="600">

### 理由②

ホワイトスペースを使うことで　***<font color="MediumVioletRed">アイテムをグループ化する</font>*** とができることです。

[principle]: https://qiita.com/masami-atwvn/items/2da38d2446280bb7393c

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/387ca867-33a1-13af-a7a8-8f6de5afaf0e.png" width="700">

- 左: ボタンやテキストなどの要素がページ上で互いに近くに配置されている場合、ユーザーは自然にこれらの要素をグループ化し、関連性があることを期待します。
- 右: 要素が互いに離れて配置されている場合、ユーザーはそれらが関連しているとは考えません。近接は[ゲシュタルト原理][principle]の一つなのです。

### 理由③

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

この例を見てください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/e2a4e338-2949-9537-fd7d-b1b9df384456.png" width="７０0">

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

### 理由④

ホワイトスペースを使うことで　***<font color="MediumVioletRed">ユーザーに視覚的な休息を与えます</font>*** 。

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

### 理由⑤

空白のスペースについて注意することがあります。***<font color="MediumVioletRed">空白が少なすぎると、エラーが発生する可能性が高くなります</font>***。

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/1e839632-909a-cdfd-40e8-9b39041df989.png" width="250">

# モックアップでホワイトスペースを作る

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/c0d6586f-99c0-6e80-4c01-be2c47fd7792.png" width="700">

- ***行間（Line spacing）*** :2つの文章の間にある縦のスペースのことです。本を読むとき、段落の文と文の間にマイナスのスペースがあると、文字が重ならず、内容を読みやすくなります。デザインも同じです。

- ***パディング（Padding）*** :コンテンツの周囲や、境界線とデザイン要素の間にある負のスペースのことです。パディングは、ユーザーがデザインの別の要素に目を向ける前に、オブジェクトが存在するためのスペースを提供します。上図では、パディングがデザインに対称性をもたらし、要素が密集するのを防いでいます。

- ***マージン（Margin）*** :デザインの枠の外側にあるスペースのことです。余白は、デザインの行間に色付けをするためのものだと考えればよいでしょう。上図では、デザインの端が余白に囲まれているのがわかります。

https://www.youtube.com/watch?v=A0Ev_4zto4Y&t=174s

# ホワイトスペースの重要性を伝える

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

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/cd74b594-7b22-3b76-f578-7ed8bd4ad3bb.png" width="250">

# サンプル


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/542557da-07da-4838-ce78-c426a509e21e.png" width="700">