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/ba6b89bb-a53c-8880-c230-242ebce8c590.jpeg" width="700">

</details>

# モックアップとは

[前回、ユーザビリティ・スタディの参加者からのフィードバックに基づいて、ローファイ・プロトタイプを修正しました。][modify]

[modify]: https://qiita.com/mapami/items/58a876b59da8efc8dcc9

UXの忠実度（フィデリティ）とは、デザインが最終製品の外観と感触にどれだけ近いかを意味します。
- デザインが低忠実度（ローファイ・フィデリティ）である場合、それは複雑さの度合いが低く、洗練されていないことを意味します。UXデザイナーがローファイを使うのは、アイデアを素早く出して、探求の余地を残しておきたいときです。
- デザインが高忠実度（ハイフェイ・フィデリティ）である場合、それは最終製品の外観と感触に密接に一致し、全体としてより洗練されていることを意味します。UXデザイナーは、実際の製品のように見えるデザインをテストし、ユーザーからより具体的なフィードバックを得たいときに、ハイファイを使用します。

今回から、ハイファイ・デザインに焦点を当てます。

では、ハイファイの一種であるモックアップに飛び込んでみましょう。モックアップは、最終製品の表現として使用される、静的で忠実度の高いデザインです。

***<font color="MediumVioletRed">『モックアップは、製品がどのような外観になるかを視覚的に示すもの』</font>***

# モックアップの紹介

それでは、実際のエントリーレベルのUXデザイナーが作成したモックアップの例をご覧ください。

#### サンプル1 by Googleデザイナー:Dane
このモックアップが、これまで作ったワイヤーフレームや低再現性のプロトタイプと比較して、どのように違って見えるかに注目してください。実際の写真、色の使い方、影の使い方、さまざまなフォント、スタイライズされたボタンがあります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/d41f7efe-b19d-fed2-c730-dccdbabc8c1b.png" width="700">

#### サンプル2 by Googleデザイナー:Lisa
カラーグラデーション、異なるテキストサイズ、アイコン、そして地図まで、モックアップの使い方に注目です。このモックアップを見れば、このプロダクトが実現したらどんなものになるのか、実感できるはずです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/800814fa-52f5-9e1e-5614-9501d405f438.png" width="700">

# モックアップの留意点

モックアップをデザインするとき、心に留めておくべきことがいくつかあります。

- タイポグラフィー
- カラー
- アイコノグラフィー

など、デザインの各画面で使いたいビジュアルエレメントを考えておくことです。モックアップには、デザインに登場する実際の単語、画像、アイコンが入っています。

さらに、
- グリッド
- コンテント
- スペース

など、画面上の要素の配置方法を考慮するようにします。画面上に要素を配置する方法は、デザインを美的に美しくし、ユーザーが製品を操作しやすくし、デザインをよりアクセスしやすくします。

# Figamでモックアップを作成するための基礎

Figma で最初のモックアップを作成する準備はほぼ整いました。まずは、モックアップを作成するための基本的な土台となるスキルをいくつか探ってみましょう。

### 1.Pageを作成する

1. Log in to Figma.
2. Create a new **File** by clicking the **+** icon in the upper right corner.
3. On the left, click **Page 1**. This lists all of the pages currently in your **File**.
4. Click the **+** icon to add a new **Page** to your File, as shown in the image below.
5. When you create a new **Page**, you’ll immediately be able to rename it. Or, you can rename a page at any time by double-clicking the title of the **Page**.

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/a823d8c7-a0d0-fe31-b16d-58382743cc2d.png" width="400">

### 2.フレームを作成する

キャンバスは、フレームを作成する場所です。キャンバスはあなたがデザインする額縁のようなものだと考えてください。

フレームを作成するには。フレームツールを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/a746fcb1-8f25-b59f-5605-61e499181cd5.png" width="500">

Frameのサイズを選ぶには、いくつかの方法があります。

1. Click inside the **Canvas** to create a default **Frame**. The dimensions for default frames are 100x100 pixels.
2. Click and drag in the **Canvas** to create a **Frame** with the dimensions you prefer. When you click and drag, the width and height will automatically update based on how much you drag. If you want to choose a specific width and height, you can do this in the **Frame** section in the **Design** panel on the right side of the screen.
3. Select a predetermined size for a Frame, like a specific phone model or tablet, in the **Design** panel on the right side of the screen. As shown in the image below, there is a list of different containers or **Frames** for various devices or formats. Simply select a size to add the **Frame** to your **Canvas**.

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/41820150-e8cf-71de-e3d8-bf7381ed39a4.png" width="500">

UXデザイナーとしての仕事では、Figmaやそれに類するデザインツールを使用することになります。Figmaとその機能に慣れれば慣れるほど、どのツールでも独自のデジタルモックアップを素早く作成できるようになります。