Google UXデザイン：Figmaでローファイ・プロトタイプを作成する

# はじめに

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

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

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/1ed400d1-bbdf-302d-70be-3175620c3912.png" width="800">

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/f5283f3c-b018-d798-9d01-df3b7904e6a0.jpeg" width="500">

</details>

# テーマ

以下は、[以前紹介した犬の散歩アプリのためにFigmaで作成したワイヤーフレームの例][wireframe]です。今回、Figmaでローファイ（低抽象度）プロトタイプを作成します。

[wireframe]: https://qiita.com/masami-atwvn/items/1faf1d45a297c9b919ad

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/50ad65cf-3faa-d60b-a4c2-e271c22eac69.png" width="250">

# 1.新規ファイル

Figmaを起動し、新規プロジェクトを立ち上げます。

画面左上のハンバーガーアイコンをクリックし、「ファイル」→「新規作成」をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/411ea1cd-f6db-01f8-f97c-ceebd1ff7b28.png" width="500">

# 2.フレーム

画面上部のツールバーから「フレーム」ツールを選択し、デザインするデバイスに合ったフレームを選びます。正しいフレームが自動的に画面に表示されます。

また、フレームツールを選択し、カーソルを画面上でドラッグして希望のサイズにすることで、カスタムサイズのフレームを作成することも可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/12e0b7f4-8d08-99ce-93f5-8fc6c2416713.png" width="６00">


# ３．デザイン要素

画面上部のツールバーにある「シェイプツール」を使って、下図のようにデザインの要素を作成します。

ワイヤーフレームは通常、正方形、長方形、円、線などの基本的な図形を使用して描かれることを覚えておいてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/d80d5725-00c9-c6ac-5ba9-5eb87d294193.png" width="５００">

# 4.テキスト

テキストツールを使って、ワイヤーフレームにラベル、説明、ヘッダーを追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/48eed88f-84f5-4559-db0e-ae09c03c245b.png" width="５００">

このプロセスをアプリの各画面について繰り返します。

プロトタイピングをスムーズに行うために、ワイヤーフレームを論理的な順序で並べることを忘れないでください。

# ５．フレームのリネーム

画面名をクリックして選択します。レイヤーパネルで選択した枠の名前をダブルクリックして、下の画像のように名前を変更します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/ee4a6e9d-1b4f-3778-e807-87acf2442ca8.png" width="５００">

この作業を繰り返し、"Home "や "Settings "など、各ワイヤーフレームスクリーンに明確なラベルを付けます。 

# 6.プロトタイプタブ

画面右上のメニューに「デザイン」と「プロトタイプ」のタブがあります。これらのタブでは、デザインの編集とインタラクティブなプロトタイプ要素の作業を切り替えて行うことができます。

ローファイプロトタイプを作成するには、「プロトタイプ」タブに切り替えます。

# 7. ノード間の接続

ワイヤーフレーム内の任意の要素にカーソルを合わせると、下の画像のように真ん中にプラス記号のついた小さな円が表示されます。これがノードと呼ばれるものです。

ノードとは、ユーザーがある画面から次の画面へどのように移動したいかに基づいて、画面をつなげることができることを意味します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/60dd6ca3-fec1-a55f-e2b6-d1d663661060.png" width="300">

インタラクティブにしたい要素を選び、その上にカーソルを置くと表示されるノードをクリックします。接続矢印が表示されるはずです。カーソルを使って、矢印を接続したい画面までドラッグし、クリックを離します。

以下は、ユーザーは「schedule」ボタンをクリックした後、犬の散歩に来る日時を予約するための新しい画面に移動します。青い矢印は、アプリの2つの画面がどのようにつながっているかを表しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/8b29d39e-f780-2317-8cf0-65810dc462d9.png" width="500">

# 8. 全ての要素を接続

実際のユーザーがアプリを操作するように、各ステップ（ノード）が論理的に次のステップに流れていることに注目してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/bd728f5b-d160-ef76-5d33-6472c7e80bd7.png" width="600">

すべてのワイヤーフレームを完全に機能するプロトタイプにつなげるには、各インタラクティブ要素を順番に確認し、その要素が何につながる必要があるのかを自問します。これは、デザインの監査のようなものだと考えてください。