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/f36a153f-9813-f96a-e7dc-237dadb083a6.jpeg" width="700">

</details>

# コンテインメント

今回は、ページ上に要素を配置する際に留意すべきもう一つのこと、「コンテインメント」について紹介します。

コンテインメントは、 ***<font color="MediumVioletRed">『デザインをきちんと整理しておくために視覚的な障壁』</font>*** を使用します。線や色のような障壁は、コンテンツをデザインの特定のセクションに限定するのに役立ちます。

コンテントには、4つの方法があります。

- **仕切り**
- **ボーダー**
- **塗り**
- **シャドウ**

## 1.仕切り(Dividers)

仕切りとは、セクションを区切る線のことです。シンプルで効果的なツールで、一緒にならないコンテンツをすばやく分割することができます。犬の散歩アプリでは、利用可能な各犬の散歩の間にグレーの仕切りを使用していることに気づきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/0add7db5-0831-2c97-730b-b4351d32dd9e.png" width="600">


## 2.ボーダー(Borders)

同様に、ボーダーはページ内のセクションを分割するために線を使います。ボーダーは連続した線であり、しばしば正方形や長方形のような形を形成する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/504b35cd-2a80-3c3a-356a-21227f8f9bd5.png" width="600">

## 3.塗りつぶし（Fill)

塗りつぶしは、ちょうど色がオブジェクトを塗りつぶすと思うように、境界や図形に色を割り当てます。これによってコンテンツが際立ち、モックアップの中で新たな焦点となります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/8776c9b5-98d5-c7d9-5c9f-b1db007456a9.png" width="600">

## 4.シャドウ(Shadow)

デザインに影を加えて、立体感を出すことができます。多くの場合、デザイナーはボーダーや塗りつぶしとの組み合わせで影を使用します。影は、要素をさらに分割するのに役立ちます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/b10811f7-743a-b330-c095-686588de4aa4.png" width="600">


# Figmaでコンテインメントを作成する

#### 仕切り

Figmaで仕切りを追加するのはとても簡単ですが、仕切りを配置する場所を決定するために、モックアップのセクションがお互いにどのように関連しているかを知る必要があります。

1. Identify sections of content in your mockup that need to be separate from one another.
2. In the toolbar at the top left of the screen, select the **Rectangle** tool, which is represented by an icon that looks like a square.
3. Select **Line** from the dropdown menu, as shown in the image below.
4. Choose the area of your mockup where you’d like to draw the divider. Click and drag your mouse to pull a straight line across the Frame.
5. Click on the new line that was added to your mockup to select it. In the Design panel on the right side of the screen, go to the **Stroke** section, where you can control the look of the line you created. Select a color for the line and the line size, as shown in the image below.

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/4718c3fc-5b43-4dec-7c8f-9def683cd340.png" width="６００">


#### ボーダー

1. Identify sections of content in your mockup that need to be separate from one another.
2. In the toolbar at the top left of the screen, select the **Rectangle** tool, which is represented by an icon that looks like a square.
3. Select **Line** from the dropdown menu, as shown in the image below.
4. Choose the area of your mockup where you’d like to draw the divider. Click and drag your mouse to pull a straight line across the Frame.
5. Click on the new line that was added to your mockup to select it. In the Design panel on the right side of the screen, go to the **Stroke** section, where you can control the look of the line you created. Select a color for the line and the line size, as shown in the image below.


#### 塗りつぶし

1. Click to select a Layer in your design that you want to add fill to.
2. In the Design panel on the right side of the screen, go to the **Fill** section. Click the **plus (+)** icon to add a fill to the layer.
3. Figma will add a default **solid** fill with a hex value of C4C4C4. Click on the small colored rectangle, or fill swatch, to open the color picker. You can use the color picker to select any color to fill your shape.

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/03ad2f84-65c5-6b5a-495a-19afb4760160.png" width="５00">

#### シャドウ

ドロップシャドウとインナーシャドウの2種類があります。

- ***ドロップシャドウ:*** 要素から直接出ていて、どの方向へも向かうことができます。ドロップシャドウは、ボタンがページから飛び出しているように見せるのに最適です。
- ***インナーシャドウ:*** 要素の内側へ向かって伸びる影です。インナーシャドウは、ボタンが押されていることを示すのに最適な方法です。


1. Click to select a **Layer** in your design that you want to add a shadow to.
2. In the Design panel on the right side of the screen, go to the **Effects** section. The drop shadow effect is applied by default, as shown in the image below.
3. Adjust the drop shadow using the **Effect settings** icon, which looks like a sun. Feel free to play around with a few different shadow options in order to find one that you want to use in your mockups!

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/49cc077c-0ad3-4013-7aa7-f534cbc97f07.png" width="５00">

# サンプル

#### 仕切り
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/7e414810-0cb2-1351-03e5-b26ff9cd717d.png" width="６００">

#### ボーダー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/b9f9f229-f2cd-6497-582e-9a7fc2cccdd9.png" width="６００">

#### 塗りつぶし
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/0ecd3874-4bdf-5f0a-6e8a-2e3ed07ceb8e.png" width="６００">

#### シャドウ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/34922ee0-1747-7b53-4eaa-bd55d84de266.png" width="６００">